/* /public_html/assets/css/courses/courses-panel.css */
/*
 * Panel Cours — fichier de production consolidé.
 * V43.3 : renommage des anciens marqueurs internes du Lab vers courses-panel-*.
 * Base de production du panel Cours modernisé.
 */

/* --------------------------------------------------------------------------
   Base historique du panel Cours
   Ancien fichier : assets/css/courses/courses-panel-v42.css
   -------------------------------------------------------------------------- */

/* /public_html/assets/css/courses/courses-panel-v42.css */
/* V42.0.2 — modernisation progressive du panel Cours */

.courses-panel-content {
  display: flex;
  flex-direction: column;
  gap: clamp(0.85rem, 2vw, 1.15rem);
}

.courses-panel-content > [data-courses-panel-hero],
.course-view-panel-body > [data-courses-view-hero] {
  width: 100%;
}

.courses-hero--subliminal.ui-panel-hero {
  min-height: clamp(148px, 16vw, 214px);
  margin: 0 0 clamp(0.35rem, 1vw, 0.65rem);
  padding: clamp(1rem, 2.4vw, 1.7rem);
  border-radius: clamp(1.35rem, 2.6vw, 2rem);
  opacity: 0.96;
  background:
    radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--theme-primary, #38bdf8) 18%, transparent), transparent 34%),
    radial-gradient(circle at 92% 14%, color-mix(in srgb, var(--color-accent, #ef4444) 12%, transparent), transparent 32%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--color-surface, #ffffff) 90%, transparent),
      color-mix(in srgb, var(--color-surface-soft, #f8fafc) 82%, transparent));
  box-shadow:
    0 18px 44px color-mix(in srgb, #000 10%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent);
}

.courses-hero--subliminal .ui-panel-hero__title {
  font-size: clamp(2.15rem, 5vw, 4.1rem);
  letter-spacing: -0.07em;
}

.courses-hero--subliminal .ui-panel-hero__description {
  margin-top: 0.7rem;
  max-width: 660px;
  font-size: clamp(0.9rem, 1.2vw, 1rem);
}

.courses-hero--subliminal .ui-panel-hero__stat {
  min-height: 70px;
  border-radius: 1.25rem;
  background: color-mix(in srgb, var(--color-surface, #fff) 72%, transparent);
}

.courses-searchbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  width: min(100%, 720px);
  margin: 0 auto clamp(0.35rem, 1vw, 0.7rem);
  padding: 0.42rem 0.48rem 0.42rem 0.92rem;
  border: 1px solid color-mix(in srgb, var(--color-border-subtle, #94a3b8) 70%, transparent);
  border-radius: 999px;
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, #fff 28%, transparent), transparent 52%),
    color-mix(in srgb, var(--color-surface, #fff) 78%, transparent);
  box-shadow:
    0 14px 36px color-mix(in srgb, #000 9%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
}

.courses-searchbar:focus-within {
  border-color: color-mix(in srgb, var(--theme-primary, #38bdf8) 58%, transparent);
  box-shadow:
    0 16px 40px color-mix(in srgb, var(--theme-primary, #38bdf8) 14%, transparent),
    0 0 0 3px color-mix(in srgb, var(--theme-primary, #38bdf8) 16%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 24%, transparent);
}

.courses-searchbar__label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  color: color-mix(in srgb, var(--theme-text-muted, var(--color-text-muted, #64748b)) 88%, transparent);
  font-size: 0.82rem;
  font-weight: 850;
  white-space: nowrap;
}

.courses-searchbar__input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--theme-text, var(--color-text, #0f172a));
  font: inherit;
  font-weight: 750;
}

.courses-searchbar__input::placeholder {
  color: color-mix(in srgb, var(--theme-text-muted, var(--color-text-muted, #64748b)) 72%, transparent);
}

.courses-searchbar__clear {
  width: 2.15rem;
  height: 2.15rem;
  border: 1px solid color-mix(in srgb, var(--color-border-subtle, #94a3b8) 55%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-surface-soft, #f8fafc) 82%, transparent);
  color: var(--theme-text-muted, var(--color-text-muted, #64748b));
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.courses-searchbar__clear[hidden] {
  display: none !important;
}

.courses-empty-state {
  display: grid;
  place-items: center;
  gap: 0.45rem;
  min-height: 220px;
  padding: clamp(1.2rem, 4vw, 2rem);
  border: 1px dashed color-mix(in srgb, var(--color-border-subtle, #94a3b8) 72%, transparent);
  border-radius: 1.5rem;
  background: color-mix(in srgb, var(--color-surface, #fff) 70%, transparent);
  color: var(--theme-text-muted, var(--color-text-muted, #64748b));
  text-align: center;
}

.courses-empty-state i {
  font-size: 1.6rem;
  color: var(--theme-primary, #38bdf8);
}

.courses-empty-state strong {
  color: var(--theme-text, var(--color-text, #0f172a));
}

.courses-empty-state p {
  max-width: 32rem;
  margin: 0;
}

.course-card.course-card--modern {
  display: flex;
  flex-direction: column;
  min-height: 178px;
  padding: clamp(1rem, 1.8vw, 1.25rem);
  border-radius: 1.55rem;
  border-color: color-mix(in srgb, var(--course-style-color, var(--theme-primary, #38bdf8)) 42%, transparent);
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--course-style-color, #38bdf8) 12%, transparent), transparent 36%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--color-surface, #fff) 88%, transparent),
      color-mix(in srgb, var(--color-surface-soft, #f8fafc) 80%, transparent));
  box-shadow:
    0 16px 38px color-mix(in srgb, #000 12%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 18%, transparent);
}

.course-card.course-card--modern::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--course-style-color, #38bdf8) 90%, #fff 10%),
    color-mix(in srgb, var(--course-style-color, #38bdf8) 58%, transparent));
  opacity: 0.95;
}

.course-card.course-card--modern::after {
  content: '';
  position: absolute;
  inset: auto -14% -35% auto;
  width: 44%;
  aspect-ratio: 1;
  border-radius: 999px;
  background: color-mix(in srgb, var(--course-style-color, #38bdf8) 16%, transparent);
  filter: blur(30px);
  pointer-events: none;
}

.course-card.course-card--modern:hover,
.course-card.course-card--modern:focus-visible {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--course-style-color, #38bdf8) 66%, transparent);
  box-shadow:
    0 22px 46px color-mix(in srgb, var(--course-style-color, #38bdf8) 14%, transparent),
    0 14px 34px color-mix(in srgb, #000 15%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent);
}

.course-card--modern .course-card-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.course-card-style-orb {
  width: 2.35rem;
  height: 2.35rem;
  flex: 0 0 2.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.95rem;
  border: 1px solid color-mix(in srgb, var(--course-style-color, #38bdf8) 48%, transparent);
  background:
    radial-gradient(circle at 35% 25%, color-mix(in srgb, #fff 34%, transparent), transparent 46%),
    color-mix(in srgb, var(--course-style-color, #38bdf8) 20%, transparent);
  color: color-mix(in srgb, var(--course-style-color, #38bdf8) 72%, var(--theme-text, #0f172a) 28%);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--course-style-color, #38bdf8) 18%, transparent);
}

.course-card--modern .course-title-line {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.65rem;
  width: 100%;
  min-width: 0;
}

.course-card--modern .course-style-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--theme-text, var(--color-text, #0f172a));
  font-size: 1.02rem;
  font-weight: 950;
}

.course-card--modern .course-style-mini-icon {
  display: none;
}

.course-card--modern .course-level-badge {
  flex: 0 0 auto;
  border-color: color-mix(in srgb, var(--course-style-color, #38bdf8) 46%, transparent);
  background: color-mix(in srgb, var(--course-style-color, #38bdf8) 18%, var(--color-surface, #fff) 82%);
}

.course-card--modern .course-card-body,
.course-card--modern .course-card-footer {
  position: relative;
  z-index: 1;
}

.course-card--modern .course-card-body {
  gap: 0.52rem;
}

.course-card--modern .course-meta-icon {
  color: color-mix(in srgb, var(--course-style-color, #38bdf8) 62%, var(--theme-text-muted, #64748b) 38%);
}

.course-card--modern .course-card-footer {
  margin-top: auto;
  padding-top: 0.95rem;
}

.course-card--modern .course-students-badge,
.course-card--modern .course-gala-badge {
  min-height: 1.7rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-weight: 900;
}

.course-student-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 0.72rem;
}

.course-student-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.72rem;
  min-height: 72px;
  padding: 0.72rem;
  border: 1px solid color-mix(in srgb, var(--color-border-subtle, #94a3b8) 70%, transparent);
  border-radius: 1.25rem;
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--theme-primary, #38bdf8) 9%, transparent), transparent 48%),
    color-mix(in srgb, var(--color-surface, #fff) 78%, transparent);
  color: inherit;
  text-align: left;
  box-shadow: 0 10px 24px color-mix(in srgb, #000 8%, transparent);
  cursor: pointer;
}

.course-student-card:hover,
.course-student-card:focus-visible {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--theme-primary, #38bdf8) 44%, transparent);
  box-shadow: 0 16px 30px color-mix(in srgb, var(--theme-primary, #38bdf8) 10%, transparent);
}

.course-student-card__avatar {
  width: 2.65rem;
  height: 2.65rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  background: color-mix(in srgb, var(--theme-primary, #38bdf8) 20%, transparent);
  color: color-mix(in srgb, var(--theme-primary, #38bdf8) 74%, var(--theme-text, #0f172a) 26%);
  font-weight: 950;
}

.course-student-card__content {
  min-width: 0;
  display: grid;
  gap: 0.18rem;
}

.course-student-card__content strong,
.course-student-card__content span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.course-student-card__content strong {
  color: var(--theme-text, var(--color-text, #0f172a));
  font-size: 0.95rem;
}

.course-student-card__content span {
  color: var(--theme-text-muted, var(--color-text-muted, #64748b));
  font-size: 0.8rem;
  font-weight: 750;
}

.course-student-card__remove {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.2rem;
  padding: 0 0.72rem;
  border: 1px solid color-mix(in srgb, #ef4444 44%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, #ef4444 8%, transparent);
  color: color-mix(in srgb, #ef4444 82%, var(--theme-text, #0f172a) 18%);
  font-weight: 900;
}

.course-student-card--add {
  width: 100%;
  border-style: dashed;
  border-color: color-mix(in srgb, var(--theme-primary, #38bdf8) 50%, transparent);
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--theme-primary, #38bdf8) 16%, transparent), transparent 48%),
    color-mix(in srgb, var(--theme-primary, #38bdf8) 7%, var(--color-surface, #fff) 93%);
}

.course-choreo-gala-placements {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.15rem;
}

.course-choreo-gala-placement {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  max-width: 100%;
  padding: 0.22rem 0.56rem;
  border: 1px solid color-mix(in srgb, var(--theme-primary, #38bdf8) 38%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--theme-primary, #38bdf8) 10%, transparent);
  color: color-mix(in srgb, var(--theme-primary, #38bdf8) 58%, var(--theme-text, #0f172a) 42%);
  font-size: 0.78rem;
  font-weight: 850;
}

.course-choreo-gala-placement--empty {
  border-color: color-mix(in srgb, var(--color-border-subtle, #94a3b8) 65%, transparent);
  background: color-mix(in srgb, var(--color-surface-soft, #f8fafc) 70%, transparent);
  color: var(--theme-text-muted, var(--color-text-muted, #64748b));
}

.course-form-panel-body,
.course-choreography-form-panel-body {
  --course-form-max-width: min(100%, 860px);
}

.course-form-panel-body .course-form,
.course-choreography-form-panel-body #course-choreography-form {
  width: var(--course-form-max-width);
  margin-inline: auto;
  display: grid;
  gap: 0.82rem;
  padding: clamp(1rem, 2.2vw, 1.45rem);
  border: 1px solid color-mix(in srgb, var(--color-border-subtle, #94a3b8) 64%, transparent);
  border-radius: 1.55rem;
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--theme-primary, #38bdf8) 10%, transparent), transparent 38%),
    color-mix(in srgb, var(--color-surface, #fff) 74%, transparent);
  box-shadow: 0 16px 42px color-mix(in srgb, #000 9%, transparent);
}

.course-form-panel-body .form-hint,
.course-choreography-form-panel-body .form-hint {
  margin: 0 0 0.15rem;
}

.course-form-panel-body .form-field,
.course-choreography-form-panel-body .form-field {
  gap: 0.34rem;
}

.course-form-panel-body .form-field label,
.course-choreography-form-panel-body .form-field label {
  color: var(--theme-text, var(--color-text, #0f172a));
  font-size: 0.83rem;
  font-weight: 900;
}

.course-form-panel-body .ui-input,
.course-choreography-form-panel-body .ui-input,
.course-form-panel-body .ui-combo__btn,
.course-choreography-form-panel-body .ui-combo__btn {
  min-height: 3rem;
  border-radius: 999px;
  border-color: color-mix(in srgb, var(--color-border-subtle, #94a3b8) 72%, transparent);
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, #fff 18%, transparent), transparent 48%),
    color-mix(in srgb, var(--color-surface-soft, #f8fafc) 76%, transparent);
  font-weight: 800;
}

.course-choreography-form-panel-body textarea.ui-input {
  min-height: 7.5rem;
  border-radius: 1.25rem;
  padding-top: 0.95rem;
}

html[data-theme="dark"] .courses-searchbar,
html[data-theme="dark"] .courses-empty-state,
html[data-theme="dark"] .course-student-card,
html[data-theme="dark"] .course-form-panel-body .course-form,
html[data-theme="dark"] .course-choreography-form-panel-body #course-choreography-form {
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--theme-primary, #38bdf8) 12%, transparent), transparent 44%),
    color-mix(in srgb, #020617 74%, var(--color-surface, #0f172a) 26%);
  border-color: color-mix(in srgb, #64748b 48%, transparent);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255,255,255,0.04);
}

html[data-theme="dark"] .course-card.course-card--modern {
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--course-style-color, #38bdf8) 16%, transparent), transparent 38%),
    linear-gradient(135deg, color-mix(in srgb, #020617 78%, var(--color-surface, #0f172a) 22%), #020617);
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

html[data-theme="dark"] .course-card-style-orb,
html[data-theme="dark"] .course-student-card__avatar {
  color: color-mix(in srgb, var(--course-style-color, var(--theme-primary, #38bdf8)) 58%, #f8fafc 42%);
}

html[data-theme="dark"] .course-form-panel-body .ui-input,
html[data-theme="dark"] .course-choreography-form-panel-body .ui-input,
html[data-theme="dark"] .course-form-panel-body .ui-combo__btn,
html[data-theme="dark"] .course-choreography-form-panel-body .ui-combo__btn {
  background:
    radial-gradient(circle at 0 0, rgba(255,255,255,0.06), transparent 48%),
    color-mix(in srgb, #020617 70%, #111827 30%);
  border-color: color-mix(in srgb, #64748b 62%, transparent);
}

@media (min-width: 1024px) {
  .courses-panel-list .dashboard-layout {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .courses-hero--subliminal.ui-panel-hero {
    grid-template-columns: 1fr;
  }

  .courses-hero--subliminal .ui-panel-hero__stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 767px), (max-width: 980px) and (max-height: 520px) and (orientation: landscape) {
  .courses-searchbar {
    width: calc(100% - 1rem);
    margin-inline: 0.5rem;
  }

  .courses-searchbar__label span {
    display: none;
  }

  .course-card.course-card--modern:hover,
  .course-card.course-card--modern:focus-visible,
  .course-student-card:hover,
  .course-student-card:focus-visible {
    transform: none;
  }

  .course-student-card-grid {
    grid-template-columns: 1fr;
  }

  .course-student-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .course-student-card__remove {
    grid-column: 2;
    justify-self: start;
  }

  .course-form-panel-body,
  .course-choreography-form-panel-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: max(7rem, calc(env(safe-area-inset-bottom, 0px) + 7rem));
  }

  .course-form-panel-body .course-form,
  .course-choreography-form-panel-body #course-choreography-form {
    width: calc(100% - 1rem);
    padding: 0.95rem;
    border-radius: 1.35rem;
  }
}

/* V42.0.2 — affinage panel Cours */
.course-card.course-card--accent.ui-accent-card {
  min-height: 178px;
  display: flex;
  flex-direction: column;
  border-radius: 1.55rem;
}

.course-card.course-card--accent .ui-accent-card__header {
  padding: clamp(1rem, 1.8vw, 1.2rem) clamp(1rem, 1.8vw, 1.2rem) 0 clamp(1.55rem, 2vw, 1.8rem);
}

.course-card.course-card--accent .ui-accent-card__body {
  padding: 0.95rem clamp(1rem, 1.8vw, 1.2rem) 0 clamp(1.55rem, 2vw, 1.8rem);
}

.course-card.course-card--accent .ui-accent-card__footer {
  margin-top: auto;
  padding: 0.95rem clamp(1rem, 1.8vw, 1.2rem) clamp(1rem, 1.8vw, 1.2rem) clamp(1.55rem, 2vw, 1.8rem);
}

.course-card.course-card--accent .course-card-header,
.course-card.course-card--accent .course-card-body,
.course-card.course-card--accent .course-card-footer {
  position: relative;
  z-index: 1;
}

.course-card.course-card--accent .course-card-header {
  display: flex;
  align-items: flex-start;
  gap: 0.78rem;
  margin: 0;
}

.course-card.course-card--accent .course-card-body {
  display: grid;
  gap: 0.54rem;
}

.course-card.course-card--accent .course-title-line {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.72rem;
  width: 100%;
  min-width: 0;
}

.course-card.course-card--accent .course-style-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--theme-text, var(--color-text, #0f172a));
  font-size: 1.02rem;
  font-weight: 950;
}

.course-card.course-card--accent .course-level-badge {
  flex: 0 0 auto;
  border-color: color-mix(in srgb, var(--ui-accent-card-color, #38bdf8) 46%, transparent);
  background: color-mix(in srgb, var(--ui-accent-card-color, #38bdf8) 18%, var(--color-surface, #fff) 82%);
}

.course-card.course-card--accent .course-meta-icon {
  color: color-mix(in srgb, var(--ui-accent-card-color, #38bdf8) 62%, var(--theme-text-muted, #64748b) 38%);
}

.course-card.course-card--accent .course-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.course-card.course-card--accent .course-students-badge,
.course-card.course-card--accent .course-gala-badge {
  min-height: 1.7rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-weight: 900;
}

.course-card.course-card--accent .course-gala-badge {
  background: linear-gradient(135deg, #fff7df, #ffd37b);
  color: #24160a;
  border: 1px solid rgba(255, 211, 123, 0.7);
}

.course-view-panel-body--v42 > [data-courses-view-hero] {
  margin-bottom: clamp(0.85rem, 2vw, 1.2rem);
}

.course-view-panel-body--v42 > [data-courses-view-hero] + .student-courses-admin {
  margin-top: 0;
}

.course-student-card-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 214px), 1fr));
  gap: clamp(0.62rem, 1.2vw, 0.9rem);
  align-items: stretch;
}

.course-student-card.ui-accent-card {
  min-height: 84px;
  padding: 0;
  border-radius: 1.35rem;
  display: block;
  cursor: pointer;
}

.course-student-card.ui-accent-card .ui-accent-card__rail {
  inset: 14px auto 14px 10px;
  width: 3px;
}

.course-student-card.ui-accent-card .ui-accent-card__body {
  min-height: 84px;
  padding: 0.72rem 2.45rem 0.72rem 1.35rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.72rem;
}

.course-student-card__avatar {
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid color-mix(in srgb, var(--ui-accent-card-color, var(--theme-primary, #38bdf8)) 42%, var(--color-border-subtle, transparent));
  background:
    radial-gradient(circle at 30% 22%, color-mix(in srgb, #fff 28%, transparent), transparent 42%),
    color-mix(in srgb, var(--ui-accent-card-color, var(--theme-primary, #38bdf8)) 18%, var(--color-surface, #fff) 82%);
  color: color-mix(in srgb, var(--ui-accent-card-color, var(--theme-primary, #38bdf8)) 72%, var(--theme-text, #0f172a) 28%);
  font-weight: 950;
}

.course-student-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.course-student-card__identity {
  min-width: 0;
  display: grid;
  gap: 0.08rem;
}

.course-student-card__identity strong,
.course-student-card__identity span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.course-student-card__identity strong {
  color: var(--theme-text, var(--color-text, #0f172a));
  font-size: 0.98rem;
  font-weight: 950;
}

.course-student-card__identity span {
  color: var(--theme-text-muted, var(--color-text-muted, #64748b));
  font-size: 0.82rem;
  font-weight: 800;
}

.course-student-card__remove {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  z-index: 3;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid color-mix(in srgb, #ef4444 45%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, #ef4444 10%, var(--color-surface, #fff) 90%);
  color: color-mix(in srgb, #ef4444 82%, var(--theme-text, #0f172a) 18%);
  font-size: 0.95rem;
  box-shadow: 0 10px 22px color-mix(in srgb, #ef4444 10%, transparent);
}

.course-student-card__remove span {
  display: none !important;
}

.course-student-card--add.ui-accent-card {
  width: 100%;
  border-style: dashed;
}

.course-student-card--add.ui-accent-card .ui-accent-card__body {
  padding-right: 1.1rem;
}

.course-student-picker-panel-body {
  display: flex;
  flex-direction: column;
  gap: clamp(0.85rem, 2vw, 1.1rem);
}

.course-student-picker-intro {
  width: min(100%, 860px);
  margin-inline: auto;
  padding: clamp(0.95rem, 2vw, 1.25rem) clamp(1rem, 2.4vw, 1.5rem);
  border: 1px solid color-mix(in srgb, var(--color-border-subtle, #94a3b8) 64%, transparent);
  border-radius: 1.5rem;
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--theme-primary, #38bdf8) 12%, transparent), transparent 42%),
    color-mix(in srgb, var(--color-surface, #fff) 76%, transparent);
  box-shadow: 0 16px 40px color-mix(in srgb, #000 8%, transparent);
}

.course-student-picker-intro__eyebrow {
  display: inline-flex;
  margin-bottom: 0.35rem;
  color: var(--color-accent, #ef4444);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.course-student-picker-intro h2 {
  margin: 0;
  color: var(--theme-text, var(--color-text, #0f172a));
  font-size: clamp(1.45rem, 3.5vw, 2.4rem);
  line-height: 1;
  letter-spacing: -0.045em;
}

.course-student-picker-intro p {
  max-width: 620px;
  margin: 0.55rem 0 0;
  color: var(--theme-text-muted, var(--color-text-muted, #64748b));
  font-weight: 750;
  line-height: 1.45;
}

.course-student-picker-searchbar {
  margin-bottom: 0;
}

.course-student-picker-list .dashboard-layout {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

.course-student-picker-card.ui-accent-card {
  min-height: 92px;
  border-radius: 1.35rem;
}

.course-student-picker-card.ui-accent-card .ui-accent-card__rail {
  inset: 14px auto 14px 10px;
  width: 3px;
}

.course-student-picker-card.ui-accent-card .ui-accent-card__body {
  min-height: 92px;
  padding: 0.82rem 0.95rem 0.82rem 1.35rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.72rem;
}

.course-student-picker-card__avatar {
  width: 2.9rem;
  height: 2.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid color-mix(in srgb, var(--ui-accent-card-color, var(--theme-primary)) 42%, var(--color-border-subtle, transparent));
  background: color-mix(in srgb, var(--ui-accent-card-color, var(--theme-primary)) 18%, var(--color-surface, #fff) 82%);
  color: color-mix(in srgb, var(--ui-accent-card-color, var(--theme-primary)) 72%, var(--theme-text, #0f172a) 28%);
  font-weight: 950;
}

.course-student-picker-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.course-student-picker-card__identity {
  min-width: 0;
  display: grid;
  gap: 0.06rem;
}

.course-student-picker-card__identity strong,
.course-student-picker-card__identity span,
.course-student-picker-card__identity small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.course-student-picker-card__identity strong {
  color: var(--theme-text, var(--color-text, #0f172a));
  font-weight: 950;
}

.course-student-picker-card__identity span,
.course-student-picker-card__identity small {
  color: var(--theme-text-muted, var(--color-text-muted, #64748b));
  font-size: 0.78rem;
  font-weight: 780;
}

.course-student-picker-card__check {
  color: color-mix(in srgb, var(--ui-accent-card-color, var(--theme-primary)) 68%, var(--theme-text-muted, #64748b) 32%);
  font-size: 1.18rem;
}

.course-student-picker-card.is-selected {
  border-color: color-mix(in srgb, var(--ui-accent-card-color, var(--theme-primary)) 72%, transparent);
  box-shadow:
    0 18px 46px color-mix(in srgb, var(--ui-accent-card-color, var(--theme-primary)) 15%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 18%, transparent);
}

.course-student-picker-card.is-selected .course-student-picker-card__check {
  color: var(--color-success, #22c55e);
}

html[data-theme="dark"] .course-student-picker-intro,
html[data-theme="dark"] .course-student-picker-card.ui-accent-card,
html[data-theme="dark"] .course-student-card.ui-accent-card {
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--ui-accent-card-color, var(--theme-primary, #38bdf8)) 13%, transparent), transparent 44%),
    color-mix(in srgb, #020617 74%, var(--color-surface, #0f172a) 26%);
}

@media (min-width: 1024px) {
  .course-student-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  }

  .course-student-picker-list .dashboard-layout {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .course-student-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  }

  .course-student-card.ui-accent-card .ui-accent-card__body {
    padding-right: 2.25rem;
  }
}

@media (max-width: 767px), (max-width: 980px) and (max-height: 520px) and (orientation: landscape) {
  .course-card.course-card--accent.ui-accent-card,
  .course-student-card.ui-accent-card,
  .course-student-picker-card.ui-accent-card {
    transform: none !important;
  }

  .course-student-card-grid,
  .course-student-picker-list .dashboard-layout {
    grid-template-columns: 1fr;
  }

  .course-student-card.ui-accent-card .ui-accent-card__body,
  .course-student-picker-card.ui-accent-card .ui-accent-card__body {
    min-height: 78px;
  }

  .course-student-picker-intro {
    width: calc(100% - 1rem);
  }
}

@media (max-width: 767px), (max-width: 980px) and (max-height: 520px) and (orientation: landscape) {
  .course-view-panel-body--v42 .courses-view-hero.ui-panel-hero {
    display: grid !important;
    grid-template-columns: 1fr;
    min-height: auto;
    width: calc(100% - 1rem);
    margin-inline: 0.5rem;
    padding: 1rem;
    border-radius: 1.35rem;
  }

  .course-view-panel-body--v42 .courses-view-hero .ui-panel-hero__eyebrow {
    margin-bottom: 0.45rem;
    font-size: 0.66rem;
  }

  .course-view-panel-body--v42 .courses-view-hero .ui-panel-hero__title {
    font-size: clamp(1.45rem, 8vw, 2.05rem);
    line-height: 0.95;
    letter-spacing: -0.055em;
  }

  .course-view-panel-body--v42 .courses-view-hero .ui-panel-hero__description {
    margin-top: 0.55rem;
    font-size: 0.82rem;
    line-height: 1.35;
  }

  .course-view-panel-body--v42 .courses-view-hero .ui-panel-hero__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    margin-top: 0.85rem;
  }

  .course-view-panel-body--v42 .courses-view-hero .ui-panel-hero__stat {
    min-height: 56px;
    padding: 0.6rem 0.7rem;
    border-radius: 1rem;
  }

  .course-view-panel-body--v42 .courses-view-hero .ui-panel-hero__stat strong {
    font-size: 1.22rem;
  }
}

/* V42.0.3 — panel Cours : navbar recherche, heroes teintés, chorés modernisées */
.mobile-shell-navbar.has-custom-center .mobile-shell-navbar__center.has-custom-center {
  pointer-events: auto;
  overflow: visible;
  z-index: 4;
}

.mobile-shell-navbar.has-custom-center .courses-navbar-spacer {
  display: block;
  width: 1px;
  height: 1px;
}

.mobile-shell-navbar .courses-searchbar--navbar {
  width: min(100%, 560px);
  height: 2.45rem;
  margin: 0 auto;
  padding: 0.24rem 0.34rem 0.24rem 0.78rem;
  border-radius: 1rem;
  pointer-events: auto;
}

.mobile-shell-navbar .courses-searchbar--navbar .courses-searchbar__label {
  font-size: 0.76rem;
}

.mobile-shell-navbar .courses-searchbar--navbar .courses-searchbar__clear {
  width: 1.82rem;
  height: 1.82rem;
}

.courses-hero--style-tinted.ui-panel-hero {
  background:
    radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--course-style-color, var(--theme-primary, #38bdf8)) 25%, transparent), transparent 36%),
    radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--course-style-color, var(--theme-primary, #38bdf8)) 22%, var(--color-accent, #ef4444) 18%, transparent), transparent 34%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--color-surface, #ffffff) 84%, var(--course-style-color, #38bdf8) 16%),
      color-mix(in srgb, var(--color-surface-soft, #f8fafc) 74%, var(--course-style-color, #38bdf8) 26%));
  border-color: color-mix(in srgb, var(--course-style-color, var(--theme-primary, #38bdf8)) 36%, var(--color-border-subtle, transparent));
}

.courses-hero--style-tinted .ui-panel-hero__stat {
  border-color: color-mix(in srgb, var(--course-style-color, var(--theme-primary, #38bdf8)) 28%, transparent);
}

.course-form-panel-body > [data-course-form-hero] {
  width: min(100%, 860px);
  margin-inline: auto;
}

.course-form-panel-body .courses-form-hero.ui-panel-hero {
  min-height: auto;
  margin-bottom: clamp(0.7rem, 1.6vw, 1rem);
}

.course-form-panel-body .courses-form-hero .ui-panel-hero__title {
  font-size: clamp(1.65rem, 4vw, 3.2rem);
}

.course-form-panel-body .courses-form-hero .ui-panel-hero__stat {
  min-height: 58px;
}

.course-form-panel-body .ui-input,
.course-choreography-form-panel-body .ui-input,
.course-form-panel-body .ui-combo__btn,
.course-choreography-form-panel-body .ui-combo__btn {
  border-radius: 1rem;
}

.course-choreography-form-panel-body textarea.ui-input {
  border-radius: 1rem;
}

.course-choreo-card-list {
  display: grid;
  gap: clamp(0.7rem, 1.3vw, 0.95rem);
}

.course-choreo-card.ui-accent-card {
  border-radius: 1.45rem;
}

.course-choreo-card.ui-accent-card .ui-accent-card__rail {
  inset: 15px auto 15px 10px;
  width: 4px;
}

.course-choreo-card.ui-accent-card .ui-accent-card__body {
  padding: clamp(0.9rem, 1.7vw, 1.15rem) clamp(0.95rem, 1.7vw, 1.2rem) clamp(0.9rem, 1.7vw, 1.15rem) clamp(1.45rem, 2vw, 1.8rem);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(0.72rem, 1.5vw, 1rem);
}

.course-choreo-card__media {
  position: relative;
  width: 3.6rem;
  height: 3.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 1.05rem;
  border: 1px solid color-mix(in srgb, var(--ui-accent-card-color, var(--theme-primary)) 36%, var(--color-border-subtle, transparent));
  background:
    radial-gradient(circle at 35% 20%, color-mix(in srgb, #fff 35%, transparent), transparent 50%),
    color-mix(in srgb, var(--ui-accent-card-color, var(--theme-primary)) 14%, var(--color-surface, #fff) 86%);
  color: color-mix(in srgb, var(--ui-accent-card-color, var(--theme-primary)) 72%, var(--theme-text, #0f172a) 28%);
}

.course-choreo-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.course-choreo-card__media-count {
  position: absolute;
  right: 0.18rem;
  bottom: 0.18rem;
  min-width: 1.35rem;
  height: 1.35rem;
  padding-inline: 0.34rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, #020617 82%, transparent);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 950;
}

.course-choreo-card__content {
  min-width: 0;
  display: grid;
  gap: 0.46rem;
}

.course-choreo-card__title-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.course-choreo-card__title-row strong {
  min-width: 0;
  color: var(--theme-text, var(--color-text, #0f172a));
  font-weight: 950;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.course-choreo-card__index {
  border-color: color-mix(in srgb, var(--ui-accent-card-color, var(--theme-primary)) 44%, transparent);
  background: color-mix(in srgb, var(--ui-accent-card-color, var(--theme-primary)) 18%, var(--color-surface, #fff) 82%);
}

.course-choreo-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem 0.8rem;
  color: var(--theme-text-muted, var(--color-text-muted, #64748b));
  font-size: 0.86rem;
  font-weight: 780;
}

.course-choreo-card__meta span {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
}

.course-choreo-card__meta i {
  color: color-mix(in srgb, var(--ui-accent-card-color, var(--theme-primary)) 62%, var(--theme-text-muted, #64748b) 38%);
}

.course-choreo-card__edit {
  min-height: 2.35rem;
  padding: 0 0.82rem;
  border: 1px solid color-mix(in srgb, var(--ui-accent-card-color, var(--theme-primary)) 40%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ui-accent-card-color, var(--theme-primary)) 9%, transparent);
  color: color-mix(in srgb, var(--ui-accent-card-color, var(--theme-primary)) 65%, var(--theme-text, #0f172a) 35%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.38rem;
  font-weight: 900;
}

html[data-theme="dark"] .courses-hero--style-tinted.ui-panel-hero {
  background:
    radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--course-style-color, var(--theme-primary, #38bdf8)) 24%, transparent), transparent 38%),
    radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--course-style-color, var(--theme-primary, #38bdf8)) 18%, #ef4444 12%, transparent), transparent 36%),
    linear-gradient(135deg,
      color-mix(in srgb, #020617 76%, var(--course-style-color, #38bdf8) 24%),
      color-mix(in srgb, #020617 86%, var(--course-style-color, #38bdf8) 14%));
}

@media (max-width: 767px), (max-width: 980px) and (max-height: 520px) and (orientation: landscape) {
  .mobile-shell-navbar .courses-searchbar--navbar {
    width: 100%;
    max-width: 100%;
    height: 2.35rem;
    padding-inline: 0.65rem 0.28rem;
  }

  .mobile-shell-navbar .courses-searchbar--navbar .courses-searchbar__label span {
    display: none;
  }

  .courses-panel-content > [data-courses-panel-hero] {
    display: block;
  }

  .courses-panel-content .courses-panel-hero.ui-panel-hero,
  .course-form-panel-body .courses-form-hero.ui-panel-hero {
    display: grid !important;
    grid-template-columns: 1fr;
    min-height: auto;
    width: calc(100% - 1rem);
    margin-inline: 0.5rem;
    padding: 0.92rem 1rem;
    border-radius: 1.25rem;
  }

  .courses-panel-content .courses-panel-hero .ui-panel-hero__title,
  .course-form-panel-body .courses-form-hero .ui-panel-hero__title {
    font-size: clamp(1.45rem, 8vw, 2.05rem);
    line-height: 0.95;
  }

  .courses-panel-content .courses-panel-hero .ui-panel-hero__description,
  .course-form-panel-body .courses-form-hero .ui-panel-hero__description {
    margin-top: 0.48rem;
    font-size: 0.8rem;
    line-height: 1.35;
  }

  .courses-panel-content .courses-panel-hero .ui-panel-hero__stats,
  .course-form-panel-body .courses-form-hero .ui-panel-hero__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.48rem;
    margin-top: 0.78rem;
  }

  .courses-panel-content .courses-panel-hero .ui-panel-hero__stat,
  .course-form-panel-body .courses-form-hero .ui-panel-hero__stat {
    min-height: 52px;
    padding: 0.55rem 0.65rem;
    border-radius: 0.95rem;
  }

  .course-choreo-card.ui-accent-card .ui-accent-card__body {
    grid-template-columns: auto minmax(0, 1fr);
    padding-right: 0.9rem;
  }

  .course-choreo-card__edit {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

/* V42.0.4 — panel Cours : navbar allégée, cartes d'ajout, heroes actions */
body.is-dashboard-shell-visible .mobile-shell-navbar.has-custom-center .mobile-shell-navbar__center.has-custom-center {
  left: calc(var(--edq-navbar-edge-left-current) + 3.25rem) !important;
  right: calc(var(--edq-navbar-edge-right-current) + 10.75rem) !important;
  width: auto !important;
  max-width: none !important;
  transform: translateY(-50%) !important;
  justify-content: center !important;
}

body.is-dashboard-shell-visible .mobile-shell-navbar.has-custom-center.is-mobile-mode .mobile-shell-navbar__center.has-custom-center {
  right: calc(var(--edq-navbar-edge-right-current) + 3.25rem) !important;
}

body.is-dashboard-shell-visible .mobile-shell-navbar.has-custom-center.is-tablet-mode .mobile-shell-navbar__center.has-custom-center {
  right: calc(var(--edq-navbar-edge-right-current) + 6.65rem) !important;
}

body.is-dashboard-shell-visible .mobile-shell-navbar.has-custom-center.is-desktop-mode .mobile-shell-navbar__center.has-custom-center {
  right: calc(var(--edq-navbar-edge-right-current) + 14.35rem) !important;
}

.mobile-shell-navbar .courses-searchbar--navbar {
  width: min(100%, 540px) !important;
  max-width: 100% !important;
}

.mobile-shell-navbar.is-mobile-mode .courses-searchbar--navbar,
.mobile-shell-navbar.is-tablet-mode .courses-searchbar--navbar {
  width: 100% !important;
}

.mobile-shell-navbar.is-mobile-mode .courses-searchbar--navbar .courses-searchbar__label span,
.mobile-shell-navbar.is-tablet-mode .courses-searchbar--navbar .courses-searchbar__label span {
  display: none !important;
}

.course-add-card.ui-accent-card {
  min-height: 178px;
  border-style: dashed;
  border-radius: 1.55rem;
  display: grid;
  place-items: center;
  text-align: left;
  cursor: pointer;
}

.course-add-card.ui-accent-card .ui-accent-card__rail {
  opacity: .65;
}

.course-add-card.ui-accent-card .ui-accent-card__body {
  width: 100%;
  min-height: 150px;
  padding: clamp(1rem, 1.8vw, 1.2rem) clamp(1rem, 1.8vw, 1.2rem) clamp(1rem, 1.8vw, 1.2rem) clamp(1.55rem, 2vw, 1.8rem);
  display: flex;
  align-items: center;
  gap: .9rem;
}

.course-add-card__icon {
  width: 2.8rem;
  height: 2.8rem;
  flex: 0 0 2.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  border: 1px solid color-mix(in srgb, var(--theme-primary, #38bdf8) 48%, transparent);
  background: color-mix(in srgb, var(--theme-primary, #38bdf8) 16%, transparent);
  color: var(--theme-primary, #38bdf8);
  box-shadow: 0 14px 28px color-mix(in srgb, var(--theme-primary, #38bdf8) 14%, transparent);
}

.course-add-card__copy {
  display: grid;
  gap: .16rem;
  min-width: 0;
}

.course-add-card__copy strong {
  color: var(--theme-text, var(--color-text, #0f172a));
  font-size: 1.02rem;
  font-weight: 950;
}

.course-add-card__copy span {
  color: var(--theme-text-muted, var(--color-text-muted, #64748b));
  font-size: .84rem;
  font-weight: 800;
}

html[data-theme="dark"] .course-card.course-card--accent.ui-accent-card,
html[data-theme="dark"] .course-add-card.ui-accent-card {
  background:
    radial-gradient(circle at 4% 0%, color-mix(in srgb, var(--ui-accent-card-color, #38bdf8) 18%, transparent), transparent 34%),
    radial-gradient(circle at 98% 0%, color-mix(in srgb, var(--ui-accent-card-color, #38bdf8) 12%, transparent), transparent 34%),
    linear-gradient(145deg,
      color-mix(in srgb, #020617 88%, var(--ui-accent-card-color, #38bdf8) 12%),
      color-mix(in srgb, #020617 94%, var(--ui-accent-card-color, #38bdf8) 6%));
  border-color: color-mix(in srgb, var(--ui-accent-card-color, #38bdf8) 58%, rgba(255,255,255,.09));
  box-shadow:
    0 18px 46px color-mix(in srgb, #000 34%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 11%, transparent);
}

html[data-theme="dark"] .course-card.course-card--accent.ui-accent-card::after,
html[data-theme="dark"] .course-add-card.ui-accent-card::after {
  opacity: .42;
}

.courses-hero--style-tinted.ui-panel-hero {
  background:
    radial-gradient(circle at 10% 5%, color-mix(in srgb, var(--course-style-color, var(--theme-primary, #38bdf8)) 38%, transparent), transparent 36%),
    radial-gradient(circle at 90% 12%, color-mix(in srgb, var(--course-style-color, var(--theme-primary, #38bdf8)) 28%, var(--color-accent, #ef4444) 15%, transparent), transparent 34%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--color-surface, #ffffff) 74%, var(--course-style-color, #38bdf8) 26%),
      color-mix(in srgb, var(--color-surface-soft, #f8fafc) 66%, var(--course-style-color, #38bdf8) 34%)) !important;
}

html[data-theme="dark"] .courses-hero--style-tinted.ui-panel-hero {
  background:
    radial-gradient(circle at 10% 5%, color-mix(in srgb, var(--course-style-color, var(--theme-primary, #38bdf8)) 34%, transparent), transparent 38%),
    radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--course-style-color, var(--theme-primary, #38bdf8)) 22%, #ef4444 13%, transparent), transparent 36%),
    linear-gradient(135deg,
      color-mix(in srgb, #020617 68%, var(--course-style-color, #38bdf8) 32%),
      color-mix(in srgb, #020617 84%, var(--course-style-color, #38bdf8) 16%)) !important;
}

.ui-panel-hero__actions {
  display: flex;
  align-items: center;
  gap: .65rem;
  flex-wrap: wrap;
  margin-top: .95rem;
}

.courses-hero-action {
  min-height: 2.55rem;
  padding: 0 .98rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border: 1px solid color-mix(in srgb, var(--course-style-color, var(--theme-primary, #38bdf8)) 46%, transparent);
  border-radius: 1rem;
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, #fff 22%, transparent), transparent 45%),
    color-mix(in srgb, var(--course-style-color, var(--theme-primary, #38bdf8)) 16%, var(--color-surface, #fff) 84%);
  color: color-mix(in srgb, var(--course-style-color, var(--theme-primary, #38bdf8)) 70%, var(--theme-text, #0f172a) 30%);
  font: inherit;
  font-size: .88rem;
  font-weight: 950;
  cursor: pointer;
  box-shadow: 0 12px 26px color-mix(in srgb, var(--course-style-color, var(--theme-primary, #38bdf8)) 13%, transparent);
}

.courses-hero-action--save {
  border-color: color-mix(in srgb, #22c55e 54%, transparent);
  background: color-mix(in srgb, #22c55e 16%, var(--color-surface, #fff) 84%);
  color: color-mix(in srgb, #22c55e 75%, var(--theme-text, #0f172a) 25%);
}

.courses-hero-action.is-loading {
  opacity: .68;
  pointer-events: none;
}

.course-view-panel-body--v42 > [data-courses-view-hero] + .student-courses-admin {
  padding-top: 0 !important;
  border-top: 0 !important;
}

.course-view-panel-body--v42 .student-courses-admin {
  border-top-color: color-mix(in srgb, var(--color-border-subtle, #94a3b8) 44%, transparent);
}

.course-view-panel-body--v42 .course-choreos-admin {
  margin-top: clamp(1rem, 2vw, 1.25rem) !important;
  padding-top: clamp(1rem, 2vw, 1.25rem) !important;
}

.courses-view-hero.ui-panel-hero .ui-panel-hero__stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.courses-view-hero.ui-panel-hero .ui-panel-hero__stat strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.course-form-panel-body .course-form,
.course-choreography-form-panel-body #course-choreography-form {
  border-radius: 1.1rem !important;
}

.course-form-panel-body .ui-input,
.course-choreography-form-panel-body .ui-input,
.course-form-panel-body .ui-combo__btn,
.course-choreography-form-panel-body .ui-combo__btn {
  border-radius: .72rem !important;
}

@media (max-width: 767px), (max-width: 980px) and (max-height: 520px) and (orientation: landscape) {
  .courses-panel-content .courses-panel-hero.ui-panel-hero .ui-panel-hero__stats,
  .course-form-panel-body .courses-form-hero.ui-panel-hero .ui-panel-hero__stats,
  .course-view-panel-body--v42 .courses-view-hero.ui-panel-hero .ui-panel-hero__stats {
    display: none !important;
  }

  .courses-panel-content .courses-panel-hero.ui-panel-hero,
  .course-form-panel-body .courses-form-hero.ui-panel-hero,
  .course-view-panel-body--v42 .courses-view-hero.ui-panel-hero {
    min-height: auto !important;
  }

  .course-add-card.ui-accent-card {
    min-height: 132px;
  }

  .course-add-card.ui-accent-card .ui-accent-card__body {
    min-height: 112px;
  }

  .courses-hero-action {
    min-height: 2.35rem;
    border-radius: .9rem;
    padding-inline: .85rem;
  }
}

/* V42.0.5 — CTA dans les heroes, formulaires sans cadres globaux, scroll mobile/tablette */
.courses-hero--cta-top-right.ui-panel-hero {
  align-items: stretch;
}

.courses-hero--cta-top-right.ui-panel-hero .ui-panel-hero__copy {
  padding-right: clamp(0rem, 13vw, 11rem);
}

.courses-hero--cta-top-right.ui-panel-hero .ui-panel-hero__actions {
  position: absolute;
  z-index: 3;
  top: clamp(0.85rem, 2vw, 1.25rem);
  right: clamp(0.85rem, 2vw, 1.25rem);
  margin: 0;
  justify-content: flex-end;
}

.courses-hero-action {
  white-space: nowrap;
}

.courses-hero-action:disabled,
.courses-hero-action[disabled] {
  opacity: .48;
  cursor: not-allowed;
  filter: saturate(.72);
}

.course-form-panel-body,
.course-choreography-form-panel-body,
.course-student-picker-panel-body {
  display: flex;
  flex-direction: column;
  gap: clamp(.85rem, 1.8vw, 1.15rem);
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scroll-padding-bottom: max(7rem, calc(env(safe-area-inset-bottom, 0px) + 7rem));
}

.course-form-panel-body .course-form,
.course-choreography-form-panel-body #course-choreography-form {
  width: min(100%, 860px) !important;
  margin-inline: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.course-form-panel-body .form-hint,
.course-choreography-form-panel-body .form-hint {
  width: min(100%, 860px);
  margin-inline: auto;
}

.course-form-panel-body .form-field,
.course-choreography-form-panel-body .form-field {
  width: min(100%, 860px);
  margin-inline: auto;
}

.course-choreography-associated-course {
  display: none !important;
}

.course-form-panel-body > [data-course-form-hero],
.course-choreography-form-panel-body > [data-course-choreo-form-hero],
.course-student-picker-panel-body > [data-student-picker-hero] {
  width: min(100%, 860px);
  margin-inline: auto;
}

.course-choreography-form-panel-body .courses-choreo-form-hero.ui-panel-hero,
.course-student-picker-panel-body .course-student-picker-hero.ui-panel-hero {
  min-height: auto;
  margin-bottom: clamp(.25rem, .9vw, .6rem);
}

.course-choreography-form-panel-body .courses-choreo-form-hero .ui-panel-hero__title,
.course-student-picker-panel-body .course-student-picker-hero .ui-panel-hero__title {
  font-size: clamp(1.65rem, 4vw, 3.1rem);
}

.course-student-picker-intro {
  display: none !important;
}

html[data-theme="dark"] .course-form-panel-body .course-form,
html[data-theme="dark"] .course-choreography-form-panel-body #course-choreography-form {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .course-form-panel-body,
  .course-choreography-form-panel-body,
  .course-student-picker-panel-body {
    padding-bottom: max(7rem, calc(env(safe-area-inset-bottom, 0px) + 7rem));
  }

  body.is-dashboard-shell-visible .mobile-shell-navbar.has-custom-center .mobile-shell-navbar__center.has-custom-center {
    left: calc(var(--edq-navbar-edge-left-current) + 3.1rem) !important;
    right: calc(var(--edq-navbar-edge-right-current) + 6.15rem) !important;
  }
}

@media (max-width: 767px), (max-width: 980px) and (max-height: 520px) and (orientation: landscape) {
  .courses-hero--cta-top-right.ui-panel-hero .ui-panel-hero__copy {
    padding-right: 0;
  }

  .courses-hero--cta-top-right.ui-panel-hero .ui-panel-hero__actions {
    top: .82rem;
    right: .82rem;
  }

  .courses-hero--cta-top-right.ui-panel-hero .ui-panel-hero__eyebrow,
  .courses-hero--cta-top-right.ui-panel-hero .ui-panel-hero__title,
  .courses-hero--cta-top-right.ui-panel-hero .ui-panel-hero__description {
    max-width: calc(100% - 8rem);
  }

  .course-form-panel-body,
  .course-choreography-form-panel-body,
  .course-student-picker-panel-body {
    padding-bottom: max(8rem, calc(env(safe-area-inset-bottom, 0px) + 8rem)) !important;
  }

  .course-form-panel-body .course-form,
  .course-choreography-form-panel-body #course-choreography-form {
    width: calc(100% - 1rem) !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }

  .course-form-panel-body > [data-course-form-hero],
  .course-choreography-form-panel-body > [data-course-choreo-form-hero],
  .course-student-picker-panel-body > [data-student-picker-hero] {
    width: calc(100% - 1rem);
  }

  .course-choreography-form-panel-body .courses-choreo-form-hero.ui-panel-hero,
  .course-student-picker-panel-body .course-student-picker-hero.ui-panel-hero {
    display: grid !important;
    grid-template-columns: 1fr;
    width: 100%;
    padding: .92rem 1rem;
    border-radius: 1.25rem;
  }

  .course-choreography-form-panel-body .courses-choreo-form-hero .ui-panel-hero__stats,
  .course-student-picker-panel-body .course-student-picker-hero .ui-panel-hero__stats {
    display: none !important;
  }

  .course-choreography-form-panel-body .courses-choreo-form-hero .ui-panel-hero__title,
  .course-student-picker-panel-body .course-student-picker-hero .ui-panel-hero__title {
    font-size: clamp(1.45rem, 8vw, 2.05rem);
    line-height: .95;
  }

  .course-choreography-form-panel-body .courses-choreo-form-hero .ui-panel-hero__description,
  .course-student-picker-panel-body .course-student-picker-hero .ui-panel-hero__description {
    margin-top: .48rem;
    font-size: .8rem;
    line-height: 1.35;
  }
}

/* V42.0.6 — scroll interne robuste + CTA réellement au coin du hero */
.courses-hero--cta-top-right.ui-panel-hero {
  position: relative !important;
}

.courses-hero--cta-top-right.ui-panel-hero > .ui-panel-hero__copy {
  position: static !important;
}

.courses-hero--cta-top-right.ui-panel-hero .ui-panel-hero__actions {
  position: absolute !important;
  z-index: 8 !important;
  top: clamp(.85rem, 1.7vw, 1.15rem) !important;
  right: clamp(.85rem, 1.7vw, 1.15rem) !important;
  margin: 0 !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  width: auto !important;
  max-width: min(52%, 18rem) !important;
}

.courses-hero--cta-top-right.ui-panel-hero .courses-hero-action {
  width: auto !important;
  max-width: 100% !important;
}

/* Les sous-panels longs des cours scrollent dans leur propre zone, sans entraîner la navbar. */
:root {
  --courses-panel-scroll-height: calc(100dvh - var(--edq-navbar-height-current, 4.35rem) - clamp(.55rem, 1.2vw, 1rem));
}

@supports not (height: 100dvh) {
  :root {
    --courses-panel-scroll-height: calc(100vh - var(--edq-navbar-height-current, 4.35rem) - clamp(.55rem, 1.2vw, 1rem));
  }
}

body.is-dashboard-shell-visible:has(#dashboard-view > .course-form-panel-body),
body.is-dashboard-shell-visible:has(#dashboard-view > .course-choreography-form-panel-body),
body.is-dashboard-shell-visible:has(#dashboard-view > .course-student-picker-panel-body) {
  overflow: hidden !important;
  overscroll-behavior-y: none !important;
}

body.is-dashboard-shell-visible:has(#dashboard-view > .course-form-panel-body) #dashboard-view,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-choreography-form-panel-body) #dashboard-view,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-student-picker-panel-body) #dashboard-view {
  height: var(--courses-panel-scroll-height) !important;
  max-height: var(--courses-panel-scroll-height) !important;
  min-height: 0 !important;
  overflow: hidden !important;
  overscroll-behavior-y: none !important;
}

body.is-dashboard-shell-visible #dashboard-view > .course-form-panel-body,
body.is-dashboard-shell-visible #dashboard-view > .course-choreography-form-panel-body,
body.is-dashboard-shell-visible #dashboard-view > .course-student-picker-panel-body {
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow-x: clip !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  scrollbar-gutter: stable;
  box-sizing: border-box;
}

body.is-dashboard-shell-visible #dashboard-view > .course-form-panel-body::after,
body.is-dashboard-shell-visible #dashboard-view > .course-choreography-form-panel-body::after,
body.is-dashboard-shell-visible #dashboard-view > .course-student-picker-panel-body::after {
  content: "";
  display: block;
  flex: 0 0 max(7rem, calc(env(safe-area-inset-bottom, 0px) + 7rem));
  min-height: max(7rem, calc(env(safe-area-inset-bottom, 0px) + 7rem));
}

@media (min-width: 1024px) {
  body.is-dashboard-shell-visible:has(#dashboard-view > .course-form-panel-body) #dashboard-view,
  body.is-dashboard-shell-visible:has(#dashboard-view > .course-choreography-form-panel-body) #dashboard-view,
  body.is-dashboard-shell-visible:has(#dashboard-view > .course-student-picker-panel-body) #dashboard-view {
    --courses-panel-scroll-height: calc(100dvh - var(--edq-navbar-height-current, 4.35rem) - clamp(.85rem, 1vw, 1.15rem));
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  body.is-dashboard-shell-visible:has(#dashboard-view > .course-form-panel-body) #dashboard-view,
  body.is-dashboard-shell-visible:has(#dashboard-view > .course-choreography-form-panel-body) #dashboard-view,
  body.is-dashboard-shell-visible:has(#dashboard-view > .course-student-picker-panel-body) #dashboard-view {
    --courses-panel-scroll-height: calc(100dvh - var(--edq-navbar-height-current, 4.35rem) - .65rem);
  }
}

@media (max-width: 767px), (max-width: 980px) and (max-height: 520px) and (orientation: landscape) {
  .courses-hero--cta-top-right.ui-panel-hero .ui-panel-hero__actions {
    top: .72rem !important;
    right: .72rem !important;
    max-width: min(48%, 9rem) !important;
  }

  .courses-hero--cta-top-right.ui-panel-hero .courses-hero-action {
    min-height: 2.25rem !important;
    padding-inline: .72rem !important;
  }

  .courses-hero--cta-top-right.ui-panel-hero .courses-hero-action span {
    max-width: 5.7rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.is-dashboard-shell-visible:has(#dashboard-view > .course-form-panel-body) #dashboard-view,
  body.is-dashboard-shell-visible:has(#dashboard-view > .course-choreography-form-panel-body) #dashboard-view,
  body.is-dashboard-shell-visible:has(#dashboard-view > .course-student-picker-panel-body) #dashboard-view {
    --courses-panel-scroll-height: calc(100dvh - var(--edq-navbar-height-current, 3.55rem) - .5rem);
  }

  body.is-dashboard-shell-visible #dashboard-view > .course-form-panel-body,
  body.is-dashboard-shell-visible #dashboard-view > .course-choreography-form-panel-body,
  body.is-dashboard-shell-visible #dashboard-view > .course-student-picker-panel-body {
    padding-bottom: max(8rem, calc(env(safe-area-inset-bottom, 0px) + 8rem)) !important;
  }
}


/* V42.0.7 — ligne de base unifiée, reset scroll, suppression choré modernisée */
:root {
  --courses-subpanel-top-gap: clamp(0.95rem, 1.5vw, 1.25rem);
  --courses-subpanel-inline-gap: clamp(0.75rem, 1.7vw, 1rem);
}

body.is-dashboard-shell-visible #dashboard-view > .course-form-panel-body,
body.is-dashboard-shell-visible #dashboard-view > .course-choreography-form-panel-body,
body.is-dashboard-shell-visible #dashboard-view > .course-student-picker-panel-body,
body.is-dashboard-shell-visible #dashboard-view > .course-choreography-delete-panel-body {
  padding-top: var(--courses-subpanel-top-gap) !important;
  padding-inline: var(--courses-subpanel-inline-gap) !important;
  scroll-padding-top: var(--courses-subpanel-top-gap) !important;
}

.course-choreography-delete-panel-body {
  display: flex;
  flex-direction: column;
  gap: clamp(.85rem, 1.8vw, 1.15rem);
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scroll-padding-bottom: max(7rem, calc(env(safe-area-inset-bottom, 0px) + 7rem));
}

.course-choreography-delete-panel-body > [data-course-choreo-delete-hero],
.course-choreography-delete-panel-body .courses-danger-note {
  width: min(100%, 860px);
  margin-inline: auto;
}

.course-choreography-delete-panel-body .courses-choreo-delete-hero.ui-panel-hero {
  min-height: auto;
  margin-bottom: clamp(.25rem, .9vw, .6rem);
}

.courses-hero--danger.ui-panel-hero {
  border-color: color-mix(in srgb, #ef4444 42%, var(--course-style-color, #ef4444) 25%, transparent) !important;
  background:
    radial-gradient(circle at 8% 10%, color-mix(in srgb, var(--course-style-color, #ef4444) 18%, transparent), transparent 38%),
    radial-gradient(circle at 92% 0%, color-mix(in srgb, #ef4444 24%, transparent), transparent 42%),
    linear-gradient(135deg,
      color-mix(in srgb, #020617 70%, var(--course-style-color, #ef4444) 9%),
      color-mix(in srgb, #020617 70%, #ef4444 14%));
}

.courses-hero-action--danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 2.45rem;
  padding: .52rem 1.05rem;
  border: 1px solid color-mix(in srgb, #ef4444 72%, transparent);
  border-radius: 999px;
  color: color-mix(in srgb, #fecaca 82%, #fff 18%);
  background:
    radial-gradient(circle at 20% 0%, color-mix(in srgb, #fff 18%, transparent), transparent 48%),
    color-mix(in srgb, #ef4444 26%, #020617 74%);
  box-shadow:
    0 12px 32px color-mix(in srgb, #ef4444 20%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 18%, transparent);
  font: inherit;
  font-size: .92rem;
  font-weight: 900;
  letter-spacing: .01em;
  cursor: pointer;
}

.courses-hero-action--danger:disabled,
.courses-hero-action--danger[disabled] {
  opacity: .5;
  cursor: not-allowed;
  filter: saturate(.75);
}

.courses-danger-note {
  padding: clamp(.9rem, 1.8vw, 1.1rem);
  border: 1px solid color-mix(in srgb, #ef4444 44%, transparent);
  border-radius: 1.2rem;
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, #ef4444 12%, transparent), transparent 44%),
    color-mix(in srgb, #ef4444 8%, var(--color-surface, #fff) 92%);
  color: var(--theme-text, var(--color-text, #0f172a));
  font-size: .92rem;
  line-height: 1.45;
}

html[data-theme="dark"] .courses-danger-note {
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, #ef4444 18%, transparent), transparent 48%),
    color-mix(in srgb, #020617 80%, #ef4444 20%);
  color: color-mix(in srgb, #fecaca 34%, var(--theme-text, #f8fafc) 66%);
}

body.is-dashboard-shell-visible:has(#dashboard-view > .course-choreography-delete-panel-body) {
  overflow: hidden !important;
  overscroll-behavior-y: none !important;
}

body.is-dashboard-shell-visible:has(#dashboard-view > .course-choreography-delete-panel-body) #dashboard-view {
  height: var(--courses-panel-scroll-height) !important;
  max-height: var(--courses-panel-scroll-height) !important;
  min-height: 0 !important;
  overflow: hidden !important;
  overscroll-behavior-y: none !important;
}

body.is-dashboard-shell-visible #dashboard-view > .course-choreography-delete-panel-body {
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow-x: clip !important;
  overflow-y: auto !important;
  box-sizing: border-box;
  scrollbar-gutter: stable;
}

body.is-dashboard-shell-visible #dashboard-view > .course-choreography-delete-panel-body::after {
  content: "";
  display: block;
  flex: 0 0 max(7rem, calc(env(safe-area-inset-bottom, 0px) + 7rem));
  min-height: max(7rem, calc(env(safe-area-inset-bottom, 0px) + 7rem));
}

@media (min-width: 1024px) {
  body.is-dashboard-shell-visible:has(#dashboard-view > .course-choreography-delete-panel-body) #dashboard-view {
    --courses-panel-scroll-height: calc(100dvh - var(--edq-navbar-height-current, 4.35rem) - clamp(.85rem, 1vw, 1.15rem));
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --courses-subpanel-top-gap: 1rem;
    --courses-subpanel-inline-gap: clamp(.75rem, 1.8vw, 1rem);
  }

  body.is-dashboard-shell-visible:has(#dashboard-view > .course-choreography-delete-panel-body) #dashboard-view {
    --courses-panel-scroll-height: calc(100dvh - var(--edq-navbar-height-current, 4.35rem) - .65rem);
  }
}

@media (max-width: 767px), (max-width: 980px) and (max-height: 520px) and (orientation: landscape) {
  :root {
    --courses-subpanel-top-gap: .8rem;
    --courses-subpanel-inline-gap: .5rem;
  }

  .course-choreography-delete-panel-body > [data-course-choreo-delete-hero],
  .course-choreography-delete-panel-body .courses-danger-note {
    width: calc(100% - 1rem);
  }

  .course-choreography-delete-panel-body .courses-choreo-delete-hero.ui-panel-hero {
    display: grid !important;
    grid-template-columns: 1fr;
    width: 100%;
    min-height: auto;
    padding: .92rem 1rem;
    border-radius: 1.25rem;
  }

  .course-choreography-delete-panel-body .courses-choreo-delete-hero .ui-panel-hero__title {
    font-size: clamp(1.45rem, 8vw, 2.05rem);
    line-height: .95;
  }

  .course-choreography-delete-panel-body .courses-choreo-delete-hero .ui-panel-hero__description {
    margin-top: .48rem;
    font-size: .8rem;
    line-height: 1.35;
  }

  .courses-hero-action--danger {
    min-height: 2.25rem !important;
    padding-inline: .72rem !important;
  }

  .courses-hero-action--danger span {
    max-width: 5.7rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.is-dashboard-shell-visible:has(#dashboard-view > .course-choreography-delete-panel-body) #dashboard-view {
    --courses-panel-scroll-height: calc(100dvh - var(--edq-navbar-height-current, 3.55rem) - .5rem);
  }

  body.is-dashboard-shell-visible #dashboard-view > .course-choreography-delete-panel-body {
    padding-bottom: max(8rem, calc(env(safe-area-inset-bottom, 0px) + 8rem)) !important;
  }
}

/* V42.0.8 — heroes unifiés, suppression cours modernisée, ajout chorégraphie */
.courses-panel-content > [data-courses-panel-hero],
.course-view-panel-body > [data-courses-view-hero],
.course-form-panel-body > [data-course-form-hero],
.course-choreography-form-panel-body > [data-course-choreo-form-hero],
.course-choreography-delete-panel-body > [data-course-choreo-delete-hero],
.course-delete-panel-body > [data-course-delete-hero],
.course-student-picker-panel-body > [data-course-student-picker-hero] {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
}

.courses-panel-hero.ui-panel-hero,
.courses-view-hero.ui-panel-hero {
  width: 100% !important;
}

.courses-form-hero.ui-panel-hero,
.courses-choreo-form-hero.ui-panel-hero,
.courses-choreo-delete-hero.ui-panel-hero,
.courses-delete-hero.ui-panel-hero,
.course-student-picker-hero.ui-panel-hero {
  width: 100% !important;
  min-height: auto !important;
  margin-bottom: clamp(.75rem, 1.4vw, 1rem) !important;
}

.courses-form-hero.ui-panel-hero,
.courses-choreo-form-hero.ui-panel-hero,
.courses-choreo-delete-hero.ui-panel-hero,
.courses-delete-hero.ui-panel-hero {
  grid-template-columns: 1fr !important;
  align-items: start !important;
  padding: clamp(1rem, 2.3vw, 1.6rem) clamp(1rem, 2.3vw, 1.6rem) !important;
}

.courses-form-hero.ui-panel-hero .ui-panel-hero__title,
.courses-choreo-form-hero.ui-panel-hero .ui-panel-hero__title,
.courses-choreo-delete-hero.ui-panel-hero .ui-panel-hero__title,
.courses-delete-hero.ui-panel-hero .ui-panel-hero__title {
  font-size: clamp(1.85rem, 4vw, 3.15rem) !important;
  line-height: .94 !important;
}

.courses-hero--cta-top-right.ui-panel-hero .ui-panel-hero__actions {
  top: clamp(.75rem, 1.4vw, 1rem) !important;
  right: clamp(.75rem, 1.4vw, 1rem) !important;
}

body.is-dashboard-shell-visible #dashboard-view > .course-delete-panel-body {
  padding-top: var(--courses-subpanel-top-gap) !important;
  padding-inline: var(--courses-subpanel-inline-gap) !important;
  scroll-padding-top: var(--courses-subpanel-top-gap) !important;
}

.course-delete-panel-body {
  display: flex;
  flex-direction: column;
  gap: clamp(.85rem, 1.8vw, 1.15rem);
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scroll-padding-bottom: max(7rem, calc(env(safe-area-inset-bottom, 0px) + 7rem));
}

.course-delete-panel-body .courses-danger-note,
.course-choreography-delete-panel-body .courses-danger-note {
  width: 100% !important;
  max-width: none !important;
}

body.is-dashboard-shell-visible:has(#dashboard-view > .course-delete-panel-body) {
  overflow: hidden !important;
  overscroll-behavior-y: none !important;
}

body.is-dashboard-shell-visible:has(#dashboard-view > .course-delete-panel-body) #dashboard-view {
  height: var(--courses-panel-scroll-height) !important;
  max-height: var(--courses-panel-scroll-height) !important;
  min-height: 0 !important;
  overflow: hidden !important;
  overscroll-behavior-y: none !important;
}

body.is-dashboard-shell-visible #dashboard-view > .course-delete-panel-body {
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow-x: clip !important;
  overflow-y: auto !important;
  box-sizing: border-box;
  scrollbar-gutter: stable;
}

body.is-dashboard-shell-visible #dashboard-view > .course-delete-panel-body::after {
  content: "";
  display: block;
  flex: 0 0 max(7rem, calc(env(safe-area-inset-bottom, 0px) + 7rem));
  min-height: max(7rem, calc(env(safe-area-inset-bottom, 0px) + 7rem));
}

.course-choreo-card--add.ui-accent-card {
  cursor: pointer;
  border-style: dashed;
  border-color: color-mix(in srgb, var(--ui-accent-card-color, var(--theme-primary, #38bdf8)) 42%, var(--color-border-subtle, transparent));
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--ui-accent-card-color, var(--theme-primary, #38bdf8)) 15%, transparent), transparent 40%),
    color-mix(in srgb, var(--color-surface, #fff) 68%, transparent);
}

.course-choreo-card--add.ui-accent-card .ui-accent-card__body {
  min-height: 5.4rem;
}

.course-choreo-card--add .course-choreo-card__media {
  border-style: dashed;
}

.course-choreo-card--add .course-choreo-card__title-row strong {
  color: var(--theme-text, var(--color-text, #0f172a));
}

.course-choreo-card--add:hover,
.course-choreo-card--add:focus-visible {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--ui-accent-card-color, var(--theme-primary, #38bdf8)) 72%, transparent);
}

@media (min-width: 1024px) {
  body.is-dashboard-shell-visible:has(#dashboard-view > .course-delete-panel-body) #dashboard-view {
    --courses-panel-scroll-height: calc(100dvh - var(--edq-navbar-height-current, 4.35rem) - clamp(.85rem, 1vw, 1.15rem));
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  body.is-dashboard-shell-visible:has(#dashboard-view > .course-delete-panel-body) #dashboard-view {
    --courses-panel-scroll-height: calc(100dvh - var(--edq-navbar-height-current, 4.35rem) - .65rem);
  }

  .courses-panel-hero.ui-panel-hero,
  .courses-view-hero.ui-panel-hero,
  .courses-form-hero.ui-panel-hero,
  .courses-choreo-form-hero.ui-panel-hero,
  .courses-choreo-delete-hero.ui-panel-hero,
  .courses-delete-hero.ui-panel-hero,
  .course-student-picker-hero.ui-panel-hero {
    display: grid !important;
    grid-template-columns: 1fr !important;
    min-height: auto !important;
    padding: clamp(1rem, 2.5vw, 1.35rem) !important;
    border-radius: 1.35rem !important;
  }
}

@media (max-width: 767px), (max-width: 980px) and (max-height: 520px) and (orientation: landscape) {
  .courses-panel-hero.ui-panel-hero,
  .courses-view-hero.ui-panel-hero,
  .courses-form-hero.ui-panel-hero,
  .courses-choreo-form-hero.ui-panel-hero,
  .courses-choreo-delete-hero.ui-panel-hero,
  .courses-delete-hero.ui-panel-hero,
  .course-student-picker-hero.ui-panel-hero {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    min-height: auto !important;
    margin-inline: 0 !important;
    padding: .95rem 1rem !important;
    border-radius: 1.25rem !important;
  }

  .courses-panel-hero.ui-panel-hero .ui-panel-hero__stats,
  .courses-view-hero.ui-panel-hero .ui-panel-hero__stats,
  .courses-form-hero.ui-panel-hero .ui-panel-hero__stats,
  .courses-choreo-form-hero.ui-panel-hero .ui-panel-hero__stats,
  .courses-choreo-delete-hero.ui-panel-hero .ui-panel-hero__stats,
  .courses-delete-hero.ui-panel-hero .ui-panel-hero__stats,
  .course-student-picker-hero.ui-panel-hero .ui-panel-hero__stats {
    display: none !important;
  }

  .courses-hero--cta-top-right.ui-panel-hero .ui-panel-hero__actions {
    top: .62rem !important;
    right: .62rem !important;
  }

  body.is-dashboard-shell-visible:has(#dashboard-view > .course-delete-panel-body) #dashboard-view {
    --courses-panel-scroll-height: calc(100dvh - var(--edq-navbar-height-current, 3.55rem) - .5rem);
  }

  body.is-dashboard-shell-visible #dashboard-view > .course-delete-panel-body {
    padding-bottom: max(8rem, calc(env(safe-area-inset-bottom, 0px) + 8rem)) !important;
  }
}

/* V42.0.9 — heroes réellement pleine largeur + contenus adaptatifs */
body.is-dashboard-shell-visible #dashboard-view > .courses-panel-content,
body.is-dashboard-shell-visible #dashboard-view > .course-view-panel-body {
  --courses-hero-edge-bleed: var(--dashboard-panel-inline-padding, 0px);
}

body.is-dashboard-shell-visible #dashboard-view > .course-form-panel-body,
body.is-dashboard-shell-visible #dashboard-view > .course-choreography-form-panel-body,
body.is-dashboard-shell-visible #dashboard-view > .course-choreography-delete-panel-body,
body.is-dashboard-shell-visible #dashboard-view > .course-delete-panel-body,
body.is-dashboard-shell-visible #dashboard-view > .course-student-picker-panel-body {
  --courses-hero-edge-bleed: var(--courses-subpanel-inline-gap, var(--dashboard-panel-inline-padding, 0px));
}

.courses-panel-content > [data-courses-panel-hero],
.course-view-panel-body > [data-courses-view-hero],
.course-form-panel-body > [data-course-form-hero],
.course-choreography-form-panel-body > [data-course-choreo-form-hero],
.course-choreography-delete-panel-body > [data-course-choreo-delete-hero],
.course-delete-panel-body > [data-course-delete-hero],
.course-student-picker-panel-body > [data-course-student-picker-hero] {
  width: calc(100% + (var(--courses-hero-edge-bleed, 0px) * 2)) !important;
  max-width: none !important;
  margin-left: calc(var(--courses-hero-edge-bleed, 0px) * -1) !important;
  margin-right: calc(var(--courses-hero-edge-bleed, 0px) * -1) !important;
  margin-bottom: clamp(1rem, 1.8vw, 1.35rem) !important;
}

.courses-panel-hero.ui-panel-hero,
.courses-view-hero.ui-panel-hero,
.courses-form-hero.ui-panel-hero,
.courses-choreo-form-hero.ui-panel-hero,
.courses-choreo-delete-hero.ui-panel-hero,
.courses-delete-hero.ui-panel-hero,
.course-student-picker-hero.ui-panel-hero {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  box-sizing: border-box;
}

.courses-panel-hero.ui-panel-hero,
.courses-view-hero.ui-panel-hero {
  align-items: center !important;
  min-height: clamp(300px, 23vw, 430px) !important;
  padding: clamp(2.15rem, 4.5vw, 5rem) clamp(2rem, 4.8vw, 5.5rem) !important;
}

.courses-form-hero.ui-panel-hero,
.courses-choreo-form-hero.ui-panel-hero,
.courses-choreo-delete-hero.ui-panel-hero,
.courses-delete-hero.ui-panel-hero,
.course-student-picker-hero.ui-panel-hero {
  min-height: clamp(130px, 11vw, 172px) !important;
  padding: clamp(1.35rem, 2.8vw, 2.1rem) clamp(1.35rem, 3.6vw, 3.25rem) !important;
}

.courses-panel-hero.ui-panel-hero .ui-panel-hero__copy,
.courses-view-hero.ui-panel-hero .ui-panel-hero__copy,
.courses-form-hero.ui-panel-hero .ui-panel-hero__copy,
.courses-choreo-form-hero.ui-panel-hero .ui-panel-hero__copy,
.courses-choreo-delete-hero.ui-panel-hero .ui-panel-hero__copy,
.courses-delete-hero.ui-panel-hero .ui-panel-hero__copy,
.course-student-picker-hero.ui-panel-hero .ui-panel-hero__copy {
  min-width: 0;
  max-width: 100%;
}

.courses-panel-hero.ui-panel-hero .ui-panel-hero__title,
.courses-view-hero.ui-panel-hero .ui-panel-hero__title {
  max-width: min(100%, 840px);
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.courses-panel-hero.ui-panel-hero .ui-panel-hero__description,
.courses-view-hero.ui-panel-hero .ui-panel-hero__description,
.courses-form-hero.ui-panel-hero .ui-panel-hero__description,
.courses-choreo-form-hero.ui-panel-hero .ui-panel-hero__description,
.courses-choreo-delete-hero.ui-panel-hero .ui-panel-hero__description,
.courses-delete-hero.ui-panel-hero .ui-panel-hero__description,
.course-student-picker-hero.ui-panel-hero .ui-panel-hero__description {
  max-width: min(100%, 760px);
  text-wrap: pretty;
}

.courses-panel-hero.ui-panel-hero .ui-panel-hero__stats,
.courses-view-hero.ui-panel-hero .ui-panel-hero__stats {
  min-width: 0;
}

.courses-view-hero.ui-panel-hero .ui-panel-hero__stat strong,
.courses-view-hero.ui-panel-hero .ui-panel-hero__stat small,
.courses-panel-hero.ui-panel-hero .ui-panel-hero__stat strong,
.courses-panel-hero.ui-panel-hero .ui-panel-hero__stat small {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.courses-hero--cta-top-right.ui-panel-hero .ui-panel-hero__actions {
  top: clamp(1rem, 1.9vw, 1.55rem) !important;
  right: clamp(1rem, 2.4vw, 2rem) !important;
}

.course-view-panel-body--v42 .student-courses-admin,
.course-view-panel-body--v42 .course-choreos-admin,
.courses-panel-list,
.course-form-panel-body .course-form,
.course-choreography-form-panel-body #course-choreography-form,
.course-student-picker-results,
.course-student-picker-search {
  width: min(100%, var(--courses-content-readable-width, 1380px));
  margin-inline: auto;
}

@media (min-width: 1181px) {
  .courses-panel-hero.ui-panel-hero,
  .courses-view-hero.ui-panel-hero {
    grid-template-columns: minmax(0, 1.12fr) minmax(390px, .58fr) !important;
    gap: clamp(2.2rem, 4vw, 5.25rem) !important;
  }

  .courses-view-hero.ui-panel-hero .ui-panel-hero__stats {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1024px) and (max-width: 1180px) {
  .courses-panel-hero.ui-panel-hero,
  .courses-view-hero.ui-panel-hero {
    grid-template-columns: 1fr !important;
    gap: clamp(1.35rem, 2.8vw, 2rem) !important;
    min-height: clamp(320px, 34vw, 390px) !important;
  }

  .courses-panel-hero.ui-panel-hero .ui-panel-hero__stats {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-self: end;
  }

  .courses-view-hero.ui-panel-hero .ui-panel-hero__stats {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-self: end;
  }

  .courses-panel-hero.ui-panel-hero .ui-panel-hero__title,
  .courses-view-hero.ui-panel-hero .ui-panel-hero__title {
    font-size: clamp(3.25rem, 7vw, 4.8rem) !important;
  }
}

@media (max-width: 1023px) {
  body.is-dashboard-shell-visible #dashboard-view > .courses-panel-content,
  body.is-dashboard-shell-visible #dashboard-view > .course-view-panel-body,
  body.is-dashboard-shell-visible #dashboard-view > .course-form-panel-body,
  body.is-dashboard-shell-visible #dashboard-view > .course-choreography-form-panel-body,
  body.is-dashboard-shell-visible #dashboard-view > .course-choreography-delete-panel-body,
  body.is-dashboard-shell-visible #dashboard-view > .course-delete-panel-body,
  body.is-dashboard-shell-visible #dashboard-view > .course-student-picker-panel-body {
    --courses-hero-edge-bleed: 0px;
  }

  .courses-panel-content > [data-courses-panel-hero],
  .course-view-panel-body > [data-courses-view-hero],
  .course-form-panel-body > [data-course-form-hero],
  .course-choreography-form-panel-body > [data-course-choreo-form-hero],
  .course-choreography-delete-panel-body > [data-course-choreo-delete-hero],
  .course-delete-panel-body > [data-course-delete-hero],
  .course-student-picker-panel-body > [data-course-student-picker-hero] {
    margin-bottom: clamp(.85rem, 2.8vw, 1rem) !important;
  }

  .courses-panel-hero.ui-panel-hero,
  .courses-view-hero.ui-panel-hero,
  .courses-form-hero.ui-panel-hero,
  .courses-choreo-form-hero.ui-panel-hero,
  .courses-choreo-delete-hero.ui-panel-hero,
  .courses-delete-hero.ui-panel-hero,
  .course-student-picker-hero.ui-panel-hero {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
    padding: clamp(1rem, 3.4vw, 1.45rem) clamp(1rem, 3.6vw, 1.45rem) !important;
  }

  .courses-panel-hero.ui-panel-hero .ui-panel-hero__stats,
  .courses-view-hero.ui-panel-hero .ui-panel-hero__stats,
  .courses-form-hero.ui-panel-hero .ui-panel-hero__stats,
  .courses-choreo-form-hero.ui-panel-hero .ui-panel-hero__stats,
  .courses-choreo-delete-hero.ui-panel-hero .ui-panel-hero__stats,
  .courses-delete-hero.ui-panel-hero .ui-panel-hero__stats,
  .course-student-picker-hero.ui-panel-hero .ui-panel-hero__stats {
    display: none !important;
  }

  .courses-panel-hero.ui-panel-hero .ui-panel-hero__title,
  .courses-view-hero.ui-panel-hero .ui-panel-hero__title,
  .courses-form-hero.ui-panel-hero .ui-panel-hero__title,
  .courses-choreo-form-hero.ui-panel-hero .ui-panel-hero__title,
  .courses-choreo-delete-hero.ui-panel-hero .ui-panel-hero__title,
  .courses-delete-hero.ui-panel-hero .ui-panel-hero__title,
  .course-student-picker-hero.ui-panel-hero .ui-panel-hero__title {
    font-size: clamp(1.55rem, 6.2vw, 2.15rem) !important;
    line-height: .95 !important;
    max-width: calc(100% - 7.8rem);
  }

  .courses-hero--cta-top-right.ui-panel-hero .ui-panel-hero__description,
  .courses-hero--cta-top-right.ui-panel-hero .ui-panel-hero__eyebrow {
    max-width: calc(100% - 7.8rem);
  }

  .courses-hero--cta-top-right.ui-panel-hero .ui-panel-hero__actions {
    top: .75rem !important;
    right: .75rem !important;
    max-width: 7.5rem !important;
  }
}

/* V42.0.10 — heroes vraiment bord à bord + CTA plats + suppression en barre */
body.is-dashboard-shell-visible:has(#dashboard-view > .courses-panel-content) #dashboard-view,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-view-panel-body) #dashboard-view,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-form-panel-body) #dashboard-view,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-choreography-form-panel-body) #dashboard-view,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-choreography-delete-panel-body) #dashboard-view,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-delete-panel-body) #dashboard-view,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-student-picker-panel-body) #dashboard-view {
  overflow-x: visible !important;
}

body.is-dashboard-shell-visible:has(#dashboard-view > .courses-panel-content) .dashboard-app-main,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-view-panel-body) .dashboard-app-main,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-form-panel-body) .dashboard-app-main,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-choreography-form-panel-body) .dashboard-app-main,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-choreography-delete-panel-body) .dashboard-app-main,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-delete-panel-body) .dashboard-app-main,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-student-picker-panel-body) .dashboard-app-main {
  overflow-x: visible !important;
}

@media (min-width: 1024px) {
  body.is-dashboard-shell-visible #dashboard-view > .courses-panel-content,
  body.is-dashboard-shell-visible #dashboard-view > .course-view-panel-body,
  body.is-dashboard-shell-visible #dashboard-view > .course-form-panel-body,
  body.is-dashboard-shell-visible #dashboard-view > .course-choreography-form-panel-body,
  body.is-dashboard-shell-visible #dashboard-view > .course-choreography-delete-panel-body,
  body.is-dashboard-shell-visible #dashboard-view > .course-delete-panel-body,
  body.is-dashboard-shell-visible #dashboard-view > .course-student-picker-panel-body {
    --courses-hero-fullbleed-left: calc(var(--dashboard-shell-content-left, 0px) + var(--dashboard-panel-inline-padding, 0px));
    --courses-hero-content-left: calc(var(--dashboard-shell-content-left, 0px) + clamp(2.2rem, 4.5vw, 5.8rem));
    --courses-hero-content-right: clamp(2.2rem, 4.5vw, 5.8rem);
  }

  .courses-panel-content > [data-courses-panel-hero],
  .course-view-panel-body > [data-courses-view-hero],
  .course-form-panel-body > [data-course-form-hero],
  .course-choreography-form-panel-body > [data-course-choreo-form-hero],
  .course-choreography-delete-panel-body > [data-course-choreo-delete-hero],
  .course-delete-panel-body > [data-course-delete-hero],
  .course-student-picker-panel-body > [data-course-student-picker-hero] {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(var(--courses-hero-fullbleed-left, 0px) * -1) !important;
    margin-right: 0 !important;
  }

  .courses-panel-hero.ui-panel-hero,
  .courses-view-hero.ui-panel-hero {
    min-height: clamp(360px, 31vw, 520px) !important;
    padding: clamp(3.2rem, 5.8vw, 7rem) var(--courses-hero-content-right) clamp(3.2rem, 5.8vw, 7rem) var(--courses-hero-content-left) !important;
  }

  .courses-form-hero.ui-panel-hero,
  .courses-choreo-form-hero.ui-panel-hero,
  .courses-choreo-delete-hero.ui-panel-hero,
  .courses-delete-hero.ui-panel-hero,
  .course-student-picker-hero.ui-panel-hero {
    min-height: clamp(142px, 13vw, 204px) !important;
    padding: clamp(1.6rem, 3.1vw, 2.7rem) var(--courses-hero-content-right) clamp(1.6rem, 3.1vw, 2.7rem) var(--courses-hero-content-left) !important;
  }

  .courses-hero--cta-top-right.ui-panel-hero .ui-panel-hero__actions {
    top: clamp(1.35rem, 2.35vw, 2.25rem) !important;
    right: var(--courses-hero-content-right) !important;
  }
}

@media (max-width: 1023px) {
  body.is-dashboard-shell-visible #dashboard-view > .courses-panel-content,
  body.is-dashboard-shell-visible #dashboard-view > .course-view-panel-body,
  body.is-dashboard-shell-visible #dashboard-view > .course-form-panel-body,
  body.is-dashboard-shell-visible #dashboard-view > .course-choreography-form-panel-body,
  body.is-dashboard-shell-visible #dashboard-view > .course-choreography-delete-panel-body,
  body.is-dashboard-shell-visible #dashboard-view > .course-delete-panel-body,
  body.is-dashboard-shell-visible #dashboard-view > .course-student-picker-panel-body {
    --courses-hero-mobile-shell-gap: clamp(0.75rem, 2vw, 1rem);
  }

  .courses-panel-content > [data-courses-panel-hero],
  .course-view-panel-body > [data-courses-view-hero],
  .course-form-panel-body > [data-course-form-hero],
  .course-choreography-form-panel-body > [data-course-choreo-form-hero],
  .course-choreography-delete-panel-body > [data-course-choreo-delete-hero],
  .course-delete-panel-body > [data-course-delete-hero],
  .course-student-picker-panel-body > [data-course-student-picker-hero] {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(var(--courses-hero-mobile-shell-gap, 0px) * -1) !important;
    margin-right: 0 !important;
  }

  .courses-panel-hero.ui-panel-hero,
  .courses-view-hero.ui-panel-hero,
  .courses-form-hero.ui-panel-hero,
  .courses-choreo-form-hero.ui-panel-hero,
  .courses-choreo-delete-hero.ui-panel-hero,
  .courses-delete-hero.ui-panel-hero,
  .course-student-picker-hero.ui-panel-hero {
    padding-left: calc(var(--courses-hero-mobile-shell-gap, 0px) + clamp(.85rem, 3vw, 1.1rem)) !important;
    padding-right: calc(var(--courses-hero-mobile-shell-gap, 0px) + clamp(.85rem, 3vw, 1.1rem)) !important;
  }

  .courses-hero--cta-top-right.ui-panel-hero .ui-panel-hero__actions {
    top: .85rem !important;
    right: calc(var(--courses-hero-mobile-shell-gap, 0px) + .85rem) !important;
  }
}

.courses-panel-hero.ui-panel-hero,
.courses-view-hero.ui-panel-hero,
.courses-form-hero.ui-panel-hero,
.courses-choreo-form-hero.ui-panel-hero,
.courses-choreo-delete-hero.ui-panel-hero,
.courses-delete-hero.ui-panel-hero,
.course-student-picker-hero.ui-panel-hero {
  border-radius: 0 !important;
  border-inline: 0 !important;
  box-shadow: none !important;
}

.courses-hero-action,
.courses-hero-action--save,
.courses-hero-action--edit,
.courses-hero-action--danger,
.courses-hero-action--flat {
  min-height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: color-mix(in srgb, var(--course-style-color, var(--theme-primary, #38bdf8)) 78%, var(--theme-text, #ffffff) 22%) !important;
  gap: .48rem !important;
  text-shadow: 0 12px 28px color-mix(in srgb, #000 38%, transparent);
}

.courses-hero-action--save {
  color: color-mix(in srgb, #22c55e 76%, var(--theme-text, #ffffff) 24%) !important;
}

.courses-hero-action--danger {
  color: color-mix(in srgb, #ef4444 70%, #fff 30%) !important;
}

.courses-hero-action i {
  display: inline-grid;
  place-items: center;
  font-size: 1.04em;
  line-height: 1;
}

.courses-hero-action span {
  font-weight: 950;
  letter-spacing: .01em;
}

.courses-hero-action:hover,
.courses-hero-action:focus-visible {
  color: var(--theme-text, #ffffff) !important;
  transform: translateY(-1px);
}

.courses-hero-action.ui-safe-delete.is-delete-arming::before,
.courses-hero-action.ui-safe-delete.is-delete-arming::after {
  display: none !important;
}

.courses-hero-action.ui-safe-delete.is-delete-arming[disabled],
.courses-hero-action.ui-safe-delete.is-delete-arming.is-disabled {
  opacity: .46 !important;
  filter: grayscale(.15) saturate(.7) !important;
}

.courses-delete-countdown-bar {
  --delete-progress: 1;
  width: min(100%, var(--courses-content-readable-width, 1380px));
  height: 3px;
  margin: clamp(.65rem, 1.2vw, .9rem) auto clamp(.65rem, 1.2vw, .9rem);
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, #ef4444 16%, transparent);
  opacity: .95;
}

.courses-delete-countdown-bar > span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  transform-origin: left center;
  transform: scaleX(var(--delete-progress, 1));
  background: linear-gradient(90deg, #facc15, #fb923c, #ef4444);
  box-shadow: 0 0 18px color-mix(in srgb, #ef4444 52%, transparent);
  transition: transform 80ms linear, opacity 180ms ease;
}

.courses-delete-countdown-bar.is-delete-ready > span {
  opacity: .16;
}

@media (max-width: 1023px) {
  .courses-hero-action,
  .courses-hero-action--save,
  .courses-hero-action--edit,
  .courses-hero-action--danger,
  .courses-hero-action--flat {
    width: 2.45rem !important;
    min-width: 2.45rem !important;
    height: 2.45rem !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  .courses-hero-action span {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .courses-hero-action i {
    font-size: 1.24rem;
  }

  .courses-delete-countdown-bar {
    width: calc(100% - 1rem);
    margin-top: .55rem;
    margin-bottom: .55rem;
  }
}

/* V42.0.11 — finalisation heroes plein écran, recherche navbar sans flou, badges/cartes lisibles */
@media (max-width: 1023px) {
  .courses-panel-content > [data-courses-panel-hero],
  .course-view-panel-body > [data-courses-view-hero],
  .course-form-panel-body > [data-course-form-hero],
  .course-choreography-form-panel-body > [data-course-choreo-form-hero],
  .course-choreography-delete-panel-body > [data-course-choreo-delete-hero],
  .course-delete-panel-body > [data-course-delete-hero],
  .course-student-picker-panel-body > [data-course-student-picker-hero] {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }

  .courses-panel-content > [data-courses-panel-hero] > .ui-panel-hero,
  .course-view-panel-body > [data-courses-view-hero] > .ui-panel-hero,
  .course-form-panel-body > [data-course-form-hero] > .ui-panel-hero,
  .course-choreography-form-panel-body > [data-course-choreo-form-hero] > .ui-panel-hero,
  .course-choreography-delete-panel-body > [data-course-choreo-delete-hero] > .ui-panel-hero,
  .course-delete-panel-body > [data-course-delete-hero] > .ui-panel-hero,
  .course-student-picker-panel-body > [data-course-student-picker-hero] > .ui-panel-hero {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }

  .courses-panel-content > [data-courses-panel-hero] > .ui-panel-hero,
  .course-view-panel-body > [data-courses-view-hero] > .ui-panel-hero,
  .course-form-panel-body > [data-course-form-hero] > .ui-panel-hero,
  .course-choreography-form-panel-body > [data-course-choreo-form-hero] > .ui-panel-hero,
  .course-choreography-delete-panel-body > [data-course-choreo-delete-hero] > .ui-panel-hero,
  .course-delete-panel-body > [data-course-delete-hero] > .ui-panel-hero,
  .course-student-picker-panel-body > [data-course-student-picker-hero] > .ui-panel-hero {
    padding-left: max(env(safe-area-inset-left, 0px), clamp(1rem, 4.4vw, 1.35rem)) !important;
    padding-right: max(env(safe-area-inset-right, 0px), clamp(1rem, 4.4vw, 1.35rem)) !important;
  }

  .courses-hero--cta-top-right.ui-panel-hero .ui-panel-hero__actions {
    right: max(env(safe-area-inset-right, 0px), .85rem) !important;
  }
}

.mobile-shell-navbar .courses-searchbar--navbar,
.mobile-shell-navbar .courses-searchbar--navbar:focus-within {
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-color: color-mix(in srgb, var(--color-border-subtle, #94a3b8) 58%, transparent) !important;
}

.mobile-shell-navbar .courses-searchbar--navbar::before,
.mobile-shell-navbar .courses-searchbar--navbar::after {
  display: none !important;
}

.mobile-shell-navbar .courses-searchbar--navbar .courses-searchbar__input {
  min-width: 0 !important;
}

body.is-dashboard-shell-visible .mobile-shell-navbar.has-custom-center.is-mobile-mode .mobile-shell-navbar__center.has-custom-center,
body.is-dashboard-shell-visible .mobile-shell-navbar.has-custom-center.is-tablet-mode .mobile-shell-navbar__center.has-custom-center,
body.is-dashboard-shell-visible .mobile-shell-navbar.has-custom-center.is-desktop-mode .mobile-shell-navbar__center.has-custom-center {
  overflow: hidden !important;
}

.course-card.course-card--accent .course-level-badge.style-badge {
  --badge-color: var(--ui-accent-card-color, var(--theme-primary, #38bdf8));
  font-weight: 900;
}

html:not([data-theme="dark"]) .course-card.course-card--accent.ui-accent-card,
html:not([data-theme="dark"]) .course-add-card.ui-accent-card {
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--ui-accent-card-color, #38bdf8) 26%, transparent), transparent 40%),
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--ui-accent-card-color, #38bdf8) 14%, transparent), transparent 38%),
    linear-gradient(145deg,
      color-mix(in srgb, #ffffff 88%, var(--ui-accent-card-color, #38bdf8) 12%),
      color-mix(in srgb, #f8fafc 78%, var(--ui-accent-card-color, #38bdf8) 22%));
  border-color: color-mix(in srgb, var(--ui-accent-card-color, #38bdf8) 52%, var(--color-border-subtle, #94a3b8) 48%);
  box-shadow:
    0 16px 40px color-mix(in srgb, var(--ui-accent-card-color, #38bdf8) 13%, transparent),
    0 12px 30px color-mix(in srgb, #0f172a 9%, transparent),
    inset 0 1px 0 rgba(255,255,255,.74);
}


html:not([data-theme="dark"]) .course-card.course-card--accent .course-level-badge.style-badge {
  color: color-mix(in srgb, #0f172a 76%, var(--ui-accent-card-color, #38bdf8) 24%);
  border-color: color-mix(in srgb, var(--ui-accent-card-color, #38bdf8) 50%, #fff 50%);
  background:
    radial-gradient(circle at 20% 5%, rgba(255,255,255,.78), transparent 48%),
    color-mix(in srgb, var(--ui-accent-card-color, #38bdf8) 22%, #ffffff 78%);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--ui-accent-card-color, #38bdf8) 18%, transparent);
}


/* V42.0.12 — full-bleed strict, cartes sans hover, rails fondus, badges sans anneau */
body.is-dashboard-shell-visible:has(#dashboard-view > .courses-panel-content) #dashboard-view,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-view-panel-body) #dashboard-view,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-form-panel-body) #dashboard-view,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-choreography-form-panel-body) #dashboard-view,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-choreography-delete-panel-body) #dashboard-view,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-delete-panel-body) #dashboard-view,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-student-picker-panel-body) #dashboard-view {
  overflow-x: clip !important;
}

.courses-panel-content > [data-courses-panel-hero],
.course-view-panel-body > [data-courses-view-hero],
.course-form-panel-body > [data-course-form-hero],
.course-choreography-form-panel-body > [data-course-choreo-form-hero],
.course-choreography-delete-panel-body > [data-course-choreo-delete-hero],
.course-delete-panel-body > [data-course-delete-hero],
.course-student-picker-panel-body > [data-course-student-picker-hero] {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  box-sizing: border-box !important;
}

.courses-panel-hero.ui-panel-hero,
.courses-view-hero.ui-panel-hero,
.courses-form-hero.ui-panel-hero,
.courses-choreo-form-hero.ui-panel-hero,
.courses-choreo-delete-hero.ui-panel-hero,
.courses-delete-hero.ui-panel-hero,
.course-student-picker-hero.ui-panel-hero {
  border-radius: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

@media (min-width: 1024px) {
  .courses-panel-hero.ui-panel-hero,
  .courses-view-hero.ui-panel-hero {
    min-height: clamp(250px, 23vw, 340px) !important;
    padding:
      clamp(2.25rem, 3.6vw, 4rem)
      clamp(2.2rem, 4vw, 4.8rem)
      clamp(2.1rem, 3.4vw, 3.7rem)
      calc(var(--dashboard-shell-content-left, 0px) + clamp(1.8rem, 3.2vw, 4.2rem)) !important;
  }

  .courses-form-hero.ui-panel-hero,
  .courses-choreo-form-hero.ui-panel-hero,
  .courses-choreo-delete-hero.ui-panel-hero,
  .courses-delete-hero.ui-panel-hero,
  .course-student-picker-hero.ui-panel-hero {
    min-height: clamp(118px, 9vw, 154px) !important;
    padding:
      clamp(1.25rem, 2.2vw, 1.8rem)
      clamp(2rem, 3.4vw, 4rem)
      clamp(1.15rem, 2vw, 1.65rem)
      calc(var(--dashboard-shell-content-left, 0px) + clamp(1.45rem, 2.6vw, 3.6rem)) !important;
  }

  .courses-panel-hero.ui-panel-hero .ui-panel-hero__title,
  .courses-view-hero.ui-panel-hero .ui-panel-hero__title {
    font-size: clamp(3.25rem, 5vw, 5.45rem) !important;
  }

  .courses-form-hero.ui-panel-hero .ui-panel-hero__title,
  .courses-choreo-form-hero.ui-panel-hero .ui-panel-hero__title,
  .courses-choreo-delete-hero.ui-panel-hero .ui-panel-hero__title,
  .courses-delete-hero.ui-panel-hero .ui-panel-hero__title,
  .course-student-picker-hero.ui-panel-hero .ui-panel-hero__title {
    font-size: clamp(2rem, 3vw, 3.1rem) !important;
  }

  .courses-hero--cta-top-right.ui-panel-hero .ui-panel-hero__actions {
    top: clamp(1.15rem, 1.8vw, 1.65rem) !important;
    right: clamp(1.6rem, 3vw, 4rem) !important;
  }
}

@media (max-width: 1023px) {
  .courses-panel-hero.ui-panel-hero,
  .courses-view-hero.ui-panel-hero,
  .courses-form-hero.ui-panel-hero,
  .courses-choreo-form-hero.ui-panel-hero,
  .courses-choreo-delete-hero.ui-panel-hero,
  .courses-delete-hero.ui-panel-hero,
  .course-student-picker-hero.ui-panel-hero {
    min-height: auto !important;
    padding:
      clamp(1rem, 3.8vw, 1.35rem)
      max(env(safe-area-inset-right, 0px), clamp(1rem, 4vw, 1.35rem))
      clamp(1rem, 3.8vw, 1.35rem)
      max(env(safe-area-inset-left, 0px), clamp(1rem, 4vw, 1.35rem)) !important;
  }

  .courses-panel-hero.ui-panel-hero .ui-panel-hero__title,
  .courses-view-hero.ui-panel-hero .ui-panel-hero__title,
  .courses-form-hero.ui-panel-hero .ui-panel-hero__title,
  .courses-choreo-form-hero.ui-panel-hero .ui-panel-hero__title,
  .courses-choreo-delete-hero.ui-panel-hero .ui-panel-hero__title,
  .courses-delete-hero.ui-panel-hero .ui-panel-hero__title,
  .course-student-picker-hero.ui-panel-hero .ui-panel-hero__title {
    max-width: calc(100% - 3.4rem) !important;
  }

  .courses-hero--cta-top-right.ui-panel-hero .ui-panel-hero__actions {
    top: .86rem !important;
    right: max(env(safe-area-inset-right, 0px), .86rem) !important;
  }
}


.course-add-card.ui-accent-card,
.course-choreo-card--add.ui-accent-card {
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--ui-accent-card-color, var(--theme-primary, #38bdf8)) 10%, transparent), transparent 42%),
    color-mix(in srgb, var(--color-surface, #fff) 38%, transparent) !important;
  border-color: color-mix(in srgb, var(--ui-accent-card-color, var(--theme-primary, #38bdf8)) 28%, transparent) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 12%, transparent),
    0 12px 30px color-mix(in srgb, #000 7%, transparent) !important;
}

html[data-theme="dark"] .course-add-card.ui-accent-card,
html[data-theme="dark"] .course-choreo-card--add.ui-accent-card {
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--ui-accent-card-color, var(--theme-primary, #38bdf8)) 12%, transparent), transparent 42%),
    color-mix(in srgb, #020617 52%, transparent) !important;
  border-color: color-mix(in srgb, var(--ui-accent-card-color, var(--theme-primary, #38bdf8)) 32%, transparent) !important;
}

html:not([data-theme="dark"]) .course-add-card.ui-accent-card,
html:not([data-theme="dark"]) .course-choreo-card--add.ui-accent-card {
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--ui-accent-card-color, var(--theme-primary, #38bdf8)) 13%, transparent), transparent 44%),
    color-mix(in srgb, #ffffff 54%, transparent) !important;
  border-color: color-mix(in srgb, var(--ui-accent-card-color, var(--theme-primary, #38bdf8)) 30%, rgba(15,23,42,.08)) !important;
}

/* EDQ V42.0.13 — full-bleed définitif, CTA recalés, heroes secondaires bord à bord */
body.is-dashboard-shell-visible:has(#dashboard-view > .courses-panel-content) #app-root,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-view-panel-body) #app-root,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-form-panel-body) #app-root,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-choreography-form-panel-body) #app-root,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-choreography-delete-panel-body) #app-root,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-delete-panel-body) #app-root,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-student-picker-panel-body) #app-root,
body.is-dashboard-shell-visible:has(#dashboard-view > .courses-panel-content) #dashboard-app-shell,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-view-panel-body) #dashboard-app-shell,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-form-panel-body) #dashboard-app-shell,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-choreography-form-panel-body) #dashboard-app-shell,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-choreography-delete-panel-body) #dashboard-app-shell,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-delete-panel-body) #dashboard-app-shell,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-student-picker-panel-body) #dashboard-app-shell,
body.is-dashboard-shell-visible:has(#dashboard-view > .courses-panel-content) .dashboard-app-main,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-view-panel-body) .dashboard-app-main,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-form-panel-body) .dashboard-app-main,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-choreography-form-panel-body) .dashboard-app-main,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-choreography-delete-panel-body) .dashboard-app-main,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-delete-panel-body) .dashboard-app-main,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-student-picker-panel-body) .dashboard-app-main,
body.is-dashboard-shell-visible:has(#dashboard-view > .courses-panel-content) #dashboard-view,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-view-panel-body) #dashboard-view,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-form-panel-body) #dashboard-view,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-choreography-form-panel-body) #dashboard-view,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-choreography-delete-panel-body) #dashboard-view,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-delete-panel-body) #dashboard-view,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-student-picker-panel-body) #dashboard-view {
  overflow-x: visible !important;
}

body.is-dashboard-shell-visible:has(#dashboard-view > .courses-panel-content) #dashboard-view.section,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-view-panel-body) #dashboard-view.section,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-form-panel-body) #dashboard-view.section,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-choreography-form-panel-body) #dashboard-view.section,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-choreography-delete-panel-body) #dashboard-view.section,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-delete-panel-body) #dashboard-view.section,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-student-picker-panel-body) #dashboard-view.section {
  overflow-x: visible !important;
}

@media (min-width: 1024px) {
  body.is-dashboard-shell-visible #dashboard-view > .courses-panel-content,
  body.is-dashboard-shell-visible #dashboard-view > .course-view-panel-body,
  body.is-dashboard-shell-visible #dashboard-view > .course-form-panel-body,
  body.is-dashboard-shell-visible #dashboard-view > .course-choreography-form-panel-body,
  body.is-dashboard-shell-visible #dashboard-view > .course-choreography-delete-panel-body,
  body.is-dashboard-shell-visible #dashboard-view > .course-delete-panel-body,
  body.is-dashboard-shell-visible #dashboard-view > .course-student-picker-panel-body {
    --courses-hero-fullbleed-left: calc(var(--dashboard-shell-content-left, 0px) + var(--dashboard-panel-inline-padding, 0px));
    --courses-hero-inner-left: calc(var(--dashboard-shell-content-left, 0px) + clamp(2rem, 3.4vw, 4.25rem));
    --courses-hero-inner-right: clamp(1.8rem, 3.25vw, 4.25rem);
  }

  .courses-panel-content > [data-courses-panel-hero],
  .course-view-panel-body > [data-courses-view-hero],
  .course-form-panel-body > [data-course-form-hero],
  .course-choreography-form-panel-body > [data-course-choreo-form-hero],
  .course-choreography-delete-panel-body > [data-course-choreo-delete-hero],
  .course-delete-panel-body > [data-course-delete-hero],
  .course-student-picker-panel-body > [data-course-student-picker-hero] {
    position: relative !important;
    width: 100vw !important;
    max-width: 100vw !important;
    left: auto !important;
    right: auto !important;
    margin-left: calc(var(--courses-hero-fullbleed-left, 0px) * -1) !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  .courses-panel-content > [data-courses-panel-hero] > .ui-panel-hero,
  .course-view-panel-body > [data-courses-view-hero] > .ui-panel-hero,
  .course-form-panel-body > [data-course-form-hero] > .ui-panel-hero,
  .course-choreography-form-panel-body > [data-course-choreo-form-hero] > .ui-panel-hero,
  .course-choreography-delete-panel-body > [data-course-choreo-delete-hero] > .ui-panel-hero,
  .course-delete-panel-body > [data-course-delete-hero] > .ui-panel-hero,
  .course-student-picker-panel-body > [data-course-student-picker-hero] > .ui-panel-hero {
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }

  .courses-panel-hero.ui-panel-hero,
  .courses-view-hero.ui-panel-hero {
    min-height: clamp(230px, 19vw, 300px) !important;
    padding: clamp(2rem, 3.25vw, 3.7rem) var(--courses-hero-inner-right) clamp(1.9rem, 3vw, 3.4rem) var(--courses-hero-inner-left) !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(280px, .72fr) !important;
    gap: clamp(1.5rem, 3vw, 3.8rem) !important;
  }

  .courses-panel-hero.ui-panel-hero .ui-panel-hero__stats,
  .courses-view-hero.ui-panel-hero .ui-panel-hero__stats {
    align-self: end !important;
    min-width: 0 !important;
  }

  .courses-panel-hero.ui-panel-hero .ui-panel-hero__stat,
  .courses-view-hero.ui-panel-hero .ui-panel-hero__stat {
    min-width: 0 !important;
    min-height: 62px !important;
    padding: .78rem .95rem !important;
  }

  .courses-form-hero.ui-panel-hero,
  .courses-choreo-form-hero.ui-panel-hero,
  .courses-choreo-delete-hero.ui-panel-hero,
  .courses-delete-hero.ui-panel-hero,
  .course-student-picker-hero.ui-panel-hero {
    min-height: clamp(104px, 8vw, 132px) !important;
    padding: clamp(1.05rem, 1.8vw, 1.55rem) var(--courses-hero-inner-right) clamp(1rem, 1.7vw, 1.45rem) var(--courses-hero-inner-left) !important;
  }

  .courses-hero--cta-top-right.ui-panel-hero .ui-panel-hero__actions {
    top: clamp(1rem, 1.55vw, 1.35rem) !important;
    right: var(--courses-hero-inner-right) !important;
    max-width: min(34vw, 18rem) !important;
  }

  .courses-hero--cta-top-right.ui-panel-hero .ui-panel-hero__copy {
    padding-right: min(34vw, 18rem) !important;
  }
}

@media (min-width: 1024px) and (max-width: 1180px) {
  .courses-panel-hero.ui-panel-hero,
  .courses-view-hero.ui-panel-hero {
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: clamp(250px, 24vw, 310px) !important;
  }

  .courses-panel-hero.ui-panel-hero .ui-panel-hero__stats,
  .courses-view-hero.ui-panel-hero .ui-panel-hero__stats {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .courses-view-hero.ui-panel-hero .ui-panel-hero__stats {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1023px) {
  .courses-panel-content > [data-courses-panel-hero],
  .course-view-panel-body > [data-courses-view-hero],
  .course-form-panel-body > [data-course-form-hero],
  .course-choreography-form-panel-body > [data-course-choreo-form-hero],
  .course-choreography-delete-panel-body > [data-course-choreo-delete-hero],
  .course-delete-panel-body > [data-course-delete-hero],
  .course-student-picker-panel-body > [data-course-student-picker-hero] {
    position: relative !important;
    width: 100vw !important;
    max-width: 100vw !important;
    left: auto !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    box-sizing: border-box !important;
  }

  .courses-panel-content > [data-courses-panel-hero] > .ui-panel-hero,
  .course-view-panel-body > [data-courses-view-hero] > .ui-panel-hero,
  .course-form-panel-body > [data-course-form-hero] > .ui-panel-hero,
  .course-choreography-form-panel-body > [data-course-choreo-form-hero] > .ui-panel-hero,
  .course-choreography-delete-panel-body > [data-course-choreo-delete-hero] > .ui-panel-hero,
  .course-delete-panel-body > [data-course-delete-hero] > .ui-panel-hero,
  .course-student-picker-panel-body > [data-course-student-picker-hero] > .ui-panel-hero {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    padding-left: max(env(safe-area-inset-left, 0px), clamp(1rem, 4vw, 1.35rem)) !important;
    padding-right: max(env(safe-area-inset-right, 0px), clamp(1rem, 4vw, 1.35rem)) !important;
  }

  .courses-hero--cta-top-right.ui-panel-hero .ui-panel-hero__actions {
    top: .78rem !important;
    right: max(env(safe-area-inset-right, 0px), .78rem) !important;
  }
}

@media (max-width: 767px), (max-width: 980px) and (max-height: 520px) and (orientation: landscape) {
  .courses-panel-hero.ui-panel-hero,
  .courses-view-hero.ui-panel-hero,
  .courses-form-hero.ui-panel-hero,
  .courses-choreo-form-hero.ui-panel-hero,
  .courses-choreo-delete-hero.ui-panel-hero,
  .courses-delete-hero.ui-panel-hero,
  .course-student-picker-hero.ui-panel-hero {
    min-height: auto !important;
    padding-top: .95rem !important;
    padding-bottom: .95rem !important;
  }
}

/* Pastilles sans cerclage clair parasite */
body.is-dashboard-shell-visible .mobile-shell-navbar__btn.has-badge::after,
body.is-public-mobile-shell-visible .mobile-shell-navbar__btn.has-badge::after,
body.is-public-panel-shell .mobile-shell-navbar__btn.has-badge::after,
.filter-bubbles-trigger.has-badge::after,
.mobile-shell-menu__action-badge,
.mobile-shell-menu__title-badge,
.chat-navbar-badge {
  border: 0 !important;
  outline: 0 !important;
  box-shadow:
    0 8px 18px color-mix(in srgb, #000 18%, transparent),
    0 0 14px color-mix(in srgb, #ef4444 28%, transparent) !important;
}

html[data-theme="light"] body.is-dashboard-shell-visible .mobile-shell-navbar__btn.has-badge::after,
html[data-theme="light"] body.is-public-mobile-shell-visible .mobile-shell-navbar__btn.has-badge::after,
html[data-theme="light"] body.is-public-panel-shell .mobile-shell-navbar__btn.has-badge::after,
html[data-theme="light"] .filter-bubbles-trigger.has-badge::after,
html[data-theme="light"] .mobile-shell-menu__action-badge,
html[data-theme="light"] .mobile-shell-menu__title-badge,
html[data-theme="light"] .chat-navbar-badge,
body[data-theme="light"].is-dashboard-shell-visible .mobile-shell-navbar__btn.has-badge::after,
body[data-theme="light"].is-public-mobile-shell-visible .mobile-shell-navbar__btn.has-badge::after,
body[data-theme="light"].is-public-panel-shell .mobile-shell-navbar__btn.has-badge::after,
body[data-theme="light"] .filter-bubbles-trigger.has-badge::after,
body[data-theme="light"] .mobile-shell-menu__action-badge,
body[data-theme="light"] .mobile-shell-menu__title-badge,
body[data-theme="light"] .chat-navbar-badge {
  border: 0 !important;
  outline: 0 !important;
  box-shadow:
    0 8px 18px rgba(15, 23, 42, .16),
    0 0 12px rgba(239, 68, 68, .18) !important;
}


/* V42.0.14 — full-bleed mesuré JS + navbar owner stable + pastilles sans cerclage */
body.is-dashboard-shell-visible #dashboard-view > .courses-panel-content,
body.is-dashboard-shell-visible #dashboard-view > .course-view-panel-body,
body.is-dashboard-shell-visible #dashboard-view > .course-form-panel-body,
body.is-dashboard-shell-visible #dashboard-view > .course-choreography-form-panel-body,
body.is-dashboard-shell-visible #dashboard-view > .course-choreography-delete-panel-body,
body.is-dashboard-shell-visible #dashboard-view > .course-delete-panel-body,
body.is-dashboard-shell-visible #dashboard-view > .course-student-picker-panel-body {
  --courses-hero-bleed-left-js: 0px;
  --courses-hero-bleed-right-js: 0px;
  --courses-hero-bleed-width-js: 100vw;
  overflow-x: visible !important;
}

.courses-panel-content > [data-courses-panel-hero],
.course-view-panel-body > [data-courses-view-hero],
.course-form-panel-body > [data-course-form-hero],
.course-choreography-form-panel-body > [data-course-choreo-form-hero],
.course-choreography-delete-panel-body > [data-course-choreo-delete-hero],
.course-delete-panel-body > [data-course-delete-hero],
.course-student-picker-panel-body > [data-course-student-picker-hero] {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  display: block !important;
  width: var(--courses-hero-bleed-width-js, 100vw) !important;
  max-width: var(--courses-hero-bleed-width-js, 100vw) !important;
  min-width: var(--courses-hero-bleed-width-js, 100vw) !important;
  margin-left: calc(var(--courses-hero-bleed-left-js, 0px) * -1) !important;
  margin-right: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  z-index: 0;
}

.courses-panel-content > [data-courses-panel-hero] > .ui-panel-hero,
.course-view-panel-body > [data-courses-view-hero] > .ui-panel-hero,
.course-form-panel-body > [data-course-form-hero] > .ui-panel-hero,
.course-choreography-form-panel-body > [data-course-choreo-form-hero] > .ui-panel-hero,
.course-choreography-delete-panel-body > [data-course-choreo-delete-hero] > .ui-panel-hero,
.course-delete-panel-body > [data-course-delete-hero] > .ui-panel-hero,
.course-student-picker-panel-body > [data-course-student-picker-hero] > .ui-panel-hero {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border-inline: 0 !important;
  box-shadow: none !important;
}

@media (min-width: 1024px) {
  .courses-panel-hero.ui-panel-hero,
  .courses-view-hero.ui-panel-hero {
    min-height: clamp(220px, 18vw, 292px) !important;
    padding-top: clamp(2rem, 3vw, 3.25rem) !important;
    padding-right: clamp(2rem, 4vw, 4.8rem) !important;
    padding-bottom: clamp(1.9rem, 2.8vw, 3rem) !important;
    padding-left: calc(var(--courses-hero-bleed-left-js, 0px) + clamp(2rem, 3.5vw, 4.5rem)) !important;
    grid-template-columns: minmax(0, 1.12fr) minmax(300px, .76fr) !important;
    gap: clamp(1.25rem, 2.8vw, 3.6rem) !important;
  }

  .courses-form-hero.ui-panel-hero,
  .courses-choreo-form-hero.ui-panel-hero,
  .courses-choreo-delete-hero.ui-panel-hero,
  .courses-delete-hero.ui-panel-hero,
  .course-student-picker-hero.ui-panel-hero {
    min-height: clamp(104px, 7vw, 132px) !important;
    padding-top: clamp(1rem, 1.6vw, 1.42rem) !important;
    padding-right: clamp(2rem, 3.4vw, 4rem) !important;
    padding-bottom: clamp(.95rem, 1.5vw, 1.35rem) !important;
    padding-left: calc(var(--courses-hero-bleed-left-js, 0px) + clamp(1.7rem, 2.8vw, 3.8rem)) !important;
  }

  .courses-hero--cta-top-right.ui-panel-hero .ui-panel-hero__actions {
    top: clamp(1rem, 1.45vw, 1.32rem) !important;
    right: clamp(1.35rem, 2.4vw, 3rem) !important;
    max-width: min(32vw, 18rem) !important;
  }

  .courses-panel-hero.ui-panel-hero .ui-panel-hero__stats,
  .courses-view-hero.ui-panel-hero .ui-panel-hero__stats {
    align-self: center !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(.65rem, 1vw, .9rem) !important;
  }

  .courses-panel-hero.ui-panel-hero .ui-panel-hero__stat,
  .courses-view-hero.ui-panel-hero .ui-panel-hero__stat {
    min-height: 58px !important;
    padding: .72rem .9rem !important;
    overflow: hidden !important;
  }
}

@media (min-width: 1024px) and (max-width: 1180px) {
  .courses-panel-hero.ui-panel-hero,
  .courses-view-hero.ui-panel-hero {
    grid-template-columns: 1fr !important;
    min-height: clamp(218px, 20vw, 280px) !important;
  }

  .courses-panel-hero.ui-panel-hero .ui-panel-hero__stats,
  .courses-view-hero.ui-panel-hero .ui-panel-hero__stats {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .courses-view-hero.ui-panel-hero .ui-panel-hero__stats {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1023px) {
  .courses-panel-hero.ui-panel-hero,
  .courses-view-hero.ui-panel-hero,
  .courses-form-hero.ui-panel-hero,
  .courses-choreo-form-hero.ui-panel-hero,
  .courses-choreo-delete-hero.ui-panel-hero,
  .courses-delete-hero.ui-panel-hero,
  .course-student-picker-hero.ui-panel-hero {
    min-height: auto !important;
    padding-top: clamp(.92rem, 3vw, 1.12rem) !important;
    padding-right: max(env(safe-area-inset-right, 0px), clamp(.92rem, 3.5vw, 1.22rem)) !important;
    padding-bottom: clamp(.9rem, 3vw, 1.1rem) !important;
    padding-left: max(env(safe-area-inset-left, 0px), clamp(.92rem, 3.5vw, 1.22rem)) !important;
  }

  .courses-hero--cta-top-right.ui-panel-hero .ui-panel-hero__actions {
    top: .72rem !important;
    right: max(env(safe-area-inset-right, 0px), .72rem) !important;
  }
}

body.is-dashboard-shell-visible .mobile-shell-navbar__btn.has-badge::after,
body.is-public-mobile-shell-visible .mobile-shell-navbar__btn.has-badge::after,
body.is-public-panel-shell .mobile-shell-navbar__btn.has-badge::after,
.filter-bubbles-trigger.has-badge::after,
.mobile-shell-menu__action-badge,
.mobile-shell-menu__title-badge,
.chat-navbar-badge {
  border: none !important;
  outline: none !important;
  box-shadow: 0 8px 16px rgba(15, 23, 42, .18) !important;
  background-clip: border-box !important;
}

/* V42.0.15 — heroes secondaires full-bleed, scrollbars masquées, libellés chorés propres */
body.is-dashboard-shell-visible:has(#dashboard-view > .courses-panel-content),
body.is-dashboard-shell-visible:has(#dashboard-view > .course-view-panel-body),
body.is-dashboard-shell-visible:has(#dashboard-view > .course-form-panel-body),
body.is-dashboard-shell-visible:has(#dashboard-view > .course-choreography-form-panel-body),
body.is-dashboard-shell-visible:has(#dashboard-view > .course-choreography-delete-panel-body),
body.is-dashboard-shell-visible:has(#dashboard-view > .course-delete-panel-body),
body.is-dashboard-shell-visible:has(#dashboard-view > .course-student-picker-panel-body) {
  overflow-x: hidden !important;
}

body.is-dashboard-shell-visible:has(#dashboard-view > .courses-panel-content) #dashboard-view,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-view-panel-body) #dashboard-view,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-form-panel-body) #dashboard-view,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-choreography-form-panel-body) #dashboard-view,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-choreography-delete-panel-body) #dashboard-view,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-delete-panel-body) #dashboard-view,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-student-picker-panel-body) #dashboard-view {
  overflow-x: visible !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

body.is-dashboard-shell-visible #dashboard-view > .courses-panel-content,
body.is-dashboard-shell-visible #dashboard-view > .course-view-panel-body,
body.is-dashboard-shell-visible #dashboard-view > .course-form-panel-body,
body.is-dashboard-shell-visible #dashboard-view > .course-choreography-form-panel-body,
body.is-dashboard-shell-visible #dashboard-view > .course-choreography-delete-panel-body,
body.is-dashboard-shell-visible #dashboard-view > .course-delete-panel-body,
body.is-dashboard-shell-visible #dashboard-view > .course-student-picker-panel-body {
  overflow-x: visible !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  scrollbar-gutter: auto !important;
}

body.is-dashboard-shell-visible #dashboard-view::-webkit-scrollbar,
body.is-dashboard-shell-visible #dashboard-view > .courses-panel-content::-webkit-scrollbar,
body.is-dashboard-shell-visible #dashboard-view > .course-view-panel-body::-webkit-scrollbar,
body.is-dashboard-shell-visible #dashboard-view > .course-form-panel-body::-webkit-scrollbar,
body.is-dashboard-shell-visible #dashboard-view > .course-choreography-form-panel-body::-webkit-scrollbar,
body.is-dashboard-shell-visible #dashboard-view > .course-choreography-delete-panel-body::-webkit-scrollbar,
body.is-dashboard-shell-visible #dashboard-view > .course-delete-panel-body::-webkit-scrollbar,
body.is-dashboard-shell-visible #dashboard-view > .course-student-picker-panel-body::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

.courses-panel-content > [data-courses-panel-hero],
.course-view-panel-body > [data-courses-view-hero],
.course-form-panel-body > [data-course-form-hero],
.course-choreography-form-panel-body > [data-course-choreo-form-hero],
.course-choreography-delete-panel-body > [data-course-choreo-delete-hero],
.course-delete-panel-body > [data-course-delete-hero],
.course-student-picker-panel-body > [data-student-picker-hero],
.course-student-picker-panel-body > [data-course-student-picker-hero] {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  display: block !important;
  width: var(--courses-hero-bleed-width-js, 100vw) !important;
  min-width: var(--courses-hero-bleed-width-js, 100vw) !important;
  max-width: var(--courses-hero-bleed-width-js, 100vw) !important;
  margin-left: calc(var(--courses-hero-bleed-left-js, 0px) * -1) !important;
  margin-right: calc(var(--courses-hero-bleed-right-js, 0px) * -1) !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  align-self: flex-start !important;
}

.courses-panel-content > [data-courses-panel-hero] > .ui-panel-hero,
.course-view-panel-body > [data-courses-view-hero] > .ui-panel-hero,
.course-form-panel-body > [data-course-form-hero] > .ui-panel-hero,
.course-choreography-form-panel-body > [data-course-choreo-form-hero] > .ui-panel-hero,
.course-choreography-delete-panel-body > [data-course-choreo-delete-hero] > .ui-panel-hero,
.course-delete-panel-body > [data-course-delete-hero] > .ui-panel-hero,
.course-student-picker-panel-body > [data-student-picker-hero] > .ui-panel-hero,
.course-student-picker-panel-body > [data-course-student-picker-hero] > .ui-panel-hero {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
}

@media (max-width: 1023px) {
  .course-form-panel-body > [data-course-form-hero] > .ui-panel-hero,
  .course-choreography-form-panel-body > [data-course-choreo-form-hero] > .ui-panel-hero,
  .course-choreography-delete-panel-body > [data-course-choreo-delete-hero] > .ui-panel-hero,
  .course-delete-panel-body > [data-course-delete-hero] > .ui-panel-hero,
  .course-student-picker-panel-body > [data-student-picker-hero] > .ui-panel-hero,
  .course-student-picker-panel-body > [data-course-student-picker-hero] > .ui-panel-hero {
    min-height: auto !important;
    padding-top: clamp(.92rem, 3vw, 1.15rem) !important;
    padding-bottom: clamp(.92rem, 3vw, 1.15rem) !important;
    padding-left: max(env(safe-area-inset-left, 0px), clamp(.95rem, 4vw, 1.25rem)) !important;
    padding-right: max(env(safe-area-inset-right, 0px), clamp(.95rem, 4vw, 1.25rem)) !important;
  }
}

/* Pastilles/badges : aucune bordure ni halo de cerclage en clair ou sombre. */
body.is-dashboard-shell-visible .mobile-shell-navbar__btn.has-badge::after,
body.is-public-mobile-shell-visible .mobile-shell-navbar__btn.has-badge::after,
body.is-public-panel-shell .mobile-shell-navbar__btn.has-badge::after,
.filter-bubbles-trigger.has-badge::after,
.mobile-shell-menu__action-badge,
.mobile-shell-menu__title-badge,
.chat-navbar-badge {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background-clip: padding-box !important;
}

/* EDQ V42.0.16 — structure hero full-bleed propre et contenu recadré */
body.is-dashboard-shell-visible:has(#dashboard-view > .courses-panel-content),
body.is-dashboard-shell-visible:has(#dashboard-view > .course-view-panel-body),
body.is-dashboard-shell-visible:has(#dashboard-view > .course-form-panel-body),
body.is-dashboard-shell-visible:has(#dashboard-view > .course-choreography-form-panel-body),
body.is-dashboard-shell-visible:has(#dashboard-view > .course-choreography-delete-panel-body),
body.is-dashboard-shell-visible:has(#dashboard-view > .course-delete-panel-body),
body.is-dashboard-shell-visible:has(#dashboard-view > .course-student-picker-panel-body) {
  overflow-x: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

body.is-dashboard-shell-visible:has(#dashboard-view > .courses-panel-content)::-webkit-scrollbar,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-view-panel-body)::-webkit-scrollbar,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-form-panel-body)::-webkit-scrollbar,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-choreography-form-panel-body)::-webkit-scrollbar,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-choreography-delete-panel-body)::-webkit-scrollbar,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-delete-panel-body)::-webkit-scrollbar,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-student-picker-panel-body)::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

body.is-dashboard-shell-visible:has(#dashboard-view > .courses-panel-content) #app-root,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-view-panel-body) #app-root,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-form-panel-body) #app-root,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-choreography-form-panel-body) #app-root,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-choreography-delete-panel-body) #app-root,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-delete-panel-body) #app-root,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-student-picker-panel-body) #app-root,
body.is-dashboard-shell-visible:has(#dashboard-view > .courses-panel-content) #dashboard-app-shell,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-view-panel-body) #dashboard-app-shell,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-form-panel-body) #dashboard-app-shell,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-choreography-form-panel-body) #dashboard-app-shell,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-choreography-delete-panel-body) #dashboard-app-shell,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-delete-panel-body) #dashboard-app-shell,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-student-picker-panel-body) #dashboard-app-shell,
body.is-dashboard-shell-visible:has(#dashboard-view > .courses-panel-content) .dashboard-app-main,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-view-panel-body) .dashboard-app-main,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-form-panel-body) .dashboard-app-main,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-choreography-form-panel-body) .dashboard-app-main,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-choreography-delete-panel-body) .dashboard-app-main,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-delete-panel-body) .dashboard-app-main,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-student-picker-panel-body) .dashboard-app-main,
body.is-dashboard-shell-visible:has(#dashboard-view > .courses-panel-content) #dashboard-view,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-view-panel-body) #dashboard-view,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-form-panel-body) #dashboard-view,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-choreography-form-panel-body) #dashboard-view,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-choreography-delete-panel-body) #dashboard-view,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-delete-panel-body) #dashboard-view,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-student-picker-panel-body) #dashboard-view,
body.is-dashboard-shell-visible:has(#dashboard-view > .courses-panel-content) #dashboard-view.section,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-view-panel-body) #dashboard-view.section,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-form-panel-body) #dashboard-view.section,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-choreography-form-panel-body) #dashboard-view.section,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-choreography-delete-panel-body) #dashboard-view.section,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-delete-panel-body) #dashboard-view.section,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-student-picker-panel-body) #dashboard-view.section {
  overflow-x: visible !important;
}

body.is-dashboard-shell-visible #dashboard-view > .courses-panel-content,
body.is-dashboard-shell-visible #dashboard-view > .course-view-panel-body,
body.is-dashboard-shell-visible #dashboard-view > .course-form-panel-body,
body.is-dashboard-shell-visible #dashboard-view > .course-choreography-form-panel-body,
body.is-dashboard-shell-visible #dashboard-view > .course-choreography-delete-panel-body,
body.is-dashboard-shell-visible #dashboard-view > .course-delete-panel-body,
body.is-dashboard-shell-visible #dashboard-view > .course-student-picker-panel-body {
  --courses-content-gutter: clamp(0.95rem, 3.6vw, 2rem);
  --courses-content-readable-width: min(100%, 1380px);
  --courses-form-readable-width: 880px;
  padding-inline: 0 !important;
  overflow-x: visible !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

body.is-dashboard-shell-visible #dashboard-view > .courses-panel-content::-webkit-scrollbar,
body.is-dashboard-shell-visible #dashboard-view > .course-view-panel-body::-webkit-scrollbar,
body.is-dashboard-shell-visible #dashboard-view > .course-form-panel-body::-webkit-scrollbar,
body.is-dashboard-shell-visible #dashboard-view > .course-choreography-form-panel-body::-webkit-scrollbar,
body.is-dashboard-shell-visible #dashboard-view > .course-choreography-delete-panel-body::-webkit-scrollbar,
body.is-dashboard-shell-visible #dashboard-view > .course-delete-panel-body::-webkit-scrollbar,
body.is-dashboard-shell-visible #dashboard-view > .course-student-picker-panel-body::-webkit-scrollbar,
body.is-dashboard-shell-visible #dashboard-view *::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

.courses-panel-content > [data-courses-panel-hero],
.course-view-panel-body > [data-courses-view-hero],
.course-form-panel-body > [data-course-form-hero],
.course-choreography-form-panel-body > [data-course-choreo-form-hero],
.course-choreography-delete-panel-body > [data-course-choreo-delete-hero],
.course-delete-panel-body > [data-course-delete-hero],
.course-student-picker-panel-body > [data-student-picker-hero],
.course-student-picker-panel-body > [data-course-student-picker-hero] {
  position: relative !important;
  display: block !important;
  width: var(--courses-hero-bleed-width-js, 100vw) !important;
  min-width: var(--courses-hero-bleed-width-js, 100vw) !important;
  max-width: var(--courses-hero-bleed-width-js, 100vw) !important;
  margin-left: calc(var(--courses-hero-bleed-left-js, 0px) * -1) !important;
  margin-right: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  align-self: flex-start !important;
  overflow: visible !important;
}

.courses-panel-content > [data-courses-panel-hero] > .ui-panel-hero,
.course-view-panel-body > [data-courses-view-hero] > .ui-panel-hero,
.course-form-panel-body > [data-course-form-hero] > .ui-panel-hero,
.course-choreography-form-panel-body > [data-course-choreo-form-hero] > .ui-panel-hero,
.course-choreography-delete-panel-body > [data-course-choreo-delete-hero] > .ui-panel-hero,
.course-delete-panel-body > [data-course-delete-hero] > .ui-panel-hero,
.course-student-picker-panel-body > [data-student-picker-hero] > .ui-panel-hero,
.course-student-picker-panel-body > [data-course-student-picker-hero] > .ui-panel-hero {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border-inline: 0 !important;
  box-shadow: none !important;
}

.courses-panel-content > :not([data-courses-panel-hero]),
.course-view-panel-body > :not([data-courses-view-hero]),
.course-form-panel-body > :not([data-course-form-hero]),
.course-choreography-form-panel-body > :not([data-course-choreo-form-hero]),
.course-choreography-delete-panel-body > :not([data-course-choreo-delete-hero]),
.course-delete-panel-body > :not([data-course-delete-hero]),
.course-student-picker-panel-body > :not([data-student-picker-hero]):not([data-course-student-picker-hero]) {
  width: min(calc(100% - (var(--courses-content-gutter) * 2)), var(--courses-content-readable-width)) !important;
  max-width: var(--courses-content-readable-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.course-form-panel-body > .course-form,
.course-choreography-form-panel-body > .course-choreography-form {
  width: min(calc(100% - (var(--courses-content-gutter) * 2)), var(--courses-form-readable-width)) !important;
  max-width: var(--courses-form-readable-width) !important;
}

.course-view-panel-body > .student-courses-admin,
.course-view-panel-body > .course-choreographies-section,
.courses-panel-content > #courses-panel-list,
.course-student-picker-panel-body > .course-student-picker-list {
  width: min(calc(100% - (var(--courses-content-gutter) * 2)), var(--courses-content-readable-width)) !important;
  max-width: var(--courses-content-readable-width) !important;
}

@media (min-width: 1024px) {
  body.is-dashboard-shell-visible #dashboard-view > .courses-panel-content,
  body.is-dashboard-shell-visible #dashboard-view > .course-view-panel-body,
  body.is-dashboard-shell-visible #dashboard-view > .course-form-panel-body,
  body.is-dashboard-shell-visible #dashboard-view > .course-choreography-form-panel-body,
  body.is-dashboard-shell-visible #dashboard-view > .course-choreography-delete-panel-body,
  body.is-dashboard-shell-visible #dashboard-view > .course-delete-panel-body,
  body.is-dashboard-shell-visible #dashboard-view > .course-student-picker-panel-body {
    --courses-content-gutter: clamp(1.35rem, 2.3vw, 2.8rem);
  }

  .courses-panel-hero.ui-panel-hero,
  .courses-view-hero.ui-panel-hero {
    min-height: clamp(210px, 15vw, 260px) !important;
  }
}

@media (max-width: 1023px) {
  body.is-dashboard-shell-visible #dashboard-view > .courses-panel-content,
  body.is-dashboard-shell-visible #dashboard-view > .course-view-panel-body,
  body.is-dashboard-shell-visible #dashboard-view > .course-form-panel-body,
  body.is-dashboard-shell-visible #dashboard-view > .course-choreography-form-panel-body,
  body.is-dashboard-shell-visible #dashboard-view > .course-choreography-delete-panel-body,
  body.is-dashboard-shell-visible #dashboard-view > .course-delete-panel-body,
  body.is-dashboard-shell-visible #dashboard-view > .course-student-picker-panel-body {
    --courses-content-gutter: clamp(0.65rem, 3vw, 1rem);
  }

  .courses-panel-content > :not([data-courses-panel-hero]),
  .course-view-panel-body > :not([data-courses-view-hero]),
  .course-form-panel-body > :not([data-course-form-hero]),
  .course-choreography-form-panel-body > :not([data-course-choreo-form-hero]),
  .course-choreography-delete-panel-body > :not([data-course-choreo-delete-hero]),
  .course-delete-panel-body > :not([data-course-delete-hero]),
  .course-student-picker-panel-body > :not([data-student-picker-hero]):not([data-course-student-picker-hero]) {
    width: min(calc(100% - (var(--courses-content-gutter) * 2)), var(--courses-content-readable-width)) !important;
  }
}

/* Pastille filtres : zéro bordure réelle, zéro anneau visuel. */
.filter-bubbles-trigger.filter-bubbles-trigger--bottom-right,
.filter-bubbles-trigger.filter-bubbles-trigger--bottom-right.is-open,
.filter-bubbles-trigger.filter-bubbles-trigger--bottom-right.is-active,
.planning-public-mobile-filter-trigger.filter-bubbles-trigger--bottom-right,
.planning-public-mobile-filter-trigger.filter-bubbles-trigger--bottom-right.is-open,
.planning-public-mobile-filter-trigger.filter-bubbles-trigger--bottom-right.is-active {
  border: 0 !important;
  outline: 0 !important;
  background-clip: padding-box !important;
  box-shadow:
    0 1rem 2.4rem color-mix(in srgb, var(--theme-primary, #38bdf8) 18%, transparent),
    0 .65rem 1.7rem rgba(15, 23, 42, .18) !important;
}

.filter-bubbles-trigger.filter-bubbles-trigger--bottom-right::before,
.filter-bubbles-trigger.filter-bubbles-trigger--bottom-right::after,
.planning-public-mobile-filter-trigger.filter-bubbles-trigger--bottom-right::before,
.planning-public-mobile-filter-trigger.filter-bubbles-trigger--bottom-right::after {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.filter-bubbles-trigger.filter-bubbles-trigger--bottom-right.has-badge::after,
.planning-public-mobile-filter-trigger.filter-bubbles-trigger--bottom-right.has-badge::after {
  box-shadow: none !important;
}

/* V42.0.43 — heroes secondaires alignés sur le vrai full-width du Lab. */
.course-form-panel-body > [data-course-form-hero],
.course-choreography-form-panel-body > [data-course-choreo-form-hero],
.course-choreography-delete-panel-body > [data-course-choreo-delete-hero],
.course-delete-panel-body > [data-course-delete-hero],
.course-student-picker-panel-body > [data-student-picker-hero],
.course-student-picker-panel-body > [data-course-student-picker-hero] {
  width: var(--courses-hero-bleed-width-js, 100vw) !important;
  min-width: var(--courses-hero-bleed-width-js, 100vw) !important;
  max-width: var(--courses-hero-bleed-width-js, 100vw) !important;
  margin-left: calc(var(--courses-hero-bleed-left-js, var(--courses-hero-fullbleed-left, var(--courses-hero-mobile-shell-gap, 0px))) * -1) !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.course-form-panel-body > [data-course-form-hero] > .ui-panel-hero,
.course-choreography-form-panel-body > [data-course-choreo-form-hero] > .ui-panel-hero,
.course-choreography-delete-panel-body > [data-course-choreo-delete-hero] > .ui-panel-hero,
.course-delete-panel-body > [data-course-delete-hero] > .ui-panel-hero,
.course-student-picker-panel-body > [data-student-picker-hero] > .ui-panel-hero,
.course-student-picker-panel-body > [data-course-student-picker-hero] > .ui-panel-hero {
  width: 100% !important;
  max-width: none !important;
  border-radius: 0 !important;
  border-inline: 0 !important;
}

@media (min-width: 1024px) {
  .course-form-panel-body > [data-course-form-hero] > .ui-panel-hero,
  .course-choreography-form-panel-body > [data-course-choreo-form-hero] > .ui-panel-hero,
  .course-choreography-delete-panel-body > [data-course-choreo-delete-hero] > .ui-panel-hero,
  .course-delete-panel-body > [data-course-delete-hero] > .ui-panel-hero,
  .course-student-picker-panel-body > [data-student-picker-hero] > .ui-panel-hero,
  .course-student-picker-panel-body > [data-course-student-picker-hero] > .ui-panel-hero {
    padding-left: var(--courses-hero-content-left, calc(var(--dashboard-shell-content-left, 0px) + clamp(2.2rem, 4.5vw, 5.8rem))) !important;
    padding-right: var(--courses-hero-content-right, clamp(2.2rem, 4.5vw, 5.8rem)) !important;
  }
}

@media (max-width: 1023px) {
  .course-form-panel-body > [data-course-form-hero] > .ui-panel-hero,
  .course-choreography-form-panel-body > [data-course-choreo-form-hero] > .ui-panel-hero,
  .course-choreography-delete-panel-body > [data-course-choreo-delete-hero] > .ui-panel-hero,
  .course-delete-panel-body > [data-course-delete-hero] > .ui-panel-hero,
  .course-student-picker-panel-body > [data-student-picker-hero] > .ui-panel-hero,
  .course-student-picker-panel-body > [data-course-student-picker-hero] > .ui-panel-hero {
    padding-left: calc(var(--courses-hero-mobile-shell-gap, 0px) + clamp(.85rem, 3vw, 1.1rem)) !important;
    padding-right: calc(var(--courses-hero-mobile-shell-gap, 0px) + clamp(.85rem, 3vw, 1.1rem)) !important;
  }
}

/* V42.0.44 — sous-panels Cours : heroes réellement bord à bord du panel, sans dépendre du bleed JS viewport. */
body.is-dashboard-shell-visible:has(#dashboard-view > .course-form-panel-body) .dashboard-app-main,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-choreography-form-panel-body) .dashboard-app-main,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-choreography-delete-panel-body) .dashboard-app-main,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-delete-panel-body) .dashboard-app-main,
body.is-dashboard-shell-visible:has(#dashboard-view > .course-student-picker-panel-body) .dashboard-app-main {
  overflow-x: hidden !important;
}

body.is-dashboard-shell-visible #dashboard-view > .course-form-panel-body,
body.is-dashboard-shell-visible #dashboard-view > .course-choreography-form-panel-body,
body.is-dashboard-shell-visible #dashboard-view > .course-choreography-delete-panel-body,
body.is-dashboard-shell-visible #dashboard-view > .course-delete-panel-body,
body.is-dashboard-shell-visible #dashboard-view > .course-student-picker-panel-body {
  width: 100% !important;
  max-width: none !important;
  padding-inline: 0 !important;
  box-sizing: border-box !important;
}

body.is-dashboard-shell-visible #dashboard-view > .course-form-panel-body > [data-course-form-hero],
body.is-dashboard-shell-visible #dashboard-view > .course-choreography-form-panel-body > [data-course-choreo-form-hero],
body.is-dashboard-shell-visible #dashboard-view > .course-choreography-delete-panel-body > [data-course-choreo-delete-hero],
body.is-dashboard-shell-visible #dashboard-view > .course-delete-panel-body > [data-course-delete-hero],
body.is-dashboard-shell-visible #dashboard-view > .course-student-picker-panel-body > [data-student-picker-hero],
body.is-dashboard-shell-visible #dashboard-view > .course-student-picker-panel-body > [data-course-student-picker-hero],
#dashboard-view > .course-form-panel-body > [data-course-form-hero],
#dashboard-view > .course-choreography-form-panel-body > [data-course-choreo-form-hero],
#dashboard-view > .course-choreography-delete-panel-body > [data-course-choreo-delete-hero],
#dashboard-view > .course-delete-panel-body > [data-course-delete-hero],
#dashboard-view > .course-student-picker-panel-body > [data-student-picker-hero],
#dashboard-view > .course-student-picker-panel-body > [data-course-student-picker-hero] {
  display: block !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 !important;
  transform: none !important;
  box-sizing: border-box !important;
  align-self: stretch !important;
}

body.is-dashboard-shell-visible #dashboard-view > .course-form-panel-body > [data-course-form-hero] > .ui-panel-hero,
body.is-dashboard-shell-visible #dashboard-view > .course-choreography-form-panel-body > [data-course-choreo-form-hero] > .ui-panel-hero,
body.is-dashboard-shell-visible #dashboard-view > .course-choreography-delete-panel-body > [data-course-choreo-delete-hero] > .ui-panel-hero,
body.is-dashboard-shell-visible #dashboard-view > .course-delete-panel-body > [data-course-delete-hero] > .ui-panel-hero,
body.is-dashboard-shell-visible #dashboard-view > .course-student-picker-panel-body > [data-student-picker-hero] > .ui-panel-hero,
body.is-dashboard-shell-visible #dashboard-view > .course-student-picker-panel-body > [data-course-student-picker-hero] > .ui-panel-hero,
#dashboard-view > .course-form-panel-body > [data-course-form-hero] > .ui-panel-hero,
#dashboard-view > .course-choreography-form-panel-body > [data-course-choreo-form-hero] > .ui-panel-hero,
#dashboard-view > .course-choreography-delete-panel-body > [data-course-choreo-delete-hero] > .ui-panel-hero,
#dashboard-view > .course-delete-panel-body > [data-course-delete-hero] > .ui-panel-hero,
#dashboard-view > .course-student-picker-panel-body > [data-student-picker-hero] > .ui-panel-hero,
#dashboard-view > .course-student-picker-panel-body > [data-course-student-picker-hero] > .ui-panel-hero {
  width: 100% !important;
  min-width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border-inline: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

@media (min-width: 1024px) {
  body.is-dashboard-shell-visible #dashboard-view > .course-form-panel-body > [data-course-form-hero] > .ui-panel-hero,
  body.is-dashboard-shell-visible #dashboard-view > .course-choreography-form-panel-body > [data-course-choreo-form-hero] > .ui-panel-hero,
  body.is-dashboard-shell-visible #dashboard-view > .course-choreography-delete-panel-body > [data-course-choreo-delete-hero] > .ui-panel-hero,
  body.is-dashboard-shell-visible #dashboard-view > .course-delete-panel-body > [data-course-delete-hero] > .ui-panel-hero,
  body.is-dashboard-shell-visible #dashboard-view > .course-student-picker-panel-body > [data-student-picker-hero] > .ui-panel-hero,
  body.is-dashboard-shell-visible #dashboard-view > .course-student-picker-panel-body > [data-course-student-picker-hero] > .ui-panel-hero {
    padding-left: clamp(2rem, 4.2vw, 4rem) !important;
    padding-right: clamp(2rem, 4.2vw, 4rem) !important;
  }
}

@media (max-width: 1023px) {
  body.is-dashboard-shell-visible:has(#dashboard-view > .course-form-panel-body) .dashboard-app-main,
  body.is-dashboard-shell-visible:has(#dashboard-view > .course-choreography-form-panel-body) .dashboard-app-main,
  body.is-dashboard-shell-visible:has(#dashboard-view > .course-choreography-delete-panel-body) .dashboard-app-main,
  body.is-dashboard-shell-visible:has(#dashboard-view > .course-delete-panel-body) .dashboard-app-main,
  body.is-dashboard-shell-visible:has(#dashboard-view > .course-student-picker-panel-body) .dashboard-app-main {
    padding-inline: 0 !important;
  }

  body.is-dashboard-shell-visible #dashboard-view > .course-form-panel-body > [data-course-form-hero] > .ui-panel-hero,
  body.is-dashboard-shell-visible #dashboard-view > .course-choreography-form-panel-body > [data-course-choreo-form-hero] > .ui-panel-hero,
  body.is-dashboard-shell-visible #dashboard-view > .course-choreography-delete-panel-body > [data-course-choreo-delete-hero] > .ui-panel-hero,
  body.is-dashboard-shell-visible #dashboard-view > .course-delete-panel-body > [data-course-delete-hero] > .ui-panel-hero,
  body.is-dashboard-shell-visible #dashboard-view > .course-student-picker-panel-body > [data-student-picker-hero] > .ui-panel-hero,
  body.is-dashboard-shell-visible #dashboard-view > .course-student-picker-panel-body > [data-course-student-picker-hero] > .ui-panel-hero {
    padding-left: max(.95rem, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(.95rem, env(safe-area-inset-right, 0px)) !important;
  }
}


/* --------------------------------------------------------------------------
   Styles validés V42.0.64
   Ancien fichier : assets/css/courses/courses-panel-pattern.css
   -------------------------------------------------------------------------- */

/* /public_html/assets/css/courses/courses-panel-pattern.css */

:root {
  --courses-panel-nav-height: var(--app-header-safe-height, 64px);
  --courses-panel-left: max(1rem, env(safe-area-inset-left, 0px));
  --courses-panel-right: max(1rem, env(safe-area-inset-right, 0px));
  --courses-panel-content-left: var(--courses-panel-left);
  --courses-panel-content-right: var(--courses-panel-right);
}

@media (min-width: 1024px) {
  :root {
    --courses-panel-content-left: calc(var(--dashboard-shell-content-left, 6rem) + 2rem);
    --courses-panel-content-right: 2rem;
  }
}

body.courses-panel-active {
  overflow: hidden;
}

body.courses-panel-active #dashboard-view {
  overflow: visible !important;
}

body.courses-panel-active .app-header {
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.courses-panel-active .app-header::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 0 auto 0 !important;
  height: calc(var(--edq-navbar-height-current, var(--courses-panel-nav-height)) + clamp(1.65rem, 3.4vw, 2.8rem)) !important;
  pointer-events: none !important;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--color-bg, #020617) 34%, transparent) 0%,
      color-mix(in srgb, var(--color-bg, #020617) 26%, transparent) 45%,
      color-mix(in srgb, var(--color-bg, #020617) 13%, transparent) 72%,
      color-mix(in srgb, var(--color-bg, #020617) 4%, transparent) 88%,
      transparent 100%
    ) !important;
  backdrop-filter: blur(24px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.18) !important;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, rgba(0,0,0,.72) 74%, rgba(0,0,0,.2) 94%, transparent 100%) !important;
  mask-image: linear-gradient(to bottom, #000 0%, #000 52%, rgba(0,0,0,.72) 74%, rgba(0,0,0,.2) 94%, transparent 100%) !important;
}

html[data-theme="light"] body.courses-panel-active .app-header::before,
body[data-theme="light"].courses-panel-active .app-header::before {
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.68) 0%,
      rgba(255,255,255,.48) 45%,
      rgba(255,255,255,.21) 72%,
      rgba(255,255,255,.07) 88%,
      transparent 100%
    ) !important;
}

.courses-panel-root {
  position: fixed;
  z-index: 12;
  inset: 0;
  width: 100vw;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--color-bg, #020617);
  color: var(--color-text, #f8fafc);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.courses-panel-root::-webkit-scrollbar {
  display: none;
}

html[data-theme="light"] .courses-panel-root {
  background: #f7fafc;
}

.courses-panel-view {
  width: 100vw;
  min-height: 100%;
}

.courses-panel-hero {
  position: relative;
  width: 100vw;
  margin: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  border-block: 1px solid color-mix(in srgb, var(--courses-panel-accent, #f472b6) 24%, transparent);
  background:
    radial-gradient(circle at 15% 18%, color-mix(in srgb, #38bdf8 20%, transparent), transparent 28rem),
    radial-gradient(circle at 92% 12%, color-mix(in srgb, #f43f5e 26%, transparent), transparent 30rem),
    linear-gradient(120deg, color-mix(in srgb, var(--color-bg, #020617) 94%, transparent), color-mix(in srgb, var(--color-bg, #020617) 76%, #f43f5e 24%));
}

html[data-theme="light"] .courses-panel-hero {
  background:
    radial-gradient(circle at 15% 18%, color-mix(in srgb, #7dd3fc 34%, transparent), transparent 28rem),
    radial-gradient(circle at 92% 12%, color-mix(in srgb, #f9a8d4 40%, transparent), transparent 30rem),
    linear-gradient(120deg, rgba(255,255,255,.98), rgba(255,255,255,.82));
}

.courses-panel-hero::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: color-mix(in srgb, var(--courses-panel-accent, #f472b6) 32%, transparent);
  pointer-events: none;
}

.courses-panel-hero--main {
  min-height: clamp(14rem, 26vh, 19rem);
}

.courses-panel-hero__inner {
  min-height: inherit;
  padding: calc(var(--courses-panel-nav-height) + clamp(1rem, 2.4vw, 2.45rem)) var(--courses-panel-content-right) clamp(1.25rem, 3vw, 2.8rem) var(--courses-panel-content-left);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(18rem, .8fr);
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
}

.courses-panel-hero__kicker {
  margin: 0 0 .65rem;
  color: #ff2f6d;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.courses-panel-hero h1 {
  margin: 0;
  max-width: 15ch;
  font-size: clamp(2rem, 5vw, 4.3rem);
  line-height: .96;
  letter-spacing: -.08em;
}

.courses-panel-hero p {
  margin: .8rem 0 0;
  max-width: 68ch;
  color: color-mix(in srgb, currentColor 72%, transparent);
  font-weight: 700;
  line-height: 1.45;
}

.courses-panel-hero__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem;
}

.courses-panel-stat-card {
  min-width: 0;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--color-bg, #020617) 56%, transparent);
}

html[data-theme="light"] .courses-panel-stat-card {
  background: rgba(255,255,255,.68);
  box-shadow: 0 18px 44px rgba(15, 23, 42, .08);
}

.courses-panel-stat-card strong {
  display: block;
  font-size: clamp(1.45rem, 3vw, 2rem);
  line-height: .9;
  letter-spacing: -.04em;
}

.courses-panel-stat-card span {
  display: block;
  margin-top: .25rem;
  color: color-mix(in srgb, currentColor 68%, transparent);
  font-size: .8rem;
  font-weight: 800;
}

.courses-panel-hero-action {
  position: absolute;
  top: calc(var(--courses-panel-nav-height) + clamp(.85rem, 1.5vw, 1.25rem));
  right: var(--courses-panel-content-right);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 2.35rem;
  padding: 0 .85rem;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, #f472b6 13%, transparent);
  color: color-mix(in srgb, #f472b6 82%, white);
  font: inherit;
  font-size: .9rem;
  font-weight: 950;
  cursor: pointer;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}

html[data-theme="light"] .courses-panel-hero-action {
  background: color-mix(in srgb, #f472b6 13%, white 87%);
  color: color-mix(in srgb, #be185d 82%, #0f172a 18%);
}

.courses-panel-hero-action--primary {
  color: #38bdf8;
  background: color-mix(in srgb, #38bdf8 14%, transparent);
}

html[data-theme="light"] .courses-panel-hero-action--primary {
  color: #0369a1;
  background: color-mix(in srgb, #38bdf8 18%, white 82%);
}

.courses-panel-hero-action--success {
  color: #22c55e;
  background: color-mix(in srgb, #22c55e 13%, transparent);
}

.courses-panel-hero-action--danger {
  color: #ef4444;
  background: color-mix(in srgb, #ef4444 13%, transparent);
}

.courses-panel-hero-action:focus-visible {
  outline: 3px solid color-mix(in srgb, currentColor 28%, transparent);
  outline-offset: 3px;
}

.courses-panel-hero-action:active {
  transform: scale(.94);
}

.courses-panel-content {
  width: 100vw;
  padding: clamp(1rem, 2.6vw, 2rem) var(--courses-panel-content-right) clamp(4rem, 6vw, 6rem) var(--courses-panel-content-left);
  background: var(--color-bg, #020617);
}

html[data-theme="light"] .courses-panel-content {
  background: #f7fafc;
}

.courses-panel-grid {
  display: grid;
  gap: clamp(.8rem, 2vw, 1.25rem);
}

.courses-panel-grid--courses {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.courses-panel-root .ui-accent-card.course-card--accent,
.courses-panel-root .ui-accent-card.course-add-card {
  min-height: 11rem;
  border-radius: 1.35rem;
  box-shadow: none;
}

.courses-panel-root .ui-accent-card.course-card--accent:hover,
.courses-panel-root .ui-accent-card.course-add-card:hover {
  transform: none !important;
}

.courses-panel-root .ui-accent-card.course-card--accent:active,
.courses-panel-root .ui-accent-card.course-add-card:active {
  transform: none !important;
}

.courses-panel-root .course-add-card {
  --ui-accent-card-color: #818cf8;
  opacity: .74;
  border-style: dashed;
  background: color-mix(in srgb, var(--color-bg, #020617) 94%, #818cf8 6%) !important;
}

html[data-theme="light"] .courses-panel-root .course-add-card {
  background: color-mix(in srgb, white 92%, #818cf8 8%) !important;
}

.courses-panel-root .course-card-header,
.courses-panel-root .course-card-footer {
  display: flex;
  align-items: center;
  gap: .7rem;
}

.courses-panel-root .course-title-line {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-width: 0;
  flex: 1 1 auto;
}

.courses-panel-root .course-style-name {
  font-weight: 900;
  font-size: 1.08rem;
}

.courses-panel-root .course-level-badge {
  margin-left: auto;
  border: 0 !important;
  box-shadow: none !important;
}

.courses-panel-root .course-meta-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: color-mix(in srgb, currentColor 62%, transparent);
  font-weight: 600;
  font-size: .88rem;
}

.courses-panel-root .course-meta-icon {
  color: var(--ui-accent-card-color, #38bdf8);
}

.courses-panel-root .course-card-footer {
  justify-content: space-between;
}

.courses-panel-root .course-students-badge,
.courses-panel-root .course-gala-badge {
  border: 0 !important;
  box-shadow: none !important;
}

.courses-panel-root .course-gala-badge {
  color: #3f2a04;
  background: #fde68a;
}

.courses-panel-filter-root {
  position: fixed;
  z-index: 90;
  right: max(1rem, env(safe-area-inset-right, 0px));
  bottom: max(1rem, env(safe-area-inset-bottom, 0px));
}

.courses-panel-filter-trigger {
  position: relative;
  width: 3.15rem;
  height: 3.15rem;
  display: grid;
  place-items: center;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 999px;
  color: #e0f2fe;
  background:
    radial-gradient(circle at 30% 18%, rgba(255,255,255,.42), transparent 45%),
    linear-gradient(135deg, #0ea5e9, #075985 52%, #0f172a);
  box-shadow: 0 18px 48px rgba(14,165,233,.44), 0 0 0 0 transparent !important;
  cursor: pointer;
}

html[data-theme="light"] .courses-panel-filter-trigger {
  color: #fff;
  background:
    radial-gradient(circle at 30% 18%, rgba(255,255,255,.58), transparent 45%),
    linear-gradient(135deg, #0ea5e9, #0369a1 58%, #075985);
  box-shadow: 0 18px 48px rgba(14,165,233,.36), 0 0 0 0 transparent !important;
}

.courses-panel-filter-trigger::before,
.courses-panel-filter-trigger::after,
.courses-panel-filter-badge::before,
.courses-panel-filter-badge::after {
  content: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.courses-panel-filter-badge {
  position: absolute;
  top: -.45rem;
  right: -.35rem;
  min-width: 1.45rem;
  height: 1.45rem;
  display: inline-grid;
  place-items: center;
  padding: 0 .32rem;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 999px;
  background: #ff2f6d;
  color: white;
  font-size: .68rem;
  font-weight: 900;
  box-shadow: none !important;
}

.courses-panel-filter-cloud {
  position: fixed;
  z-index: 92;
  top: calc(var(--courses-panel-nav-height) + clamp(7.25rem, 13vh, 9.25rem));
  left: 50vw;
  right: auto;
  width: 0;
  height: 0;
  pointer-events: none;
}

.courses-panel-filter-chip {
  --radius: 88px;
  --angle: 0deg;
  --filter-i: 0;
  --filter-r: 0;
  position: absolute;
  left: 0;
  top: 0;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 999px;
  color: color-mix(in srgb, var(--courses-panel-accent, #38bdf8) 42%, white 58%);
  background:
    radial-gradient(circle at 32% 20%, rgba(255,255,255,.18), transparent 44%),
    linear-gradient(145deg,
      color-mix(in srgb, var(--courses-panel-accent, #38bdf8) 44%, #020617 56%),
      color-mix(in srgb, var(--courses-panel-accent, #38bdf8) 24%, #020617 76%)
    );
  box-shadow:
    0 14px 30px color-mix(in srgb, var(--courses-panel-accent, #38bdf8) 18%, transparent),
    0 0 18px color-mix(in srgb, var(--courses-panel-accent, #38bdf8) 12%, transparent);
  text-shadow: 0 1px 8px rgba(0,0,0,.35);
  transform: translate(-50%, -50%) rotate(var(--angle)) translateY(calc(-1 * var(--radius))) rotate(calc(-1 * var(--angle))) scale(.22);
  opacity: 0;
  transition-property: opacity, transform, filter;
  transition-duration: .2s, .38s, .2s;
  transition-timing-function: ease, cubic-bezier(.18, 1.48, .36, 1), ease;
  transition-delay: 0ms;
}

html[data-theme="light"] .courses-panel-filter-chip {
  color: color-mix(in srgb, var(--courses-panel-accent, #38bdf8) 72%, #0f172a 28%);
  background:
    radial-gradient(circle at 32% 20%, rgba(255,255,255,.76), transparent 42%),
    linear-gradient(145deg,
      color-mix(in srgb, var(--courses-panel-accent, #38bdf8) 42%, white 58%),
      color-mix(in srgb, var(--courses-panel-accent, #38bdf8) 60%, white 40%)
    );
  box-shadow:
    0 16px 34px color-mix(in srgb, var(--courses-panel-accent, #38bdf8) 34%, transparent),
    0 0 0 0 transparent !important;
  text-shadow: none;
}

.courses-panel-filter-chip--reset {
  --courses-panel-accent: #cbd5e1;
}

html[data-theme="light"] .courses-panel-filter-chip--reset {
  --courses-panel-accent: #64748b;
}

.courses-panel-filter-chip:not(.is-active) {
  filter: saturate(.52) opacity(.64) brightness(.82);
}

.courses-panel-filter-chip.is-active {
  filter: saturate(1.08) brightness(1.04);
}

body.courses-panel-filters-open .courses-panel-root button,
body.courses-panel-filters-open .courses-panel-root a,
body.courses-panel-filters-open .courses-panel-root [role="button"],
body.courses-panel-filters-open .courses-panel-root .ui-accent-card,
body.courses-panel-filters-open .app-header button,
body.courses-panel-filters-open .app-header a,
body.courses-panel-filters-open .sidebar-icon-button,
body.courses-panel-filters-open .mobile-shell-nav button {
  pointer-events: none !important;
}

body.courses-panel-filters-open .courses-panel-root,
body.courses-panel-filters-open .courses-panel-filter-root,
body.courses-panel-filters-open .courses-panel-filter-root *,
body.courses-panel-filters-open .courses-panel-filter-trigger,
body.courses-panel-filters-open .courses-panel-filter-chip {
  pointer-events: auto !important;
}

.courses-panel-filter-root.is-open .courses-panel-filter-cloud {
  pointer-events: auto;
}

.courses-panel-filter-root.is-open .courses-panel-filter-chip {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(var(--angle)) translateY(calc(-1 * var(--radius))) rotate(calc(-1 * var(--angle))) scale(1);
  transition-delay: calc(var(--filter-i, 0) * 42ms);
}

.courses-panel-filter-root.is-open .courses-panel-filter-chip--reset {
  transform: translate(-50%, -50%) scale(1);
  filter: none;
}

.courses-panel-filter-root.is-closing .courses-panel-filter-cloud {
  pointer-events: none;
}

.courses-panel-filter-root.is-open.is-closing .courses-panel-filter-chip {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(var(--angle)) translateY(calc(-1 * var(--radius))) rotate(calc(-1 * var(--angle))) scale(.22);
  transition-delay: calc(var(--filter-r, 0) * 28ms);
  transition-timing-function: ease, cubic-bezier(.55, 0, .8, .08), ease;
}

.courses-panel-filter-root.is-open.is-closing .courses-panel-filter-chip--reset {
  transform: translate(-50%, -50%) scale(.22);
}


.courses-panel-filter-trigger,
.courses-panel-filter-trigger:hover,
.courses-panel-filter-trigger:focus,
.courses-panel-filter-trigger:focus-visible,
.courses-panel-filter-trigger:active,
.courses-panel-filter-badge,
.courses-panel-filter-badge:hover,
.courses-panel-filter-badge:focus,
.courses-panel-filter-badge:focus-visible,
.courses-panel-filter-badge:active,
.courses-panel-filter-chip,
.courses-panel-filter-chip:hover,
.courses-panel-filter-chip:focus,
.courses-panel-filter-chip:focus-visible,
.courses-panel-filter-chip:active {
  border: 0 !important;
  outline: 0 !important;
}

.courses-panel-filter-chip:focus-visible,
.courses-panel-filter-trigger:focus-visible {
  filter: brightness(1.08) saturate(1.08);
}

@media (max-width: 1023px) {
  .courses-panel-filter-cloud {
    top: calc(var(--courses-panel-nav-height) + 7.35rem);
    left: 50vw;
    right: auto;
  }

  .courses-panel-hero--main {
    min-height: auto;
  }

  .courses-panel-hero__inner {
    display: block;
    padding: calc(var(--courses-panel-nav-height) + .95rem) var(--courses-panel-right) 1rem var(--courses-panel-left);
  }

  .courses-panel-hero h1 {
    font-size: clamp(1.45rem, 7vw, 2.15rem);
    letter-spacing: -.055em;
  }

  .courses-panel-hero p {
    margin-top: .55rem;
    font-size: .88rem;
    line-height: 1.35;
  }

  .courses-panel-hero__stats {
    display: none;
  }

  .courses-panel-hero-action {
    top: calc(var(--courses-panel-nav-height) + .85rem);
    right: var(--courses-panel-right);
    width: 2.45rem;
    min-height: 2.45rem;
    padding: 0;
  }

  .courses-panel-hero-action span {
    display: none;
  }

  .courses-panel-content {
    padding: 1.25rem var(--courses-panel-right) 5.5rem var(--courses-panel-left);
  }

  .courses-panel-grid--courses {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .courses-panel-grid--courses {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* V42.0.42 — consolidation Smartbar + hero réel du panel Cours */
.courses-smartbar-shell {
  position: relative;
}

.courses-smartbar-shell .courses-searchbar__label span {
  display: none;
}

.courses-smart-suggestions.is-portal {
  position: fixed !important;
  z-index: 4100;
  top: var(--ui-smartbar-suggest-top, calc(var(--courses-panel-nav-height) + .55rem)) !important;
  left: var(--ui-smartbar-suggest-left, 50%) !important;
  width: var(--ui-smartbar-suggest-width, min(30rem, calc(100vw - 1.5rem))) !important;
  max-height: var(--ui-smartbar-suggest-max-height, min(42vh, 22rem)) !important;
  display: grid;
  gap: .35rem;
  padding: .55rem;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  border: 1px solid color-mix(in srgb, #38bdf8 28%, transparent);
  border-radius: 1.25rem;
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, #38bdf8 16%, transparent), transparent 48%),
    radial-gradient(circle at 100% 0%, color-mix(in srgb, #f472b6 18%, transparent), transparent 48%),
    color-mix(in srgb, var(--color-bg, #020617) 88%, transparent);
  color: var(--color-text, #f8fafc);
  box-shadow: 0 24px 70px color-mix(in srgb, #000 34%, transparent);
  backdrop-filter: blur(24px) saturate(1.18);
  -webkit-backdrop-filter: blur(24px) saturate(1.18);
  scrollbar-width: none;
}

html[data-theme="light"] .courses-smart-suggestions.is-portal {
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, #bae6fd 38%, transparent), transparent 48%),
    radial-gradient(circle at 100% 0%, color-mix(in srgb, #fbcfe8 44%, transparent), transparent 48%),
    rgba(255,255,255,.86);
  color: #0f172a;
  box-shadow: 0 24px 70px rgba(15,23,42,.16);
}

.courses-smart-suggestions.is-portal::-webkit-scrollbar {
  display: none;
}

.courses-smart-suggestions[hidden] {
  display: none !important;
}

.courses-smart-suggestion {
  --courses-smart-suggestion-color: #38bdf8;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: .85rem;
  width: 100%;
  min-height: 4.15rem;
  padding: .72rem .9rem;
  border: 0;
  border-radius: 1rem;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  animation: courses-smart-suggestion-in .18s ease both;
  animation-delay: calc(var(--ui-smartbar-index, 0) * 22ms);
}

.courses-smart-suggestion.is-active,
.courses-smart-suggestion:hover,
.courses-smart-suggestion:focus-visible {
  outline: 0;
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--courses-smart-suggestion-color) 24%, transparent), transparent 60%),
    color-mix(in srgb, var(--courses-smart-suggestion-color) 13%, transparent);
}

.courses-smart-suggestion i {
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: .9rem;
  color: var(--courses-smart-suggestion-color);
  background: color-mix(in srgb, var(--courses-smart-suggestion-color) 18%, transparent);
}

.courses-smart-suggestion strong,
.courses-smart-suggestion em {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.courses-smart-suggestion strong {
  font-weight: 950;
  letter-spacing: -.025em;
}

.courses-smart-suggestion em {
  margin-top: .1rem;
  color: color-mix(in srgb, currentColor 58%, transparent);
  font-style: normal;
  font-weight: 850;
  font-size: .82rem;
}

.courses-smart-strip {
  position: sticky;
  z-index: 38;
  top: calc(var(--courses-panel-nav-height) + .55rem);
  display: flex;
  align-items: center;
  gap: .55rem;
  width: 100%;
  max-width: 100%;
  min-height: 2.45rem;
  margin: 0 0 clamp(.8rem, 2vw, 1.1rem);
  pointer-events: auto;
}

.courses-smart-strip[hidden] {
  display: none !important;
}

.courses-smart-summary strong,
.courses-smart-chip {
  min-height: 2.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-weight: 950;
  color: color-mix(in srgb, var(--courses-smart-chip-color, #38bdf8) 76%, white);
  background: color-mix(in srgb, var(--courses-smart-chip-color, #38bdf8) 22%, #0f172a 78%);
  box-shadow: 0 12px 34px color-mix(in srgb, var(--courses-smart-chip-color, #38bdf8) 18%, transparent);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  animation: courses-smart-chip-in .18s ease both;
}

html[data-theme="light"] .courses-smart-summary strong,
html[data-theme="light"] .courses-smart-chip {
  color: color-mix(in srgb, var(--courses-smart-chip-color, #38bdf8) 72%, #0f172a 28%);
  background: color-mix(in srgb, var(--courses-smart-chip-color, #38bdf8) 17%, white 83%);
  box-shadow: 0 12px 34px color-mix(in srgb, var(--courses-smart-chip-color, #38bdf8) 18%, transparent);
}

.courses-smart-summary strong {
  --courses-smart-chip-color: #38bdf8;
  min-width: 2.35rem;
  padding: 0 .72rem;
}

.courses-smart-chips {
  display: flex;
  align-items: center;
  gap: .45rem;
  min-width: 0;
  overflow: auto;
  scrollbar-width: none;
}

.courses-smart-chips::-webkit-scrollbar {
  display: none;
}

.courses-smart-chip {
  padding: 0 .82rem;
  cursor: pointer;
}

.courses-smart-chip i.bi-x {
  opacity: .75;
}

.courses-smart-chip-more-short {
  display: none;
}

.courses-smart-chip--reduce {
  min-width: 2.35rem;
}

.courses-smart-chip.is-removing {
  animation: courses-smart-chip-out .14s ease both;
}

.courses-smart-focus-scrim {
  position: fixed;
  inset: 0;
  z-index: 3000;
  border: 0;
  background: color-mix(in srgb, var(--color-bg, #020617) 16%, transparent);
  backdrop-filter: blur(10px) saturate(1.08);
  -webkit-backdrop-filter: blur(10px) saturate(1.08);
  animation: courses-smart-scrim-in .18s ease both;
}

html[data-theme="light"] .courses-smart-focus-scrim {
  background: rgba(255,255,255,.22);
}

.courses-smart-focus-scrim[hidden] {
  display: none !important;
}

.courses-smart-focus-scrim.is-closing {
  animation: courses-smart-scrim-out .18s ease both;
}

body.courses-smart-focus-active .app-header,
body.courses-smart-focus-active .courses-searchbar,
body.courses-smart-focus-active .courses-smart-strip,
body.courses-smart-focus-active .courses-smart-suggestions.is-portal {
  filter: none !important;
  z-index: 4100;
}

body.courses-smart-focus-active .courses-smart-strip,
body.courses-smart-focus-active .courses-smart-suggestions.is-portal {
  position: fixed !important;
}

body.courses-smart-focus-active .courses-smart-strip {
  top: calc(var(--courses-panel-nav-height) + .55rem) !important;
  left: var(--courses-panel-content-left) !important;
  right: var(--courses-panel-content-right) !important;
  width: auto !important;
  max-width: calc(100vw - var(--courses-panel-content-left) - var(--courses-panel-content-right)) !important;
  margin: 0 !important;
}

.courses-smart-suggestions.is-portal.is-opening {
  animation: courses-smart-panel-in .2s cubic-bezier(.18, 1.18, .32, 1) both;
}

.courses-smart-suggestions.is-portal.is-closing {
  animation: courses-smart-panel-out .15s ease both;
}

@keyframes courses-smart-panel-in {
  from { opacity: 0; transform: translateY(-.4rem) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes courses-smart-panel-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(-.25rem) scale(.985); }
}

@keyframes courses-smart-suggestion-in {
  from { opacity: 0; transform: translateY(.35rem) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes courses-smart-chip-in {
  from { opacity: 0; transform: translateY(-.25rem) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes courses-smart-chip-out {
  to { opacity: 0; transform: scale(.92); }
}

@keyframes courses-smart-scrim-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes courses-smart-scrim-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@media (max-width: 767px) {
  .courses-smart-strip {
    top: calc(var(--courses-panel-nav-height) + .45rem);
    gap: .4rem;
  }

  body.courses-smart-focus-active .courses-smart-strip {
    left: max(.75rem, env(safe-area-inset-left, 0px)) !important;
    right: max(.75rem, env(safe-area-inset-right, 0px)) !important;
    max-width: calc(100vw - max(.75rem, env(safe-area-inset-left, 0px)) - max(.75rem, env(safe-area-inset-right, 0px))) !important;
  }

  .courses-smart-count-label {
    display: none;
  }

  .courses-smart-summary strong,
  .courses-smart-chip {
    min-height: 2.25rem;
    padding-inline: .72rem;
    font-size: .86rem;
  }

  .courses-smart-chip-more-full {
    display: none;
  }

  .courses-smart-chip-more-short {
    display: inline;
  }

  .courses-smart-suggestions.is-portal {
    border-radius: 1.15rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .courses-smart-suggestions.is-portal,
  .courses-smart-suggestion,
  .courses-smart-chip,
  .courses-smart-focus-scrim {
    animation: none !important;
    transition: none !important;
  }
}

/* V42.0.43 — Smartbar : ligne réservée, compacte par défaut, dépliable au clic. */
.courses-smart-strip {
  --courses-smart-row-height: 2.45rem;
  min-height: var(--courses-smart-row-height) !important;
  flex-wrap: nowrap;
}

.courses-smart-strip.is-empty {
  pointer-events: none;
}

.courses-smart-strip.is-empty .courses-smart-summary,
.courses-smart-strip.is-empty .courses-smart-chips {
  visibility: hidden;
  opacity: 0;
}

.courses-smart-strip:not(.is-expanded) {
  align-items: center;
}

.courses-smart-strip:not(.is-expanded) .courses-smart-chips {
  flex-wrap: nowrap;
  overflow: hidden;
}

.courses-smart-strip.is-expanded {
  align-items: flex-start;
}

.courses-smart-strip.is-expanded .courses-smart-chips {
  flex-wrap: wrap;
  overflow: visible;
  row-gap: .45rem;
}

.courses-smart-summary {
  flex: 0 0 auto;
}

.courses-smart-chip {
  max-width: min(18rem, 42vw);
  white-space: nowrap;
}

.courses-smart-chip > span:not(.courses-smart-chip-more-full):not(.courses-smart-chip-more-short) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 767px) {
  .courses-smart-strip {
    --courses-smart-row-height: 2.35rem;
  }

  .courses-smart-chip {
    max-width: min(11rem, 38vw);
  }
}

/* V42.0.44 — Smartbar : ligne stable et responsive par largeur réelle. */
.courses-smart-strip {
  --courses-smart-row-height: clamp(2.25rem, 3.2vw, 2.45rem);
  min-height: var(--courses-smart-row-height) !important;
  max-width: 100%;
  overflow: visible;
}

.courses-smart-strip:not(.is-expanded) {
  height: var(--courses-smart-row-height) !important;
  max-height: var(--courses-smart-row-height) !important;
  overflow: hidden !important;
}

.courses-smart-strip:not(.is-expanded) .courses-smart-summary,
.courses-smart-strip:not(.is-expanded) .courses-smart-chips {
  min-height: var(--courses-smart-row-height);
}

.courses-smart-strip:not(.is-expanded) .courses-smart-chips {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  flex-wrap: nowrap !important;
  overflow: hidden !important;
}

.courses-smart-strip.is-expanded {
  height: auto !important;
  max-height: none !important;
  align-items: flex-start !important;
  overflow: visible !important;
}

.courses-smart-strip.is-expanded .courses-smart-chips {
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: wrap !important;
  overflow: visible !important;
  row-gap: .45rem;
}

.courses-smart-summary,
.courses-smart-chip--more,
.courses-smart-chip--reduce {
  flex: 0 0 auto !important;
}

.courses-smart-chip {
  flex: 0 1 auto;
  min-width: 0;
}

.courses-smart-chip > span:not(.courses-smart-chip-more-full):not(.courses-smart-chip-more-short) {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .courses-smart-strip {
    --courses-smart-row-height: 2.25rem;
    gap: .36rem;
  }

  .courses-smart-chips {
    gap: .36rem;
  }

  .courses-smart-summary strong,
  .courses-smart-chip {
    min-height: 2.18rem;
    padding-inline: .62rem;
    font-size: .82rem;
  }

  .courses-smart-chip:not(.courses-smart-chip--more):not(.courses-smart-chip--reduce) {
    max-width: min(9.2rem, 36vw);
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .courses-smart-chip:not(.courses-smart-chip--more):not(.courses-smart-chip--reduce) {
    max-width: min(13rem, 28vw);
  }
}

@media (min-width: 1024px) {
  .courses-smart-chip:not(.courses-smart-chip--more):not(.courses-smart-chip--reduce) {
    max-width: min(16rem, 21vw);
  }
}

/* V42.0.45 — sous-panels Cours : même hero full width que le panel principal. */
.courses-panel-root--subpanel {
  --courses-panel-subpanel-readable-width: min(100%, 1380px);
}

.courses-panel-root--subpanel .courses-panel-hero--form {
  min-height: clamp(10.5rem, 18vh, 14.5rem);
}

.courses-panel-root--subpanel .courses-panel-hero--style {
  --courses-panel-accent: var(--course-style-color, #f472b6);
  background:
    radial-gradient(circle at 15% 18%, color-mix(in srgb, #38bdf8 18%, transparent), transparent 28rem),
    radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--course-style-color, #f43f5e) 30%, transparent), transparent 30rem),
    linear-gradient(120deg, color-mix(in srgb, var(--color-bg, #020617) 94%, transparent), color-mix(in srgb, var(--color-bg, #020617) 76%, var(--course-style-color, #f43f5e) 24%));
}

.courses-panel-root--subpanel .courses-panel-hero--danger {
  --courses-panel-accent: #ef4444;
  background:
    radial-gradient(circle at 15% 18%, color-mix(in srgb, #f97316 18%, transparent), transparent 28rem),
    radial-gradient(circle at 92% 12%, color-mix(in srgb, #ef4444 34%, transparent), transparent 30rem),
    linear-gradient(120deg, color-mix(in srgb, var(--color-bg, #020617) 94%, transparent), color-mix(in srgb, var(--color-bg, #020617) 74%, #7f1d1d 26%));
}

html[data-theme="light"] .courses-panel-root--subpanel .courses-panel-hero--style {
  background:
    radial-gradient(circle at 15% 18%, color-mix(in srgb, #7dd3fc 30%, transparent), transparent 28rem),
    radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--course-style-color, #f9a8d4) 38%, transparent), transparent 30rem),
    linear-gradient(120deg, rgba(255,255,255,.98), color-mix(in srgb, white 76%, var(--course-style-color, #f9a8d4) 24%));
}

html[data-theme="light"] .courses-panel-root--subpanel .courses-panel-hero--danger {
  background:
    radial-gradient(circle at 15% 18%, color-mix(in srgb, #fed7aa 42%, transparent), transparent 28rem),
    radial-gradient(circle at 92% 12%, color-mix(in srgb, #fca5a5 46%, transparent), transparent 30rem),
    linear-gradient(120deg, rgba(255,255,255,.98), color-mix(in srgb, white 74%, #fecaca 26%));
}

.courses-panel-root--subpanel .courses-panel-hero__inner {
  grid-template-columns: minmax(0, 1fr);
  min-height: inherit;
  align-items: center;
  padding-top: calc(var(--courses-panel-nav-height) + clamp(1rem, 2.4vw, 2.35rem));
  padding-bottom: clamp(1.25rem, 2.8vw, 2.35rem);
}

.courses-panel-root--subpanel .courses-panel-hero h1 {
  max-width: min(100%, 24ch);
  font-size: clamp(2rem, 4.2vw, 3.45rem);
  line-height: .98;
}

.courses-panel-root--subpanel .courses-panel-hero p {
  max-width: min(100%, 68ch);
}

.courses-panel-root--subpanel .courses-panel-hero-action {
  top: calc(var(--courses-panel-nav-height) + clamp(1rem, 2vw, 1.5rem));
}

.courses-panel-root--subpanel .courses-panel-subpanel-content {
  display: block;
  width: 100vw;
}

.courses-panel-root--subpanel .course-form,
.courses-panel-root--subpanel #course-choreography-form,
.courses-panel-root--subpanel .course-student-picker-list,
.courses-panel-root--subpanel .course-delete-panel-body > *,
.courses-panel-root--subpanel .course-choreography-delete-panel-body > * {
  width: var(--courses-panel-subpanel-readable-width);
  margin-inline: auto;
}

.courses-panel-root--subpanel .course-form,
.courses-panel-root--subpanel #course-choreography-form {
  max-width: 980px;
}

@media (max-width: 767px) {
  .courses-panel-root--subpanel .courses-panel-hero--form {
    min-height: clamp(9.5rem, 28vh, 12.5rem);
  }

  .courses-panel-root--subpanel .courses-panel-hero__inner {
    padding-top: calc(var(--courses-panel-nav-height) + .95rem);
    padding-bottom: 1.1rem;
  }

  .courses-panel-root--subpanel .courses-panel-hero h1 {
    max-width: calc(100% - 7.5rem);
    font-size: clamp(1.65rem, 8vw, 2.25rem);
  }

  .courses-panel-root--subpanel .courses-panel-hero p,
  .courses-panel-root--subpanel .courses-panel-hero__kicker {
    max-width: calc(100% - 7.5rem);
  }

  .courses-panel-root--subpanel .courses-panel-hero-action {
    top: calc(var(--courses-panel-nav-height) + .95rem);
    right: var(--courses-panel-content-right);
  }
}

/* V42.0.45 — chips Smartbar : même forme sur mobile, tablette et PC. */
.courses-smart-strip {
  --courses-smart-row-height: 2.35rem !important;
  gap: .45rem !important;
}

.courses-smart-summary strong,
.courses-smart-chip {
  height: var(--courses-smart-row-height) !important;
  min-height: var(--courses-smart-row-height) !important;
  max-height: var(--courses-smart-row-height) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .34rem !important;
  padding: 0 .78rem !important;
  border-radius: 999px !important;
  box-sizing: border-box !important;
  font-size: .88rem !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
}

.courses-smart-summary strong {
  min-width: var(--courses-smart-row-height) !important;
  padding-inline: .72rem !important;
}

.courses-smart-chip span,
.courses-smart-chip i {
  line-height: 1 !important;
  white-space: nowrap !important;
}

.courses-smart-chip > span:not(.courses-smart-chip-more-full):not(.courses-smart-chip-more-short) {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.courses-smart-chip--more,
.courses-smart-chip--reduce {
  min-width: var(--courses-smart-row-height) !important;
}

.courses-smart-strip:not(.is-expanded),
.courses-smart-strip:not(.is-expanded) .courses-smart-summary,
.courses-smart-strip:not(.is-expanded) .courses-smart-chips {
  height: var(--courses-smart-row-height) !important;
  max-height: var(--courses-smart-row-height) !important;
  align-items: center !important;
}

.courses-smart-strip.is-expanded .courses-smart-chips {
  align-items: center !important;
  row-gap: .45rem !important;
}

@media (max-width: 767px) {
  .courses-smart-summary strong,
  .courses-smart-chip {
    height: var(--courses-smart-row-height) !important;
    min-height: var(--courses-smart-row-height) !important;
    max-height: var(--courses-smart-row-height) !important;
    padding-inline: .78rem !important;
    font-size: .88rem !important;
  }

  .courses-smart-chip:not(.courses-smart-chip--more):not(.courses-smart-chip--reduce) {
    max-width: min(9.8rem, 42vw) !important;
  }
}

/* V42.0.46 — sous-panels Cours : hero commun + scroll unique du panel. */
.courses-panel-root--subpanel {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
}

.courses-panel-root--subpanel .courses-panel-view {
  min-height: 100%;
}

.courses-panel-root--subpanel .courses-panel-hero {
  width: 100vw !important;
  min-width: 100vw !important;
  max-width: 100vw !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

.courses-panel-root--subpanel .courses-panel-hero--form,
.courses-panel-root--subpanel .courses-panel-hero--view {
  min-height: clamp(10.75rem, 20vh, 15rem);
}

.courses-panel-root--subpanel .courses-panel-subpanel-content {
  width: 100vw !important;
  max-width: 100vw !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  -webkit-overflow-scrolling: auto !important;
  overscroll-behavior: auto !important;
  box-sizing: border-box;
}

.courses-panel-root--subpanel .course-form-panel-body,
.courses-panel-root--subpanel .course-choreography-form-panel-body,
.courses-panel-root--subpanel .course-choreography-delete-panel-body,
.courses-panel-root--subpanel .course-delete-panel-body,
.courses-panel-root--subpanel .course-student-picker-panel-body,
.courses-panel-root--subpanel .course-view-panel-body {
  display: block !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  padding-top: clamp(1rem, 2.6vw, 2rem) !important;
  padding-right: var(--courses-panel-content-right) !important;
  padding-bottom: clamp(5.5rem, 8vw, 7rem) !important;
  padding-left: var(--courses-panel-content-left) !important;
  scrollbar-gutter: auto !important;
}

.courses-panel-root--subpanel .course-view-panel-body {
  display: flex !important;
  flex-direction: column;
  gap: clamp(0.95rem, 2vw, 1.35rem);
}

.courses-panel-root--subpanel .student-courses-admin,
.courses-panel-root--subpanel .course-form,
.courses-panel-root--subpanel #course-choreography-form,
.courses-panel-root--subpanel .course-student-picker-list,
.courses-panel-root--subpanel .courses-danger-note,
.courses-panel-root--subpanel .courses-delete-countdown-bar {
  width: var(--courses-panel-subpanel-readable-width) !important;
  max-width: 100% !important;
  margin-inline: auto !important;
}

.courses-panel-root--course-view .courses-panel-hero--view {
  --courses-panel-accent: var(--course-style-color, #f472b6);
  background:
    radial-gradient(circle at 15% 18%, color-mix(in srgb, #38bdf8 18%, transparent), transparent 28rem),
    radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--course-style-color, #f43f5e) 30%, transparent), transparent 30rem),
    linear-gradient(120deg, color-mix(in srgb, var(--color-bg, #020617) 94%, transparent), color-mix(in srgb, var(--color-bg, #020617) 76%, var(--course-style-color, #f43f5e) 24%));
}

html[data-theme="light"] .courses-panel-root--course-view .courses-panel-hero--view {
  background:
    radial-gradient(circle at 15% 18%, color-mix(in srgb, #7dd3fc 30%, transparent), transparent 28rem),
    radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--course-style-color, #f9a8d4) 38%, transparent), transparent 30rem),
    linear-gradient(120deg, rgba(255,255,255,.98), color-mix(in srgb, white 76%, var(--course-style-color, #f9a8d4) 24%));
}

.courses-panel-root--course-view .courses-panel-hero__inner {
  grid-template-columns: minmax(0, 1.08fr) minmax(18rem, .92fr);
}

.courses-panel-root--course-view .courses-panel-hero h1 {
  max-width: min(100%, 24ch);
}

.courses-panel-root--course-view .courses-panel-stat-card strong {
  font-size: clamp(1.35rem, 2.6vw, 2rem);
}

.courses-panel-root--course-view .courses-panel-stat-card:first-child strong,
.courses-panel-root--course-view .courses-panel-stat-card:nth-child(2) strong {
  max-width: 100%;
}

@media (max-width: 1023px) {
  .courses-panel-root--subpanel .courses-panel-hero--form,
  .courses-panel-root--subpanel .courses-panel-hero--view {
    min-height: auto;
  }

  .courses-panel-root--course-view .courses-panel-hero__inner {
    display: block;
  }
}

@media (max-width: 767px) {
  .courses-panel-root--subpanel .course-form-panel-body,
  .courses-panel-root--subpanel .course-choreography-form-panel-body,
  .courses-panel-root--subpanel .course-choreography-delete-panel-body,
  .courses-panel-root--subpanel .course-delete-panel-body,
  .courses-panel-root--subpanel .course-student-picker-panel-body,
  .courses-panel-root--subpanel .course-view-panel-body {
    padding-top: 1rem !important;
    padding-bottom: max(6.5rem, calc(env(safe-area-inset-bottom, 0px) + 6.5rem)) !important;
  }
}

/* V42.0.47 — Ruban de contrôle : CTA hors hero + tiroir flottant des chips. */
.courses-control-dock {
  --courses-control-row-height: 2.55rem;
  position: sticky;
  z-index: 36;
  top: calc(var(--courses-panel-nav-height) + .25rem);
  width: 100vw;
  min-height: calc(var(--courses-control-row-height) + clamp(.65rem, 1.4vw, .95rem));
  padding: clamp(.36rem, .9vw, .55rem) var(--courses-panel-content-right) clamp(.36rem, .9vw, .55rem) var(--courses-panel-content-left);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .7rem;
  border-bottom: 1px solid color-mix(in srgb, var(--courses-panel-accent, #38bdf8) 18%, transparent);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--color-bg, #020617) 86%, transparent),
      color-mix(in srgb, var(--color-bg, #020617) 72%, transparent)
    );
  backdrop-filter: blur(18px) saturate(1.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
  box-sizing: border-box;
}

html[data-theme="light"] .courses-control-dock {
  background:
    linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,255,255,.68));
  border-bottom-color: color-mix(in srgb, var(--courses-panel-accent, #38bdf8) 18%, rgba(15,23,42,.08));
}

.courses-control-dock__chips,
.courses-control-dock__actions {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .45rem;
}

.courses-control-dock__chips {
  justify-content: flex-start;
  overflow: visible;
}

.courses-control-dock__actions {
  justify-content: flex-end;
}

.courses-control-dock:not(.has-chips) {
  grid-template-columns: minmax(0, 1fr);
}

.courses-control-dock:not(.has-chips) .courses-control-dock__actions {
  justify-content: flex-end;
}

.courses-control-action {
  min-height: var(--courses-control-row-height);
  height: var(--courses-control-row-height);
  max-height: var(--courses-control-row-height);
  min-width: var(--courses-control-row-height);
  padding: 0 .95rem;
  border: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  color: color-mix(in srgb, var(--courses-control-action-color, #38bdf8) 80%, white);
  background: color-mix(in srgb, var(--courses-control-action-color, #38bdf8) 18%, #0f172a 82%);
  box-shadow: 0 14px 36px color-mix(in srgb, var(--courses-control-action-color, #38bdf8) 18%, transparent);
  font: inherit;
  font-size: .92rem;
  font-weight: 950;
  letter-spacing: .005em;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .14s ease, filter .14s ease, opacity .14s ease;
}

html[data-theme="light"] .courses-control-action {
  color: color-mix(in srgb, var(--courses-control-action-color, #38bdf8) 72%, #0f172a 28%);
  background: color-mix(in srgb, var(--courses-control-action-color, #38bdf8) 15%, white 85%);
}

.courses-control-action--primary {
  --courses-control-action-color: #38bdf8;
}

.courses-control-action--success {
  --courses-control-action-color: #22c55e;
}

.courses-control-action--danger {
  --courses-control-action-color: #ef4444;
}

.courses-control-action:hover,
.courses-control-action:focus-visible {
  transform: translateY(-1px);
  filter: saturate(1.08);
}

.courses-control-action:active {
  transform: scale(.96);
}

.courses-control-action:disabled,
.courses-control-action[disabled],
.courses-control-action.is-disabled {
  opacity: .46;
  cursor: not-allowed;
  filter: grayscale(.18) saturate(.72);
  transform: none;
}

.courses-control-action .ui-btn__label--short {
  display: none;
}

.courses-danger-actions {
  width: var(--courses-panel-subpanel-readable-width, min(100%, 1380px));
  max-width: 100%;
  margin: clamp(.8rem, 1.6vw, 1.05rem) auto 0;
  display: flex;
  justify-content: flex-end;
}

.courses-danger-actions .courses-control-action {
  min-width: min(100%, 18rem);
}

.courses-delete-hero-progress {
  --delete-progress: 1;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  overflow: hidden;
  background: color-mix(in srgb, #ef4444 22%, transparent);
  z-index: 3;
  pointer-events: none;
}

.courses-delete-hero-progress > span {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: left center;
  transform: scaleX(var(--delete-progress, 1));
  background: linear-gradient(90deg, #facc15, #fb923c, #ef4444);
  box-shadow: 0 0 22px color-mix(in srgb, #ef4444 55%, transparent);
  transition: transform 80ms linear, opacity 180ms ease;
}

.courses-delete-hero-progress.is-delete-ready > span {
  opacity: .18;
}

.courses-smart-strip {
  --courses-smart-row-height: 2.35rem !important;
  position: sticky;
  overflow: visible !important;
  isolation: isolate;
}

.courses-smart-strip:not(.is-expanded),
.courses-smart-strip:not(.is-expanded) .courses-smart-summary,
.courses-smart-strip:not(.is-expanded) .courses-smart-chips {
  height: var(--courses-smart-row-height) !important;
  max-height: var(--courses-smart-row-height) !important;
  overflow: visible !important;
}

.courses-smart-chips {
  flex-wrap: nowrap !important;
  overflow: hidden !important;
}

.courses-smart-summary strong,
.courses-smart-chip {
  height: var(--courses-smart-row-height) !important;
  min-height: var(--courses-smart-row-height) !important;
  max-height: var(--courses-smart-row-height) !important;
  border-radius: 999px !important;
  padding: 0 .84rem !important;
  line-height: 1 !important;
}

.courses-smart-summary strong {
  min-width: var(--courses-smart-row-height) !important;
}

.courses-smart-chip--more {
  min-width: var(--courses-smart-row-height) !important;
}

.courses-smart-chip--more.is-active {
  filter: saturate(1.18) brightness(1.08);
}

.courses-smart-chip > span:not(.courses-smart-chip-more-full):not(.courses-smart-chip-more-short) {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.courses-smart-overflow {
  position: absolute;
  z-index: 60;
  top: calc(100% + .45rem);
  left: 0;
  right: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  padding: .65rem;
  border: 1px solid color-mix(in srgb, currentColor 10%, transparent);
  border-radius: 1.2rem;
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, #38bdf8 12%, transparent), transparent 48%),
    color-mix(in srgb, var(--color-bg, #020617) 86%, transparent);
  box-shadow: 0 22px 56px rgba(0,0,0,.28);
  backdrop-filter: blur(18px) saturate(1.12);
  -webkit-backdrop-filter: blur(18px) saturate(1.12);
  animation: courses-smart-overflow-in .16s cubic-bezier(.18, 1.08, .32, 1) both;
}

html[data-theme="light"] .courses-smart-overflow {
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, #38bdf8 13%, transparent), transparent 48%),
    rgba(255,255,255,.88);
  box-shadow: 0 22px 56px rgba(15,23,42,.14);
}

.courses-smart-overflow[hidden] {
  display: none !important;
}

@keyframes courses-smart-overflow-in {
  from { opacity: 0; transform: translateY(-.35rem) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 767px) and (orientation: portrait) {
  .courses-control-dock {
    grid-template-columns: minmax(0, 1fr);
    gap: .5rem;
    padding-top: .55rem;
    padding-bottom: .55rem;
  }

  .courses-control-dock__actions {
    order: -1;
    width: 100%;
    justify-content: stretch;
  }

  .courses-control-dock__actions .courses-control-action {
    width: 100%;
  }

  .courses-control-dock__chips {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .courses-control-action {
    --courses-control-row-height: 2.45rem;
    font-size: .9rem;
  }

  .courses-control-action .ui-btn__label--full {
    display: inline;
  }

  .courses-control-action .ui-btn__label--short {
    display: none;
  }

  .courses-smart-summary strong,
  .courses-smart-chip {
    padding-inline: .72rem !important;
    font-size: .86rem !important;
  }

  .courses-smart-chip:not(.courses-smart-chip--more) {
    max-width: min(10.6rem, 46vw) !important;
  }

  .courses-smart-overflow {
    border-radius: 1rem;
    padding: .55rem;
  }

  .courses-danger-actions {
    justify-content: stretch;
  }

  .courses-danger-actions .courses-control-action {
    width: 100%;
  }
}

/* V42.0.48 — Ruban d'action affiné + tiroir chips flottant sans conteneur visible. */
.courses-control-dock {
  top: calc(var(--courses-panel-nav-height) + .55rem) !important;
  z-index: 40 !important;
  border-bottom: 0 !important;
  min-height: calc(var(--courses-control-row-height, 2.7rem) + clamp(.55rem, 1.2vw, .85rem)) !important;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--color-bg, #020617) 78%, transparent),
      color-mix(in srgb, var(--color-bg, #020617) 58%, transparent)
    ) !important;
  box-shadow: none !important;
}

html[data-theme="light"] .courses-control-dock,
body[data-theme="light"] .courses-control-dock {
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.52)) !important;
}

.courses-control-action {
  --courses-control-row-height: 2.75rem;
  min-height: var(--courses-control-row-height) !important;
  height: var(--courses-control-row-height) !important;
  max-height: var(--courses-control-row-height) !important;
  min-width: min(100%, 10.5rem) !important;
  padding: 0 1.2rem !important;
  border: 1px solid color-mix(in srgb, var(--courses-control-action-color, #38bdf8) 46%, rgba(255,255,255,.13)) !important;
  border-radius: 1.05rem !important;
  color: color-mix(in srgb, white 92%, var(--courses-control-action-color, #38bdf8) 8%) !important;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--courses-control-action-color, #38bdf8) 72%, #0f172a 28%),
      color-mix(in srgb, var(--courses-control-action-color, #38bdf8) 43%, #020617 57%)
    ) !important;
  box-shadow:
    0 12px 28px color-mix(in srgb, var(--courses-control-action-color, #38bdf8) 16%, transparent),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
  letter-spacing: .01em !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.18);
}

html[data-theme="light"] .courses-control-action,
body[data-theme="light"] .courses-control-action {
  color: color-mix(in srgb, #0f172a 68%, var(--courses-control-action-color, #38bdf8) 32%) !important;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--courses-control-action-color, #38bdf8) 24%, white 76%),
      color-mix(in srgb, var(--courses-control-action-color, #38bdf8) 13%, white 87%)
    ) !important;
  box-shadow:
    0 12px 28px color-mix(in srgb, var(--courses-control-action-color, #38bdf8) 14%, transparent),
    inset 0 1px 0 rgba(255,255,255,.72) !important;
  text-shadow: none;
}

.courses-control-action i {
  width: 1.45rem;
  height: 1.45rem;
  border-radius: .55rem;
  display: inline-grid;
  place-items: center;
  background: rgba(255,255,255,.13);
}

html[data-theme="light"] .courses-control-action i,
body[data-theme="light"] .courses-control-action i {
  background: color-mix(in srgb, var(--courses-control-action-color, #38bdf8) 14%, white 86%);
}

.courses-control-action:hover,
.courses-control-action:focus-visible {
  transform: translateY(-1px) !important;
  filter: saturate(1.08) brightness(1.03) !important;
}

.courses-control-action:disabled,
.courses-control-action[disabled],
.courses-control-action.is-disabled {
  opacity: .58 !important;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--courses-control-action-color, #38bdf8) 26%, #0f172a 74%),
      color-mix(in srgb, var(--courses-control-action-color, #38bdf8) 16%, #020617 84%)
    ) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.courses-danger-actions .ui-safe-delete.is-delete-arming::before,
.courses-danger-actions .ui-safe-delete.is-delete-arming::after {
  content: none !important;
  display: none !important;
}

.courses-danger-actions .courses-control-action {
  border-radius: 1.05rem !important;
}

.courses-delete-hero-progress {
  height: 4px !important;
  background: color-mix(in srgb, #ef4444 20%, rgba(255,255,255,.08)) !important;
}

.courses-delete-hero-progress > span {
  box-shadow: none !important;
}

.courses-smart-summary strong {
  --courses-smart-chip-color: #38bdf8;
  color: color-mix(in srgb, #7dd3fc 84%, white 16%) !important;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, #38bdf8 24%, #020617 76%),
      color-mix(in srgb, #0ea5e9 15%, #020617 85%)
    ) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #38bdf8 24%, transparent) !important;
}

html[data-theme="light"] .courses-smart-summary strong,
body[data-theme="light"] .courses-smart-summary strong {
  color: color-mix(in srgb, #0369a1 84%, #0f172a 16%) !important;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, #38bdf8 20%, white 80%),
      color-mix(in srgb, #0ea5e9 10%, white 90%)
    ) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #38bdf8 22%, transparent) !important;
}

.courses-smart-overflow {
  z-index: 70 !important;
  top: calc(100% + .48rem) !important;
  left: 0 !important;
  right: auto !important;
  width: min(100%, 42rem) !important;
  max-width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform-origin: top left;
  animation: courses-smart-overflow-float-in .2s cubic-bezier(.18, 1.08, .32, 1) both !important;
}

.courses-smart-overflow.is-closing {
  animation: courses-smart-overflow-float-out .18s ease both !important;
}

.courses-smart-overflow .courses-smart-chip {
  box-shadow:
    0 12px 26px color-mix(in srgb, var(--courses-smart-chip-color, #38bdf8) 18%, transparent),
    0 10px 26px rgba(0,0,0,.24) !important;
}

@keyframes courses-smart-overflow-float-in {
  from {
    opacity: 0;
    transform: translateY(-.35rem) scale(.985);
    filter: blur(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes courses-smart-overflow-float-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
  to {
    opacity: 0;
    transform: translateY(-.25rem) scale(.985);
    filter: blur(2px);
  }
}

.courses-smart-chip--more.is-active {
  box-shadow:
    0 10px 24px color-mix(in srgb, #38bdf8 20%, transparent),
    inset 0 0 0 1px color-mix(in srgb, #38bdf8 26%, transparent) !important;
}

@media (max-width: 767px) and (orientation: portrait) {
  .courses-control-dock {
    top: calc(var(--courses-panel-nav-height) + .45rem) !important;
    min-height: auto !important;
  }

  .courses-control-action {
    --courses-control-row-height: 2.7rem;
    width: 100% !important;
    min-width: 0 !important;
    border-radius: 1rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .courses-smart-overflow,
  .courses-smart-overflow.is-closing,
  .courses-control-action {
    animation: none !important;
    transition: none !important;
  }
}

/* V42.0.49 — Dock sticky stable, tiroir chips sans reflow et cartes d'ajout discrètes. */
.courses-panel-root {
  --courses-panel-sticky-top: max(
    calc(var(--edq-navbar-height-current, var(--app-header-safe-height, 64px)) + .55rem),
    calc(64px + .55rem)
  );
}

.courses-control-dock,
.courses-smart-strip {
  top: var(--courses-panel-sticky-top) !important;
}

.courses-control-dock {
  z-index: 78 !important;
  min-height: auto !important;
  padding-top: .58rem !important;
  padding-bottom: .58rem !important;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--color-bg, #020617) 76%, transparent),
      color-mix(in srgb, var(--color-bg, #020617) 48%, transparent) 72%,
      transparent 100%
    ) !important;
  backdrop-filter: blur(18px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
}

html[data-theme="light"] .courses-control-dock,
body[data-theme="light"] .courses-control-dock {
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.82),
      rgba(255,255,255,.48) 72%,
      transparent 100%
    ) !important;
}

.courses-control-action {
  --courses-control-row-height: 2.75rem;
  border-radius: 1.2rem !important;
  border: 1px solid color-mix(in srgb, var(--courses-control-action-color, #38bdf8) 38%, rgba(255,255,255,.18)) !important;
  color: color-mix(in srgb, white 90%, var(--courses-control-action-color, #38bdf8) 10%) !important;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--courses-control-action-color, #38bdf8) 64%, #172033 36%),
      color-mix(in srgb, var(--courses-control-action-color, #38bdf8) 36%, #020617 64%)
    ) !important;
  box-shadow:
    0 10px 24px color-mix(in srgb, var(--courses-control-action-color, #38bdf8) 10%, transparent),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
}

html[data-theme="light"] .courses-control-action,
body[data-theme="light"] .courses-control-action {
  color: color-mix(in srgb, #0f172a 72%, var(--courses-control-action-color, #38bdf8) 28%) !important;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--courses-control-action-color, #38bdf8) 18%, white 82%),
      color-mix(in srgb, var(--courses-control-action-color, #38bdf8) 9%, white 91%)
    ) !important;
  box-shadow:
    0 10px 24px color-mix(in srgb, var(--courses-control-action-color, #38bdf8) 10%, transparent),
    inset 0 1px 0 rgba(255,255,255,.72) !important;
}

.courses-control-action:disabled,
.courses-control-action[disabled],
.courses-control-action.is-disabled {
  opacity: .5 !important;
  color: color-mix(in srgb, currentColor 58%, transparent) !important;
  box-shadow: none !important;
}

.courses-control-action.ui-safe-delete::before,
.courses-control-action.ui-safe-delete::after,
.courses-control-action .ui-safe-delete__progress,
.courses-danger-actions .ui-safe-delete::before,
.courses-danger-actions .ui-safe-delete::after,
.courses-danger-actions .ui-safe-delete__progress {
  content: none !important;
  display: none !important;
}

.courses-list-cards-host {
  display: block;
  min-width: 0;
}

.courses-smart-strip {
  z-index: 76 !important;
  margin-bottom: clamp(.8rem, 2vw, 1.1rem) !important;
}

.courses-smart-strip.is-overflow-open {
  z-index: 92 !important;
}

.courses-smart-overflow {
  top: calc(100% + .42rem) !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: .45rem !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  pointer-events: auto;
}

.courses-smart-overflow[hidden] {
  display: none !important;
}

.courses-smart-overflow .courses-smart-chip {
  animation: courses-smart-overflow-chip-in .24s cubic-bezier(.18, 1.08, .32, 1) both !important;
  animation-delay: calc(min(var(--courses-smart-chip-index, 0), 8) * 28ms) !important;
  box-shadow:
    0 12px 26px color-mix(in srgb, var(--courses-smart-chip-color, #38bdf8) 12%, transparent),
    0 10px 24px rgba(0,0,0,.18) !important;
}

.courses-smart-overflow.is-closing .courses-smart-chip {
  animation: courses-smart-overflow-chip-out .18s ease both !important;
  animation-delay: calc(min(var(--courses-smart-chip-index, 0), 8) * 16ms) !important;
}

.courses-smart-chip.is-removing {
  animation: courses-smart-chip-out .14s ease both !important;
}

.courses-smart-summary strong {
  min-width: auto !important;
  gap: .28rem !important;
  padding-inline: .88rem !important;
  border: 1px solid color-mix(in srgb, #38bdf8 26%, transparent) !important;
  letter-spacing: .01em;
}

.courses-smart-summary strong::before {
  content: '';
  width: .48rem;
  height: .48rem;
  border-radius: 999px;
  background: #38bdf8;
  box-shadow: 0 0 0 4px color-mix(in srgb, #38bdf8 12%, transparent);
}

@keyframes courses-smart-overflow-chip-in {
  from {
    opacity: 0;
    transform: translateY(-.38rem) scale(.96);
    filter: blur(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes courses-smart-overflow-chip-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
  to {
    opacity: 0;
    transform: translateY(-.28rem) scale(.96);
    filter: blur(2px);
  }
}

.course-student-card--add.ui-accent-card,
.courses-panel-root .course-student-card--add.ui-accent-card {
  opacity: .48 !important;
  border-style: dashed !important;
  border-color: color-mix(in srgb, var(--theme-primary, #38bdf8) 28%, transparent) !important;
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--theme-primary, #38bdf8) 8%, transparent), transparent 46%),
    color-mix(in srgb, var(--color-bg, #020617) 94%, var(--theme-primary, #38bdf8) 6%) !important;
  box-shadow: none !important;
}

html[data-theme="light"] .course-student-card--add.ui-accent-card,
body[data-theme="light"] .course-student-card--add.ui-accent-card,
html[data-theme="light"] .courses-panel-root .course-student-card--add.ui-accent-card,
body[data-theme="light"] .courses-panel-root .course-student-card--add.ui-accent-card {
  opacity: .5 !important;
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--theme-primary, #38bdf8) 7%, transparent), transparent 46%),
    color-mix(in srgb, white 94%, var(--theme-primary, #38bdf8) 6%) !important;
}

.course-student-card--add.ui-accent-card:hover,
.course-student-card--add.ui-accent-card:focus-visible {
  opacity: .72 !important;
}

@media (max-width: 767px) and (orientation: portrait) {
  .courses-panel-root {
    --courses-panel-sticky-top: max(
      calc(var(--edq-navbar-height-current, var(--app-header-safe-height, 64px)) + .45rem),
      calc(60px + .45rem)
    );
  }

  .courses-control-dock {
    padding-top: .5rem !important;
    padding-bottom: .5rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .courses-smart-overflow .courses-smart-chip,
  .courses-smart-overflow.is-closing .courses-smart-chip {
    animation: none !important;
  }
}

/* EDQ V42.0.50 — sticky réel des docks CTA + cartes d'ajout choré discrètes. */
.courses-panel-root [data-course-view-action-dock],
.courses-panel-root [data-course-form-action-dock],
.courses-panel-root [data-course-choreo-action-dock],
.courses-panel-root [data-student-picker-action-dock] {
  display: contents !important;
}

.courses-panel-root--subpanel .courses-control-dock {
  position: sticky !important;
  top: var(--courses-panel-sticky-top, calc(var(--courses-panel-nav-height, 64px) + .55rem)) !important;
  z-index: 96 !important;
  align-self: start;
  pointer-events: none;
}

.courses-panel-root--subpanel .courses-control-dock__actions,
.courses-panel-root--subpanel .courses-control-action {
  pointer-events: auto;
}

.courses-panel-root--subpanel .courses-control-dock:not(.has-chips) {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
}

.courses-panel-root--subpanel .courses-control-dock:not(.has-chips) .courses-control-dock__actions {
  width: auto !important;
  min-width: 0 !important;
}

.course-choreo-card--add.ui-accent-card,
.courses-panel-root .course-choreo-card--add.ui-accent-card {
  opacity: .46 !important;
  border-style: dashed !important;
  border-color: color-mix(in srgb, var(--ui-accent-card-color, var(--theme-primary, #38bdf8)) 24%, transparent) !important;
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--ui-accent-card-color, var(--theme-primary, #38bdf8)) 7%, transparent), transparent 46%),
    color-mix(in srgb, var(--color-bg, #020617) 95%, var(--ui-accent-card-color, var(--theme-primary, #38bdf8)) 5%) !important;
  box-shadow: none !important;
}

html[data-theme="light"] .course-choreo-card--add.ui-accent-card,
body[data-theme="light"] .course-choreo-card--add.ui-accent-card,
html[data-theme="light"] .courses-panel-root .course-choreo-card--add.ui-accent-card,
body[data-theme="light"] .courses-panel-root .course-choreo-card--add.ui-accent-card {
  opacity: .5 !important;
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--ui-accent-card-color, var(--theme-primary, #38bdf8)) 6%, transparent), transparent 46%),
    color-mix(in srgb, white 95%, var(--ui-accent-card-color, var(--theme-primary, #38bdf8)) 5%) !important;
}

.course-choreo-card--add.ui-accent-card .ui-accent-card__rail,
.courses-panel-root .course-choreo-card--add.ui-accent-card .ui-accent-card__rail {
  opacity: .46 !important;
  box-shadow: none !important;
}

.course-choreo-card--add.ui-accent-card:hover,
.course-choreo-card--add.ui-accent-card:focus-visible,
.courses-panel-root .course-choreo-card--add.ui-accent-card:hover,
.courses-panel-root .course-choreo-card--add.ui-accent-card:focus-visible {
  opacity: .74 !important;
}

@media (max-width: 767px) and (orientation: portrait) {
  .courses-panel-root--subpanel .courses-control-dock:not(.has-chips) {
    justify-content: stretch !important;
  }

  .courses-panel-root--subpanel .courses-control-dock__actions,
  .courses-panel-root--subpanel .courses-control-action {
    width: 100% !important;
  }
}

/* EDQ V42.0.51 — CTA flottants transparents + cartes d'ajout lisibles. */
.courses-control-dock,
html[data-theme="light"] .courses-control-dock,
body[data-theme="light"] .courses-control-dock,
.courses-panel-root--subpanel .courses-control-dock {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.courses-control-dock::before,
.courses-control-dock::after {
  content: none !important;
  display: none !important;
}

@media (max-width: 767px) and (orientation: portrait) {
  .courses-control-dock {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100vw !important;
    padding-inline: var(--courses-panel-content-left) var(--courses-panel-content-right) !important;
  }

  .courses-control-dock:not(.has-chips),
  .courses-panel-root--subpanel .courses-control-dock:not(.has-chips) {
    display: grid !important;
    justify-content: stretch !important;
    align-items: center !important;
  }

  .courses-control-dock__actions,
  .courses-control-dock:not(.has-chips) .courses-control-dock__actions,
  .courses-panel-root--subpanel .courses-control-dock:not(.has-chips) .courses-control-dock__actions {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: stretch !important;
  }

  .courses-control-dock__actions .courses-control-action,
  .courses-panel-root--subpanel .courses-control-dock__actions .courses-control-action {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

.courses-panel-root .course-add-card,
.courses-panel-root .course-student-card--add.ui-accent-card,
.courses-panel-root .course-choreo-card--add.ui-accent-card,
.course-student-card--add.ui-accent-card,
.course-choreo-card--add.ui-accent-card {
  opacity: 1 !important;
  border-style: dashed !important;
  border-width: 1.5px !important;
  border-color: color-mix(in srgb, var(--ui-accent-card-color, var(--theme-primary, #38bdf8)) 58%, transparent) !important;
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--ui-accent-card-color, var(--theme-primary, #38bdf8)) 9%, transparent), transparent 48%),
    color-mix(in srgb, var(--color-bg, #020617) 92%, transparent) !important;
  box-shadow: none !important;
}

html[data-theme="light"] .courses-panel-root .course-add-card,
body[data-theme="light"] .courses-panel-root .course-add-card,
html[data-theme="light"] .courses-panel-root .course-student-card--add.ui-accent-card,
body[data-theme="light"] .courses-panel-root .course-student-card--add.ui-accent-card,
html[data-theme="light"] .courses-panel-root .course-choreo-card--add.ui-accent-card,
body[data-theme="light"] .courses-panel-root .course-choreo-card--add.ui-accent-card,
html[data-theme="light"] .course-student-card--add.ui-accent-card,
body[data-theme="light"] .course-student-card--add.ui-accent-card,
html[data-theme="light"] .course-choreo-card--add.ui-accent-card,
body[data-theme="light"] .course-choreo-card--add.ui-accent-card {
  opacity: 1 !important;
  border-color: color-mix(in srgb, var(--ui-accent-card-color, var(--theme-primary, #38bdf8)) 50%, rgba(15,23,42,.14)) !important;
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--ui-accent-card-color, var(--theme-primary, #38bdf8)) 8%, transparent), transparent 48%),
    rgba(255,255,255,.34) !important;
}

.courses-panel-root .course-add-card *,
.courses-panel-root .course-student-card--add.ui-accent-card *,
.courses-panel-root .course-choreo-card--add.ui-accent-card *,
.course-student-card--add.ui-accent-card *,
.course-choreo-card--add.ui-accent-card * {
  opacity: 1 !important;
}


.courses-panel-root .course-add-card .course-card-add-icon,
.courses-panel-root .course-student-card--add.ui-accent-card .student-card-avatar,
.courses-panel-root .course-choreo-card--add.ui-accent-card .course-choreo-card-icon,
.course-student-card--add.ui-accent-card .student-card-avatar,
.course-choreo-card--add.ui-accent-card .course-choreo-card-icon {
  border-color: color-mix(in srgb, var(--ui-accent-card-color, var(--theme-primary, #38bdf8)) 52%, transparent) !important;
  background: color-mix(in srgb, var(--ui-accent-card-color, var(--theme-primary, #38bdf8)) 12%, transparent) !important;
}

.courses-panel-root .course-add-card:hover,
.courses-panel-root .course-add-card:focus-visible,
.courses-panel-root .course-student-card--add.ui-accent-card:hover,
.courses-panel-root .course-student-card--add.ui-accent-card:focus-visible,
.courses-panel-root .course-choreo-card--add.ui-accent-card:hover,
.courses-panel-root .course-choreo-card--add.ui-accent-card:focus-visible,
.course-student-card--add.ui-accent-card:hover,
.course-student-card--add.ui-accent-card:focus-visible,
.course-choreo-card--add.ui-accent-card:hover,
.course-choreo-card--add.ui-accent-card:focus-visible {
  border-color: color-mix(in srgb, var(--ui-accent-card-color, var(--theme-primary, #38bdf8)) 74%, transparent) !important;
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--ui-accent-card-color, var(--theme-primary, #38bdf8)) 13%, transparent), transparent 48%),
    color-mix(in srgb, var(--color-bg, #020617) 88%, transparent) !important;
}

html[data-theme="light"] .courses-panel-root .course-add-card:hover,
body[data-theme="light"] .courses-panel-root .course-add-card:hover,
html[data-theme="light"] .courses-panel-root .course-add-card:focus-visible,
body[data-theme="light"] .courses-panel-root .course-add-card:focus-visible,
html[data-theme="light"] .courses-panel-root .course-student-card--add.ui-accent-card:hover,
body[data-theme="light"] .courses-panel-root .course-student-card--add.ui-accent-card:hover,
html[data-theme="light"] .courses-panel-root .course-student-card--add.ui-accent-card:focus-visible,
body[data-theme="light"] .courses-panel-root .course-student-card--add.ui-accent-card:focus-visible,
html[data-theme="light"] .courses-panel-root .course-choreo-card--add.ui-accent-card:hover,
body[data-theme="light"] .courses-panel-root .course-choreo-card--add.ui-accent-card:hover,
html[data-theme="light"] .courses-panel-root .course-choreo-card--add.ui-accent-card:focus-visible,
body[data-theme="light"] .courses-panel-root .course-choreo-card--add.ui-accent-card:focus-visible {
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--ui-accent-card-color, var(--theme-primary, #38bdf8)) 11%, transparent), transparent 48%),
    rgba(255,255,255,.48) !important;
}

/* EDQ V42.0.52 — Panel Ajouter des élèves : cartes compactes, grille responsive et sélection par surbrillance. */
.courses-panel-root--student-picker .course-student-picker-list {
  width: var(--courses-panel-subpanel-readable-width) !important;
  max-width: 100% !important;
  margin-inline: auto !important;
}

.courses-panel-root--student-picker .course-student-picker-grid,
.course-student-picker-list .course-student-picker-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(13.25rem, 1fr)) !important;
  gap: clamp(.55rem, .9vw, .82rem) !important;
  align-items: stretch !important;
  width: 100% !important;
}

.course-student-picker-card.ui-accent-card {
  min-height: 0 !important;
  border-radius: 1rem !important;
  border: 1px solid color-mix(in srgb, var(--ui-accent-card-color, #38bdf8) 28%, rgba(255,255,255,.08)) !important;
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--ui-accent-card-color, #38bdf8) 13%, transparent), transparent 48%),
    color-mix(in srgb, var(--color-bg, #020617) 88%, var(--ui-accent-card-color, #38bdf8) 12%) !important;
  box-shadow: none !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform .14s ease,
    border-color .16s ease,
    background .16s ease,
    box-shadow .16s ease,
    filter .16s ease !important;
}

html[data-theme="light"] .course-student-picker-card.ui-accent-card,
body[data-theme="light"] .course-student-picker-card.ui-accent-card {
  border-color: color-mix(in srgb, var(--ui-accent-card-color, #38bdf8) 30%, rgba(15,23,42,.12)) !important;
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--ui-accent-card-color, #38bdf8) 12%, transparent), transparent 48%),
    color-mix(in srgb, white 80%, var(--ui-accent-card-color, #38bdf8) 20%) !important;
}

.course-student-picker-card.ui-accent-card .ui-accent-card__body {
  min-height: 4.45rem !important;
  display: grid !important;
  grid-template-columns: 2.65rem minmax(0, 1fr) !important;
  align-items: center !important;
  gap: .72rem !important;
  padding: .74rem .78rem .74rem .9rem !important;
}

.course-student-picker-card.ui-accent-card .ui-accent-card__rail {
  width: 3px !important;
  opacity: .72 !important;
  box-shadow: 0 0 18px color-mix(in srgb, var(--ui-accent-card-color, #38bdf8) 18%, transparent) !important;
}

.course-student-picker-card__avatar {
  width: 2.42rem !important;
  height: 2.42rem !important;
  min-width: 2.42rem !important;
  border-radius: .86rem !important;
  border: 1px solid color-mix(in srgb, var(--ui-accent-card-color, #38bdf8) 46%, transparent) !important;
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,.22), transparent 44%),
    color-mix(in srgb, var(--ui-accent-card-color, #38bdf8) 18%, #020617 82%) !important;
  color: color-mix(in srgb, white 86%, var(--ui-accent-card-color, #38bdf8) 14%) !important;
  font-size: .86rem !important;
  font-weight: 950 !important;
}

html[data-theme="light"] .course-student-picker-card__avatar,
body[data-theme="light"] .course-student-picker-card__avatar {
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,.75), transparent 44%),
    color-mix(in srgb, var(--ui-accent-card-color, #38bdf8) 16%, white 84%) !important;
  color: color-mix(in srgb, var(--ui-accent-card-color, #38bdf8) 72%, #0f172a 28%) !important;
}

.course-student-picker-card__identity {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: .15rem !important;
}

.course-student-picker-card__identity strong,
.course-student-picker-card__identity span,
.course-student-picker-card__identity small {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.course-student-picker-card__identity strong {
  color: var(--color-text, #f8fafc) !important;
  font-size: clamp(.92rem, 1.08vw, 1rem) !important;
  font-weight: 950 !important;
  line-height: 1.08 !important;
}

.course-student-picker-card__identity span {
  color: var(--color-text-muted, #94a3b8) !important;
  font-size: .82rem !important;
  font-weight: 800 !important;
  line-height: 1.12 !important;
}

.course-student-picker-card__identity small,
.course-student-picker-card__check {
  display: none !important;
}

.course-student-picker-card.ui-accent-card:hover,
.course-student-picker-card.ui-accent-card:focus-visible {
  transform: translateY(-1px) !important;
  border-color: color-mix(in srgb, var(--ui-accent-card-color, #38bdf8) 48%, rgba(255,255,255,.16)) !important;
  filter: saturate(1.06) brightness(1.02) !important;
}

.course-student-picker-card.ui-accent-card.is-selected {
  border-color: color-mix(in srgb, var(--ui-accent-card-color, #38bdf8) 78%, rgba(255,255,255,.16)) !important;
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--ui-accent-card-color, #38bdf8) 26%, transparent), transparent 48%),
    radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--ui-accent-card-color, #38bdf8) 18%, transparent), transparent 52%),
    color-mix(in srgb, var(--color-bg, #020617) 72%, var(--ui-accent-card-color, #38bdf8) 28%) !important;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--ui-accent-card-color, #38bdf8) 38%, transparent),
    0 16px 34px color-mix(in srgb, var(--ui-accent-card-color, #38bdf8) 15%, transparent) !important;
}

html[data-theme="light"] .course-student-picker-card.ui-accent-card.is-selected,
body[data-theme="light"] .course-student-picker-card.ui-accent-card.is-selected {
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--ui-accent-card-color, #38bdf8) 24%, transparent), transparent 48%),
    radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--ui-accent-card-color, #38bdf8) 16%, transparent), transparent 52%),
    color-mix(in srgb, white 64%, var(--ui-accent-card-color, #38bdf8) 36%) !important;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--ui-accent-card-color, #38bdf8) 36%, transparent),
    0 16px 34px color-mix(in srgb, var(--ui-accent-card-color, #38bdf8) 12%, transparent) !important;
}

.course-student-picker-card.ui-accent-card.is-selected .ui-accent-card__rail {
  width: 5px !important;
  opacity: 1 !important;
  box-shadow: 0 0 24px color-mix(in srgb, var(--ui-accent-card-color, #38bdf8) 42%, transparent) !important;
}

.course-student-picker-card.ui-accent-card.is-selected .course-student-picker-card__avatar {
  border-color: color-mix(in srgb, var(--ui-accent-card-color, #38bdf8) 84%, white 16%) !important;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--ui-accent-card-color, #38bdf8) 18%, transparent),
    0 8px 18px color-mix(in srgb, var(--ui-accent-card-color, #38bdf8) 18%, transparent) !important;
}

@media (max-width: 767px) and (orientation: portrait) {
  .courses-panel-root--student-picker .course-student-picker-grid,
  .course-student-picker-list .course-student-picker-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .58rem !important;
  }

  .course-student-picker-card.ui-accent-card .ui-accent-card__body {
    min-height: 4.6rem !important;
    grid-template-columns: 2.35rem minmax(0, 1fr) !important;
    gap: .58rem !important;
    padding: .68rem .58rem .68rem .72rem !important;
  }

  .course-student-picker-card__avatar {
    width: 2.22rem !important;
    height: 2.22rem !important;
    min-width: 2.22rem !important;
    border-radius: .78rem !important;
    font-size: .76rem !important;
  }

  .course-student-picker-card__identity strong {
    font-size: .88rem !important;
  }

  .course-student-picker-card__identity span {
    font-size: .76rem !important;
  }
}

@media (max-width: 767px) and (orientation: landscape) {
  .courses-panel-root--student-picker .course-student-picker-grid,
  .course-student-picker-list .course-student-picker-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .courses-panel-root--student-picker .course-student-picker-grid,
  .course-student-picker-list .course-student-picker-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .courses-panel-root--student-picker .course-student-picker-grid,
  .course-student-picker-list .course-student-picker-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1280px) {
  .courses-panel-root--student-picker .course-student-picker-grid,
  .course-student-picker-list .course-student-picker-grid {
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)) !important;
  }
}

@media (min-width: 1800px) {
  .courses-panel-root--student-picker .course-student-picker-grid,
  .course-student-picker-list .course-student-picker-grid {
    grid-template-columns: repeat(auto-fill, minmax(13.75rem, 1fr)) !important;
  }
}

/* EDQ V42.0.53 — Ajouter élèves compact + actions élèves/chorés propres. */
.courses-panel-root,
.courses-panel-root .ui-accent-card,
.courses-panel-root button {
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.courses-panel-root input,
.courses-panel-root textarea,
.courses-panel-root select,
.courses-panel-root [contenteditable="true"] {
  -webkit-touch-callout: default;
  -webkit-user-select: text;
  user-select: text;
}

/* Ajouter des élèves : tuiles de sélection, sans avatar ni initiales. */
.course-student-picker-card--simple.ui-accent-card .ui-accent-card__body {
  min-height: 4.2rem !important;
  grid-template-columns: minmax(0, 1fr) !important;
  padding: .76rem .82rem .76rem .92rem !important;
  gap: 0 !important;
}

.course-student-picker-card--simple .course-student-picker-card__identity {
  gap: .18rem !important;
}

.course-student-picker-card--simple .course-student-picker-card__identity strong {
  font-size: clamp(.92rem, 1.05vw, 1.02rem) !important;
  line-height: 1.05 !important;
}

.course-student-picker-card--simple .course-student-picker-card__identity span {
  font-size: clamp(.78rem, .92vw, .88rem) !important;
  line-height: 1.08 !important;
}

.course-student-picker-card--simple.ui-accent-card.is-selected::after {
  content: '';
  position: absolute;
  inset: .38rem;
  border-radius: calc(1rem - .18rem);
  border: 1px solid color-mix(in srgb, var(--ui-accent-card-color, #38bdf8) 42%, transparent);
  pointer-events: none;
}

@media (max-width: 767px) and (orientation: portrait) {
  .course-student-picker-card--simple.ui-accent-card .ui-accent-card__body {
    min-height: 4.1rem !important;
    padding: .7rem .66rem .7rem .78rem !important;
  }

  .course-student-picker-card--simple .course-student-picker-card__identity strong {
    font-size: .92rem !important;
  }

  .course-student-picker-card--simple .course-student-picker-card__identity span {
    font-size: .79rem !important;
  }
}

/* Vue du cours : même logique de colonnes que le picker, tout en gardant les avatars. */
.courses-panel-root--course-view .course-student-card-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(13.25rem, 1fr)) !important;
  gap: clamp(.55rem, .9vw, .82rem) !important;
  align-items: stretch !important;
  width: 100% !important;
}

.courses-panel-root--course-view .course-student-card.ui-accent-card .ui-accent-card__body {
  padding-right: .92rem !important;
}

.courses-panel-root--course-view .course-student-card__remove,
.courses-panel-root--course-view .student-course-remove-btn {
  display: none !important;
}

.courses-panel-root--course-view .course-student-card.ui-accent-card {
  cursor: pointer !important;
}

@media (max-width: 767px) and (orientation: portrait) {
  .courses-panel-root--course-view .course-student-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .58rem !important;
  }

  .courses-panel-root--course-view .course-student-card.ui-accent-card .ui-accent-card__body {
    min-height: 4.55rem !important;
    grid-template-columns: 2.15rem minmax(0, 1fr) !important;
    gap: .58rem !important;
    padding: .68rem .58rem .68rem .72rem !important;
  }

  .courses-panel-root--course-view .course-student-card__avatar {
    width: 2.08rem !important;
    height: 2.08rem !important;
    min-width: 2.08rem !important;
    border-radius: .74rem !important;
    font-size: .74rem !important;
  }

  .courses-panel-root--course-view .course-student-card__identity strong {
    font-size: .84rem !important;
  }

  .courses-panel-root--course-view .course-student-card__identity span {
    font-size: .74rem !important;
  }
}

@media (max-width: 767px) and (orientation: landscape) {
  .courses-panel-root--course-view .course-student-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .courses-panel-root--course-view .course-student-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .courses-panel-root--course-view .course-student-card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1280px) {
  .courses-panel-root--course-view .course-student-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)) !important;
  }
}

@media (min-width: 1800px) {
  .courses-panel-root--course-view .course-student-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(13.75rem, 1fr)) !important;
  }
}

.course-student-context-menu {
  position: fixed;
  z-index: 1200;
  min-width: 13.5rem;
  padding: .42rem;
  border: 1px solid color-mix(in srgb, var(--theme-primary, #38bdf8) 28%, rgba(255,255,255,.12));
  border-radius: 1rem;
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--theme-primary, #38bdf8) 12%, transparent), transparent 50%),
    color-mix(in srgb, var(--color-bg, #020617) 86%, rgba(15,23,42,.92) 14%);
  box-shadow: 0 22px 46px rgba(0,0,0,.28);
  opacity: 0;
  transform: translateY(-.35rem) scale(.97);
  transform-origin: top center;
  transition: opacity .14s ease, transform .16s cubic-bezier(.18, 1.08, .32, 1);
}

.course-student-context-menu.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.course-student-context-menu.is-closing {
  opacity: 0;
  transform: translateY(-.28rem) scale(.97);
}

.course-student-context-menu__item {
  width: 100%;
  min-height: 2.55rem;
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr);
  align-items: center;
  gap: .58rem;
  border: 0;
  border-radius: .78rem;
  background: transparent;
  color: var(--color-text, #f8fafc);
  font-weight: 850;
  text-align: left;
  cursor: pointer;
}

.course-student-context-menu__item:hover,
.course-student-context-menu__item:focus-visible {
  background: color-mix(in srgb, var(--theme-primary, #38bdf8) 14%, transparent);
  outline: none;
}

.course-student-context-menu__item i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--theme-primary, #38bdf8) 82%, white 18%);
}

.course-student-context-menu__item--danger {
  color: color-mix(in srgb, #fb7185 86%, white 14%);
}

.course-student-context-menu__item--danger:hover,
.course-student-context-menu__item--danger:focus-visible {
  background: color-mix(in srgb, #ef4444 16%, transparent);
}

.course-student-context-menu__item--danger i {
  color: color-mix(in srgb, #fb7185 86%, white 14%);
}

html[data-theme="light"] .course-student-context-menu,
body[data-theme="light"] .course-student-context-menu {
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--theme-primary, #38bdf8) 10%, transparent), transparent 50%),
    rgba(255,255,255,.96);
  border-color: color-mix(in srgb, var(--theme-primary, #38bdf8) 24%, rgba(15,23,42,.14));
  box-shadow: 0 22px 46px rgba(15,23,42,.14);
}

html[data-theme="light"] .course-student-context-menu__item,
body[data-theme="light"] .course-student-context-menu__item {
  color: #0f172a;
}

/* Les chorégraphies se modifient au clic sur la carte, pas via un bouton interne. */
.course-choreo-card--clickable.ui-accent-card {
  cursor: pointer !important;
}

.course-choreo-card--clickable.ui-accent-card:hover,
.course-choreo-card--clickable.ui-accent-card:focus-visible {
  border-color: color-mix(in srgb, var(--ui-accent-card-color, var(--theme-primary, #38bdf8)) 48%, rgba(255,255,255,.14)) !important;
  filter: saturate(1.05) brightness(1.02) !important;
  outline: none !important;
}

.course-choreo-card__edit {
  display: none !important;
}

/* EDQ V42.0.54 — Respiration rail/cartes élèves. */
.course-student-picker-card--simple.ui-accent-card .ui-accent-card__body {
  padding-left: clamp(1.34rem, 2.1vw, 1.58rem) !important;
}

@media (max-width: 767px) and (orientation: portrait) {
  .course-student-picker-card--simple.ui-accent-card .ui-accent-card__body {
    padding-left: 1.24rem !important;
  }

  .courses-panel-root--course-view .course-student-card.ui-accent-card .ui-accent-card__body {
    padding-left: 1.18rem !important;
    gap: .52rem !important;
  }
}

/* EDQ V42.0.55 — Smartbar focus : conserver le ruban chips/CTA dans le flux. */
body.courses-smart-focus-active .courses-smart-strip {
  position: sticky !important;
  top: calc(var(--courses-panel-nav-height) + .55rem) !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 clamp(.8rem, 2vw, 1.1rem) !important;
  transform: none !important;
}

body.courses-smart-focus-active .courses-smart-strip.is-empty {
  min-height: var(--courses-smart-row-height, 2.35rem) !important;
  visibility: visible !important;
}

body.courses-smart-focus-active .courses-smart-strip .courses-smart-overflow {
  z-index: 4200 !important;
}

@media (max-width: 767px) {
  body.courses-smart-focus-active .courses-smart-strip {
    top: calc(var(--courses-panel-nav-height) + .45rem) !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* EDQ V42.0.56 — Ruban plus compact + chip +X masquée pendant le tiroir. */
.courses-panel-root {
  --courses-smart-row-height: 2.24rem;
  --courses-control-row-height: 2.58rem;
}

.courses-panel-content:has(> .courses-smart-strip:first-child) {
  padding-top: clamp(.62rem, 1.45vw, .92rem) !important;
}

.courses-control-dock {
  min-height: calc(var(--courses-control-row-height, 2.58rem) + .42rem) !important;
  padding-top: .22rem !important;
  padding-bottom: .22rem !important;
  align-items: center !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-theme="light"] .courses-control-dock,
body[data-theme="light"] .courses-control-dock {
  background: transparent !important;
}

.courses-control-dock__chips,
.courses-control-dock__actions {
  align-items: center !important;
}

.courses-control-action {
  --courses-control-row-height: 2.58rem !important;
}

.courses-smart-strip {
  --courses-smart-row-height: 2.24rem !important;
  min-height: var(--courses-smart-row-height) !important;
  margin-bottom: clamp(.46rem, 1.15vw, .72rem) !important;
  align-items: center !important;
}

body.courses-smart-focus-active .courses-smart-strip {
  margin-bottom: clamp(.46rem, 1.15vw, .72rem) !important;
}

.courses-smart-summary strong,
.courses-smart-chip {
  height: var(--courses-smart-row-height) !important;
  min-height: var(--courses-smart-row-height) !important;
  max-height: var(--courses-smart-row-height) !important;
}

.courses-smart-strip:not(.is-expanded),
.courses-smart-strip:not(.is-expanded) .courses-smart-summary,
.courses-smart-strip:not(.is-expanded) .courses-smart-chips {
  height: var(--courses-smart-row-height) !important;
  max-height: var(--courses-smart-row-height) !important;
}

.courses-smart-chip--more {
  transition:
    opacity .14s ease,
    transform .14s ease,
    max-width .16s ease,
    min-width .16s ease,
    padding .16s ease,
    margin .16s ease !important;
}

.courses-smart-strip.is-overflow-open .courses-smart-chip--more {
  opacity: 0 !important;
  transform: translateY(-.08rem) scale(.84) !important;
  min-width: 0 !important;
  width: 0 !important;
  max-width: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: -.45rem !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

@media (max-width: 767px) and (orientation: portrait) {
  .courses-control-dock {
    min-height: calc(var(--courses-control-row-height, 2.58rem) + .36rem) !important;
    padding-top: .18rem !important;
    padding-bottom: .18rem !important;
  }

  .courses-control-action {
    --courses-control-row-height: 2.54rem !important;
  }

  .courses-smart-strip {
    --courses-smart-row-height: 2.18rem !important;
    margin-bottom: .52rem !important;
  }

  body.courses-smart-focus-active .courses-smart-strip {
    margin-bottom: .52rem !important;
  }
}

/* EDQ V42.0.57 — Alignement navbar large : sidebar, dock et sticky sous la vraie hauteur. */
@media (min-width: 1181px) and (min-height: 521px) {
  body.courses-panel-active {
    --courses-panel-nav-height: var(--edq-navbar-height-current, var(--app-header-safe-height, 72px));
  }

  body.courses-panel-active .courses-panel-root {
    --courses-panel-wide-navbar-clearance: calc(
      var(--edq-navbar-height-current, var(--app-header-safe-height, 72px))
      + var(--edq-navbar-fade-height-current, 1.2rem)
      + .22rem
    );
    --courses-panel-sticky-top: var(--courses-panel-wide-navbar-clearance);
    scroll-padding-top: calc(var(--courses-panel-wide-navbar-clearance) + 1rem);
  }

  body.courses-panel-active .courses-control-dock,
  body.courses-panel-active .courses-smart-strip {
    top: var(--courses-panel-sticky-top) !important;
  }
}

/* EDQ V42.0.58 — Smartbar Élèves disponibles + croix native unique. */
.courses-searchbar--navbar .courses-searchbar__clear,
.courses-searchbar--navbar .ui-smartbar-search-clear {
  display: none !important;
}

.courses-control-dock .student-picker-smart-strip {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  min-height: var(--courses-smart-row-height, 2.24rem) !important;
  pointer-events: auto !important;
}

.courses-control-dock .student-picker-smart-strip.is-empty {
  pointer-events: none !important;
}

.courses-control-dock .student-picker-smart-strip.is-empty .student-picker-smart-chips {
  visibility: hidden !important;
  opacity: 0 !important;
}

.courses-control-dock .student-picker-smart-chips {
  width: 100% !important;
  min-height: var(--courses-smart-row-height, 2.24rem) !important;
  overflow: hidden !important;
}

.courses-control-dock .student-picker-smart-chip {
  max-width: min(15rem, 36vw) !important;
}

.courses-panel-root--student-picker .courses-control-dock {
  pointer-events: none !important;
}

.courses-panel-root--student-picker .courses-control-dock__chips,
.courses-panel-root--student-picker .courses-control-dock__actions,
.courses-panel-root--student-picker .courses-control-action,
.courses-panel-root--student-picker .student-picker-smart-chip {
  pointer-events: auto !important;
}

body.courses-smart-focus-active .courses-control-dock .student-picker-smart-strip {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

@media (max-width: 767px) and (orientation: portrait) {
  .courses-panel-root--student-picker .courses-control-dock {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: .34rem !important;
  }

  .courses-panel-root--student-picker .courses-control-dock__actions {
    order: -1 !important;
  }

  .courses-panel-root--student-picker .courses-control-dock__chips {
    width: 100% !important;
  }

  .courses-control-dock .student-picker-smart-chip {
    max-width: min(9.6rem, 42vw) !important;
  }
}

/* EDQ V42.0.59 — compteur élèves toujours visible dans le dock Ajouter au cours. */
.courses-control-dock .student-picker-smart-strip.is-empty .student-picker-smart-summary,
.courses-control-dock .student-picker-smart-strip .student-picker-smart-summary {
  visibility: visible !important;
  opacity: 1 !important;
}

.courses-control-dock .student-picker-smart-summary strong {
  pointer-events: none !important;
}

/* EDQ V42.0.60 — Smartbar : compteurs persistants, sections vue cours en chips et dock plus serré. */
.courses-panel-list > .courses-smart-strip.is-empty .courses-smart-summary,
.courses-panel-list > .courses-smart-strip .courses-smart-summary {
  visibility: visible !important;
  opacity: 1 !important;
}

.courses-panel-list > .courses-smart-strip.is-empty .courses-smart-chips {
  visibility: hidden !important;
  opacity: 0 !important;
}

.courses-panel-list > .courses-smart-strip.is-empty {
  pointer-events: none !important;
}

.courses-panel-list > .courses-smart-strip.is-empty .courses-smart-summary {
  pointer-events: none !important;
}

.course-view-section-header {
  display: flex !important;
  align-items: center !important;
  gap: .55rem !important;
  margin: 0 0 clamp(.58rem, 1.05vw, .82rem) !important;
  padding: 0 !important;
  border: 0 !important;
}

.course-view-section-counter {
  display: inline-flex !important;
  align-items: center !important;
  min-height: var(--courses-smart-row-height, 2.24rem) !important;
  margin: 0 !important;
}

.course-view-section-counter strong {
  height: var(--courses-smart-row-height, 2.24rem) !important;
  min-height: var(--courses-smart-row-height, 2.24rem) !important;
  max-height: var(--courses-smart-row-height, 2.24rem) !important;
}

.courses-panel-root--course-view .student-courses-admin,
.courses-panel-root--course-view .course-choreos-admin {
  border-top: 0 !important;
  padding-top: 0 !important;
}

.courses-panel-root--course-view .student-courses-admin + .course-choreos-admin {
  margin-top: clamp(.5rem, 1.2vw, .95rem) !important;
}

@media (min-width: 1024px) {
  .courses-panel-root--subpanel .course-student-picker-panel-body,
  .courses-panel-root--subpanel .course-view-panel-body,
  .courses-panel-root--subpanel .course-form-panel-body,
  .courses-panel-root--subpanel .course-choreography-form-panel-body {
    padding-top: clamp(.42rem, .85vw, .72rem) !important;
  }

  .courses-control-dock {
    min-height: calc(var(--courses-control-row-height, 2.58rem) + .22rem) !important;
    padding-top: .11rem !important;
    padding-bottom: .11rem !important;
  }

  .courses-control-dock + .courses-panel-content,
  .courses-control-dock + .course-student-picker-panel-body,
  .courses-control-dock + .course-view-panel-body {
    padding-top: clamp(.42rem, .85vw, .72rem) !important;
  }

  .courses-smart-strip {
    margin-bottom: clamp(.28rem, .62vw, .48rem) !important;
  }
}

@media (min-width: 1181px) and (min-height: 521px) {
  body.courses-panel-active .courses-control-dock,
  body.courses-panel-active .courses-smart-strip {
    top: calc(var(--courses-panel-sticky-top, var(--courses-panel-nav-height, 4.35rem)) + .08rem) !important;
  }

  body.courses-panel-active .courses-panel-list > .courses-smart-strip {
    margin-top: 0 !important;
  }

  body.courses-panel-active .courses-panel-content:has(> .courses-smart-strip:first-child) {
    padding-top: clamp(.42rem, .75vw, .64rem) !important;
  }
}

/* EDQ V42.0.61 — Compteurs vue cours alignés à gauche + dock compact et recalé en grand écran. */
.courses-panel-root--course-view .course-view-section-header,
.courses-panel-root--course-view .student-courses-admin-header.course-view-section-header {
  width: 100% !important;
  max-width: 100% !important;
  justify-content: flex-start !important;
  justify-items: start !important;
  align-items: center !important;
  text-align: left !important;
  margin-inline: 0 !important;
}

.courses-panel-root--course-view .course-view-section-counter,
.courses-panel-root--course-view .course-view-section-counter strong {
  margin-inline: 0 !important;
}

/* Dock plus nerveux : on garde la réserve stable, mais on retire l'air inutile entre le dock et les cartes. */
.courses-panel-root {
  --courses-smart-row-height: 2.14rem;
  --courses-control-row-height: 2.46rem;
}

.courses-control-dock {
  min-height: calc(var(--courses-control-row-height, 2.46rem) + .12rem) !important;
  padding-top: .06rem !important;
  padding-bottom: .06rem !important;
  margin: 0 !important;
  align-items: center !important;
}

.courses-smart-strip {
  min-height: var(--courses-smart-row-height, 2.14rem) !important;
  margin-bottom: clamp(.18rem, .45vw, .36rem) !important;
}

.courses-smart-summary strong,
.courses-smart-chip,
.student-picker-smart-summary strong,
.student-picker-smart-chip {
  height: var(--courses-smart-row-height, 2.14rem) !important;
  min-height: var(--courses-smart-row-height, 2.14rem) !important;
  max-height: var(--courses-smart-row-height, 2.14rem) !important;
}

.courses-panel-content:has(> .courses-smart-strip:first-child) {
  padding-top: clamp(.30rem, .55vw, .52rem) !important;
}

.courses-control-dock + .courses-panel-content,
.courses-control-dock + .course-student-picker-panel-body,
.courses-control-dock + .course-view-panel-body,
.courses-control-dock + .course-form-panel-body,
.courses-control-dock + .course-choreography-form-panel-body {
  padding-top: clamp(.30rem, .55vw, .52rem) !important;
}

.courses-panel-root--student-picker .course-student-picker-list,
.courses-panel-root--course-view .student-courses-admin,
.courses-panel-root--course-view .course-choreos-admin {
  margin-top: 0 !important;
}

@media (min-width: 1024px) {
  .courses-control-dock {
    min-height: calc(var(--courses-control-row-height, 2.46rem) + .08rem) !important;
    padding-top: .04rem !important;
    padding-bottom: .04rem !important;
  }

  .courses-control-dock + .courses-panel-content,
  .courses-control-dock + .course-student-picker-panel-body,
  .courses-control-dock + .course-view-panel-body,
  .courses-control-dock + .course-form-panel-body,
  .courses-control-dock + .course-choreography-form-panel-body {
    padding-top: clamp(.24rem, .42vw, .42rem) !important;
  }

  .courses-panel-content:has(> .courses-smart-strip:first-child) {
    padding-top: clamp(.24rem, .42vw, .42rem) !important;
  }
}

/* Au seuil 1181px, la navbar grandit : on aligne explicitement le sticky et la sidebar sur sa hauteur réelle,
   sans utiliser toute la nappe de fondu comme zone morte. */
@media (min-width: 1181px) and (min-height: 521px) {
  body.courses-panel-active .courses-panel-root {
    --courses-panel-wide-navbar-clearance: calc(var(--edq-navbar-height-current, 4.35rem) + clamp(.38rem, .65vw, .62rem));
    --courses-panel-sticky-top: var(--courses-panel-wide-navbar-clearance);
    scroll-padding-top: calc(var(--courses-panel-wide-navbar-clearance) + .72rem) !important;
  }

  body.courses-panel-active .courses-control-dock,
  body.courses-panel-active .courses-smart-strip,
  body.courses-panel-active .courses-panel-list > .courses-smart-strip {
    top: var(--courses-panel-wide-navbar-clearance) !important;
  }

  body.courses-panel-active .courses-panel-list > .courses-smart-strip {
    margin-top: 0 !important;
    margin-bottom: clamp(.16rem, .36vw, .30rem) !important;
  }

  body.courses-panel-active .courses-control-dock {
    min-height: calc(var(--courses-control-row-height, 2.46rem) + .04rem) !important;
    padding-top: .02rem !important;
    padding-bottom: .02rem !important;
  }

  body.courses-panel-active .courses-panel-content:has(> .courses-smart-strip:first-child),
  body.courses-panel-active .courses-control-dock + .courses-panel-content,
  body.courses-panel-active .courses-control-dock + .course-student-picker-panel-body,
  body.courses-panel-active .courses-control-dock + .course-view-panel-body,
  body.courses-panel-active .courses-control-dock + .course-form-panel-body,
  body.courses-panel-active .courses-control-dock + .course-choreography-form-panel-body {
    padding-top: clamp(.20rem, .34vw, .36rem) !important;
  }
}

@media (max-width: 767px) and (orientation: portrait) {
  .courses-panel-root {
    --courses-smart-row-height: 2.12rem;
    --courses-control-row-height: 2.44rem;
  }

  .courses-control-dock {
    min-height: calc(var(--courses-control-row-height, 2.44rem) + .18rem) !important;
    padding-top: .08rem !important;
    padding-bottom: .08rem !important;
  }
}

/* EDQ V42.0.62 — Compteurs de vue à gauche + dock élève aligné à 1181px+. */
.courses-panel-root--course-view .student-courses-admin,
.courses-panel-root--course-view .course-choreos-admin {
  align-items: stretch !important;
}

.courses-panel-root--course-view .student-courses-admin > .course-view-section-header,
.courses-panel-root--course-view .course-choreos-admin > .course-view-section-header,
.courses-panel-root--course-view .student-courses-admin-header.course-view-section-header {
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  justify-items: start !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 clamp(.42rem, .78vw, .62rem) 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

.courses-panel-root--course-view .course-view-section-counter,
.courses-panel-root--course-view .course-view-section-counter.courses-smart-summary {
  align-self: flex-start !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  width: auto !important;
  max-width: max-content !important;
  margin: 0 !important;
  transform: none !important;
}

.courses-panel-root--course-view .course-view-section-counter strong {
  margin: 0 !important;
  transform: none !important;
}

.courses-panel-root--course-view .course-view-panel-body {
  padding-top: clamp(.28rem, .58vw, .52rem) !important;
  gap: clamp(.58rem, .95vw, .82rem) !important;
}

.courses-panel-root--course-view .student-courses-admin-body,
.courses-panel-root--course-view [data-course-choreos-body] {
  margin-top: 0 !important;
}

.courses-panel-root--course-view .student-courses-admin + .course-choreos-admin {
  margin-top: clamp(.52rem, .95vw, .78rem) !important;
}

.courses-panel-root--student-picker .courses-control-dock--student-picker,
.courses-panel-root--student-picker .courses-control-dock {
  align-items: center !important;
  min-height: calc(var(--courses-control-row-height, 2.46rem) + .08rem) !important;
  padding-top: .04rem !important;
  padding-bottom: .04rem !important;
}

.courses-panel-root--student-picker .courses-control-dock__chips,
.courses-panel-root--student-picker .courses-control-dock__actions {
  align-self: center !important;
  align-items: center !important;
}

.courses-panel-root--student-picker .courses-control-dock .student-picker-smart-strip {
  align-self: center !important;
  margin: 0 !important;
}

.courses-panel-root--student-picker .course-student-picker-panel-body {
  padding-top: clamp(.24rem, .45vw, .42rem) !important;
}

.courses-panel-root--student-picker .course-student-picker-list {
  margin-top: 0 !important;
}

@media (min-width: 1024px) {
  .courses-panel-root--course-view .course-view-panel-body,
  .courses-panel-root--student-picker .course-student-picker-panel-body {
    padding-top: clamp(.20rem, .34vw, .36rem) !important;
  }

  .courses-panel-root--student-picker .courses-control-dock--student-picker,
  .courses-panel-root--student-picker .courses-control-dock {
    grid-template-columns: minmax(0, 1fr) auto !important;
    min-height: calc(var(--courses-control-row-height, 2.46rem) + .04rem) !important;
    padding-top: .02rem !important;
    padding-bottom: .02rem !important;
  }
}

@media (min-width: 1181px) and (min-height: 521px) {
  body.courses-panel-active .courses-panel-root {
    --courses-panel-wide-navbar-clearance: calc(var(--edq-navbar-height-current, 4.35rem) + clamp(.16rem, .32vw, .34rem));
    --courses-panel-sticky-top: var(--courses-panel-wide-navbar-clearance);
    scroll-padding-top: calc(var(--courses-panel-wide-navbar-clearance) + .48rem) !important;
  }

  body.courses-panel-active .courses-control-dock,
  body.courses-panel-active .courses-smart-strip,
  body.courses-panel-active .courses-panel-list > .courses-smart-strip {
    top: var(--courses-panel-wide-navbar-clearance) !important;
  }

  body.courses-panel-active .courses-panel-root--student-picker .courses-control-dock,
  body.courses-panel-active .courses-panel-root--student-picker .courses-control-dock--student-picker {
    min-height: calc(var(--courses-control-row-height, 2.46rem) + .02rem) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    align-items: center !important;
  }

  body.courses-panel-active .courses-panel-root--student-picker .courses-control-dock__chips,
  body.courses-panel-active .courses-panel-root--student-picker .courses-control-dock__actions,
  body.courses-panel-active .courses-panel-root--student-picker .student-picker-smart-strip {
    align-self: center !important;
  }

  body.courses-panel-active .courses-panel-root--student-picker .course-student-picker-panel-body,
  body.courses-panel-active .courses-panel-root--course-view .course-view-panel-body {
    padding-top: clamp(.14rem, .24vw, .28rem) !important;
  }

  body.courses-panel-active .courses-panel-root--student-picker .course-student-picker-list,
  body.courses-panel-active .courses-panel-root--course-view .student-courses-admin,
  body.courses-panel-active .courses-panel-root--course-view .course-choreos-admin {
    margin-top: 0 !important;
  }
}

/* EDQ V42.0.63 — Ajouter au cours : dock vraiment compact + Smartbar interne non décalée. */
.courses-panel-root--student-picker .students-panel-list.course-student-picker-list,
.courses-panel-root--student-picker .course-student-picker-list,
body.courses-panel-active .courses-panel-root--student-picker .students-panel-list.course-student-picker-list,
body.courses-panel-active .courses-panel-root--student-picker .course-student-picker-list {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.courses-panel-root--student-picker .course-student-picker-panel-body,
body.courses-panel-active .courses-panel-root--student-picker .course-student-picker-panel-body {
  padding-top: clamp(.16rem, .32vw, .32rem) !important;
}

.courses-panel-root--student-picker .courses-control-dock,
body.courses-panel-active .courses-panel-root--student-picker .courses-control-dock,
body.courses-panel-active .courses-panel-root--student-picker .courses-control-dock--student-picker {
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  min-height: calc(var(--courses-control-row-height, 2.46rem) + .04rem) !important;
  padding-top: .02rem !important;
  padding-bottom: .02rem !important;
}

.courses-panel-root--student-picker .courses-control-dock__chips,
.courses-panel-root--student-picker .courses-control-dock__actions,
body.courses-panel-active .courses-panel-root--student-picker .courses-control-dock__chips,
body.courses-panel-active .courses-panel-root--student-picker .courses-control-dock__actions {
  align-self: center !important;
  align-items: center !important;
  min-height: var(--courses-control-row-height, 2.46rem) !important;
}

.courses-panel-root--student-picker .courses-control-dock .student-picker-smart-strip,
body.courses-panel-active .courses-panel-root--student-picker .courses-control-dock .student-picker-smart-strip,
body.courses-panel-active .courses-panel-root--student-picker .courses-control-dock--student-picker .student-picker-smart-strip {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  margin: 0 !important;
  align-self: center !important;
  display: flex !important;
  align-items: center !important;
  min-height: var(--courses-smart-row-height, 2.14rem) !important;
  height: var(--courses-smart-row-height, 2.14rem) !important;
  max-height: var(--courses-smart-row-height, 2.14rem) !important;
}

.courses-panel-root--student-picker .student-picker-smart-summary,
.courses-panel-root--student-picker .student-picker-smart-chips,
body.courses-panel-active .courses-panel-root--student-picker .student-picker-smart-summary,
body.courses-panel-active .courses-panel-root--student-picker .student-picker-smart-chips {
  align-self: center !important;
  align-items: center !important;
}

@media (min-width: 1024px) {
  .courses-panel-root--student-picker .course-student-picker-panel-body,
  body.courses-panel-active .courses-panel-root--student-picker .course-student-picker-panel-body {
    padding-top: clamp(.12rem, .22vw, .24rem) !important;
  }
}

@media (min-width: 1181px) and (min-height: 521px) {
  body.courses-panel-active .courses-panel-root--student-picker .courses-control-dock .student-picker-smart-strip,
  body.courses-panel-active .courses-panel-root--student-picker .courses-control-dock--student-picker .student-picker-smart-strip {
    top: auto !important;
  }

  body.courses-panel-active .courses-panel-root--student-picker .course-student-picker-panel-body {
    padding-top: clamp(.10rem, .18vw, .22rem) !important;
  }
}

/* EDQ V42.0.64 — Ajouter au cours : dock sticky calé sous la navbar large. */
@media (min-width: 1181px) and (min-height: 521px) {
  body.courses-panel-active .courses-panel-root--student-picker {
    /* À ce seuil la navbar gagne en hauteur : le dock doit suivre la vraie zone utile,
       sans reprendre toute la nappe de flou. */
    --courses-panel-wide-navbar-clearance: calc(
      var(--edq-navbar-height-current, 4.85rem)
      + clamp(.70rem, .72vw, .95rem)
    );
    --courses-panel-sticky-top: var(--courses-panel-wide-navbar-clearance);
  }

  body.courses-panel-active .courses-panel-root--student-picker .courses-control-dock,
  body.courses-panel-active .courses-panel-root--student-picker .courses-control-dock--student-picker {
    top: var(--courses-panel-wide-navbar-clearance) !important;
  }
}

/* EDQ V43.3.1 — Smartbar Cours : compteur ancré à gauche après renommage interne. */
.courses-panel-list > .courses-smart-strip {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  justify-content: flex-start !important;
  justify-items: start !important;
  align-self: stretch !important;
  justify-self: stretch !important;
}

.courses-panel-list > .courses-smart-strip .courses-smart-summary {
  margin-left: 0 !important;
  margin-right: 0 !important;
  align-self: center !important;
  justify-self: start !important;
}

.courses-panel-list > .courses-smart-strip.is-empty .courses-smart-summary {
  margin-inline: 0 auto !important;
}

.courses-panel-list > .courses-smart-strip.is-empty .courses-smart-chips {
  display: none !important;
}

body.courses-smart-focus-active .courses-panel-list > .courses-smart-strip {
  width: 100% !important;
  max-width: 100% !important;
  justify-content: flex-start !important;
}

/* EDQ V43.3.2 — Dock mobile unifié : compteur + chips + CTA sur une seule ligne. */
.courses-control-dock__chips > .courses-smart-strip {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  z-index: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  transform: none !important;
}

.courses-control-dock--main .courses-smart-strip,
.courses-control-dock--student-picker .student-picker-smart-strip {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: .45rem !important;
}

.courses-control-dock--main .courses-smart-summary,
.courses-control-dock--main .courses-smart-chips,
.courses-control-dock--student-picker .student-picker-smart-summary,
.courses-control-dock--student-picker .student-picker-smart-chips {
  align-self: center !important;
  align-items: center !important;
}

.courses-control-dock--main .courses-smart-summary,
.courses-control-dock--student-picker .student-picker-smart-summary {
  flex: 0 0 auto !important;
}

.courses-control-dock--main .courses-smart-chips,
.courses-control-dock--student-picker .student-picker-smart-chips {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.courses-control-dock--main .courses-smart-strip.is-empty .courses-smart-summary,
.courses-control-dock--main .courses-smart-strip.is-empty .courses-smart-chips {
  visibility: visible !important;
  opacity: 1 !important;
}

.courses-control-dock--main .courses-smart-strip.is-empty .courses-smart-chips {
  display: none !important;
}

.courses-control-dock--main .courses-smart-overflow,
.courses-control-dock--student-picker .courses-smart-overflow {
  left: 0 !important;
  right: 0 !important;
}

.courses-control-dock + .courses-panel-content {
  padding-top: clamp(.28rem, .52vw, .48rem) !important;
}

@media (max-width: 767px) {
  body.courses-panel-active .courses-control-dock {
    width: 100vw !important;
    min-height: calc(var(--courses-control-row-height, 2.44rem) + .14rem) !important;
    padding-top: .07rem !important;
    padding-bottom: .07rem !important;
    display: grid !important;
    align-items: center !important;
    gap: .5rem !important;
  }

  body.courses-panel-active .courses-control-dock.has-chips.has-action {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  body.courses-panel-active .courses-control-dock.has-chips:not(.has-action),
  body.courses-panel-active .courses-control-dock:not(.has-chips).has-action,
  body.courses-panel-active .courses-control-dock:not(.has-chips):not(.has-action) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.courses-panel-active .courses-control-dock__chips {
    grid-column: 1 !important;
    order: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    justify-content: flex-start !important;
    justify-self: stretch !important;
    align-self: center !important;
    overflow: visible !important;
  }

  body.courses-panel-active .courses-control-dock__actions {
    order: 0 !important;
    width: auto !important;
    min-width: max-content !important;
    max-width: 46vw !important;
    justify-content: flex-end !important;
    justify-self: end !important;
    align-self: center !important;
  }

  body.courses-panel-active .courses-control-dock.has-chips.has-action .courses-control-dock__actions {
    grid-column: 2 !important;
  }

  body.courses-panel-active .courses-control-dock:not(.has-chips).has-action .courses-control-dock__actions {
    grid-column: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.courses-panel-active .courses-control-dock__actions .courses-control-action {
    width: auto !important;
    min-width: var(--courses-control-row-height, 2.44rem) !important;
    max-width: min(46vw, 12rem) !important;
    padding-inline: .86rem !important;
  }

  body.courses-panel-active .courses-control-dock:not(.has-chips).has-action .courses-control-action {
    max-width: min(52vw, 12rem) !important;
  }

  body.courses-panel-active .courses-control-dock__chips > .courses-smart-strip {
    min-height: var(--courses-smart-row-height, 2.12rem) !important;
    height: var(--courses-smart-row-height, 2.12rem) !important;
    max-height: var(--courses-smart-row-height, 2.12rem) !important;
    margin: 0 !important;
  }

  body.courses-panel-active .courses-control-dock__chips > .courses-smart-strip:not(.is-expanded),
  body.courses-panel-active .courses-control-dock__chips > .courses-smart-strip:not(.is-expanded) .courses-smart-summary,
  body.courses-panel-active .courses-control-dock__chips > .courses-smart-strip:not(.is-expanded) .courses-smart-chips {
    height: var(--courses-smart-row-height, 2.12rem) !important;
    max-height: var(--courses-smart-row-height, 2.12rem) !important;
  }

  body.courses-panel-active .courses-control-dock--main .courses-smart-strip,
  body.courses-panel-active .courses-control-dock--student-picker .student-picker-smart-strip {
    flex-wrap: nowrap !important;
  }

  body.courses-panel-active .courses-control-dock--main .courses-smart-summary strong,
  body.courses-panel-active .courses-control-dock--main .courses-smart-chip,
  body.courses-panel-active .courses-control-dock--student-picker .student-picker-smart-summary strong,
  body.courses-panel-active .courses-control-dock--student-picker .student-picker-smart-chip {
    height: var(--courses-smart-row-height, 2.12rem) !important;
    min-height: var(--courses-smart-row-height, 2.12rem) !important;
    max-height: var(--courses-smart-row-height, 2.12rem) !important;
  }

  body.courses-panel-active .courses-control-dock--main .courses-smart-chip,
  body.courses-panel-active .courses-control-dock--student-picker .student-picker-smart-chip {
    max-width: min(34vw, 10.5rem) !important;
  }

  body.courses-panel-active .courses-control-dock + .courses-panel-content,
  body.courses-panel-active .courses-control-dock + .course-student-picker-panel-body,
  body.courses-panel-active .courses-control-dock + .course-view-panel-body,
  body.courses-panel-active .courses-control-dock + .course-form-panel-body,
  body.courses-panel-active .courses-control-dock + .course-choreography-form-panel-body {
    padding-top: clamp(.24rem, .54vw, .42rem) !important;
  }
}

/* EDQ V43.3.3 — Normalisation mobile du socle Cours : navbar → hero → dock → contenu. */
.courses-panel-root .courses-control-dock[data-courses-main-control-dock],
.courses-panel-root .courses-control-dock[data-course-view-action-dock],
.courses-panel-root .courses-control-dock[data-course-form-action-dock],
.courses-panel-root .courses-control-dock[data-course-choreo-action-dock],
.courses-panel-root .courses-control-dock[data-student-picker-action-dock],
.courses-panel-root .courses-control-dock[data-course-delete-action-dock],
.courses-panel-root .courses-control-dock[data-course-choreo-delete-action-dock] {
  display: grid !important;
}

.courses-control-dock--course-view .courses-smart-strip--course-view {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: .45rem !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}

.courses-control-dock--course-view .course-view-section-counter {
  flex: 0 0 auto !important;
  justify-content: flex-start !important;
  margin: 0 !important;
}

.courses-control-dock--delete + .course-delete-panel-body,
.courses-control-dock--delete + .course-choreography-delete-panel-body {
  padding-top: clamp(.42rem, .9vw, .72rem) !important;
}

@media (max-width: 767px) {
  body.courses-panel-active .courses-panel-root {
    --courses-smart-row-height: 2.12rem;
    --courses-control-row-height: 2.44rem;
  }

  body.courses-panel-active .courses-control-dock {
    position: sticky !important;
    top: var(--courses-panel-sticky-top, calc(var(--courses-panel-nav-height, 64px) + .45rem)) !important;
    z-index: 96 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: .48rem !important;
    width: 100vw !important;
    min-height: calc(var(--courses-control-row-height, 2.44rem) + .10rem) !important;
    margin: 0 !important;
    padding-top: .05rem !important;
    padding-bottom: .05rem !important;
    padding-left: var(--courses-panel-content-left, max(env(safe-area-inset-left, 0px), 1rem)) !important;
    padding-right: var(--courses-panel-content-right, max(env(safe-area-inset-right, 0px), 1rem)) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: none !important;
  }

  body.courses-panel-active .courses-control-dock__chips {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    justify-self: stretch !important;
    align-self: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }

  body.courses-panel-active .courses-control-dock__actions {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    justify-self: end !important;
    align-self: center !important;
    width: auto !important;
    min-width: max-content !important;
    max-width: min(46vw, 12.5rem) !important;
    pointer-events: auto !important;
  }

  body.courses-panel-active .courses-control-dock:not(.has-action) .courses-control-dock__actions {
    display: none !important;
  }

  body.courses-panel-active .courses-control-dock:not(.has-chips) .courses-control-dock__chips {
    min-width: 0 !important;
    pointer-events: none !important;
  }

  body.courses-panel-active .courses-control-dock:not(.has-chips).has-action,
  body.courses-panel-active .courses-panel-root--subpanel .courses-control-dock:not(.has-chips).has-action {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    justify-content: stretch !important;
    align-items: center !important;
  }

  body.courses-panel-active .courses-control-dock:not(.has-chips).has-action .courses-control-dock__actions,
  body.courses-panel-active .courses-panel-root--subpanel .courses-control-dock:not(.has-chips).has-action .courses-control-dock__actions {
    grid-column: 2 !important;
    width: auto !important;
    min-width: max-content !important;
    max-width: min(46vw, 12.5rem) !important;
    justify-content: flex-end !important;
    justify-self: end !important;
  }

  body.courses-panel-active .courses-control-dock__actions .courses-control-action,
  body.courses-panel-active .courses-control-dock:not(.has-chips).has-action .courses-control-action,
  body.courses-panel-active .courses-panel-root--subpanel .courses-control-dock__actions .courses-control-action {
    width: auto !important;
    min-width: var(--courses-control-row-height, 2.44rem) !important;
    max-width: min(46vw, 12.5rem) !important;
    height: var(--courses-control-row-height, 2.44rem) !important;
    min-height: var(--courses-control-row-height, 2.44rem) !important;
    padding-inline: .82rem !important;
    white-space: nowrap !important;
  }

  body.courses-panel-active .courses-control-dock__chips > .courses-smart-strip,
  body.courses-panel-active .courses-control-dock--main .courses-smart-strip,
  body.courses-panel-active .courses-control-dock--student-picker .student-picker-smart-strip,
  body.courses-panel-active .courses-control-dock--course-view .courses-smart-strip--course-view {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: .42rem !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: var(--courses-smart-row-height, 2.12rem) !important;
    height: var(--courses-smart-row-height, 2.12rem) !important;
    max-height: var(--courses-smart-row-height, 2.12rem) !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  body.courses-panel-active .courses-control-dock--main .courses-smart-summary,
  body.courses-panel-active .courses-control-dock--main .courses-smart-chips,
  body.courses-panel-active .courses-control-dock--student-picker .student-picker-smart-summary,
  body.courses-panel-active .courses-control-dock--student-picker .student-picker-smart-chips,
  body.courses-panel-active .courses-control-dock--course-view .course-view-section-counter {
    align-self: center !important;
    align-items: center !important;
    justify-self: start !important;
    margin: 0 !important;
  }

  body.courses-panel-active .courses-control-dock--main .courses-smart-summary,
  body.courses-panel-active .courses-control-dock--student-picker .student-picker-smart-summary,
  body.courses-panel-active .courses-control-dock--course-view .course-view-section-counter {
    flex: 0 0 auto !important;
  }

  body.courses-panel-active .courses-control-dock--main .courses-smart-chips,
  body.courses-panel-active .courses-control-dock--student-picker .student-picker-smart-chips {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  body.courses-panel-active .courses-control-dock--main .courses-smart-summary strong,
  body.courses-panel-active .courses-control-dock--main .courses-smart-chip,
  body.courses-panel-active .courses-control-dock--student-picker .student-picker-smart-summary strong,
  body.courses-panel-active .courses-control-dock--student-picker .student-picker-smart-chip,
  body.courses-panel-active .courses-control-dock--course-view .course-view-section-counter strong {
    height: var(--courses-smart-row-height, 2.12rem) !important;
    min-height: var(--courses-smart-row-height, 2.12rem) !important;
    max-height: var(--courses-smart-row-height, 2.12rem) !important;
  }

  body.courses-panel-active .courses-control-dock--main .courses-smart-chip,
  body.courses-panel-active .courses-control-dock--student-picker .student-picker-smart-chip {
    max-width: min(33vw, 10.25rem) !important;
  }

  body.courses-panel-active .courses-control-dock--delete .courses-control-action {
    max-width: min(50vw, 13rem) !important;
  }

  body.courses-panel-active .courses-control-dock + .courses-panel-content,
  body.courses-panel-active .courses-control-dock + .course-student-picker-panel-body,
  body.courses-panel-active .courses-control-dock + .course-view-panel-body,
  body.courses-panel-active .courses-control-dock + .course-form-panel-body,
  body.courses-panel-active .courses-control-dock + .course-choreography-form-panel-body,
  body.courses-panel-active .courses-control-dock + .course-delete-panel-body,
  body.courses-panel-active .courses-control-dock + .course-choreography-delete-panel-body {
    padding-top: clamp(.22rem, .55vw, .40rem) !important;
  }
}

/* EDQ V43.3.4 — Mobile : dock réellement commun, CTA icône seule et menus contextuels cartes. */
@media (max-width: 767px) {
  body.courses-panel-active .courses-panel-root {
    --courses-smart-row-height: 2.12rem;
    --courses-control-row-height: var(--courses-smart-row-height);
  }

  body.courses-panel-active .courses-control-dock,
  body.courses-panel-active .courses-panel-root--subpanel .courses-control-dock {
    grid-template-columns: minmax(0, 1fr) var(--courses-control-row-height, 2.12rem) !important;
    gap: .42rem !important;
  }

  body.courses-panel-active .courses-control-dock:not(.has-action),
  body.courses-panel-active .courses-panel-root--subpanel .courses-control-dock:not(.has-action) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.courses-panel-active .courses-control-dock__chips {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.courses-panel-active .courses-control-dock__actions,
  body.courses-panel-active .courses-control-dock:not(.has-chips).has-action .courses-control-dock__actions,
  body.courses-panel-active .courses-panel-root--subpanel .courses-control-dock__actions,
  body.courses-panel-active .courses-panel-root--subpanel .courses-control-dock:not(.has-chips).has-action .courses-control-dock__actions {
    width: var(--courses-control-row-height, 2.12rem) !important;
    min-width: var(--courses-control-row-height, 2.12rem) !important;
    max-width: var(--courses-control-row-height, 2.12rem) !important;
    justify-self: end !important;
    overflow: visible !important;
  }

  body.courses-panel-active .courses-control-dock__actions .courses-control-action,
  body.courses-panel-active .courses-control-dock:not(.has-chips).has-action .courses-control-action,
  body.courses-panel-active .courses-panel-root--subpanel .courses-control-dock__actions .courses-control-action {
    width: var(--courses-control-row-height, 2.12rem) !important;
    min-width: var(--courses-control-row-height, 2.12rem) !important;
    max-width: var(--courses-control-row-height, 2.12rem) !important;
    height: var(--courses-smart-row-height, 2.12rem) !important;
    min-height: var(--courses-smart-row-height, 2.12rem) !important;
    max-height: var(--courses-smart-row-height, 2.12rem) !important;
    padding: 0 !important;
    gap: 0 !important;
    border-radius: 999px !important;
  }

  body.courses-panel-active .courses-control-action .ui-btn__label--full,
  body.courses-panel-active .courses-control-action .ui-btn__label--short {
    display: none !important;
  }

  body.courses-panel-active .courses-control-action i {
    margin: 0 !important;
  }

  body.courses-panel-active .courses-control-dock__chips > .courses-smart-strip,
  body.courses-panel-active .courses-control-dock--main .courses-smart-strip,
  body.courses-panel-active .courses-control-dock--student-picker .student-picker-smart-strip,
  body.courses-panel-active .courses-control-dock--course-view .courses-smart-strip--course-view {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.courses-panel-active .courses-control-dock--main .courses-smart-chips,
  body.courses-panel-active .courses-control-dock--student-picker .student-picker-smart-chips {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  body.courses-panel-active .courses-control-dock--main .courses-smart-chip--more,
  body.courses-panel-active .courses-control-dock--student-picker .student-picker-smart-chip--more {
    flex: 0 0 auto !important;
  }

  body.courses-panel-active .courses-control-dock--main .courses-smart-chip:not(.courses-smart-chip--more),
  body.courses-panel-active .courses-control-dock--student-picker .student-picker-smart-chip:not(.student-picker-smart-chip--more) {
    max-width: min(28vw, 8.5rem) !important;
  }
}

.course-card.course-card--accent,
.course-choreo-card--clickable.ui-accent-card {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

.course-object-context-menu {
  min-width: 12.5rem;
}

.courses-safe-delete-toast {
  --courses-safe-delete-progress: 1;
}

.courses-safe-delete-toast__progress {
  position: absolute;
  left: .75rem;
  right: .75rem;
  bottom: .22rem;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #facc15, #fb923c, #ef4444);
  transform-origin: left center;
  transform: scaleX(var(--courses-safe-delete-progress, 1));
  opacity: .96;
  pointer-events: none;
  transition: transform 80ms linear, opacity 180ms ease;
}

.courses-safe-delete-toast.is-delete-ready .courses-safe-delete-toast__progress {
  opacity: .16;
}

.courses-safe-delete-toast .ui-toast-action-btn--danger:disabled,
.courses-safe-delete-toast .ui-toast-action-btn--danger.is-disabled {
  opacity: .48;
  cursor: not-allowed;
  filter: grayscale(.18) saturate(.75);
}

/* EDQ V43.3.5 — Mobile : tap profil élève + largeur stable des cartes Cours filtrées. */
@media (max-width: 767px) {
  body.courses-panel-active .courses-panel-view--main .courses-panel-list,
  body.courses-panel-active .courses-panel-view--main .courses-list-cards-host,
  body.courses-panel-active .courses-panel-view--main .courses-panel-grid--courses {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    justify-self: stretch !important;
    align-self: stretch !important;
  }

  body.courses-panel-active .courses-panel-view--main .courses-panel-grid--courses {
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: stretch !important;
  }

  body.courses-panel-active .courses-panel-view--main .courses-panel-grid--courses > .ui-accent-card,
  body.courses-panel-active .courses-panel-view--main .courses-panel-grid--courses > .course-card,
  body.courses-panel-active .courses-panel-view--main .courses-panel-grid--courses > .course-add-card {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    justify-self: stretch !important;
  }
}

.course-student-card.ui-accent-card {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}


/* EDQ V43.3.6 — Cours : CTA sobres, icône nue, compteur choré doré et vue sans action Modifier navbar. */
body.courses-panel-active .courses-control-action {
  border-radius: .82rem !important;
  box-shadow:
    0 8px 20px color-mix(in srgb, var(--courses-control-action-color, #38bdf8) 11%, transparent),
    inset 0 1px 0 rgba(255,255,255,.16) !important;
}

html[data-theme="light"] body.courses-panel-active .courses-control-action,
body[data-theme="light"].courses-panel-active .courses-control-action {
  box-shadow:
    0 8px 18px color-mix(in srgb, var(--courses-control-action-color, #38bdf8) 9%, transparent),
    inset 0 1px 0 rgba(255,255,255,.7) !important;
}

body.courses-panel-active .courses-control-action i {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: inline-flex !important;
  place-items: normal !important;
  line-height: 1 !important;
}

html[data-theme="light"] body.courses-panel-active .courses-control-action i,
body[data-theme="light"].courses-panel-active .courses-control-action i {
  background: transparent !important;
}

.course-view-section-counter--choreographies,
.courses-control-dock .course-view-section-counter--choreographies,
.courses-smart-strip--course-view .course-view-section-counter--choreographies {
  --courses-smart-chip-color: #facc15 !important;
  color: color-mix(in srgb, #facc15 84%, white 16%) !important;
  border-color: color-mix(in srgb, #facc15 42%, transparent) !important;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, #facc15 24%, #020617 76%),
      color-mix(in srgb, #f59e0b 18%, #020617 82%)
    ) !important;
  box-shadow: 0 9px 22px color-mix(in srgb, #facc15 12%, transparent) !important;
}

html[data-theme="light"] .course-view-section-counter--choreographies,
body[data-theme="light"] .course-view-section-counter--choreographies,
html[data-theme="light"] .courses-control-dock .course-view-section-counter--choreographies,
body[data-theme="light"] .courses-control-dock .course-view-section-counter--choreographies {
  color: color-mix(in srgb, #92400e 76%, #0f172a 24%) !important;
  border-color: color-mix(in srgb, #facc15 52%, rgba(15,23,42,.12)) !important;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, #fef3c7 78%, white 22%),
      color-mix(in srgb, #fde68a 52%, white 48%)
    ) !important;
  box-shadow: 0 9px 20px color-mix(in srgb, #f59e0b 10%, transparent) !important;
}

@media (max-width: 767px) {
  body.courses-panel-active .courses-control-action {
    border-radius: .72rem !important;
  }
}

/* EDQ V43.3.7 — Affinage mobile CTA + compteur chorégraphies doré propre. */
.course-view-section-counter--choreographies,
.courses-control-dock .course-view-section-counter--choreographies,
.courses-smart-strip--course-view .course-view-section-counter--choreographies {
  color: inherit !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.course-view-section-counter--choreographies strong,
.courses-control-dock .course-view-section-counter--choreographies strong,
.courses-smart-strip--course-view .course-view-section-counter--choreographies strong {
  --courses-smart-chip-color: #facc15 !important;
  color: color-mix(in srgb, #fde68a 90%, white 10%) !important;
  border: 1px solid color-mix(in srgb, #facc15 32%, transparent) !important;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, #facc15 20%, #020617 80%),
      color-mix(in srgb, #f59e0b 13%, #020617 87%)
    ) !important;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, #facc15 10%, transparent),
    0 10px 22px color-mix(in srgb, #f59e0b 10%, transparent) !important;
}

.course-view-section-counter--choreographies strong::before,
.courses-control-dock .course-view-section-counter--choreographies strong::before,
.courses-smart-strip--course-view .course-view-section-counter--choreographies strong::before {
  background: #facc15 !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, #facc15 12%, transparent) !important;
}

html[data-theme="light"] .course-view-section-counter--choreographies,
body[data-theme="light"] .course-view-section-counter--choreographies,
html[data-theme="light"] .courses-control-dock .course-view-section-counter--choreographies,
body[data-theme="light"] .courses-control-dock .course-view-section-counter--choreographies {
  color: inherit !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-theme="light"] .course-view-section-counter--choreographies strong,
body[data-theme="light"] .course-view-section-counter--choreographies strong,
html[data-theme="light"] .courses-control-dock .course-view-section-counter--choreographies strong,
body[data-theme="light"] .courses-control-dock .course-view-section-counter--choreographies strong {
  color: color-mix(in srgb, #92400e 76%, #0f172a 24%) !important;
  border-color: color-mix(in srgb, #f59e0b 34%, rgba(15,23,42,.08)) !important;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, #fef3c7 72%, white 28%),
      color-mix(in srgb, #fde68a 38%, white 62%)
    ) !important;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, #facc15 12%, transparent),
    0 10px 22px color-mix(in srgb, #f59e0b 8%, transparent) !important;
}

html[data-theme="light"] .course-view-section-counter--choreographies strong::before,
body[data-theme="light"] .course-view-section-counter--choreographies strong::before,
html[data-theme="light"] .courses-control-dock .course-view-section-counter--choreographies strong::before,
body[data-theme="light"] .courses-control-dock .course-view-section-counter--choreographies strong::before {
  background: #f59e0b !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, #f59e0b 13%, transparent) !important;
}

@media (max-width: 767px) {
  body.courses-panel-active .courses-control-dock__actions .courses-control-action,
  body.courses-panel-active .courses-control-dock:not(.has-chips).has-action .courses-control-action,
  body.courses-panel-active .courses-panel-root--subpanel .courses-control-dock__actions .courses-control-action,
  body.courses-panel-active .courses-panel-root--subpanel .courses-control-dock:not(.has-chips).has-action .courses-control-action {
    border-radius: .52rem !important;
  }
}

/* EDQ V43.3.8 — Tablette/PC : même grammaire dock que mobile, sans toucher au mobile validé. */
@media (min-width: 768px) {
  body.courses-panel-active .courses-panel-root {
    --courses-smart-row-height: 2.18rem;
    --courses-control-row-height: var(--courses-smart-row-height);
  }

  body.courses-panel-active .courses-control-dock,
  body.courses-panel-active .courses-panel-root--subpanel .courses-control-dock {
    position: sticky !important;
    top: var(--courses-panel-sticky-top, calc(var(--courses-panel-nav-height, 64px) + .42rem)) !important;
    z-index: 96 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: clamp(.52rem, 1vw, .82rem) !important;
    width: 100vw !important;
    min-height: calc(var(--courses-control-row-height, 2.18rem) + .18rem) !important;
    margin: 0 !important;
    padding-top: .09rem !important;
    padding-bottom: .09rem !important;
    padding-left: var(--courses-panel-content-left, max(env(safe-area-inset-left, 0px), 1rem)) !important;
    padding-right: var(--courses-panel-content-right, max(env(safe-area-inset-right, 0px), 1rem)) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: none !important;
    box-sizing: border-box !important;
  }

  body.courses-panel-active .courses-control-dock:not(.has-action),
  body.courses-panel-active .courses-panel-root--subpanel .courses-control-dock:not(.has-action) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.courses-panel-active .courses-control-dock__chips,
  body.courses-panel-active .courses-panel-root--subpanel .courses-control-dock__chips {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    justify-self: stretch !important;
    align-self: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: var(--courses-control-row-height, 2.18rem) !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }

  body.courses-panel-active .courses-control-dock:not(.has-chips) .courses-control-dock__chips,
  body.courses-panel-active .courses-panel-root--subpanel .courses-control-dock:not(.has-chips) .courses-control-dock__chips {
    pointer-events: none !important;
  }

  body.courses-panel-active .courses-control-dock__actions,
  body.courses-panel-active .courses-control-dock:not(.has-chips).has-action .courses-control-dock__actions,
  body.courses-panel-active .courses-panel-root--subpanel .courses-control-dock__actions,
  body.courses-panel-active .courses-panel-root--subpanel .courses-control-dock:not(.has-chips).has-action .courses-control-dock__actions {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    justify-self: end !important;
    align-self: center !important;
    width: auto !important;
    min-width: max-content !important;
    max-width: clamp(9.5rem, 19vw, 15rem) !important;
    min-height: var(--courses-control-row-height, 2.18rem) !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }

  body.courses-panel-active .courses-control-dock:not(.has-action) .courses-control-dock__actions,
  body.courses-panel-active .courses-panel-root--subpanel .courses-control-dock:not(.has-action) .courses-control-dock__actions {
    display: none !important;
  }

  body.courses-panel-active .courses-control-dock__actions .courses-control-action,
  body.courses-panel-active .courses-control-dock:not(.has-chips).has-action .courses-control-action,
  body.courses-panel-active .courses-panel-root--subpanel .courses-control-dock__actions .courses-control-action,
  body.courses-panel-active .courses-panel-root--subpanel .courses-control-dock:not(.has-chips).has-action .courses-control-action {
    width: auto !important;
    min-width: var(--courses-control-row-height, 2.18rem) !important;
    max-width: clamp(9.5rem, 19vw, 15rem) !important;
    height: var(--courses-control-row-height, 2.18rem) !important;
    min-height: var(--courses-control-row-height, 2.18rem) !important;
    max-height: var(--courses-control-row-height, 2.18rem) !important;
    padding-inline: clamp(.82rem, 1.05vw, 1.05rem) !important;
    border-radius: .68rem !important;
    white-space: nowrap !important;
  }

  body.courses-panel-active .courses-control-dock__chips > .courses-smart-strip,
  body.courses-panel-active .courses-control-dock--main .courses-smart-strip,
  body.courses-panel-active .courses-control-dock--student-picker .student-picker-smart-strip,
  body.courses-panel-active .courses-control-dock--course-view .courses-smart-strip--course-view {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: .48rem !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: var(--courses-smart-row-height, 2.18rem) !important;
    height: var(--courses-smart-row-height, 2.18rem) !important;
    max-height: var(--courses-smart-row-height, 2.18rem) !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  body.courses-panel-active .courses-control-dock--main .courses-smart-summary,
  body.courses-panel-active .courses-control-dock--main .courses-smart-chips,
  body.courses-panel-active .courses-control-dock--student-picker .student-picker-smart-summary,
  body.courses-panel-active .courses-control-dock--student-picker .student-picker-smart-chips,
  body.courses-panel-active .courses-control-dock--course-view .course-view-section-counter {
    align-self: center !important;
    align-items: center !important;
    justify-self: start !important;
    margin: 0 !important;
  }

  body.courses-panel-active .courses-control-dock--main .courses-smart-summary,
  body.courses-panel-active .courses-control-dock--student-picker .student-picker-smart-summary,
  body.courses-panel-active .courses-control-dock--course-view .course-view-section-counter {
    flex: 0 0 auto !important;
  }

  body.courses-panel-active .courses-control-dock--main .courses-smart-chips,
  body.courses-panel-active .courses-control-dock--student-picker .student-picker-smart-chips {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  body.courses-panel-active .courses-control-dock--main .courses-smart-summary strong,
  body.courses-panel-active .courses-control-dock--main .courses-smart-chip,
  body.courses-panel-active .courses-control-dock--student-picker .student-picker-smart-summary strong,
  body.courses-panel-active .courses-control-dock--student-picker .student-picker-smart-chip,
  body.courses-panel-active .courses-control-dock--course-view .course-view-section-counter strong {
    height: var(--courses-smart-row-height, 2.18rem) !important;
    min-height: var(--courses-smart-row-height, 2.18rem) !important;
    max-height: var(--courses-smart-row-height, 2.18rem) !important;
  }

  body.courses-panel-active .courses-control-dock--main .courses-smart-chip,
  body.courses-panel-active .courses-control-dock--student-picker .student-picker-smart-chip {
    max-width: min(18rem, 28vw) !important;
  }

  body.courses-panel-active .courses-control-dock--main .courses-smart-chip--more,
  body.courses-panel-active .courses-control-dock--student-picker .student-picker-smart-chip--more {
    flex: 0 0 auto !important;
  }

  body.courses-panel-active .courses-control-dock + .courses-panel-content,
  body.courses-panel-active .courses-control-dock + .course-student-picker-panel-body,
  body.courses-panel-active .courses-control-dock + .course-view-panel-body,
  body.courses-panel-active .courses-control-dock + .course-form-panel-body,
  body.courses-panel-active .courses-control-dock + .course-choreography-form-panel-body,
  body.courses-panel-active .courses-control-dock + .course-delete-panel-body,
  body.courses-panel-active .courses-control-dock + .course-choreography-delete-panel-body {
    padding-top: clamp(.30rem, .52vw, .55rem) !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  body.courses-panel-active .courses-panel-root {
    --courses-smart-row-height: 2.14rem;
  }

  body.courses-panel-active .courses-control-dock__actions,
  body.courses-panel-active .courses-control-dock__actions .courses-control-action {
    max-width: clamp(8.75rem, 22vw, 12rem) !important;
  }

  body.courses-panel-active .courses-control-dock--main .courses-smart-chip,
  body.courses-panel-active .courses-control-dock--student-picker .student-picker-smart-chip {
    max-width: min(13rem, 27vw) !important;
  }
}

@media (min-width: 1181px) and (min-height: 521px) {
  body.courses-panel-active .courses-panel-root,
  body.courses-panel-active .courses-panel-root--student-picker,
  body.courses-panel-active .courses-panel-root--course-view,
  body.courses-panel-active .courses-panel-root--subpanel {
    --courses-panel-wide-navbar-clearance: calc(
      var(--edq-navbar-height-current, var(--app-header-safe-height, 72px))
      + clamp(.22rem, .28vw, .42rem)
    );
    --courses-panel-sticky-top: var(--courses-panel-wide-navbar-clearance);
    scroll-padding-top: calc(var(--courses-panel-wide-navbar-clearance) + .55rem) !important;
  }

  body.courses-panel-active .courses-control-dock,
  body.courses-panel-active .courses-panel-root--student-picker .courses-control-dock,
  body.courses-panel-active .courses-panel-root--student-picker .courses-control-dock--student-picker,
  body.courses-panel-active .courses-panel-root--course-view .courses-control-dock,
  body.courses-panel-active .courses-panel-root--subpanel .courses-control-dock {
    top: var(--courses-panel-wide-navbar-clearance) !important;
  }

  body.courses-panel-active .courses-control-dock + .courses-panel-content,
  body.courses-panel-active .courses-control-dock + .course-student-picker-panel-body,
  body.courses-panel-active .courses-control-dock + .course-view-panel-body,
  body.courses-panel-active .courses-control-dock + .course-form-panel-body,
  body.courses-panel-active .courses-control-dock + .course-choreography-form-panel-body,
  body.courses-panel-active .courses-control-dock + .course-delete-panel-body,
  body.courses-panel-active .courses-control-dock + .course-choreography-delete-panel-body {
    padding-top: clamp(.22rem, .36vw, .42rem) !important;
  }
}

/* EDQ V43.3.9 — Tablette/PC : largeur stable, badges contenus, CTA alignés et zone utile centrée. */
@media (min-width: 768px) {
  body.courses-panel-active .courses-panel-view--main .courses-panel-list,
  body.courses-panel-active .courses-panel-view--main .courses-list-cards-host,
  body.courses-panel-active .courses-panel-view--main .courses-panel-grid--courses {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    justify-self: stretch !important;
    align-self: stretch !important;
  }

  body.courses-panel-active .courses-panel-view--main .courses-panel-grid--courses {
    justify-content: stretch !important;
    justify-items: stretch !important;
    grid-auto-columns: minmax(0, 1fr) !important;
  }

  body.courses-panel-active .courses-panel-view--main .courses-panel-grid--courses > .ui-accent-card,
  body.courses-panel-active .courses-panel-view--main .courses-panel-grid--courses > .course-card,
  body.courses-panel-active .courses-panel-view--main .courses-panel-grid--courses > .course-add-card {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    justify-self: stretch !important;
  }

  body.courses-panel-active .courses-control-dock__actions .courses-control-action,
  body.courses-panel-active .courses-control-dock:not(.has-chips).has-action .courses-control-action,
  body.courses-panel-active .courses-panel-root--subpanel .courses-control-dock__actions .courses-control-action,
  body.courses-panel-active .courses-panel-root--subpanel .courses-control-dock:not(.has-chips).has-action .courses-control-action {
    box-sizing: border-box !important;
    height: var(--courses-smart-row-height, 2.18rem) !important;
    min-height: var(--courses-smart-row-height, 2.18rem) !important;
    max-height: var(--courses-smart-row-height, 2.18rem) !important;
    line-height: 1 !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  body.courses-panel-active .courses-panel-view--main .courses-panel-grid--courses {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1024px) {
  body.courses-panel-active .courses-panel-root {
    --courses-panel-content-left: var(--dashboard-shell-content-left, calc(var(--dashboard-sidebar-width-collapsed, 4.35rem) + var(--dashboard-shell-sidebar-gap, 1rem)));
    --courses-panel-content-right: max(1rem, env(safe-area-inset-right, 0px));
  }

  body.courses-panel-active .courses-panel-view--main .courses-panel-grid--courses {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body.courses-panel-active .course-card.course-card--accent .course-title-line {
    display: flex !important;
    align-items: flex-start !important;
    gap: clamp(.46rem, .8vw, .72rem) !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.courses-panel-active .course-card.course-card--accent .course-style-name {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.courses-panel-active .course-card.course-card--accent .course-level-badge,
  body.courses-panel-active .course-card.course-card--accent .course-level-badge.style-badge {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: min(8.4rem, 48%) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: clamp(.62rem, .72vw, .72rem) !important;
    line-height: 1 !important;
    padding: .22rem .55rem !important;
  }
}

@media (min-width: 1024px) and (max-width: 1180px) {
  body.courses-panel-active .course-card.course-card--accent .course-level-badge,
  body.courses-panel-active .course-card.course-card--accent .course-level-badge.style-badge {
    max-width: min(7.15rem, 44%) !important;
    font-size: .62rem !important;
    padding-inline: .46rem !important;
  }

  body.courses-panel-active .course-card.course-card--accent .course-card-header,
  body.courses-panel-active .course-card.course-card--accent .course-title-line {
    gap: .50rem !important;
  }
}

@media (min-width: 1181px) and (min-height: 521px) {
  body.courses-panel-active .courses-panel-root {
    --courses-panel-content-right: max(1.05rem, env(safe-area-inset-right, 0px));
  }
}

/* EDQ V43.3.10 — Grille cours PC adaptative : la colonne ne gagne que si la carte respire. */
@media (min-width: 768px) {
  body.courses-panel-active .courses-panel-view--main .courses-panel-grid--courses {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)) !important;
    justify-content: stretch !important;
    justify-items: stretch !important;
  }

  body.courses-panel-active .courses-panel-view--main .courses-panel-grid--courses > .ui-accent-card,
  body.courses-panel-active .courses-panel-view--main .courses-panel-grid--courses > .course-card,
  body.courses-panel-active .courses-panel-view--main .courses-panel-grid--courses > .course-add-card {
    min-width: 0 !important;
    width: 100% !important;
    max-width: none !important;
  }
}

@media (min-width: 1024px) {
  body.courses-panel-active .courses-panel-view--main .courses-panel-grid--courses {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)) !important;
  }

  body.courses-panel-active .course-card.course-card--accent .course-card-header,
  body.courses-panel-active .course-card.course-card--accent .course-title-line {
    gap: .72rem !important;
  }

  body.courses-panel-active .course-card.course-card--accent .course-title-line {
    align-items: flex-start !important;
    min-width: 0 !important;
  }

  body.courses-panel-active .course-card.course-card--accent .course-style-name {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.courses-panel-active .course-card.course-card--accent .course-level-badge,
  body.courses-panel-active .course-card.course-card--accent .course-level-badge.style-badge {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: auto !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    font-size: inherit !important;
    line-height: inherit !important;
    padding: .25rem .7rem !important;
  }
}

/* EDQ V43.3.11 — Grille cours respirante + badges niveau fixes.
   Objectif : le nombre de colonnes suit l’espace utile, jamais l’inverse.
   Les badges niveau gardent une taille stable et ne doivent plus passer à la ligne. */
body.courses-panel-active .course-card.course-card--accent .course-card-header {
  min-width: 0 !important;
  flex-wrap: nowrap !important;
}

body.courses-panel-active .course-card.course-card--accent .course-title-line {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: .58rem !important;
  min-width: 0 !important;
  width: 100% !important;
  flex: 1 1 auto !important;
  flex-wrap: nowrap !important;
  overflow: hidden !important;
}

body.courses-panel-active .course-card.course-card--accent .course-style-name {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.courses-panel-active .course-card.course-card--accent .course-level-badge,
body.courses-panel-active .course-card.course-card--accent .course-level-badge.style-badge {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 1.34rem !important;
  padding: .15rem .78rem !important;
  font-size: .68rem !important;
  line-height: 1 !important;
  letter-spacing: .08em !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

@media (min-width: 768px) and (max-width: 1023px) {
  body.courses-panel-active .courses-panel-view--main .courses-panel-grid--courses {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    justify-content: stretch !important;
    justify-items: stretch !important;
  }

  body.courses-panel-active .courses-panel-view--main .courses-panel-grid--courses > .ui-accent-card,
  body.courses-panel-active .courses-panel-view--main .courses-panel-grid--courses > .course-card,
  body.courses-panel-active .courses-panel-view--main .courses-panel-grid--courses > .course-add-card {
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
  }
}

@media (min-width: 1024px) {
  body.courses-panel-active .courses-panel-view--main .courses-panel-grid--courses {
    --courses-card-column-min: 23rem;
    --courses-card-column-max: 25.5rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--courses-card-column-min)), var(--courses-card-column-max))) !important;
    justify-content: center !important;
    justify-items: stretch !important;
    align-items: stretch !important;
  }

  body.courses-panel-active .courses-panel-view--main .courses-panel-grid--courses > .ui-accent-card,
  body.courses-panel-active .courses-panel-view--main .courses-panel-grid--courses > .course-card,
  body.courses-panel-active .courses-panel-view--main .courses-panel-grid--courses > .course-add-card {
    width: 100% !important;
    max-width: var(--courses-card-column-max) !important;
    min-width: 0 !important;
    justify-self: stretch !important;
  }
}

/* EDQ V44.13 — Verrouillage Panel Cours.
   Consolidation des règles tardives V44.7 → V44.12.
   Le composant ui-accent-card gère désormais l'état rail/hover/sélection.
   Ici, le panel Cours ne fournit que ses variables, ses formes locales et le raccord shell. */

body.courses-panel-active .courses-panel-root .course-card.course-card--accent.ui-accent-card,
body.courses-panel-active .courses-panel-root .course-add-card.ui-accent-card,
body.courses-panel-active .courses-panel-root .course-student-card.ui-accent-card,
body.courses-panel-active .courses-panel-root .course-choreo-card.ui-accent-card {
  --ui-accent-card-color: var(--course-style-color, var(--theme-primary, #38bdf8));
  --ui-accent-card-aura-blur: 30px;
  --ui-accent-card-shadow-rest: 0 0 0 rgba(0,0,0,0);
  border-color: var(--ui-accent-card-border-rest) !important;
  box-shadow: var(--ui-accent-card-shadow-rest) !important;
  filter: none !important;
  transform: none !important;
}

body.courses-panel-active .courses-panel-root .course-card.course-card--accent.ui-accent-card .ui-accent-card__rail,
body.courses-panel-active .courses-panel-root .course-add-card.ui-accent-card .ui-accent-card__rail,
body.courses-panel-active .courses-panel-root .course-student-card.ui-accent-card .ui-accent-card__rail,
body.courses-panel-active .courses-panel-root .course-choreo-card.ui-accent-card .ui-accent-card__rail {
  background: var(--ui-accent-card-rail-off) !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
}

body.courses-panel-active .courses-panel-root .course-card.course-card--accent.ui-accent-card .ui-accent-card__rail::before,
body.courses-panel-active .courses-panel-root .course-add-card.ui-accent-card .ui-accent-card__rail::before,
body.courses-panel-active .courses-panel-root .course-student-card.ui-accent-card .ui-accent-card__rail::before,
body.courses-panel-active .courses-panel-root .course-choreo-card.ui-accent-card .ui-accent-card__rail::before {
  background: var(--ui-accent-card-rail-on) !important;
  box-shadow: none !important;
  filter: none !important;
}

body.courses-panel-active .courses-panel-root .course-add-card.ui-accent-card,
body.courses-panel-active .courses-panel-root .course-student-card--add.ui-accent-card,
body.courses-panel-active .courses-panel-root .course-choreo-card--add.ui-accent-card {
  border-style: dashed !important;
}

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  body.courses-panel-active .courses-panel-root .course-card.course-card--accent.ui-accent-card:hover,
  body.courses-panel-active .courses-panel-root .course-card.course-card--accent.ui-accent-card:focus-visible,
  body.courses-panel-active .courses-panel-root .course-add-card.ui-accent-card:hover,
  body.courses-panel-active .courses-panel-root .course-add-card.ui-accent-card:focus-visible,
  body.courses-panel-active .courses-panel-root .course-student-card.ui-accent-card:hover,
  body.courses-panel-active .courses-panel-root .course-student-card.ui-accent-card:focus-visible,
  body.courses-panel-active .courses-panel-root .course-choreo-card.ui-accent-card:hover,
  body.courses-panel-active .courses-panel-root .course-choreo-card.ui-accent-card:focus-visible {
    transform: none !important;
    filter: none !important;
  }


  body.courses-panel-active .courses-panel-root .course-card.course-card--accent.ui-accent-card.is-courses-desktop-current,
  body.courses-panel-active .courses-panel-root .course-add-card.ui-accent-card.is-courses-desktop-current,
  body.courses-panel-active .courses-panel-root .course-student-card.ui-accent-card.is-courses-desktop-current,
  body.courses-panel-active .courses-panel-root .course-choreo-card.ui-accent-card.is-courses-desktop-current,
  body.courses-panel-active .courses-panel-root .course-card.course-card--accent.ui-accent-card.is-selected,
  body.courses-panel-active .courses-panel-root .course-add-card.ui-accent-card.is-selected,
  body.courses-panel-active .courses-panel-root .course-student-card.ui-accent-card.is-selected,
  body.courses-panel-active .courses-panel-root .course-choreo-card.ui-accent-card.is-selected {
    border-color: var(--ui-accent-card-border-active) !important;
    box-shadow:
      var(--ui-accent-card-shadow-rest),
      inset 0 0 0 1px var(--ui-accent-card-selection-ring) !important;
  }

  body.courses-panel-active .courses-panel-root .course-card.course-card--accent.ui-accent-card:hover .ui-accent-card__rail::before,
  body.courses-panel-active .courses-panel-root .course-card.course-card--accent.ui-accent-card:focus-visible .ui-accent-card__rail::before,
  body.courses-panel-active .courses-panel-root .course-card.course-card--accent.ui-accent-card.is-courses-desktop-current .ui-accent-card__rail::before,
  body.courses-panel-active .courses-panel-root .course-add-card.ui-accent-card:hover .ui-accent-card__rail::before,
  body.courses-panel-active .courses-panel-root .course-add-card.ui-accent-card:focus-visible .ui-accent-card__rail::before,
  body.courses-panel-active .courses-panel-root .course-add-card.ui-accent-card.is-courses-desktop-current .ui-accent-card__rail::before,
  body.courses-panel-active .courses-panel-root .course-student-card.ui-accent-card:hover .ui-accent-card__rail::before,
  body.courses-panel-active .courses-panel-root .course-student-card.ui-accent-card:focus-visible .ui-accent-card__rail::before,
  body.courses-panel-active .courses-panel-root .course-student-card.ui-accent-card.is-courses-desktop-current .ui-accent-card__rail::before,
  body.courses-panel-active .courses-panel-root .course-choreo-card.ui-accent-card:hover .ui-accent-card__rail::before,
  body.courses-panel-active .courses-panel-root .course-choreo-card.ui-accent-card:focus-visible .ui-accent-card__rail::before,
  body.courses-panel-active .courses-panel-root .course-choreo-card.ui-accent-card.is-courses-desktop-current .ui-accent-card__rail::before {
    transform: scaleY(1) !important;
  }
}

@media (max-width: 1023px), (hover: none), (pointer: coarse) {
  body.courses-panel-active .courses-panel-root .course-card.course-card--accent.ui-accent-card,
  body.courses-panel-active .courses-panel-root .course-add-card.ui-accent-card,
  body.courses-panel-active .courses-panel-root .course-student-card.ui-accent-card,
  body.courses-panel-active .courses-panel-root .course-choreo-card.ui-accent-card,
  body.courses-panel-active .courses-panel-root .course-card.course-card--accent.ui-accent-card:hover,
  body.courses-panel-active .courses-panel-root .course-add-card.ui-accent-card:hover,
  body.courses-panel-active .courses-panel-root .course-student-card.ui-accent-card:hover,
  body.courses-panel-active .courses-panel-root .course-choreo-card.ui-accent-card:hover,
  body.courses-panel-active .courses-panel-root .course-card.course-card--accent.ui-accent-card:focus-visible,
  body.courses-panel-active .courses-panel-root .course-add-card.ui-accent-card:focus-visible,
  body.courses-panel-active .courses-panel-root .course-student-card.ui-accent-card:focus-visible,
  body.courses-panel-active .courses-panel-root .course-choreo-card.ui-accent-card:focus-visible,
  body.courses-panel-active .courses-panel-root .course-card.course-card--accent.ui-accent-card:active,
  body.courses-panel-active .courses-panel-root .course-add-card.ui-accent-card:active,
  body.courses-panel-active .courses-panel-root .course-student-card.ui-accent-card:active,
  body.courses-panel-active .courses-panel-root .course-choreo-card.ui-accent-card:active {
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
}

@media (min-width: 1024px) {
  body.courses-panel-active #dashboard-app-shell > .dashboard-sidebar {
    top: calc(var(--app-header-height) + 0.35rem) !important;
    height: calc(100dvh - var(--app-header-height) - 0.55rem) !important;
    min-height: 0 !important;
    z-index: 9000 !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }

  body.courses-panel-active #dashboard-app-shell > .dashboard-sidebar .dashboard-sidebar__inner {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
    pointer-events: auto !important;
  }

  body.courses-panel-active #dashboard-app-shell > .dashboard-sidebar .dashboard-sidebar__nav {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    pointer-events: auto !important;
  }
}

.course-student-context-menu__item.is-touch-target {
  background: color-mix(in srgb, var(--theme-primary, #38bdf8) 20%, transparent) !important;
  outline: none !important;
}

.course-student-context-menu__item--danger.is-touch-target {
  background: color-mix(in srgb, #ef4444 20%, transparent) !important;
}

/* EDQ V44.14 — Menus contextuels tactiles : appui long + glissé + relâché.
   Le menu prend la main pendant le geste afin de conserver le drag natif des options. */
@media (max-width: 1023px), (hover: none), (pointer: coarse) {
  .course-student-context-menu.is-touch-dragging,
  .course-student-context-menu.is-touch-dragging * {
    touch-action: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-touch-callout: none !important;
  }
}

/* EDQ V44.15 — Verrouillage du scroll pendant le menu tactile.
   L'appui long + glissé doit piloter le menu, pas faire défiler le panel derrière. */
@media (max-width: 1023px), (hover: none), (pointer: coarse) {
  html.courses-context-menu-scroll-locked,
  body.courses-context-menu-scroll-locked {
    overscroll-behavior: none !important;
  }

  body.courses-context-menu-scroll-locked .courses-panel-root,
  body.courses-context-menu-scroll-locked .courses-panel-view,
  body.courses-context-menu-scroll-locked .courses-panel-content,
  body.courses-context-menu-scroll-locked .courses-panel-body,
  body.courses-context-menu-scroll-locked .courses-list-area,
  body.courses-context-menu-scroll-locked .course-student-card-grid,
  body.courses-context-menu-scroll-locked .course-student-context-menu {
    overscroll-behavior: none !important;
    touch-action: none !important;
  }
}

/* ==========================================================================
   EDQ V46.5.7 — Profil élève : garde-fou final après règles génériques Cours
   --------------------------------------------------------------------------
   Ce fichier est chargé après dashboard-students.css. Les cartes du profil élève
   utilisent aussi .courses-panel-root et .course-card, donc les règles génériques
   du panel Cours gagnaient sur l'adaptateur local. Ces sélecteurs isolent le
   profil élève sans toucher au vrai panel Cours.
   ========================================================================== */

body.courses-panel-active .courses-panel-root.student-profile-course-root .guardian-student-courses-block.ui-accent-card > .ui-accent-card__rail::before,
body.courses-panel-active .courses-panel-root.student-profile-course-root .student-profile-card--guardians.ui-accent-card > .ui-accent-card__rail::before {
  opacity: 1 !important;
  transform: scaleY(0) !important;
  filter: none !important;
}

body.courses-panel-active .courses-panel-root.student-profile-course-root .guardian-student-courses-block .student-profile-course-card.course-card.course-card--accent.ui-accent-card > .ui-accent-card__rail::before,
body.courses-panel-active .courses-panel-root.student-profile-course-root .guardian-student-courses-block .student-profile-course-add-card.ui-accent-card > .ui-accent-card__rail::before {
  opacity: 1 !important;
  transform: scaleY(0) !important;
  filter: none !important;
}

@media (hover: hover) and (pointer: fine) {
  body.courses-panel-active .courses-panel-root.student-profile-course-root .guardian-student-courses-block.ui-accent-card:hover > .ui-accent-card__rail::before,
  body.courses-panel-active .courses-panel-root.student-profile-course-root .guardian-student-courses-block.ui-accent-card.is-smart-panel-frame-hovered > .ui-accent-card__rail::before,
  body.courses-panel-active .courses-panel-root.student-profile-course-root .guardian-student-courses-block.ui-accent-card.is-smart-panel-frame-active > .ui-accent-card__rail::before,
  body.courses-panel-active .courses-panel-root.student-profile-course-root .guardian-student-courses-block.ui-accent-card:has(.is-courses-desktop-current) > .ui-accent-card__rail::before,
  body.courses-panel-active .courses-panel-root.student-profile-course-root .guardian-student-courses-block.ui-accent-card:has([data-menu-open="true"]) > .ui-accent-card__rail::before {
    opacity: 1 !important;
    transform: scaleY(1) !important;
    filter: drop-shadow(0 0 10px color-mix(in srgb, var(--ui-accent-card-color, #38bdf8) 58%, transparent)) !important;
  }

  body.courses-panel-active .courses-panel-root.student-profile-course-root .guardian-student-courses-block .student-profile-course-card.course-card.course-card--accent.ui-accent-card:hover > .ui-accent-card__rail::before,
  body.courses-panel-active .courses-panel-root.student-profile-course-root .guardian-student-courses-block .student-profile-course-card.course-card.course-card--accent.ui-accent-card:focus-visible > .ui-accent-card__rail::before,
  body.courses-panel-active .courses-panel-root.student-profile-course-root .guardian-student-courses-block .student-profile-course-card.course-card.course-card--accent.ui-accent-card.is-smart-panel-card-hovered > .ui-accent-card__rail::before,
  body.courses-panel-active .courses-panel-root.student-profile-course-root .guardian-student-courses-block .student-profile-course-card.course-card.course-card--accent.ui-accent-card.is-courses-desktop-current > .ui-accent-card__rail::before,
  body.courses-panel-active .courses-panel-root.student-profile-course-root .guardian-student-courses-block .student-profile-course-card.course-card.course-card--accent.ui-accent-card[data-menu-open="true"] > .ui-accent-card__rail::before,
  body.courses-panel-active .courses-panel-root.student-profile-course-root .guardian-student-courses-block .student-profile-course-add-card.ui-accent-card:hover > .ui-accent-card__rail::before,
  body.courses-panel-active .courses-panel-root.student-profile-course-root .guardian-student-courses-block .student-profile-course-add-card.ui-accent-card:focus-visible > .ui-accent-card__rail::before,
  body.courses-panel-active .courses-panel-root.student-profile-course-root .guardian-student-courses-block .student-profile-course-add-card.ui-accent-card.is-smart-panel-card-hovered > .ui-accent-card__rail::before,
  body.courses-panel-active .courses-panel-root.student-profile-course-root .guardian-student-courses-block .student-profile-course-add-card.ui-accent-card.is-courses-desktop-current > .ui-accent-card__rail::before,
  body.courses-panel-active .courses-panel-root.student-profile-course-root .guardian-student-courses-block .student-profile-course-add-card.ui-accent-card[data-menu-open="true"] > .ui-accent-card__rail::before {
    opacity: 1 !important;
    transform: scaleY(1) !important;
    filter: drop-shadow(0 0 10px color-mix(in srgb, var(--course-style-color, var(--ui-accent-card-color, #38bdf8)) 58%, transparent)) !important;
  }

  body.courses-panel-active .courses-panel-root.student-profile-course-root .student-profile-card--guardians.ui-accent-card:hover > .ui-accent-card__rail::before,
  body.courses-panel-active .courses-panel-root.student-profile-course-root .student-profile-card--guardians.ui-accent-card.is-smart-panel-frame-hovered > .ui-accent-card__rail::before,
  body.courses-panel-active .courses-panel-root.student-profile-course-root .student-profile-card--guardians.ui-accent-card.is-smart-panel-frame-active > .ui-accent-card__rail::before,
  body.courses-panel-active .courses-panel-root.student-profile-course-root .student-profile-card--guardians.ui-accent-card.is-student-guardian-menu-active > .ui-accent-card__rail::before,
  body.courses-panel-active .courses-panel-root.student-profile-course-root .student-profile-card--guardians.ui-accent-card:has(.student-guardian-card.is-courses-desktop-current) > .ui-accent-card__rail::before,
  body.courses-panel-active .courses-panel-root.student-profile-course-root .student-profile-card--guardians.ui-accent-card:has(.student-guardian-card[data-menu-open="true"]) > .ui-accent-card__rail::before {
    opacity: 1 !important;
    transform: scaleY(1) !important;
    filter: drop-shadow(0 0 10px color-mix(in srgb, var(--ui-accent-card-color, #a855f7) 58%, transparent)) !important;
  }
}

@media (hover: none), (pointer: coarse), (max-width: 1023px) {
  body.courses-panel-active .courses-panel-root.student-profile-course-root .guardian-student-courses-block.ui-accent-card > .ui-accent-card__rail::before,
  body.courses-panel-active .courses-panel-root.student-profile-course-root .student-profile-card--guardians.ui-accent-card > .ui-accent-card__rail::before,
  body.courses-panel-active .courses-panel-root.student-profile-course-root .guardian-student-courses-block .student-profile-course-card.course-card.course-card--accent.ui-accent-card > .ui-accent-card__rail::before,
  body.courses-panel-active .courses-panel-root.student-profile-course-root .guardian-student-courses-block .student-profile-course-add-card.ui-accent-card > .ui-accent-card__rail::before {
    opacity: 1 !important;
    transform: scaleY(1) !important;
    filter: none !important;
  }
}

/* ========================================================================== 
   EDQ V46.5.8 — Profil élève : rails et états actifs consolidés
   --------------------------------------------------------------------------
   Ce bloc est volontairement placé dans courses-panel.css, chargé après
   dashboard-students.css, pour gagner la cascade face aux règles génériques
   des cartes de cours. Il ne cible que le profil élève.
   ========================================================================== */

/* Tout cadre du profil garde son rail actif si le moteur commun ou un menu local
   le marque actif. Cela corrige notamment Identité & contact pendant un menu. */
body.courses-panel-active .courses-panel-root.student-profile-course-root .student-profile-card.ui-accent-card:is(:hover, .is-smart-panel-frame-hovered, .is-smart-panel-frame-active, .is-student-profile-field-menu-active, .is-student-guardian-menu-active) > .ui-accent-card__rail::before,
body.courses-panel-active .courses-panel-root.student-profile-course-root .student-profile-card.ui-accent-card:has([data-menu-open="true"]) > .ui-accent-card__rail::before {
  opacity: 1 !important;
  transform: scaleY(1) !important;
  filter: none !important;
}

/* Cadre Cours inscrits : rail du cadre indépendant des rails des cartes. */
body.courses-panel-active .courses-panel-root.student-profile-course-root .guardian-student-courses-block.ui-accent-card > .ui-accent-card__rail {
  opacity: 1 !important;
  display: block !important;
  visibility: visible !important;
}

body.courses-panel-active .courses-panel-root.student-profile-course-root .guardian-student-courses-block.ui-accent-card > .ui-accent-card__rail::before {
  opacity: 1 !important;
  transform: scaleY(0) !important;
  filter: none !important;
}

@media (hover: hover) and (pointer: fine) {
  body.courses-panel-active .courses-panel-root.student-profile-course-root .guardian-student-courses-block.ui-accent-card:is(:hover, .is-smart-panel-frame-hovered, .is-smart-panel-frame-active, .is-student-profile-courses-frame-active) > .ui-accent-card__rail::before,
  body.courses-panel-active .courses-panel-root.student-profile-course-root .guardian-student-courses-block.ui-accent-card:has(.is-courses-desktop-current) > .ui-accent-card__rail::before,
  body.courses-panel-active .courses-panel-root.student-profile-course-root .guardian-student-courses-block.ui-accent-card:has([data-menu-open="true"]) > .ui-accent-card__rail::before {
    opacity: 1 !important;
    transform: scaleY(1) !important;
    filter: none !important;
  }

  /* Cartes de cours : rail éteint par défaut sur PC. */
  body.courses-panel-active .courses-panel-root.student-profile-course-root .guardian-student-courses-block .student-profile-course-card.course-card.course-card--accent.ui-accent-card:not(:hover):not(:focus-visible):not(.is-smart-panel-card-hovered):not(.is-courses-desktop-current):not([data-menu-open="true"]) > .ui-accent-card__rail::before,
  body.courses-panel-active .courses-panel-root.student-profile-course-root .guardian-student-courses-block .student-profile-course-add-card.ui-accent-card:not(:hover):not(:focus-visible):not(.is-smart-panel-card-hovered):not(.is-courses-desktop-current):not([data-menu-open="true"]) > .ui-accent-card__rail::before {
    opacity: 1 !important;
    transform: scaleY(0) !important;
    filter: none !important;
  }

  /* Cartes de cours : rail actif uniquement sur la carte concernée. */
  body.courses-panel-active .courses-panel-root.student-profile-course-root .guardian-student-courses-block .student-profile-course-card.course-card.course-card--accent.ui-accent-card:is(:hover, :focus-visible, .is-smart-panel-card-hovered, .is-courses-desktop-current, [data-menu-open="true"]) > .ui-accent-card__rail::before,
  body.courses-panel-active .courses-panel-root.student-profile-course-root .guardian-student-courses-block .student-profile-course-add-card.ui-accent-card:is(:hover, :focus-visible, .is-smart-panel-card-hovered, .is-courses-desktop-current, [data-menu-open="true"]) > .ui-accent-card__rail::before {
    opacity: 1 !important;
    transform: scaleY(1) !important;
    filter: none !important;
  }

  /* Galas : même rythme que les autres cartes, sans glow final parasite. */
  body.courses-panel-active .courses-panel-root.student-profile-course-root .student-profile-gala-card::before {
    opacity: .34 !important;
    transform: scaleY(0) !important;
    filter: none !important;
  }

  body.courses-panel-active .courses-panel-root.student-profile-course-root .student-profile-gala-card:is(:hover, :focus-visible, .is-smart-panel-card-hovered, [data-menu-open="true"])::before {
    opacity: 1 !important;
    transform: scaleY(1) !important;
    filter: none !important;
  }
}

@media (hover: none), (pointer: coarse), (max-width: 1023px) {
  body.courses-panel-active .courses-panel-root.student-profile-course-root .student-profile-card.ui-accent-card > .ui-accent-card__rail::before,
  body.courses-panel-active .courses-panel-root.student-profile-course-root .guardian-student-courses-block .student-profile-course-card.course-card.course-card--accent.ui-accent-card > .ui-accent-card__rail::before,
  body.courses-panel-active .courses-panel-root.student-profile-course-root .guardian-student-courses-block .student-profile-course-add-card.ui-accent-card > .ui-accent-card__rail::before,
  body.courses-panel-active .courses-panel-root.student-profile-course-root .student-profile-gala-card::before {
    opacity: 1 !important;
    transform: scaleY(1) !important;
    filter: none !important;
  }
}


/* ==========================================================================
   EDQ V46.5.12 — Profil élève : Cours inscrits retrouve la hiérarchie ui-accent-card
   --------------------------------------------------------------------------
   Le JS ne remplace plus le contenu complet de la section, mais seulement le
   .ui-accent-card__body. Le rail natif du composant reste donc en place comme
   pour Identité, Santé, Galas, Responsables et Adhésion.
   ========================================================================== */

body.courses-panel-active .courses-panel-root.student-profile-course-root .guardian-student-courses-block.ui-accent-card {
  position: relative !important;
}

body.courses-panel-active .courses-panel-root.student-profile-course-root .guardian-student-courses-block.ui-accent-card::before {
  content: none !important;
  display: none !important;
}

body.courses-panel-active .courses-panel-root.student-profile-course-root .guardian-student-courses-block.ui-accent-card > .ui-accent-card__rail {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

body.courses-panel-active .courses-panel-root.student-profile-course-root .guardian-student-courses-block.ui-accent-card > .ui-accent-card__rail::before {
  opacity: 1 !important;
  transform: scaleY(0) !important;
  filter: none !important;
}

@media (hover: hover) and (pointer: fine) {
  body.courses-panel-active .courses-panel-root.student-profile-course-root .guardian-student-courses-block.ui-accent-card:is(:hover, .is-smart-panel-frame-hovered, .is-smart-panel-frame-active, .is-student-profile-courses-frame-active) > .ui-accent-card__rail::before,
  body.courses-panel-active .courses-panel-root.student-profile-course-root .guardian-student-courses-block.ui-accent-card:has(.is-courses-desktop-current) > .ui-accent-card__rail::before,
  body.courses-panel-active .courses-panel-root.student-profile-course-root .guardian-student-courses-block.ui-accent-card:has([data-menu-open="true"]) > .ui-accent-card__rail::before {
    transform: scaleY(1) !important;
  }
}

@media (hover: none), (pointer: coarse), (max-width: 1023px) {
  body.courses-panel-active .courses-panel-root.student-profile-course-root .guardian-student-courses-block.ui-accent-card > .ui-accent-card__rail::before {
    transform: scaleY(1) !important;
  }
}

/* EDQ V47.0.31 — CTA commun Smart Panel : même dock, même forme, labels responsives. */
body.courses-panel-active .courses-control-dock__actions .courses-control-action.smart-panel-responsive-action,
body.courses-panel-active .courses-panel-root--subpanel .courses-control-dock__actions .courses-control-action.smart-panel-responsive-action {
  flex: 0 1 auto !important;
  inline-size: auto !important;
  width: auto !important;
  min-inline-size: var(--courses-control-row-height, 2.18rem) !important;
  min-width: var(--courses-control-row-height, 2.18rem) !important;
  max-inline-size: min(100%, clamp(9.5rem, 19vw, 15rem)) !important;
  max-width: min(100%, clamp(9.5rem, 19vw, 15rem)) !important;
  height: var(--courses-control-row-height, 2.18rem) !important;
  min-height: var(--courses-control-row-height, 2.18rem) !important;
  max-height: var(--courses-control-row-height, 2.18rem) !important;
  padding-inline: clamp(.82rem, 1.05vw, 1.05rem) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .45rem !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: clip !important;
  box-sizing: border-box !important;
}

body.courses-panel-active .courses-control-dock__actions .courses-control-action.smart-panel-responsive-action > i,
body.courses-panel-active .courses-panel-root--subpanel .courses-control-dock__actions .courses-control-action.smart-panel-responsive-action > i {
  flex: 0 0 auto !important;
  inline-size: auto !important;
  width: auto !important;
  min-inline-size: 0 !important;
  min-width: 0 !important;
  block-size: auto !important;
  height: auto !important;
  min-block-size: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  line-height: 1 !important;
}

body.courses-panel-active .courses-control-dock__actions .courses-control-action.smart-panel-responsive-action .ui-btn__label--full,
body.courses-panel-active .courses-control-dock__actions .courses-control-action.smart-panel-responsive-action .ui-btn__label--short,
body.courses-panel-active .courses-panel-root--subpanel .courses-control-dock__actions .courses-control-action.smart-panel-responsive-action .ui-btn__label--full,
body.courses-panel-active .courses-panel-root--subpanel .courses-control-dock__actions .courses-control-action.smart-panel-responsive-action .ui-btn__label--short {
  min-inline-size: 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

@media (max-width: 767px), (max-width: 980px) and (max-height: 520px) and (orientation: landscape) {
  body.courses-panel-active .courses-control-dock__actions .courses-control-action.smart-panel-responsive-action,
  body.courses-panel-active .courses-panel-root--subpanel .courses-control-dock__actions .courses-control-action.smart-panel-responsive-action {
    inline-size: var(--courses-control-row-height, 2.12rem) !important;
    width: var(--courses-control-row-height, 2.12rem) !important;
    min-inline-size: var(--courses-control-row-height, 2.12rem) !important;
    min-width: var(--courses-control-row-height, 2.12rem) !important;
    max-inline-size: var(--courses-control-row-height, 2.12rem) !important;
    max-width: var(--courses-control-row-height, 2.12rem) !important;
    block-size: var(--courses-control-row-height, 2.12rem) !important;
    height: var(--courses-control-row-height, 2.12rem) !important;
    min-block-size: var(--courses-control-row-height, 2.12rem) !important;
    min-height: var(--courses-control-row-height, 2.12rem) !important;
    max-block-size: var(--courses-control-row-height, 2.12rem) !important;
    max-height: var(--courses-control-row-height, 2.12rem) !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  body.courses-panel-active .courses-control-dock__actions .courses-control-action.smart-panel-responsive-action .ui-btn__label--full,
  body.courses-panel-active .courses-control-dock__actions .courses-control-action.smart-panel-responsive-action .ui-btn__label--short,
  body.courses-panel-active .courses-panel-root--subpanel .courses-control-dock__actions .courses-control-action.smart-panel-responsive-action .ui-btn__label--full,
  body.courses-panel-active .courses-panel-root--subpanel .courses-control-dock__actions .courses-control-action.smart-panel-responsive-action .ui-btn__label--short {
    display: none !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) and (min-height: 521px) {
  body.courses-panel-active .courses-control-dock__actions .courses-control-action.smart-panel-responsive-action .ui-btn__label--full,
  body.courses-panel-active .courses-panel-root--subpanel .courses-control-dock__actions .courses-control-action.smart-panel-responsive-action .ui-btn__label--full {
    display: none !important;
  }

  body.courses-panel-active .courses-control-dock__actions .courses-control-action.smart-panel-responsive-action .ui-btn__label--short,
  body.courses-panel-active .courses-panel-root--subpanel .courses-control-dock__actions .courses-control-action.smart-panel-responsive-action .ui-btn__label--short {
    display: inline !important;
  }
}

@media (min-width: 1024px) {
  body.courses-panel-active .courses-control-dock__actions .courses-control-action.smart-panel-responsive-action .ui-btn__label--full,
  body.courses-panel-active .courses-panel-root--subpanel .courses-control-dock__actions .courses-control-action.smart-panel-responsive-action .ui-btn__label--full {
    display: inline !important;
  }

  body.courses-panel-active .courses-control-dock__actions .courses-control-action.smart-panel-responsive-action .ui-btn__label--short,
  body.courses-panel-active .courses-panel-root--subpanel .courses-control-dock__actions .courses-control-action.smart-panel-responsive-action .ui-btn__label--short {
    display: none !important;
  }
}


/* =========================================================
   EDQ V47.0.32 — Normalisation finale Dock / CTA Smart Panel
   ---------------------------------------------------------
   Le dock et les CTA responsives sont communs à tous les panels.
   Aucun contexte de panel ne doit modifier leur structure, leur
   position ou leur forme. Seuls le libellé, l'icône et le tone
   du bouton peuvent changer côté JS.
   ========================================================= */
body.courses-panel-active .courses-control-dock.has-action:not(.has-chips),
body.courses-panel-active .courses-panel-root--subpanel .courses-control-dock.has-action:not(.has-chips) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  justify-content: stretch !important;
}

body.courses-panel-active .courses-control-dock.has-action:not(.has-chips) .courses-control-dock__chips,
body.courses-panel-active .courses-panel-root--subpanel .courses-control-dock.has-action:not(.has-chips) .courses-control-dock__chips {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  pointer-events: none !important;
}

body.courses-panel-active .courses-control-dock.has-action:not(.has-chips) .courses-control-dock__actions,
body.courses-panel-active .courses-panel-root--subpanel .courses-control-dock.has-action:not(.has-chips) .courses-control-dock__actions {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  justify-self: end !important;
  align-self: center !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: min(100%, clamp(9.5rem, 19vw, 15rem)) !important;
  overflow: visible !important;
  pointer-events: auto !important;
}

body.courses-panel-active .courses-control-dock__actions .courses-control-action.smart-panel-responsive-action,
body.courses-panel-active .courses-control-dock.has-action:not(.has-chips) .courses-control-action.smart-panel-responsive-action,
body.courses-panel-active .courses-panel-root--subpanel .courses-control-dock__actions .courses-control-action.smart-panel-responsive-action,
body.courses-panel-active .courses-panel-root--subpanel .courses-control-dock.has-action:not(.has-chips) .courses-control-action.smart-panel-responsive-action {
  --smart-panel-responsive-action-size: var(--courses-smart-row-height, 2.18rem);
  --courses-control-row-height: var(--smart-panel-responsive-action-size) !important;
  flex: 0 1 auto !important;
  inline-size: auto !important;
  width: auto !important;
  min-inline-size: var(--smart-panel-responsive-action-size) !important;
  min-width: var(--smart-panel-responsive-action-size) !important;
  max-inline-size: min(100%, clamp(9.5rem, 19vw, 15rem)) !important;
  max-width: min(100%, clamp(9.5rem, 19vw, 15rem)) !important;
  block-size: var(--smart-panel-responsive-action-size) !important;
  height: var(--smart-panel-responsive-action-size) !important;
  min-block-size: var(--smart-panel-responsive-action-size) !important;
  min-height: var(--smart-panel-responsive-action-size) !important;
  max-block-size: var(--smart-panel-responsive-action-size) !important;
  max-height: var(--smart-panel-responsive-action-size) !important;
  padding-block: 0 !important;
  padding-inline: clamp(.82rem, 1.05vw, 1.05rem) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .45rem !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

body.courses-panel-active .courses-control-dock__actions .courses-control-action.smart-panel-responsive-action > i,
body.courses-panel-active .courses-panel-root--subpanel .courses-control-dock__actions .courses-control-action.smart-panel-responsive-action > i {
  flex: 0 0 auto !important;
  inline-size: auto !important;
  width: auto !important;
  min-inline-size: 0 !important;
  min-width: 0 !important;
  block-size: auto !important;
  height: auto !important;
  min-block-size: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  line-height: 1 !important;
}

body.courses-panel-active .courses-control-dock__actions .courses-control-action.smart-panel-responsive-action .ui-btn__label--full,
body.courses-panel-active .courses-control-dock__actions .courses-control-action.smart-panel-responsive-action .ui-btn__label--short,
body.courses-panel-active .courses-panel-root--subpanel .courses-control-dock__actions .courses-control-action.smart-panel-responsive-action .ui-btn__label--full,
body.courses-panel-active .courses-panel-root--subpanel .courses-control-dock__actions .courses-control-action.smart-panel-responsive-action .ui-btn__label--short {
  min-inline-size: 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

@media (max-width: 767px), (max-width: 980px) and (max-height: 520px) and (orientation: landscape) {
  body.courses-panel-active .courses-control-dock.has-action:not(.has-chips) .courses-control-dock__actions,
  body.courses-panel-active .courses-panel-root--subpanel .courses-control-dock.has-action:not(.has-chips) .courses-control-dock__actions {
    grid-column: 2 !important;
    justify-self: end !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: var(--courses-smart-row-height, 2.12rem) !important;
  }

  body.courses-panel-active .courses-control-dock__actions .courses-control-action.smart-panel-responsive-action,
  body.courses-panel-active .courses-control-dock.has-action:not(.has-chips) .courses-control-action.smart-panel-responsive-action,
  body.courses-panel-active .courses-panel-root--subpanel .courses-control-dock__actions .courses-control-action.smart-panel-responsive-action,
  body.courses-panel-active .courses-panel-root--subpanel .courses-control-dock.has-action:not(.has-chips) .courses-control-action.smart-panel-responsive-action {
    --smart-panel-responsive-action-size: var(--courses-smart-row-height, 2.12rem);
    inline-size: var(--smart-panel-responsive-action-size) !important;
    width: var(--smart-panel-responsive-action-size) !important;
    min-inline-size: var(--smart-panel-responsive-action-size) !important;
    min-width: var(--smart-panel-responsive-action-size) !important;
    max-inline-size: var(--smart-panel-responsive-action-size) !important;
    max-width: var(--smart-panel-responsive-action-size) !important;
    block-size: var(--smart-panel-responsive-action-size) !important;
    height: var(--smart-panel-responsive-action-size) !important;
    min-block-size: var(--smart-panel-responsive-action-size) !important;
    min-height: var(--smart-panel-responsive-action-size) !important;
    max-block-size: var(--smart-panel-responsive-action-size) !important;
    max-height: var(--smart-panel-responsive-action-size) !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  body.courses-panel-active .courses-control-dock__actions .courses-control-action.smart-panel-responsive-action .ui-btn__label--full,
  body.courses-panel-active .courses-control-dock__actions .courses-control-action.smart-panel-responsive-action .ui-btn__label--short,
  body.courses-panel-active .courses-panel-root--subpanel .courses-control-dock__actions .courses-control-action.smart-panel-responsive-action .ui-btn__label--full,
  body.courses-panel-active .courses-panel-root--subpanel .courses-control-dock__actions .courses-control-action.smart-panel-responsive-action .ui-btn__label--short {
    display: none !important;
  }
}

/* =========================================================
   EDQ V47.0.33 — Socle final CTA / Dock Smart Panel
   ---------------------------------------------------------
   Règle commune volontairement sans contexte de panel : le dock et
   le CTA responsive doivent garder la même structure et la même forme
   partout. Le contexte ne change que le texte, l’icône ou le tone.
   ========================================================= */
.courses-control-dock.has-action {
  --courses-smart-row-height: 2.18rem !important;
  --courses-control-row-height: 2.18rem !important;
  position: sticky !important;
  top: var(--courses-panel-sticky-top, calc(var(--courses-panel-nav-height, 64px) + .42rem)) !important;
  z-index: 96 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  justify-content: stretch !important;
  gap: clamp(.52rem, 1vw, .82rem) !important;
  width: 100vw !important;
  min-height: calc(var(--courses-control-row-height, 2.18rem) + .18rem) !important;
  margin: 0 !important;
  padding-top: .09rem !important;
  padding-bottom: .09rem !important;
  padding-left: var(--courses-panel-content-left, max(env(safe-area-inset-left, 0px), 1rem)) !important;
  padding-right: var(--courses-panel-content-right, max(env(safe-area-inset-right, 0px), 1rem)) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  pointer-events: none !important;
  box-sizing: border-box !important;
}

.courses-control-dock.has-action .courses-control-dock__chips,
.courses-control-dock.has-action .courses-control-dock__actions {
  grid-row: 1 !important;
  align-self: center !important;
  min-width: 0 !important;
}

.courses-control-dock.has-action .courses-control-dock__chips {
  grid-column: 1 !important;
  width: 100% !important;
  max-width: 100% !important;
  pointer-events: auto !important;
}

.courses-control-dock.has-action:not(.has-chips) .courses-control-dock__chips {
  pointer-events: none !important;
}

.courses-control-dock.has-action .courses-control-dock__actions,
.courses-control-dock.has-action:not(.has-chips) .courses-control-dock__actions {
  grid-column: 2 !important;
  order: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  justify-self: end !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: min(100%, clamp(9.5rem, 19vw, 15rem)) !important;
  overflow: visible !important;
  pointer-events: auto !important;
}

.courses-control-dock.has-action .courses-control-action.smart-panel-responsive-action {
  --smart-panel-responsive-action-size: 2.18rem !important;
  --courses-control-row-height: var(--smart-panel-responsive-action-size) !important;
  flex: 0 1 auto !important;
  inline-size: auto !important;
  width: auto !important;
  min-inline-size: var(--smart-panel-responsive-action-size) !important;
  min-width: var(--smart-panel-responsive-action-size) !important;
  max-inline-size: min(100%, clamp(9.5rem, 19vw, 15rem)) !important;
  max-width: min(100%, clamp(9.5rem, 19vw, 15rem)) !important;
  block-size: var(--smart-panel-responsive-action-size) !important;
  height: var(--smart-panel-responsive-action-size) !important;
  min-block-size: var(--smart-panel-responsive-action-size) !important;
  min-height: var(--smart-panel-responsive-action-size) !important;
  max-block-size: var(--smart-panel-responsive-action-size) !important;
  max-height: var(--smart-panel-responsive-action-size) !important;
  padding-block: 0 !important;
  padding-inline: clamp(.82rem, 1.05vw, 1.05rem) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .45rem !important;
  border-radius: .68rem !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

.courses-control-dock.has-action .courses-control-action.smart-panel-responsive-action > i {
  flex: 0 0 auto !important;
  inline-size: auto !important;
  width: auto !important;
  min-inline-size: 0 !important;
  min-width: 0 !important;
  block-size: auto !important;
  height: auto !important;
  min-block-size: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  line-height: 1 !important;
}

.courses-control-dock.has-action .courses-control-action.smart-panel-responsive-action .ui-btn__label--full,
.courses-control-dock.has-action .courses-control-action.smart-panel-responsive-action .ui-btn__label--short {
  min-inline-size: 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

@media (min-width: 1024px) {
  .courses-control-dock.has-action .courses-control-action.smart-panel-responsive-action .ui-btn__label--full {
    display: inline !important;
  }

  .courses-control-dock.has-action .courses-control-action.smart-panel-responsive-action .ui-btn__label--short {
    display: none !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) and (min-height: 521px) {
  .courses-control-dock.has-action .courses-control-action.smart-panel-responsive-action .ui-btn__label--full {
    display: none !important;
  }

  .courses-control-dock.has-action .courses-control-action.smart-panel-responsive-action .ui-btn__label--short {
    display: inline !important;
  }
}

@media (max-width: 767px), (max-width: 980px) and (max-height: 520px) and (orientation: landscape) {
  .courses-control-dock.has-action {
    --courses-smart-row-height: 2.12rem !important;
    --courses-control-row-height: 2.12rem !important;
    grid-template-columns: minmax(0, 1fr) var(--courses-control-row-height, 2.12rem) !important;
    min-height: calc(var(--courses-control-row-height, 2.12rem) + .10rem) !important;
    gap: .42rem !important;
  }

  .courses-control-dock.has-action .courses-control-dock__actions,
  .courses-control-dock.has-action:not(.has-chips) .courses-control-dock__actions {
    grid-column: 2 !important;
    order: 0 !important;
    width: var(--courses-control-row-height, 2.12rem) !important;
    min-width: var(--courses-control-row-height, 2.12rem) !important;
    max-width: var(--courses-control-row-height, 2.12rem) !important;
    justify-self: end !important;
  }

  .courses-control-dock.has-action .courses-control-action.smart-panel-responsive-action {
    --smart-panel-responsive-action-size: var(--courses-control-row-height, 2.12rem) !important;
    inline-size: var(--smart-panel-responsive-action-size) !important;
    width: var(--smart-panel-responsive-action-size) !important;
    min-inline-size: var(--smart-panel-responsive-action-size) !important;
    min-width: var(--smart-panel-responsive-action-size) !important;
    max-inline-size: var(--smart-panel-responsive-action-size) !important;
    max-width: var(--smart-panel-responsive-action-size) !important;
    block-size: var(--smart-panel-responsive-action-size) !important;
    height: var(--smart-panel-responsive-action-size) !important;
    min-block-size: var(--smart-panel-responsive-action-size) !important;
    min-height: var(--smart-panel-responsive-action-size) !important;
    max-block-size: var(--smart-panel-responsive-action-size) !important;
    max-height: var(--smart-panel-responsive-action-size) !important;
    padding: 0 !important;
    gap: 0 !important;
    border-radius: .52rem !important;
  }

  .courses-control-dock.has-action .courses-control-action.smart-panel-responsive-action .ui-btn__label--full,
  .courses-control-dock.has-action .courses-control-action.smart-panel-responsive-action .ui-btn__label--short {
    display: none !important;
  }
}

/* =========================================================
   EDQ V47.0.34 — Ajustement commun CTA mobile + réserve sous dock
   ---------------------------------------------------------
   Complète le socle V47.0.33 sans variante de contexte : le CTA
   reste le même composant partout. On corrige uniquement la taille
   mobile et la réserve visuelle après le dock.
   ========================================================= */
.courses-control-dock.has-action + .courses-panel-content,
.courses-control-dock.has-action + .course-student-picker-panel-body,
.courses-control-dock.has-action + .course-view-panel-body,
.courses-control-dock.has-action + .course-form-panel-body,
.courses-control-dock.has-action + .course-choreography-form-panel-body,
.courses-control-dock.has-action + .course-delete-panel-body,
.courses-control-dock.has-action + .course-choreography-delete-panel-body {
  padding-top: clamp(.95rem, 1.55vw, 1.25rem) !important;
}

@media (max-width: 767px), (max-width: 980px) and (max-height: 520px) and (orientation: landscape) {
  .courses-control-dock.has-action {
    --courses-smart-row-height: 2.42rem !important;
    --courses-control-row-height: 2.42rem !important;
    grid-template-columns: minmax(0, 1fr) var(--courses-control-row-height, 2.42rem) !important;
    min-height: calc(var(--courses-control-row-height, 2.42rem) + .18rem) !important;
    padding-top: .09rem !important;
    padding-bottom: .09rem !important;
  }

  .courses-control-dock.has-action .courses-control-dock__actions,
  .courses-control-dock.has-action:not(.has-chips) .courses-control-dock__actions {
    width: var(--courses-control-row-height, 2.42rem) !important;
    min-width: var(--courses-control-row-height, 2.42rem) !important;
    max-width: var(--courses-control-row-height, 2.42rem) !important;
    height: var(--courses-control-row-height, 2.42rem) !important;
    min-height: var(--courses-control-row-height, 2.42rem) !important;
    max-height: var(--courses-control-row-height, 2.42rem) !important;
    justify-self: end !important;
    align-self: center !important;
  }

  .courses-control-dock.has-action .courses-control-action.smart-panel-responsive-action {
    --smart-panel-responsive-action-size: var(--courses-control-row-height, 2.42rem) !important;
    inline-size: var(--smart-panel-responsive-action-size) !important;
    width: var(--smart-panel-responsive-action-size) !important;
    min-inline-size: var(--smart-panel-responsive-action-size) !important;
    min-width: var(--smart-panel-responsive-action-size) !important;
    max-inline-size: var(--smart-panel-responsive-action-size) !important;
    max-width: var(--smart-panel-responsive-action-size) !important;
    block-size: var(--smart-panel-responsive-action-size) !important;
    height: var(--smart-panel-responsive-action-size) !important;
    min-block-size: var(--smart-panel-responsive-action-size) !important;
    min-height: var(--smart-panel-responsive-action-size) !important;
    max-block-size: var(--smart-panel-responsive-action-size) !important;
    max-height: var(--smart-panel-responsive-action-size) !important;
    padding: 0 !important;
    gap: 0 !important;
    border-radius: .68rem !important;
  }

  .courses-control-dock.has-action .courses-control-action.smart-panel-responsive-action > i {
    font-size: 1.05rem !important;
    line-height: 1 !important;
  }

  .courses-control-dock.has-action .courses-control-action.smart-panel-responsive-action .ui-btn__label--full,
  .courses-control-dock.has-action .courses-control-action.smart-panel-responsive-action .ui-btn__label--short {
    display: none !important;
  }

  .courses-control-dock.has-action + .courses-panel-content,
  .courses-control-dock.has-action + .course-student-picker-panel-body,
  .courses-control-dock.has-action + .course-view-panel-body,
  .courses-control-dock.has-action + .course-form-panel-body,
  .courses-control-dock.has-action + .course-choreography-form-panel-body,
  .courses-control-dock.has-action + .course-delete-panel-body,
  .courses-control-dock.has-action + .course-choreography-delete-panel-body {
    padding-top: .95rem !important;
  }
}

/* EDQ V47.0.40 — Source unique des CTA :
   la classe responsive est ajoutée par renderSmartPanelActionButtonHtml().
   Aucune surcouche de contexte ne doit modifier la forme du dock ou du CTA. */

/* =========================================================
   EDQ V47.0.42 — CTA commun mobile : correction sans dépendance au body
   ---------------------------------------------------------
   Certains sous-panels, notamment depuis Mes élèves, gardent le dock
   commun sans conserver durablement body.courses-panel-active.
   La taille mobile doit donc être portée par le dock lui-même, pas par
   une condition de body. Le CTA reste icône seule en mobile, mais avec
   la même zone tactile lisible sur tous les panels modernisés.
   ========================================================= */
@media (max-width: 767px), (max-width: 980px) and (max-height: 520px) and (orientation: landscape) {
  .courses-control-dock.has-action,
  body.courses-panel-active .courses-control-dock.has-action,
  body.courses-panel-active .courses-panel-root--subpanel .courses-control-dock.has-action {
    --courses-smart-row-height: 2.78rem !important;
    --courses-control-row-height: 2.78rem !important;
    grid-template-columns: minmax(0, 1fr) 2.78rem !important;
    min-height: calc(2.78rem + .22rem) !important;
    padding-top: .11rem !important;
    padding-bottom: .11rem !important;
  }

  .courses-control-dock.has-action .courses-control-dock__actions,
  .courses-control-dock.has-action:not(.has-chips) .courses-control-dock__actions,
  body.courses-panel-active .courses-control-dock.has-action .courses-control-dock__actions,
  body.courses-panel-active .courses-control-dock.has-action:not(.has-chips) .courses-control-dock__actions,
  body.courses-panel-active .courses-panel-root--subpanel .courses-control-dock.has-action .courses-control-dock__actions,
  body.courses-panel-active .courses-panel-root--subpanel .courses-control-dock.has-action:not(.has-chips) .courses-control-dock__actions {
    width: 2.78rem !important;
    min-width: 2.78rem !important;
    max-width: 2.78rem !important;
    height: 2.78rem !important;
    min-height: 2.78rem !important;
    max-height: 2.78rem !important;
    justify-self: end !important;
    align-self: center !important;
  }

  .courses-control-dock.has-action .courses-control-action.smart-panel-responsive-action,
  .courses-control-dock.has-action:not(.has-chips) .courses-control-action.smart-panel-responsive-action,
  body.courses-panel-active .courses-control-dock.has-action .courses-control-action.smart-panel-responsive-action,
  body.courses-panel-active .courses-control-dock.has-action:not(.has-chips) .courses-control-action.smart-panel-responsive-action,
  body.courses-panel-active .courses-panel-root--subpanel .courses-control-dock.has-action .courses-control-action.smart-panel-responsive-action,
  body.courses-panel-active .courses-panel-root--subpanel .courses-control-dock.has-action:not(.has-chips) .courses-control-action.smart-panel-responsive-action {
    --smart-panel-responsive-action-size: 2.78rem !important;
    inline-size: 2.78rem !important;
    width: 2.78rem !important;
    min-inline-size: 2.78rem !important;
    min-width: 2.78rem !important;
    max-inline-size: 2.78rem !important;
    max-width: 2.78rem !important;
    block-size: 2.78rem !important;
    height: 2.78rem !important;
    min-block-size: 2.78rem !important;
    min-height: 2.78rem !important;
    max-block-size: 2.78rem !important;
    max-height: 2.78rem !important;
    padding: 0 !important;
    gap: 0 !important;
    border-radius: .88rem !important;
  }

  .courses-control-dock.has-action .courses-control-action.smart-panel-responsive-action > i,
  body.courses-panel-active .courses-control-dock.has-action .courses-control-action.smart-panel-responsive-action > i,
  body.courses-panel-active .courses-panel-root--subpanel .courses-control-dock.has-action .courses-control-action.smart-panel-responsive-action > i {
    font-size: 1.16rem !important;
    line-height: 1 !important;
  }

  .courses-control-dock.has-action .courses-control-action.smart-panel-responsive-action .ui-btn__label--full,
  .courses-control-dock.has-action .courses-control-action.smart-panel-responsive-action .ui-btn__label--short,
  body.courses-panel-active .courses-control-dock.has-action .courses-control-action.smart-panel-responsive-action .ui-btn__label--full,
  body.courses-panel-active .courses-control-dock.has-action .courses-control-action.smart-panel-responsive-action .ui-btn__label--short,
  body.courses-panel-active .courses-panel-root--subpanel .courses-control-dock.has-action .courses-control-action.smart-panel-responsive-action .ui-btn__label--full,
  body.courses-panel-active .courses-panel-root--subpanel .courses-control-dock.has-action .courses-control-action.smart-panel-responsive-action .ui-btn__label--short {
    display: none !important;
  }
}

/* Costume source selector for course choreographies */
.course-costume-source-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin: 0.2rem 0 0.85rem;
}

.course-costume-source-option {
  min-height: 2.45rem;
  border: 1px solid color-mix(in srgb, var(--theme-border, rgba(148, 163, 184, 0.35)) 78%, transparent);
  border-radius: 999px;
  padding: 0.55rem 0.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.46rem;
  background: color-mix(in srgb, var(--theme-surface, #fff) 84%, transparent);
  color: color-mix(in srgb, var(--theme-text, #0f172a) 84%, var(--theme-muted, #64748b));
  font: inherit;
  font-weight: 850;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 0.55rem 1.35rem rgba(15, 23, 42, 0.06);
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.course-costume-source-option:hover,
.course-costume-source-option:focus-visible {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--course-style-color, var(--theme-primary)) 48%, var(--theme-border, rgba(148, 163, 184, 0.35)));
  outline: none;
}

.course-costume-source-option.is-active {
  border-color: color-mix(in srgb, var(--course-style-color, var(--theme-primary)) 66%, transparent);
  background:
    radial-gradient(circle at 15% 0%, color-mix(in srgb, #fff 34%, transparent), transparent 46%),
    color-mix(in srgb, var(--course-style-color, var(--theme-primary)) 20%, var(--theme-surface, #fff) 80%);
  color: color-mix(in srgb, var(--course-style-color, var(--theme-primary)) 76%, var(--theme-text, #0f172a) 24%);
  box-shadow: 0 0.65rem 1.55rem color-mix(in srgb, var(--course-style-color, var(--theme-primary)) 18%, transparent);
}

.course-costume-preview {
  margin-top: 0.35rem;
}

.course-costume-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 0.75rem;
}

.course-costume-actions[hidden] {
  display: none !important;
}

.course-costume-hint {
  margin-top: 0.7rem !important;
}

.costume-selection--personal .course-costume-placeholder--personal,
.course-choreo-card__media--personal {
  border-color: color-mix(in srgb, #22c55e 46%, var(--theme-border, rgba(148, 163, 184, 0.35)));
  background:
    radial-gradient(circle at 35% 18%, color-mix(in srgb, #fff 40%, transparent), transparent 52%),
    color-mix(in srgb, #22c55e 16%, var(--theme-surface, #fff) 84%);
  color: color-mix(in srgb, #16a34a 76%, var(--theme-text, #0f172a) 24%);
}

.costume-selection--empty .course-costume-placeholder--unassigned,
.course-choreo-card__media--unassigned {
  border-color: color-mix(in srgb, #f59e0b 42%, var(--theme-border, rgba(148, 163, 184, 0.35)));
  background:
    radial-gradient(circle at 35% 18%, color-mix(in srgb, #fff 38%, transparent), transparent 52%),
    color-mix(in srgb, #f59e0b 14%, var(--theme-surface, #fff) 86%);
  color: color-mix(in srgb, #d97706 78%, var(--theme-text, #0f172a) 22%);
}

@media (max-width: 720px) {
  .course-costume-source-toggle {
    display: grid;
    grid-template-columns: 1fr;
  }

  .course-costume-source-option {
    width: 100%;
    justify-content: flex-start;
  }
}