/* /public_html/assets/css/dashboard-courses.css */

.courses-panel-shell-content,
.courses-panel-content {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.courses-panel-mobile-title {
  display: none;
}

.courses-loader-host {
  min-height: 180px;
}

.courses-inline-hint-reset {
  margin-top: 0;
}

.courses-inline-error-block {
  display: block;
  margin-top: var(--space-3);
}


.course-rp-wrap {
  padding-top: 6px;
}

.course-rp-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.course-rp-count {
  font-weight: 900;
  opacity: .9;
}

.course-rp-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 12px;
}

.course-rp-card {
  width: 100%;
  text-align: left;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.10);
  border-radius: 14px;
  padding: 14px;
  cursor: pointer;
  color: inherit;
  transition: transform .08s ease, border-color .08s ease, background .08s ease;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.course-rp-card:hover {
  transform: translateY(-1px);
}

.course-rp-card__left {
  min-width: 0;
  flex: 1 1 auto;
}

.course-rp-card__title {
  font-weight: 950;
  font-size: 15px;
  margin: 0 0 4px 0;
  line-height: 1.2;
}

.course-rp-card__meta {
  font-size: 12px;
  opacity: .82;
  font-weight: 800;
  line-height: 1.3;
}

.course-rp-card__right {
  flex: 0 0 auto;
  font-size: 20px;
  line-height: 1;
  margin-top: 1px;
}

.course-rp-error {
  margin-top: 10px;
  font-weight: 800;
  color: #dc3545;
}

@media (min-width: 720px) {
  .course-rp-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1100px) {
  .course-rp-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}


@media (max-width: 719px) {
  .courses-panel-mobile-title {
    display: block;
  }
}

/* V5.4 : contexte du cours dans les sous-panels cours */
.course-choreography-associated-course {
  margin-bottom: 14px;
}

.course-choreography-associated-course .course-view-summary {
  margin: 0;
}

/* =========================================================
   Mes cours — intégration navbar invisible / shell moderne
   ========================================================= */

.my-courses-panel-body {
  padding-top: 0;
  min-width: 0;
}

.my-courses-panel-content {
  width: 100%;
  min-width: 0;
}

.my-courses-loader-host {
  margin-bottom: 1rem;
}

.my-courses-panel-body.is-loading .my-courses-panel-content {
  opacity: 0.42;
  pointer-events: none;
}

.my-courses-panel-body .course-card.course-card--readonly,
.my-courses-panel-body .course-card.course-card--readonly:hover,
.my-courses-panel-body .course-card.course-card--readonly:focus-visible {
  cursor: default;
  transform: none;
}

.my-courses-panel-body .course-card.course-card--readonly:hover {
  box-shadow: var(--shadow-subtle);
}

html[data-theme="dark"] .my-courses-panel-body .course-card.course-card--readonly:hover {
  box-shadow: var(--shadow-subtle);
}

@media (max-width: 1099px) {
  body.is-dashboard-shell-visible #dashboard-view > .my-courses-panel-body {
    padding-top: 0 !important;
  }
}

@media (max-width: 719px), (max-width: 980px) and (max-height: 520px) and (orientation: landscape) {
  body.is-dashboard-shell-visible #dashboard-view:has(.my-courses-panel-body) {
    padding-top: 0 !important;
  }

  body.is-dashboard-shell-visible #dashboard-view > .my-courses-panel-body {
    padding: 0 max(0.85rem, calc(var(--edq-safe-area-right-effective, env(safe-area-inset-right, 0px)) + 0.85rem)) max(1.35rem, calc(var(--edq-safe-area-bottom-effective, env(safe-area-inset-bottom, 0px)) + 1.35rem)) max(0.85rem, calc(var(--edq-safe-area-left-effective, env(safe-area-inset-left, 0px)) + 0.85rem)) !important;
  }

  .my-courses-panel-content {
    padding-top: 0.55rem;
  }
}

/* =========================================================
   V40.2 — Mes cours : hero, prochains cours et cartes modernes
   ========================================================= */

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

.my-courses-hero {
  margin: 0 0 clamp(0.15rem, 1vw, 0.35rem);
}

.my-courses-next-summary {
  display: grid;
  gap: 0.2rem;
  max-width: min(920px, 100%);
  padding: clamp(0.85rem, 1.8vw, 1rem) clamp(1rem, 2vw, 1.25rem);
  border: 1px solid color-mix(in srgb, var(--color-primary, #38bdf8) 18%, transparent);
  border-radius: 1.25rem;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--color-primary, #38bdf8) 10%, transparent),
      color-mix(in srgb, var(--surface-1, #ffffff) 92%, transparent));
  box-shadow: 0 16px 42px rgba(15, 23, 42, 0.08);
}

.my-courses-next-summary__label {
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text-muted, #64748b) 78%, var(--color-primary, #38bdf8));
}

.my-courses-next-summary strong {
  color: var(--text-main, #0f172a);
  font-size: clamp(1rem, 2vw, 1.2rem);
  line-height: 1.15;
}

.my-courses-next-summary span:last-child {
  color: var(--text-muted, #64748b);
  font-size: 0.94rem;
  line-height: 1.35;
}

.my-courses-days {
  display: grid;
  gap: clamp(1rem, 2vw, 1.35rem);
  width: 100%;
}

.my-courses-day-section {
  display: grid;
  gap: 0.75rem;
}

.my-courses-day-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 0.1rem;
}

.my-courses-day-header__label {
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--text-main, #0f172a);
}

.my-courses-day-header__count {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  padding: 0 0.7rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-2, #f8fafc) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--border-subtle, #cbd5e1) 55%, transparent);
  color: var(--text-muted, #64748b);
  font-size: 0.82rem;
  font-weight: 800;
}

.my-courses-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(0.8rem, 1.7vw, 1rem);
}

.my-course-card.ui-accent-card {
  min-height: 100%;
  cursor: default;
  isolation: isolate;
}

.my-course-card.ui-accent-card:hover,
.my-course-card.ui-accent-card:focus-visible {
  transform: none;
}

.my-course-card.is-next-course {
  border-color: color-mix(in srgb, var(--ui-accent-card-color, #38bdf8) 34%, transparent);
  box-shadow:
    0 16px 40px rgba(15, 23, 42, 0.09),
    0 0 0 1px color-mix(in srgb, var(--ui-accent-card-color, #38bdf8) 14%, transparent);
}

.my-course-card__topline {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8rem;
  min-width: 0;
}

.my-course-card__icon {
  width: 2.55rem;
  height: 2.55rem;
  display: inline-grid;
  place-items: center;
  border-radius: 1rem;
  color: color-mix(in srgb, var(--ui-accent-card-color, #38bdf8) 82%, #0f172a);
  background: color-mix(in srgb, var(--ui-accent-card-color, #38bdf8) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--ui-accent-card-color, #38bdf8) 26%, transparent);
  font-size: 1.18rem;
}

.my-course-card__heading {
  min-width: 0;
  display: grid;
  gap: 0.25rem;
}

.my-course-card__heading h3 {
  margin: 0;
  color: var(--text-main, #0f172a);
  font-size: 1.03rem;
  line-height: 1.12;
  letter-spacing: -0.025em;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.my-course-card__level,
.my-course-card__next {
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  min-height: 1.7rem;
  padding: 0.2rem 0.62rem;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 850;
  line-height: 1;
}

.my-course-card__level {
  color: color-mix(in srgb, var(--ui-accent-card-color, #38bdf8) 75%, #111827);
  background: color-mix(in srgb, var(--ui-accent-card-color, #38bdf8) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--ui-accent-card-color, #38bdf8) 24%, transparent);
}

.my-course-card__next {
  color: #064e3b;
  background: color-mix(in srgb, #34d399 22%, #ffffff);
  border: 1px solid color-mix(in srgb, #10b981 38%, transparent);
  white-space: nowrap;
}

.my-course-card__meta {
  display: grid;
  gap: 0.55rem;
  color: var(--text-muted, #64748b);
  font-size: 0.91rem;
  line-height: 1.32;
}

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

.my-course-card__meta i {
  flex: 0 0 auto;
  color: color-mix(in srgb, var(--ui-accent-card-color, #38bdf8) 72%, var(--text-muted, #64748b));
  font-size: 1rem;
}

.my-courses-empty {
  display: grid;
  justify-items: center;
  gap: 0.65rem;
  max-width: 640px;
  margin: clamp(1rem, 4vw, 2.5rem) auto 0;
  padding: clamp(1.4rem, 4vw, 2.2rem);
  text-align: center;
  border-radius: 1.6rem;
  border: 1px dashed color-mix(in srgb, var(--border-subtle, #cbd5e1) 70%, transparent);
  background: color-mix(in srgb, var(--surface-1, #ffffff) 84%, transparent);
}

.my-courses-empty i {
  font-size: 2rem;
  color: var(--text-muted, #64748b);
}

.my-courses-empty h3 {
  margin: 0;
  color: var(--text-main, #0f172a);
  font-weight: 900;
  letter-spacing: -0.03em;
}

.my-courses-empty p {
  margin: 0;
  color: var(--text-muted, #64748b);
  max-width: 32rem;
}

html[data-theme="dark"] .my-courses-next-summary {
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--color-primary, #38bdf8) 12%, transparent),
      color-mix(in srgb, var(--surface-1, #0f172a) 86%, transparent));
  border-color: color-mix(in srgb, var(--color-primary, #38bdf8) 24%, transparent);
  box-shadow: 0 20px 54px rgba(0, 0, 0, 0.26);
}

html[data-theme="dark"] .my-courses-next-summary strong,
html[data-theme="dark"] .my-courses-day-header__label,
html[data-theme="dark"] .my-course-card__heading h3,
html[data-theme="dark"] .my-courses-empty h3 {
  color: rgba(248, 250, 252, 0.96);
}

html[data-theme="dark"] .my-course-card__level {
  color: color-mix(in srgb, var(--ui-accent-card-color, #38bdf8) 70%, #f8fafc);
  background: color-mix(in srgb, var(--ui-accent-card-color, #38bdf8) 16%, transparent);
}

html[data-theme="dark"] .my-course-card__next {
  color: #bbf7d0;
  background: color-mix(in srgb, #22c55e 17%, transparent);
  border-color: color-mix(in srgb, #22c55e 34%, transparent);
}

html[data-theme="dark"] .my-courses-empty {
  background: color-mix(in srgb, var(--surface-1, #0f172a) 82%, transparent);
  border-color: color-mix(in srgb, var(--border-subtle, #334155) 70%, transparent);
}

@media (min-width: 1024px) {
  .my-courses-panel-content {
    max-width: min(1280px, calc(100vw - 120px));
    margin-inline: auto;
  }

  .my-courses-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  }
}

@media (max-width: 767px) {
  .my-courses-hero {
    display: none !important;
  }

  .my-courses-next-summary {
    margin-top: 0.25rem;
    border-radius: 1.15rem;
  }

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

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

  .my-course-card__next {
    grid-column: 2;
    justify-self: start;
  }
}

/* =========================================================
   V40.3 — Mes cours : actions rapides sur les cartes
   ========================================================= */

.my-course-card__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.9rem;
}

.my-course-card__action {
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--ui-accent-card-color, #38bdf8) 42%, transparent);
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--ui-accent-card-color, #38bdf8) 15%, transparent),
      color-mix(in srgb, var(--surface-1, #ffffff) 78%, transparent));
  color: color-mix(in srgb, var(--ui-accent-card-color, #38bdf8) 76%, var(--text-main, #0f172a));
  border-radius: 999px;
  min-height: 2.15rem;
  padding: 0.4rem 0.78rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, opacity 0.16s ease;
}

.my-course-card__action:hover,
.my-course-card__action:focus-visible {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--ui-accent-card-color, #38bdf8) 64%, transparent);
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--ui-accent-card-color, #38bdf8) 22%, transparent),
      color-mix(in srgb, var(--surface-1, #ffffff) 82%, transparent));
}

.my-course-card__action:disabled,
.my-course-card__action[aria-disabled="true"] {
  opacity: 0.46;
  cursor: not-allowed;
  transform: none;
}

.my-course-card__action--attendance {
  color: color-mix(in srgb, #22c55e 72%, var(--text-main, #0f172a));
  border-color: color-mix(in srgb, #22c55e 40%, transparent);
  background:
    linear-gradient(135deg,
      color-mix(in srgb, #22c55e 14%, transparent),
      color-mix(in srgb, var(--surface-1, #ffffff) 80%, transparent));
}

html[data-theme="dark"] .my-course-card__action {
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--ui-accent-card-color, #38bdf8) 18%, transparent),
      color-mix(in srgb, var(--surface-1, #0f172a) 78%, transparent));
  color: color-mix(in srgb, var(--ui-accent-card-color, #38bdf8) 70%, #f8fafc);
}

html[data-theme="dark"] .my-course-card__action--attendance {
  color: color-mix(in srgb, #22c55e 72%, #f8fafc);
  background:
    linear-gradient(135deg,
      color-mix(in srgb, #22c55e 18%, transparent),
      color-mix(in srgb, var(--surface-1, #0f172a) 78%, transparent));
}

@media (max-width: 767px) {
  .my-course-card__actions {
    gap: 0.45rem;
  }

  .my-course-card__action {
    min-height: 2.05rem;
    padding-inline: 0.68rem;
  }
}

/* =========================================================
   V40.5 — Mes cours suivis : demandes personnelles de cours
   ========================================================= */

.my-courses-inline-manage {
  appearance: none;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: fit-content;
  margin-top: 0.55rem;
  min-height: 2.25rem;
  padding: 0.45rem 0.82rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, #38bdf8 42%, var(--border-subtle, #cbd5e1));
  background: color-mix(in srgb, #38bdf8 10%, var(--surface-1, #ffffff));
  color: color-mix(in srgb, #0284c7 78%, var(--text-main, #0f172a) 22%);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 900;
  cursor: pointer;
}

.my-courses-inline-manage:hover,
.my-courses-inline-manage:focus-visible {
  border-color: color-mix(in srgb, #38bdf8 64%, var(--border-subtle, #cbd5e1));
  background: color-mix(in srgb, #38bdf8 16%, var(--surface-1, #ffffff));
}

.my-courses-manager {
  display: grid;
  gap: clamp(1rem, 2vw, 1.25rem);
  width: min(100%, 1080px);
  margin-inline: auto;
}

.my-courses-manager__intro {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.25rem 0.15rem 0.45rem;
}

.my-courses-manager__intro-icon {
  width: 3.35rem;
  height: 3.35rem;
  display: inline-grid;
  place-items: center;
  border-radius: 1.25rem;
  border: 1px solid color-mix(in srgb, #38bdf8 34%, var(--border-subtle, #cbd5e1));
  background: color-mix(in srgb, #38bdf8 12%, var(--surface-1, #ffffff));
  color: color-mix(in srgb, #0284c7 78%, var(--text-main, #0f172a) 22%);
  font-size: 1.35rem;
}

.my-courses-manager__intro p,
.my-courses-manager__intro h3 {
  margin: 0;
}

.my-courses-manager__intro p,
.my-courses-manager__section-head p {
  color: var(--text-muted, #64748b);
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.my-courses-manager__intro h3 {
  margin-top: 0.15rem;
  color: var(--text-main, #0f172a);
  font-size: clamp(1.5rem, 2.4vw, 2.25rem);
  line-height: 1.04;
  letter-spacing: -0.045em;
  font-weight: 950;
}

.my-courses-manager__season {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  width: fit-content;
  margin-top: 0.5rem;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, #38bdf8 32%, var(--border-subtle, #cbd5e1));
  background: color-mix(in srgb, #38bdf8 8%, var(--surface-1, #ffffff));
  color: color-mix(in srgb, #0284c7 78%, var(--text-main, #0f172a) 22%);
  font-size: 0.78rem;
  font-weight: 820;
}

.my-courses-manager__notice {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 0.95rem 1rem;
  border-radius: 1.3rem;
  border: 1px solid color-mix(in srgb, #38bdf8 34%, var(--border-subtle, #cbd5e1));
  background: color-mix(in srgb, #38bdf8 8%, var(--surface-1, #ffffff));
  color: var(--text-main, #0f172a);
}

.my-courses-manager__notice > i {
  color: #0284c7;
  font-size: 1.25rem;
}

.my-courses-manager__notice strong,
.my-courses-manager__notice span {
  display: block;
}

.my-courses-manager__notice span {
  margin-top: 0.2rem;
  color: var(--text-muted, #64748b);
  font-size: 0.92rem;
  font-weight: 650;
  line-height: 1.45;
}

.my-courses-manager__section {
  display: grid;
  gap: 0.9rem;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--border-subtle, #cbd5e1) 72%, transparent);
  border-radius: 1.5rem;
  background: color-mix(in srgb, var(--surface-1, #ffffff) 82%, transparent);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
}

.my-courses-manager__section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 0.8rem;
}

.my-courses-manager__section-head h4 {
  margin: 0.16rem 0 0;
  color: var(--text-main, #0f172a);
  font-size: 1.15rem;
  line-height: 1.1;
}

.my-courses-manager__section-head > span {
  flex: 0 0 auto;
  padding: 0.36rem 0.62rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, #38bdf8 30%, var(--border-subtle, #cbd5e1));
  background: color-mix(in srgb, #38bdf8 7%, var(--surface-1, #ffffff));
  color: color-mix(in srgb, #0284c7 74%, var(--text-main, #0f172a) 26%);
  font-size: 0.76rem;
  font-weight: 850;
}

.my-course-manager-card.is-pending-course.ui-accent-card {
  opacity: 0.88;
  filter: saturate(0.88);
}

.my-course-manager-card.is-pending-course::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--ui-accent-card-color, #38bdf8) 8%, transparent) 0 10px,
    transparent 10px 20px);
}

.my-course-card__pending {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.85rem;
}

.my-course-request-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  width: fit-content;
  min-height: 2rem;
  padding: 0.35rem 0.62rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 850;
}

.my-course-request-pill--add {
  border: 1px solid color-mix(in srgb, #38bdf8 42%, transparent);
  background: color-mix(in srgb, #38bdf8 10%, var(--surface-1, #ffffff));
  color: color-mix(in srgb, #0284c7 78%, var(--text-main, #0f172a) 22%);
}

.my-course-request-pill--remove {
  border: 1px solid color-mix(in srgb, #f97316 42%, transparent);
  background: color-mix(in srgb, #f97316 10%, var(--surface-1, #ffffff));
  color: color-mix(in srgb, #ea580c 78%, var(--text-main, #0f172a) 22%);
}

.my-course-card__action--add {
  border-color: color-mix(in srgb, #38bdf8 42%, transparent);
  color: color-mix(in srgb, #0284c7 78%, var(--text-main, #0f172a) 22%);
}

.my-course-card__action--remove,
.my-course-card__action--cancel {
  border-color: color-mix(in srgb, #f97316 42%, transparent);
  color: color-mix(in srgb, #ea580c 78%, var(--text-main, #0f172a) 22%);
  background:
    linear-gradient(135deg,
      color-mix(in srgb, #f97316 12%, transparent),
      color-mix(in srgb, var(--surface-1, #ffffff) 80%, transparent));
}

html[data-theme="dark"] .my-courses-inline-manage,
html[data-theme="dark"] .my-courses-manager__season,
html[data-theme="dark"] .my-courses-manager__section-head > span {
  color: color-mix(in srgb, #7dd3fc 84%, #fff 16%);
}

html[data-theme="dark"] .my-courses-manager__intro h3,
html[data-theme="dark"] .my-courses-manager__section-head h4 {
  color: rgba(248, 250, 252, 0.96);
}

html[data-theme="dark"] .my-courses-manager__intro-icon,
html[data-theme="dark"] .my-courses-manager__notice,
html[data-theme="dark"] .my-courses-manager__section {
  background: color-mix(in srgb, var(--surface-1, #0f172a) 84%, #020617 16%);
}

html[data-theme="dark"] .my-course-request-pill--add {
  color: color-mix(in srgb, #7dd3fc 84%, #fff 16%);
  background: color-mix(in srgb, #38bdf8 12%, transparent);
}

html[data-theme="dark"] .my-course-request-pill--remove,
html[data-theme="dark"] .my-course-card__action--remove,
html[data-theme="dark"] .my-course-card__action--cancel {
  color: color-mix(in srgb, #fdba74 84%, #fff 16%);
  background: color-mix(in srgb, #f97316 12%, transparent);
}

@media (max-width: 767px) {
  .my-courses-manager {
    gap: 1rem;
  }

  .my-courses-manager__intro {
    align-items: flex-start;
  }

  .my-courses-manager__section {
    padding: 0.85rem;
    border-radius: 1.25rem;
  }

  .my-courses-manager__section-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .my-course-card__pending {
    align-items: stretch;
    flex-direction: column;
  }

  .my-course-card__pending .my-course-card__action {
    width: 100%;
  }
}

/* =========================================================
   V40.6 — Mes cours : lisibilité, prochain cours et hero épuré
   ========================================================= */

.my-courses-next-summary {
  width: 100%;
  max-width: none;
  border-color: color-mix(in srgb, #38bdf8 34%, var(--border-subtle, #cbd5e1));
  background:
    radial-gradient(circle at 8% 12%, color-mix(in srgb, #38bdf8 14%, transparent), transparent 34%),
    linear-gradient(135deg,
      color-mix(in srgb, #eff6ff 92%, #ffffff 8%),
      color-mix(in srgb, #ffffff 78%, #e0f2fe 22%));
  box-shadow:
    0 18px 44px rgba(15, 23, 42, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.my-courses-next-summary__label {
  color: color-mix(in srgb, #2563eb 72%, var(--text-muted, #64748b));
}

.my-courses-next-summary span:last-child {
  color: color-mix(in srgb, var(--text-muted, #64748b) 86%, #0f172a 14%);
  font-weight: 720;
}

@media (min-width: 768px) {
  .my-courses-next-summary {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 1rem;
    padding-block: clamp(1rem, 2vw, 1.25rem);
  }

  .my-courses-next-summary .my-courses-next-summary__label,
  .my-courses-next-summary strong,
  .my-courses-next-summary span:last-child {
    grid-column: 1;
  }

  .my-courses-next-summary .my-courses-inline-manage {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: center;
    margin-top: 0;
  }
}

html[data-theme="dark"] .my-courses-next-summary {
  border-color: color-mix(in srgb, #60a5fa 34%, transparent);
  background:
    radial-gradient(circle at 8% 12%, color-mix(in srgb, #38bdf8 16%, transparent), transparent 34%),
    linear-gradient(135deg,
      color-mix(in srgb, #0f172a 86%, #1e293b 14%),
      color-mix(in srgb, #020617 72%, #1d4ed8 10%));
  box-shadow:
    0 22px 58px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .my-courses-next-summary__label {
  color: color-mix(in srgb, #93c5fd 82%, #f8fafc 18%);
}

html[data-theme="dark"] .my-courses-next-summary span:last-child {
  color: rgba(203, 213, 225, 0.86);
}

html[data-theme="dark"] .my-courses-day-header__count {
  background: rgba(15, 23, 42, 0.72);
  border-color: color-mix(in srgb, #64748b 48%, transparent);
  color: rgba(203, 213, 225, 0.92);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

html[data-theme="dark"] .my-courses-inline-manage {
  border-color: color-mix(in srgb, #38bdf8 54%, transparent);
  background:
    linear-gradient(135deg,
      color-mix(in srgb, #38bdf8 18%, transparent),
      rgba(15, 23, 42, 0.78));
  color: color-mix(in srgb, #bae6fd 88%, #ffffff 12%);
  box-shadow: 0 10px 28px rgba(56, 189, 248, 0.12);
}

html[data-theme="dark"] .my-courses-inline-manage:hover,
html[data-theme="dark"] .my-courses-inline-manage:focus-visible {
  border-color: color-mix(in srgb, #7dd3fc 68%, transparent);
  background:
    linear-gradient(135deg,
      color-mix(in srgb, #38bdf8 24%, transparent),
      rgba(15, 23, 42, 0.88));
}

html[data-theme="dark"] .my-course-card__action {
  border-color: color-mix(in srgb, var(--ui-accent-card-color, #38bdf8) 52%, transparent);
  color: color-mix(in srgb, var(--ui-accent-card-color, #38bdf8) 62%, #f8fafc 38%);
}

html[data-theme="dark"] .my-course-card__action--chat {
  background:
    linear-gradient(135deg,
      color-mix(in srgb, #38bdf8 18%, transparent),
      rgba(15, 23, 42, 0.78));
}

/* =========================================================
   V47.1.1 — Mes cours suivis : passe 1 Smart Panel
   ---------------------------------------------------------
   Hero compact, dock structurel vide, liste chronologique,
   carte d'ajout commune et rails UiAccentCard stabilisés.
   ========================================================= */

.my-courses-panel-body {
  --courses-panel-nav-height: var(--edq-mobile-navbar-height, var(--app-header-height, 76px));
  --courses-panel-content-left: max(1rem, calc(var(--edq-safe-area-left-effective, env(safe-area-inset-left, 0px)) + 1rem));
  --courses-panel-content-right: max(1rem, calc(var(--edq-safe-area-right-effective, env(safe-area-inset-right, 0px)) + 1rem));
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.my-courses-panel-body :is(input, textarea, select, option, [contenteditable="true"], [contenteditable=""], [role="textbox"], [data-native-selection="true"], [data-allow-native-selection="true"]) {
  user-select: text;
  -webkit-user-select: text;
  -webkit-touch-callout: default;
}

.my-courses-hero.my-courses-hero--student,
.my-courses-hero.my-courses-hero--teacher {
  display: grid !important;
  width: 100%;
  margin: 0 !important;
}

.my-courses-control-dock.courses-control-dock {
  position: relative !important;
  top: auto !important;
  z-index: 1 !important;
  width: 100% !important;
  min-height: clamp(2.25rem, 5vw, 3.15rem) !important;
  padding: 0 !important;
  margin: calc(-1 * clamp(.1rem, .8vw, .35rem)) 0 clamp(.15rem, .7vw, .35rem) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  pointer-events: none;
}

.my-courses-control-dock.courses-control-dock .courses-control-dock__chips,
.my-courses-control-dock.courses-control-dock .courses-control-dock__actions {
  display: none !important;
}

.my-courses-list-section {
  display: grid;
  width: 100%;
  min-width: 0;
}

.my-courses-card-grid--flat {
  align-items: stretch;
}

.my-course-card.ui-accent-card,
.my-course-add-card.smart-panel-add-card.ui-accent-card {
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.my-course-card.ui-accent-card {
  min-height: clamp(13.25rem, 20vw, 15.75rem);
}

.my-course-add-card.smart-panel-add-card.ui-accent-card {
  width: 100%;
  min-height: clamp(9rem, 15vw, 11rem);
  border-style: dashed;
  text-align: left;
}

.my-course-add-card.smart-panel-add-card.ui-accent-card .ui-accent-card__body {
  min-height: inherit;
  justify-content: flex-start;
  align-items: center;
}

.my-course-card.ui-accent-card.is-courses-desktop-current,
.my-course-add-card.smart-panel-add-card.ui-accent-card.is-courses-desktop-current,
.my-course-card.ui-accent-card.is-selected,
.my-course-add-card.smart-panel-add-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;
}

.my-course-card.ui-accent-card[data-menu-open="true"] > .ui-accent-card__rail::before,
.my-course-add-card.smart-panel-add-card.ui-accent-card[data-menu-open="true"] > .ui-accent-card__rail::before {
  transform: scaleY(1) !important;
}

.my-course-card__heading h3 {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

@media (min-width: 1024px) {
  .my-courses-panel-body {
    --courses-panel-content-left: max(1.35rem, calc(var(--dashboard-shell-content-left, 5.5rem) + .75rem));
    --courses-panel-content-right: max(1.35rem, calc(var(--edq-safe-area-right-effective, env(safe-area-inset-right, 0px)) + 1.35rem));
  }

  .my-courses-card-grid--flat {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20.5rem), 1fr));
  }
}

@media (max-width: 767px) {
  .my-courses-panel-content {
    gap: clamp(.85rem, 3vw, 1.15rem);
  }

  .my-courses-hero.my-courses-hero--student,
  .my-courses-hero.my-courses-hero--teacher {
    display: grid !important;
    margin-top: .1rem !important;
  }

  .my-courses-control-dock.courses-control-dock {
    min-height: clamp(1.45rem, 5vw, 2rem) !important;
    margin-top: calc(-1 * clamp(.35rem, 2vw, .6rem)) !important;
  }

  .my-course-card.ui-accent-card {
    min-height: 0;
  }

  .my-course-add-card.smart-panel-add-card.ui-accent-card {
    min-height: clamp(7.6rem, 26vw, 9rem);
  }
}

/* =========================================================
   V47.1.3 — Mes cours suivis : vrai Smart Panel full-bleed
   ---------------------------------------------------------
   Le panel adopte la même ossature que Mes élèves / Élèves /
   Responsables / Cours : root fixé bord à bord, hero à 0px
   sous la navbar invisible, puis contenu recentré.
   ========================================================= */

body.is-dashboard-shell-visible:has(#dashboard-view > .my-courses-smart-root[data-my-courses-list-root="true"]) #app-root {
  padding-top: 0 !important;
}

body.is-dashboard-shell-visible:has(#dashboard-view > .my-courses-smart-root[data-my-courses-list-root="true"]) #dashboard-view.section,
body.is-dashboard-shell-visible:has(#dashboard-view > .my-courses-smart-root[data-my-courses-list-root="true"]) #dashboard-view {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

body.is-dashboard-shell-visible #dashboard-view > .my-courses-smart-root[data-my-courses-list-root="true"].courses-panel-root {
  --courses-panel-accent: #38bdf8;
  --courses-content-readable-width: min(1180px, calc(100vw - 2rem));
  position: fixed !important;
  inset: 0 !important;
  z-index: 12 !important;
  display: block !important;
  width: 100vw !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: var(--color-bg, #020617) !important;
  color: var(--color-text, #f8fafc);
  box-sizing: border-box !important;
  transform: none !important;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

html[data-theme="light"] body.is-dashboard-shell-visible #dashboard-view > .my-courses-smart-root[data-my-courses-list-root="true"].courses-panel-root,
body[data-theme="light"].is-dashboard-shell-visible #dashboard-view > .my-courses-smart-root[data-my-courses-list-root="true"].courses-panel-root {
  background: #f7fafc !important;
}

body.is-dashboard-shell-visible #dashboard-view > .my-courses-smart-root[data-my-courses-list-root="true"] .my-courses-panel-content.courses-panel-view {
  display: block !important;
  width: 100vw !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  box-sizing: border-box !important;
}

body.is-dashboard-shell-visible #dashboard-view > .my-courses-smart-root[data-my-courses-list-root="true"] :is(input, textarea, select, option, [contenteditable="true"], [contenteditable=""], [role="textbox"], [data-native-selection="true"], [data-allow-native-selection="true"]) {
  user-select: text;
  -webkit-user-select: text;
  -webkit-touch-callout: default;
}

body.is-dashboard-shell-visible #dashboard-view > .my-courses-smart-root[data-my-courses-list-root="true"] .my-courses-hero.courses-panel-hero.students-panel-hero {
  --courses-panel-accent: #38bdf8;
  position: relative !important;
  display: block !important;
  width: 100vw !important;
  max-width: 100vw !important;
  min-width: 100vw !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  border-inline: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

body.is-dashboard-shell-visible #dashboard-view > .my-courses-smart-root[data-my-courses-list-root="true"] .my-courses-hero.courses-panel-hero .courses-panel-hero__inner {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

body.is-dashboard-shell-visible #dashboard-view > .my-courses-smart-root[data-my-courses-list-root="true"] .my-courses-panel-view > :not(.courses-panel-hero) {
  width: min(calc(100vw - (var(--courses-content-gutter, clamp(1rem, 2.4vw, 2rem)) * 2)), var(--courses-content-readable-width, 1180px)) !important;
  max-width: var(--courses-content-readable-width, 1180px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

body.is-dashboard-shell-visible #dashboard-view > .my-courses-smart-root[data-my-courses-list-root="true"] .my-courses-control-dock.courses-control-dock {
  min-height: clamp(1.15rem, 2.5vw, 1.75rem) !important;
  margin-top: clamp(.55rem, 1.25vw, .85rem) !important;
  margin-bottom: clamp(.2rem, .65vw, .45rem) !important;
}

body.is-dashboard-shell-visible #dashboard-view > .my-courses-smart-root[data-my-courses-list-root="true"] .my-courses-next-summary {
  max-width: var(--courses-content-readable-width, 1180px) !important;
}

body.is-dashboard-shell-visible #dashboard-view > .my-courses-smart-root[data-my-courses-list-root="true"] .my-courses-list-section {
  padding-bottom: clamp(4rem, 7vw, 6rem) !important;
}

@media (min-width: 1024px) {
  body.is-dashboard-shell-visible #dashboard-view > .my-courses-smart-root[data-my-courses-list-root="true"].courses-panel-root {
    --courses-content-gutter: clamp(1.35rem, 2.3vw, 2.8rem);
  }
}

@media (max-width: 1023px) {
  body.is-dashboard-shell-visible #dashboard-view > .my-courses-smart-root[data-my-courses-list-root="true"].courses-panel-root {
    --courses-content-gutter: clamp(.65rem, 3vw, 1rem);
  }

  body.is-dashboard-shell-visible #dashboard-view > .my-courses-smart-root[data-my-courses-list-root="true"] .my-courses-hero.courses-panel-hero.students-panel-hero {
    display: block !important;
  }

  body.is-dashboard-shell-visible #dashboard-view > .my-courses-smart-root[data-my-courses-list-root="true"] .my-courses-control-dock.courses-control-dock {
    min-height: clamp(.85rem, 4vw, 1.35rem) !important;
    margin-top: clamp(.45rem, 1.9vw, .7rem) !important;
  }
}

/* =========================================================
   V47.1.5 — Mes cours suivis : carrousel des prochains cours
   ========================================================= */


/* V47.1.6 — Prochain cours dédié + carrousel des 5 suivants */
.my-courses-upcoming {
  width: min(100%, var(--courses-content-readable-width, 1180px));
  display: grid;
  grid-template-columns: minmax(18rem, .72fr) minmax(0, 1.48fr);
  align-items: stretch;
  gap: clamp(.85rem, 1.6vw, 1.15rem);
  margin-top: clamp(.45rem, 1vw, .75rem);
  min-width: 0;
}

.my-courses-upcoming .my-courses-next-carousel {
  width: 100%;
  min-width: 0;
  height: 100%;
  margin-top: 0;
}

.my-courses-upcoming .my-courses-next-carousel__viewport,
.my-courses-upcoming .my-courses-next-carousel__track,
.my-courses-upcoming .my-courses-next-carousel__slide {
  min-height: 100%;
}

.my-courses-next-main {
  --my-courses-next-color: var(--theme-primary, #38bdf8);
  min-width: 0;
  height: 100%;
}

.my-courses-next-main__card {
  position: relative;
  min-height: 100%;
  display: grid;
  align-content: start;
  gap: .8rem;
  padding: clamp(1rem, 2vw, 1.2rem);
  border-radius: 1.45rem;
  border: 1px solid color-mix(in srgb, var(--my-courses-next-color, #38bdf8) 48%, transparent);
  background:
    radial-gradient(circle at 10% 16%, color-mix(in srgb, var(--my-courses-next-color, #38bdf8) 22%, transparent), transparent 38%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--my-courses-next-color, #38bdf8) 18%, transparent),
      color-mix(in srgb, var(--surface-1, #ffffff) 86%, transparent));
  box-shadow: 0 18px 52px color-mix(in srgb, var(--my-courses-next-color, #38bdf8) 15%, transparent);
  overflow: hidden;
}

.my-courses-next-main__card::before {
  content: "";
  position: absolute;
  inset: 1rem auto 1rem 0;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(to bottom,
    transparent,
    color-mix(in srgb, var(--my-courses-next-color, #38bdf8) 85%, white 15%),
    transparent);
  box-shadow: 0 0 20px color-mix(in srgb, var(--my-courses-next-color, #38bdf8) 48%, transparent);
  opacity: .95;
}

.my-courses-next-main__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: .75rem;
  min-width: 0;
}

.my-courses-next-main__icon {
  width: 2.85rem;
  height: 2.85rem;
  display: inline-grid;
  place-items: center;
  border-radius: 1rem;
  border: 1px solid color-mix(in srgb, var(--my-courses-next-color, #38bdf8) 52%, transparent);
  background: color-mix(in srgb, var(--my-courses-next-color, #38bdf8) 20%, transparent);
  color: color-mix(in srgb, var(--my-courses-next-color, #38bdf8) 82%, var(--text-main, #0f172a));
  font-size: 1.22rem;
}

.my-courses-next-main__head > div {
  display: grid;
  gap: .16rem;
  min-width: 0;
}

.my-courses-next-main__head p {
  margin: 0;
  color: var(--text-muted, #64748b);
  font-size: .72rem;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.my-courses-next-main__head h3 {
  margin: 0;
  color: var(--text-main, #0f172a);
  font-size: clamp(1.1rem, 2vw, 1.42rem);
  font-weight: 950;
  line-height: 1.05;
}

.my-courses-next-main__countdown {
  display: grid;
  gap: .1rem;
  padding: .8rem .9rem;
  border-radius: 1rem;
  border: 1px solid color-mix(in srgb, var(--my-courses-next-color, #38bdf8) 38%, transparent);
  background: color-mix(in srgb, var(--my-courses-next-color, #38bdf8) 12%, transparent);
}

.my-courses-next-main__countdown span {
  color: var(--text-muted, #64748b);
  font-size: .68rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .11em;
}

.my-courses-next-main__countdown strong {
  color: color-mix(in srgb, var(--my-courses-next-color, #38bdf8) 76%, var(--text-main, #0f172a));
  font-size: clamp(1.38rem, 3vw, 2rem);
  font-weight: 950;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.my-courses-next-main__meta {
  display: grid;
  gap: .42rem;
  color: var(--text-muted, #64748b);
  font-size: .9rem;
  font-weight: 760;
  line-height: 1.25;
}

.my-courses-next-main__meta span {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-width: 0;
}

.my-courses-next-main__meta i {
  flex: 0 0 auto;
  color: color-mix(in srgb, var(--my-courses-next-color, #38bdf8) 74%, var(--text-muted, #64748b));
}

.my-courses-next-main__vote {
  align-self: end;
}

html[data-theme="dark"] .my-courses-next-main__card {
  background:
    radial-gradient(circle at 10% 16%, color-mix(in srgb, var(--my-courses-next-color, #38bdf8) 24%, transparent), transparent 40%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--my-courses-next-color, #38bdf8) 14%, transparent),
      color-mix(in srgb, var(--surface-1, #0f172a) 88%, transparent));
  box-shadow: 0 22px 60px rgba(0, 0, 0, .24);
}

html[data-theme="dark"] .my-courses-next-main__head h3 {
  color: rgba(248,250,252,.96);
}

html[data-theme="dark"] .my-courses-next-main__countdown strong {
  color: color-mix(in srgb, var(--my-courses-next-color, #38bdf8) 76%, #f8fafc);
}

@media (hover: hover) and (pointer: fine) {
  .my-courses-next-carousel:hover .my-courses-next-carousel__nav {
    opacity: .84;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(-50%) scale(1);
  }

  .my-courses-next-carousel:hover .my-courses-next-carousel__nav:hover,
  .my-courses-next-carousel:hover .my-courses-next-carousel__nav:focus-visible {
    opacity: 1;
    transform: translateY(-50%) scale(1.04);
  }
}

@media (hover: none), (pointer: coarse) {
  .my-courses-next-carousel__nav {
    display: none !important;
  }
}

@media (max-width: 1023px) {
  .my-courses-upcoming {
    grid-template-columns: 1fr;
    gap: .7rem;
  }
}

@media (max-width: 767px) {
  .my-courses-next-main__card,
  .my-courses-next-carousel__slide {
    border-radius: 1.25rem;
  }

  .my-courses-next-main__head h3 {
    font-size: 1.14rem;
  }

  .my-courses-next-main__countdown strong {
    font-size: 1.45rem;
  }
}

.my-courses-next-carousel {
  --my-courses-next-color: var(--theme-primary, #38bdf8);
  position: relative;
  display: grid;
  gap: .55rem;
  width: min(100%, var(--courses-content-readable-width, 1180px));
  margin-top: clamp(.45rem, 1vw, .75rem);
  border-radius: 1.45rem;
}

.my-courses-next-carousel__viewport {
  overflow: hidden;
  border-radius: inherit;
}

.my-courses-next-carousel__track {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.my-courses-next-carousel__track::-webkit-scrollbar {
  display: none;
}

.my-courses-next-carousel__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  position: relative;
  display: grid;
  gap: .75rem;
  min-width: 0;
  padding: clamp(1rem, 2vw, 1.2rem);
  border-radius: 1.45rem;
  border: 1px solid color-mix(in srgb, var(--my-courses-next-color, #38bdf8) 42%, transparent);
  background:
    radial-gradient(circle at 16% 18%, color-mix(in srgb, var(--my-courses-next-color, #38bdf8) 18%, transparent), transparent 32%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--my-courses-next-color, #38bdf8) 14%, transparent),
      color-mix(in srgb, var(--surface-1, #ffffff) 86%, transparent));
  box-shadow: 0 18px 52px color-mix(in srgb, var(--my-courses-next-color, #38bdf8) 14%, transparent);
}

.my-courses-next-carousel__slide--empty {
  min-height: 8rem;
  align-content: center;
}

.my-courses-next-carousel__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .75rem;
  min-width: 0;
}

.my-courses-next-carousel__icon {
  width: 2.85rem;
  height: 2.85rem;
  display: inline-grid;
  place-items: center;
  border-radius: 1rem;
  border: 1px solid color-mix(in srgb, var(--my-courses-next-color, #38bdf8) 48%, transparent);
  background: color-mix(in srgb, var(--my-courses-next-color, #38bdf8) 18%, transparent);
  color: color-mix(in srgb, var(--my-courses-next-color, #38bdf8) 82%, var(--text-main, #0f172a));
  font-size: 1.22rem;
}

.my-courses-next-carousel__head > div {
  min-width: 0;
  display: grid;
  gap: .15rem;
}

.my-courses-next-carousel__head strong {
  color: var(--text-main, #0f172a);
  font-size: .78rem;
  font-weight: 950;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .74;
}

.my-courses-next-carousel__head em {
  min-width: 0;
  color: var(--text-main, #0f172a);
  font-style: normal;
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  font-weight: 950;
  line-height: 1.05;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.my-courses-next-carousel__pill {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: .28rem .62rem;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

.my-courses-next-carousel__pill--warning {
  color: #facc15;
  border: 1px solid color-mix(in srgb, #facc15 44%, transparent);
  background: color-mix(in srgb, #facc15 13%, transparent);
}

.my-courses-next-carousel__pill--info {
  color: color-mix(in srgb, #38bdf8 78%, var(--text-main, #0f172a));
  border: 1px solid color-mix(in srgb, #38bdf8 40%, transparent);
  background: color-mix(in srgb, #38bdf8 12%, transparent);
}

.my-courses-next-carousel__meta {
  display: grid;
  gap: .42rem;
  color: var(--text-muted, #64748b);
  font-size: .9rem;
  font-weight: 760;
  line-height: 1.25;
}

.my-courses-next-carousel__meta span {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-width: 0;
}

.my-courses-next-carousel__meta i {
  flex: 0 0 auto;
  color: color-mix(in srgb, var(--my-courses-next-color, #38bdf8) 74%, var(--text-muted, #64748b));
}

.my-courses-next-carousel__vote {
  display: grid;
  gap: .55rem;
  padding-top: .7rem;
  border-top: 1px solid color-mix(in srgb, var(--my-courses-next-color, #38bdf8) 24%, transparent);
}

.my-courses-next-carousel__vote-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  font-size: .76rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.my-courses-next-carousel__vote-status span {
  color: var(--text-muted, #64748b);
}

.my-courses-next-carousel__vote-status strong {
  text-transform: none;
  letter-spacing: 0;
  font-size: .88rem;
}

.my-courses-next-carousel__vote-status.is-present strong { color: #22c55e; }
.my-courses-next-carousel__vote-status.is-absent strong { color: #fb7185; }
.my-courses-next-carousel__vote-status.is-late strong { color: #facc15; }

.my-courses-next-carousel__vote-actions {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
}

.my-courses-next-carousel__vote-btn {
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--my-courses-next-color, #38bdf8) 38%, transparent);
  background: color-mix(in srgb, var(--surface-1, #ffffff) 82%, transparent);
  color: color-mix(in srgb, var(--my-courses-next-color, #38bdf8) 70%, var(--text-main, #0f172a));
  min-height: 2.05rem;
  padding: .42rem .68rem;
  border-radius: .72rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .34rem;
  font: inherit;
  font-size: .78rem;
  font-weight: 950;
  line-height: 1;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, opacity .16s ease;
}

.my-courses-next-carousel__vote-btn:hover,
.my-courses-next-carousel__vote-btn:focus-visible {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--my-courses-next-color, #38bdf8) 62%, transparent);
}

.my-courses-next-carousel__vote-btn.is-active {
  color: #052e16;
  border-color: color-mix(in srgb, #22c55e 74%, transparent);
  background: color-mix(in srgb, #22c55e 82%, #ffffff 18%);
}

.my-courses-next-carousel__vote-btn:disabled {
  opacity: .48;
  cursor: wait;
  transform: none;
}

.my-courses-next-carousel__nav {
  position: absolute;
  top: 50%;
  z-index: 4;
  width: 2rem;
  height: 2rem;
  transform: translateY(-50%);
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--my-courses-next-color, #38bdf8) 30%, transparent);
  background: color-mix(in srgb, var(--surface-1, #ffffff) 80%, transparent);
  color: var(--text-main, #0f172a);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-50%) scale(.94);
  transition: opacity .16s ease, transform .16s ease, border-color .16s ease, visibility .16s ease;
}

.my-courses-next-carousel__nav--prev { left: .45rem; }
.my-courses-next-carousel__nav--next { right: .45rem; }

.my-courses-next-carousel__nav:hover,
.my-courses-next-carousel__nav:focus-visible {
  border-color: color-mix(in srgb, var(--my-courses-next-color, #38bdf8) 55%, transparent);
}

.my-courses-next-carousel__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .38rem;
  min-height: .9rem;
}

.my-courses-next-carousel__dot {
  appearance: none;
  width: .48rem;
  height: .48rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-muted, #64748b) 38%, transparent);
  cursor: pointer;
  transition: width .18s ease, background .18s ease, opacity .18s ease;
}

.my-courses-next-carousel__dot.is-active {
  width: 1.2rem;
  background: color-mix(in srgb, var(--my-courses-next-color, #38bdf8) 82%, #ffffff 18%);
}

html[data-theme="dark"] .my-courses-next-carousel__slide {
  background:
    radial-gradient(circle at 16% 18%, color-mix(in srgb, var(--my-courses-next-color, #38bdf8) 22%, transparent), transparent 34%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--my-courses-next-color, #38bdf8) 12%, transparent),
      color-mix(in srgb, var(--surface-1, #0f172a) 88%, transparent));
  box-shadow: 0 22px 60px rgba(0, 0, 0, .22);
}

html[data-theme="dark"] .my-courses-next-carousel__head strong,
html[data-theme="dark"] .my-courses-next-carousel__head em {
  color: rgba(248,250,252,.96);
}

html[data-theme="dark"] .my-courses-next-carousel__vote-btn {
  background: color-mix(in srgb, var(--surface-1, #0f172a) 78%, transparent);
  color: color-mix(in srgb, var(--my-courses-next-color, #38bdf8) 70%, #f8fafc);
}

html[data-theme="dark"] .my-courses-next-carousel__vote-btn.is-active {
  color: #dcfce7;
  background: color-mix(in srgb, #22c55e 34%, transparent);
}

html[data-theme="dark"] .my-courses-next-carousel__nav {
  background: color-mix(in srgb, #020617 78%, transparent);
  color: rgba(248,250,252,.95);
}

.my-courses-vote-reason-lock {
  position: fixed;
  inset: 0;
  z-index: 2147483600;
  display: grid;
  place-items: center;
  padding: max(1rem, env(safe-area-inset-top, 0px)) max(1rem, env(safe-area-inset-right, 0px)) max(1rem, env(safe-area-inset-bottom, 0px)) max(1rem, env(safe-area-inset-left, 0px));
  background: rgba(2, 6, 23, .58);
  backdrop-filter: blur(16px);
}

.my-courses-vote-reason-dialog {
  width: min(100%, 28rem);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  padding: 1.1rem;
  border-radius: 1.4rem;
  border: 1px solid rgba(148, 163, 184, .28);
  background: color-mix(in srgb, var(--surface-1, #ffffff) 94%, transparent);
  color: var(--text-main, #0f172a);
  box-shadow: 0 28px 80px rgba(2, 6, 23, .36);
}

.my-courses-vote-reason-dialog__icon {
  width: 2.75rem;
  height: 2.75rem;
  display: inline-grid;
  place-items: center;
  border-radius: 1rem;
  background: color-mix(in srgb, #38bdf8 14%, transparent);
  color: #0284c7;
  font-size: 1.25rem;
}

.my-courses-vote-reason-dialog__body {
  display: grid;
  gap: .55rem;
  min-width: 0;
}

.my-courses-vote-reason-dialog__eyebrow,
.my-courses-vote-reason-dialog h3,
.my-courses-vote-reason-dialog p {
  margin: 0;
}

.my-courses-vote-reason-dialog__eyebrow {
  color: var(--text-muted, #64748b);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.my-courses-vote-reason-dialog h3 {
  font-size: 1.25rem;
  font-weight: 950;
  letter-spacing: -.03em;
}

.my-courses-vote-reason-dialog p,
.my-courses-vote-reason-dialog small {
  color: var(--text-muted, #64748b);
  font-weight: 680;
  line-height: 1.35;
}

.my-courses-vote-reason-dialog__field {
  display: grid;
  gap: .35rem;
  margin-top: .2rem;
  font-weight: 850;
}

.my-courses-vote-reason-dialog__field textarea {
  width: 100%;
  min-height: 5.5rem;
  resize: vertical;
  border-radius: 1rem;
  border: 1px solid color-mix(in srgb, var(--border-subtle, #cbd5e1) 72%, transparent);
  background: color-mix(in srgb, var(--surface-2, #f8fafc) 88%, transparent);
  color: var(--text-main, #0f172a);
  padding: .75rem .85rem;
  font: inherit;
  font-weight: 680;
}

.my-courses-vote-reason-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: .55rem;
  flex-wrap: wrap;
  margin-top: .25rem;
}

.my-courses-vote-reason-dialog__btn {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 999px;
  min-height: 2.25rem;
  padding: .48rem .82rem;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.my-courses-vote-reason-dialog__btn--ghost {
  border-color: color-mix(in srgb, var(--border-subtle, #cbd5e1) 70%, transparent);
  background: transparent;
  color: var(--text-muted, #64748b);
}

.my-courses-vote-reason-dialog__btn--confirm {
  background: #22c55e;
  color: #052e16;
}

html[data-theme="dark"] .my-courses-vote-reason-dialog {
  background: color-mix(in srgb, #020617 92%, transparent);
  color: rgba(248,250,252,.96);
}

html[data-theme="dark"] .my-courses-vote-reason-dialog__field textarea {
  background: color-mix(in srgb, #0f172a 86%, transparent);
  color: rgba(248,250,252,.96);
}

@media (min-width: 1024px) {
  .my-courses-next-carousel {
    max-width: min(980px, var(--courses-content-readable-width, 1180px));
  }
}

@media (max-width: 767px) {
  .my-courses-next-carousel {
    margin-top: clamp(.35rem, 2vw, .55rem);
  }

  .my-courses-next-carousel__slide {
    padding: .9rem;
    gap: .65rem;
  }

  .my-courses-next-carousel__head {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .my-courses-next-carousel__pill {
    grid-column: 2;
    justify-self: start;
  }

  .my-courses-next-carousel__nav {
    width: 1.85rem;
    height: 1.85rem;
  }

  .my-courses-next-carousel__vote-actions {
    gap: .36rem;
  }

  .my-courses-next-carousel__vote-btn {
    min-height: 1.95rem;
    padding-inline: .55rem;
    font-size: .72rem;
  }

  .my-courses-vote-reason-dialog {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   V47.1.7 — Mes cours suivis : grille prochains cours + rails communs
   ---------------------------------------------------------
   - Prochain cours + carousel en 2 colonnes dès tablette.
   - Zone PC recalée entre sidebar et bord droit.
   - Cartes prochaines occurrences sur UiAccentCard réel.
   - Vote non enregistré affiché en "À confirmer".
   ========================================================= */

.my-courses-next-card.ui-accent-card {
  min-width: 0;
  min-height: 100%;
  height: 100%;
  border-radius: 1.45rem;
  cursor: default;
}

.my-courses-next-main__card.ui-accent-card::before,
.my-courses-next-carousel__slide.ui-accent-card::before {
  content: none !important;
}

.my-courses-next-card.ui-accent-card > .ui-accent-card__body {
  display: grid;
  align-content: start;
  gap: .8rem;
  min-height: 100%;
  height: 100%;
  padding: clamp(1rem, 2vw, 1.2rem) clamp(1rem, 2vw, 1.2rem) clamp(1rem, 2vw, 1.2rem) clamp(1.9rem, 2.8vw, 2.15rem);
}

.my-courses-next-main__card.ui-accent-card,
.my-courses-next-carousel__slide.ui-accent-card {
  background:
    radial-gradient(circle at 10% 16%, color-mix(in srgb, var(--ui-accent-card-color, #38bdf8) 22%, transparent), transparent 38%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--ui-accent-card-color, #38bdf8) 14%, transparent),
      color-mix(in srgb, var(--surface-1, #ffffff) 88%, transparent));
}

html[data-theme="dark"] .my-courses-next-main__card.ui-accent-card,
html[data-theme="dark"] .my-courses-next-carousel__slide.ui-accent-card {
  background:
    radial-gradient(circle at 10% 16%, color-mix(in srgb, var(--ui-accent-card-color, #38bdf8) 24%, transparent), transparent 40%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--ui-accent-card-color, #38bdf8) 12%, transparent),
      color-mix(in srgb, var(--surface-1, #0f172a) 88%, transparent));
}

.my-courses-next-main__card.ui-accent-card > .ui-accent-card__rail,
.my-courses-next-carousel__slide.ui-accent-card > .ui-accent-card__rail,
.my-course-card.ui-accent-card > .ui-accent-card__rail,
.my-course-add-card.smart-panel-add-card.ui-accent-card > .ui-accent-card__rail {
  inset: 18px auto 18px 14px;
  width: 4px;
  border-radius: 999px;
  background: var(--ui-accent-card-rail-off);
  opacity: 1;
  filter: none;
  box-shadow: none;
}

.my-courses-next-main__card.ui-accent-card > .ui-accent-card__rail::before,
.my-courses-next-carousel__slide.ui-accent-card > .ui-accent-card__rail::before,
.my-course-card.ui-accent-card > .ui-accent-card__rail::before,
.my-course-add-card.smart-panel-add-card.ui-accent-card > .ui-accent-card__rail::before {
  background: var(--ui-accent-card-rail-on);
  transform-origin: 50% 50%;
}

.my-courses-next-main__countdown span {
  text-transform: uppercase;
}

.my-courses-next-carousel__vote-status.is-unconfirmed strong {
  color: color-mix(in srgb, #facc15 82%, var(--text-main, #0f172a));
}

html[data-theme="dark"] .my-courses-next-carousel__vote-status.is-unconfirmed strong {
  color: #fde68a;
}

.my-courses-next-carousel__vote-actions {
  flex-wrap: nowrap;
  min-width: 0;
}

.my-courses-next-carousel__vote-btn {
  white-space: nowrap;
  flex: 0 1 auto;
  min-width: 0;
}

.my-courses-upcoming {
  margin-bottom: clamp(1.15rem, 2vw, 1.8rem);
}

.my-courses-list-section {
  margin-top: clamp(.55rem, 1.15vw, .9rem);
}

@media (min-width: 768px) {
  .my-courses-upcoming {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: clamp(1rem, 1.7vw, 1.35rem);
  }

  .my-courses-upcoming .my-courses-next-main,
  .my-courses-upcoming .my-courses-next-carousel,
  .my-courses-upcoming .my-courses-next-carousel__viewport,
  .my-courses-upcoming .my-courses-next-carousel__track,
  .my-courses-upcoming .my-courses-next-carousel__slide {
    height: 100%;
    min-height: 100%;
  }

  .my-courses-upcoming .my-courses-next-carousel__track {
    align-items: stretch;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .my-courses-next-card.ui-accent-card > .ui-accent-card__body {
    padding: 1rem 1rem 1rem 1.85rem;
  }

  .my-courses-next-carousel__vote-btn {
    min-height: 2rem;
    padding-inline: .52rem;
    font-size: .74rem;
    gap: .25rem;
  }
}

@media (min-width: 1024px) {
  body.is-dashboard-shell-visible #dashboard-view > .my-courses-smart-root[data-my-courses-list-root="true"].courses-panel-root {
    --courses-content-gutter: clamp(1rem, 1.55vw, 1.8rem);
    --my-courses-pc-left: var(--dashboard-shell-content-left, calc(var(--dashboard-sidebar-width-collapsed, 4.35rem) + 1.2rem));
    --my-courses-pc-right: var(--dashboard-shell-content-right, 1rem);
  }

  body.is-dashboard-shell-visible #dashboard-view > .my-courses-smart-root[data-my-courses-list-root="true"] .my-courses-panel-view > :not(.courses-panel-hero) {
    width: calc(100vw - var(--my-courses-pc-left) - var(--my-courses-pc-right) - (var(--courses-content-gutter, 1.5rem) * 2)) !important;
    max-width: none !important;
    margin-left: calc(var(--my-courses-pc-left) + var(--courses-content-gutter, 1.5rem)) !important;
    margin-right: calc(var(--my-courses-pc-right) + var(--courses-content-gutter, 1.5rem)) !important;
  }

  .my-courses-upcoming {
    width: 100% !important;
  }
}

@media (max-width: 767px) {
  .my-courses-upcoming {
    grid-template-columns: 1fr;
    gap: clamp(.7rem, 3vw, .95rem);
    margin-bottom: clamp(1rem, 4vw, 1.35rem);
  }
}

@media (max-width: 430px) {
  .my-courses-next-carousel__vote-btn {
    width: 2.42rem;
    min-width: 2.42rem;
    min-height: 2.42rem;
    padding: 0;
    border-radius: .88rem;
    font-size: 1.02rem;
  }

  .my-courses-next-carousel__vote-btn span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

/* =========================================================
   V47.1.8 — Mes cours suivis : rails communs + carrousel affiné
   ---------------------------------------------------------
   - Labels complets des votes conservés sur mobile.
   - Bouton Présent par défaut actif mais jaune si vote non confirmé.
   - Flèches masquées quand aucune navigation n'est possible.
   - Hauteurs égales des deux cartes prochaines occurrences dès tablette.
   - Dots collés au carrousel sans participer à la hauteur des cartes.
   - Rails alignés sur le composant commun UiAccentCard.
   ========================================================= */

.my-courses-next-carousel__nav[hidden],
.my-courses-next-carousel__nav:disabled,
.my-courses-next-carousel__nav.is-unavailable {
  display: none !important;
}

.my-courses-next-carousel__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.82rem;
  z-index: 3;
  min-height: .55rem;
  pointer-events: auto;
}

.my-courses-upcoming {
  margin-bottom: clamp(1.85rem, 2.8vw, 2.55rem) !important;
}

.my-courses-list-section {
  margin-top: clamp(.8rem, 1.45vw, 1.25rem) !important;
}

.my-courses-next-carousel__vote-actions {
  flex-wrap: nowrap !important;
  gap: clamp(.34rem, 1vw, .48rem) !important;
}

.my-courses-next-carousel__vote-btn {
  width: auto !important;
  min-width: 0 !important;
  min-height: clamp(2.1rem, 6.2vw, 2.32rem) !important;
  padding: .46rem clamp(.52rem, 1.9vw, .72rem) !important;
  border-radius: .78rem !important;
  font-size: clamp(.73rem, 2.6vw, .8rem) !important;
  gap: .34rem !important;
}

.my-courses-next-carousel__vote-btn span {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.my-courses-next-carousel__vote-btn.is-active.is-default-unconfirmed {
  color: #422006 !important;
  border-color: color-mix(in srgb, #facc15 72%, transparent) !important;
  background: color-mix(in srgb, #facc15 72%, #ffffff 28%) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #facc15 42%, transparent) !important;
}

html[data-theme="dark"] .my-courses-next-carousel__vote-btn.is-active.is-default-unconfirmed {
  color: #fef3c7 !important;
  border-color: color-mix(in srgb, #facc15 70%, transparent) !important;
  background: color-mix(in srgb, #facc15 27%, transparent) !important;
}

.my-courses-smart-root .my-courses-next-card.ui-accent-card,
.my-courses-smart-root .my-course-card.ui-accent-card,
.my-courses-smart-root .my-course-add-card.smart-panel-add-card.ui-accent-card {
  border-color: var(--ui-accent-card-border-rest) !important;
  box-shadow: var(--ui-accent-card-shadow-rest) !important;
  filter: none !important;
  transform: none !important;
}

.my-courses-smart-root .my-courses-next-card.ui-accent-card > .ui-accent-card__rail,
.my-courses-smart-root .my-course-card.ui-accent-card > .ui-accent-card__rail,
.my-courses-smart-root .my-course-add-card.smart-panel-add-card.ui-accent-card > .ui-accent-card__rail {
  inset: 18px auto 18px 14px !important;
  width: 4px !important;
  background: var(--ui-accent-card-rail-off) !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
}

.my-courses-smart-root .my-courses-next-card.ui-accent-card > .ui-accent-card__rail::before,
.my-courses-smart-root .my-course-card.ui-accent-card > .ui-accent-card__rail::before,
.my-courses-smart-root .my-course-add-card.smart-panel-add-card.ui-accent-card > .ui-accent-card__rail::before {
  background: var(--ui-accent-card-rail-on) !important;
  box-shadow: none !important;
  filter: none !important;
  transform-origin: 50% 50% !important;
}

.my-courses-smart-root .my-courses-next-card.ui-accent-card.is-selected,
.my-courses-smart-root .my-courses-next-card.ui-accent-card.is-courses-desktop-current,
.my-courses-smart-root .my-course-card.ui-accent-card.is-selected,
.my-courses-smart-root .my-course-card.ui-accent-card.is-courses-desktop-current,
.my-courses-smart-root .my-course-add-card.smart-panel-add-card.ui-accent-card.is-selected,
.my-courses-smart-root .my-course-add-card.smart-panel-add-card.ui-accent-card.is-courses-desktop-current {
  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;
}

@media (hover: hover) and (pointer: fine) {
  .my-courses-smart-root .my-courses-next-card.ui-accent-card:hover > .ui-accent-card__rail::before,
  .my-courses-smart-root .my-courses-next-card.ui-accent-card:focus-visible > .ui-accent-card__rail::before,
  .my-courses-smart-root .my-courses-next-card.ui-accent-card.is-courses-desktop-current > .ui-accent-card__rail::before,
  .my-courses-smart-root .my-courses-next-card.ui-accent-card.is-selected > .ui-accent-card__rail::before,
  .my-courses-smart-root .my-course-card.ui-accent-card:hover > .ui-accent-card__rail::before,
  .my-courses-smart-root .my-course-card.ui-accent-card:focus-visible > .ui-accent-card__rail::before,
  .my-courses-smart-root .my-course-card.ui-accent-card.is-courses-desktop-current > .ui-accent-card__rail::before,
  .my-courses-smart-root .my-course-card.ui-accent-card.is-selected > .ui-accent-card__rail::before,
  .my-courses-smart-root .my-course-card.ui-accent-card[data-menu-open="true"] > .ui-accent-card__rail::before,
  .my-courses-smart-root .my-course-add-card.smart-panel-add-card.ui-accent-card:hover > .ui-accent-card__rail::before,
  .my-courses-smart-root .my-course-add-card.smart-panel-add-card.ui-accent-card:focus-visible > .ui-accent-card__rail::before,
  .my-courses-smart-root .my-course-add-card.smart-panel-add-card.ui-accent-card.is-courses-desktop-current > .ui-accent-card__rail::before,
  .my-courses-smart-root .my-course-add-card.smart-panel-add-card.ui-accent-card.is-selected > .ui-accent-card__rail::before,
  .my-courses-smart-root .my-course-add-card.smart-panel-add-card.ui-accent-card[data-menu-open="true"] > .ui-accent-card__rail::before {
    transform: scaleY(1) !important;
  }
}

@media (max-width: 1023px), (hover: none), (pointer: coarse) {
  .my-courses-smart-root .my-courses-next-card.ui-accent-card > .ui-accent-card__rail::before,
  .my-courses-smart-root .my-course-card.ui-accent-card > .ui-accent-card__rail::before,
  .my-courses-smart-root .my-course-add-card.smart-panel-add-card.ui-accent-card > .ui-accent-card__rail::before {
    transform: scaleY(1) !important;
    transition: none !important;
  }
}

@media (min-width: 768px) {
  .my-courses-upcoming {
    align-items: stretch !important;
  }

  .my-courses-upcoming .my-courses-next-main,
  .my-courses-upcoming .my-courses-next-carousel {
    align-self: stretch !important;
    height: 100% !important;
    min-height: clamp(17.5rem, 24vw, 21.5rem) !important;
  }

  .my-courses-upcoming .my-courses-next-carousel {
    display: block !important;
    position: relative !important;
    gap: 0 !important;
  }

  .my-courses-upcoming .my-courses-next-main__card,
  .my-courses-upcoming .my-courses-next-carousel__viewport,
  .my-courses-upcoming .my-courses-next-carousel__track,
  .my-courses-upcoming .my-courses-next-carousel__slide {
    height: 100% !important;
    min-height: 100% !important;
  }

  .my-courses-upcoming .my-courses-next-carousel__track {
    align-items: stretch !important;
  }
}

@media (max-width: 767px) {
  .my-courses-next-carousel__dots {
    bottom: -.72rem;
  }

  .my-courses-next-carousel__vote-btn {
    padding-inline: .54rem !important;
    font-size: .72rem !important;
  }
}

/* =========================================================
   V47.1.9 — Mes cours suivis : rails Smart Panel réels
   ---------------------------------------------------------
   Le panel utilise le même rythme que Mes élèves / Élèves :
   rail court au repos sur PC, déploiement lent sur hover,
   sélection ou menu, et rail actif sur tactile.
   ========================================================= */
#dashboard-view .my-courses-panel-content[data-smart-panel-interaction-rules="true"] :is(
  .my-courses-next-card.ui-accent-card,
  .my-course-card.ui-accent-card,
  .my-course-add-card.smart-panel-add-card.ui-accent-card
) {
  --smart-panel-frame-local-accent: var(--card-accent, var(--my-courses-next-color, var(--ui-accent-card-color, #38bdf8)));
  --smart-panel-frame-rail-rest-color:
    color-mix(in srgb, var(--smart-panel-frame-local-accent) 34%, rgba(148, 163, 184, .22) 66%);
  --smart-panel-frame-rail-active-color:
    color-mix(in srgb, var(--smart-panel-frame-local-accent) 72%, rgba(255,255,255,.18) 28%);
  --smart-panel-frame-rail-rest:
    linear-gradient(
      180deg,
      transparent 0%,
      color-mix(in srgb, var(--smart-panel-frame-rail-rest-color) 0%, transparent) 12%,
      color-mix(in srgb, var(--smart-panel-frame-rail-rest-color) 24%, transparent) 24%,
      color-mix(in srgb, var(--smart-panel-frame-rail-rest-color) 72%, transparent) 38%,
      color-mix(in srgb, var(--smart-panel-frame-rail-rest-color) 100%, white 5%) 50%,
      color-mix(in srgb, var(--smart-panel-frame-rail-rest-color) 72%, transparent) 62%,
      color-mix(in srgb, var(--smart-panel-frame-rail-rest-color) 24%, transparent) 76%,
      color-mix(in srgb, var(--smart-panel-frame-rail-rest-color) 0%, transparent) 88%,
      transparent 100%
    );
  --smart-panel-frame-rail-active:
    linear-gradient(
      180deg,
      transparent 0%,
      color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 0%, transparent) 10%,
      color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 28%, transparent) 20%,
      color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 80%, transparent) 36%,
      color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 100%, white 7%) 50%,
      color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 80%, transparent) 64%,
      color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 28%, transparent) 80%,
      color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 0%, transparent) 90%,
      transparent 100%
    );
}

html:not([data-theme="dark"]) #dashboard-view .my-courses-panel-content[data-smart-panel-interaction-rules="true"] :is(
  .my-courses-next-card.ui-accent-card,
  .my-course-card.ui-accent-card,
  .my-course-add-card.smart-panel-add-card.ui-accent-card
) {
  --smart-panel-frame-rail-rest-color:
    color-mix(in srgb, var(--smart-panel-frame-local-accent) 28%, rgba(15, 23, 42, .16) 72%);
  --smart-panel-frame-rail-active-color:
    color-mix(in srgb, var(--smart-panel-frame-local-accent) 64%, rgba(15, 23, 42, .12) 36%);
}

#dashboard-view .my-courses-panel-content[data-smart-panel-interaction-rules="true"] :is(
  .my-courses-next-card.ui-accent-card,
  .my-course-card.ui-accent-card,
  .my-course-add-card.smart-panel-add-card.ui-accent-card
) > .ui-accent-card__rail {
  width: var(--smart-panel-frame-rail-width, 5px) !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  overflow: hidden !important;
}

#dashboard-view .my-courses-panel-content[data-smart-panel-interaction-rules="true"] :is(
  .my-courses-next-card.ui-accent-card,
  .my-course-card.ui-accent-card,
  .my-course-add-card.smart-panel-add-card.ui-accent-card
) > .ui-accent-card__rail::before {
  background: var(--smart-panel-frame-rail-rest) !important;
  -webkit-mask-image: var(--smart-panel-frame-rail-mask) !important;
  mask-image: var(--smart-panel-frame-rail-mask) !important;
  -webkit-mask-size: 100% 100% !important;
  mask-size: 100% 100% !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  opacity: var(--smart-panel-frame-rail-rest-opacity, .64) !important;
  transform: scaleY(var(--smart-panel-frame-rail-scale-rest, .20)) !important;
  transform-origin: 50% 50% !important;
  box-shadow: none !important;
  filter: drop-shadow(0 0 var(--smart-panel-frame-rail-rest-glow, .38rem) color-mix(in srgb, var(--smart-panel-frame-rail-rest-color) 42%, transparent)) !important;
  transition:
    transform 620ms cubic-bezier(.16, 1, .3, 1),
    opacity 560ms ease,
    filter 620ms ease,
    background 560ms ease !important;
}

@media (hover: hover) and (pointer: fine) {
  #dashboard-view .my-courses-panel-content[data-smart-panel-interaction-rules="true"] :is(
    .my-courses-next-card.ui-accent-card,
    .my-course-card.ui-accent-card,
    .my-course-add-card.smart-panel-add-card.ui-accent-card
  ):is(:hover, :focus-visible, .is-smart-panel-card-hovered, .is-courses-desktop-current, .is-selected, [aria-selected="true"], [data-selected="true"], [data-selected="1"], [data-menu-open="true"]) > .ui-accent-card__rail::before {
    background: var(--smart-panel-frame-rail-active) !important;
    opacity: var(--smart-panel-frame-rail-active-opacity, 1) !important;
    transform: scaleY(var(--smart-panel-frame-rail-scale-active, 1)) !important;
    box-shadow: none !important;
    filter: drop-shadow(0 0 var(--smart-panel-frame-rail-active-glow, 1.18rem) color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 56%, transparent)) !important;
  }
}

@media (hover: none), (pointer: coarse), (max-width: 1023px) {
  #dashboard-view .my-courses-panel-content[data-smart-panel-interaction-rules="true"] :is(
    .my-courses-next-card.ui-accent-card,
    .my-course-card.ui-accent-card,
    .my-course-add-card.smart-panel-add-card.ui-accent-card
  ) > .ui-accent-card__rail::before {
    background: var(--smart-panel-frame-rail-active) !important;
    opacity: var(--smart-panel-frame-rail-active-opacity, 1) !important;
    transform: scaleY(var(--smart-panel-frame-rail-scale-active, 1)) !important;
    box-shadow: none !important;
    filter: drop-shadow(0 0 .75rem color-mix(in srgb, var(--smart-panel-frame-rail-active-color) 44%, transparent)) !important;
    transition: none !important;
  }
}

/* V47.1.10 - Menu contextuel des cartes cours suivis */
.my-courses-course-context-menu.course-student-context-menu {
  z-index: 25000;
}

.my-courses-course-context-menu .course-student-context-menu__item.is-disabled-soft {
  opacity: .62;
}

/* =========================================================
   V47.1.11 — Mes cours suivis : carrousel libellés + compte à rebours
   ========================================================= */
.my-courses-next-carousel__countdown {
  display: inline-flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  width: 100%;
  min-width: 0;
  padding: .52rem .66rem;
  border-radius: .88rem;
  border: 1px solid color-mix(in srgb, var(--ui-accent-card-color, var(--my-courses-next-color, #38bdf8)) 26%, transparent);
  background: color-mix(in srgb, var(--ui-accent-card-color, var(--my-courses-next-color, #38bdf8)) 8%, transparent);
}

.my-courses-next-carousel__countdown span {
  color: var(--text-muted, #64748b);
  font-size: .68rem;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .1em;
  white-space: nowrap;
}

.my-courses-next-carousel__countdown strong {
  min-width: 0;
  color: color-mix(in srgb, var(--ui-accent-card-color, var(--my-courses-next-color, #38bdf8)) 76%, var(--text-main, #0f172a));
  font-size: clamp(.92rem, 1.35vw, 1.08rem);
  font-weight: 950;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html[data-theme="dark"] .my-courses-next-carousel__countdown strong {
  color: color-mix(in srgb, var(--ui-accent-card-color, var(--my-courses-next-color, #38bdf8)) 72%, #f8fafc);
}

@media (max-width: 430px) {
  .my-courses-next-carousel__countdown {
    padding: .48rem .58rem;
    gap: .55rem;
  }

  .my-courses-next-carousel__countdown strong {
    font-size: .96rem;
  }
}

/* =========================================================
   V47.1.12 — Mes cours suivis : hero mobile + motif intégré
   ---------------------------------------------------------
   - Décale légèrement le contenu du hero mobile pour éviter
     la collision avec la navbar invisible iOS.
   - Remplace le modal de motif par un champ inline dans la
     carte concernée, affiché uniquement pour Absent/Retard.
   ========================================================= */

@media (max-width: 767px), (max-width: 980px) and (max-height: 520px) and (orientation: landscape) {
  body.is-dashboard-shell-visible #dashboard-view > .my-courses-smart-root[data-my-courses-list-root="true"] .my-courses-hero.courses-panel-hero.students-panel-hero .courses-panel-hero__inner {
    padding-top: calc(var(--courses-panel-nav-height, var(--edq-mobile-navbar-height, 76px)) + clamp(2.75rem, 10vw, 3.85rem)) !important;
  }
}

.my-courses-next-reason {
  display: grid;
  gap: .62rem;
  margin-top: .12rem;
  padding: .74rem;
  border-radius: 1rem;
  border: 1px solid color-mix(in srgb, #facc15 42%, transparent);
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, #facc15 16%, transparent), transparent 62%),
    color-mix(in srgb, #facc15 8%, var(--surface-1, #ffffff) 74%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #facc15 13%, transparent);
  animation: myCoursesReasonIn .18s ease both;
}

@keyframes myCoursesReasonIn {
  from {
    opacity: 0;
    transform: translateY(-.35rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.my-courses-next-reason__field {
  display: grid;
  gap: .38rem;
  min-width: 0;
}

.my-courses-next-reason__field > span {
  display: inline-flex;
  align-items: baseline;
  gap: .35rem;
  color: color-mix(in srgb, #facc15 76%, var(--text-main, #0f172a));
  font-size: .76rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.my-courses-next-reason__field > span em {
  color: var(--text-muted, #64748b);
  font-style: normal;
  font-size: .68rem;
  letter-spacing: .03em;
  text-transform: none;
}

.my-courses-next-reason textarea {
  width: 100%;
  min-height: 4.15rem;
  max-height: 8rem;
  resize: vertical;
  border: 1px solid color-mix(in srgb, #facc15 38%, transparent);
  border-radius: .86rem;
  background: color-mix(in srgb, var(--surface-1, #ffffff) 86%, transparent);
  color: var(--text-main, #0f172a);
  padding: .68rem .76rem;
  font: inherit;
  font-size: .84rem;
  font-weight: 760;
  line-height: 1.32;
  outline: none;
}

.my-courses-next-reason textarea:focus {
  border-color: color-mix(in srgb, #facc15 74%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, #facc15 18%, transparent);
}

.my-courses-next-reason__actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
}

.my-courses-next-reason__btn {
  appearance: none;
  min-height: 2.05rem;
  padding: .44rem .78rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font: inherit;
  font-size: .78rem;
  font-weight: 950;
  line-height: 1;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, opacity .16s ease;
}

.my-courses-next-reason__btn:hover,
.my-courses-next-reason__btn:focus-visible {
  transform: translateY(-1px);
}

.my-courses-next-reason__btn--ghost {
  border-color: color-mix(in srgb, var(--text-muted, #64748b) 34%, transparent);
  background: transparent;
  color: var(--text-muted, #64748b);
}

.my-courses-next-reason__btn--confirm {
  border-color: color-mix(in srgb, #facc15 58%, transparent);
  background: color-mix(in srgb, #facc15 76%, #ffffff 24%);
  color: #422006;
}

.my-courses-next-carousel__vote-btn.is-pending-reason {
  border-color: color-mix(in srgb, #facc15 72%, transparent) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #facc15 36%, transparent) !important;
}

html[data-theme="dark"] .my-courses-next-reason {
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, #facc15 18%, transparent), transparent 62%),
    color-mix(in srgb, #facc15 9%, #020617 86%);
}

html[data-theme="dark"] .my-courses-next-reason textarea {
  background: color-mix(in srgb, #020617 74%, transparent);
  color: rgba(248, 250, 252, .96);
}

html[data-theme="dark"] .my-courses-next-reason__btn--confirm {
  background: color-mix(in srgb, #facc15 28%, transparent);
  color: #fef3c7;
}

@media (max-width: 767px) {
  .my-courses-next-reason {
    padding: .68rem;
  }

  .my-courses-next-reason textarea {
    min-height: 3.85rem;
    font-size: .82rem;
  }

  .my-courses-next-reason__actions {
    justify-content: stretch;
  }

  .my-courses-next-reason__btn {
    flex: 1 1 8rem;
  }
}

/* =========================================================
   V47.1.13 — Mes cours suivis : motif flottant compact
   ---------------------------------------------------------
   - Le champ motif Absent/Retard devient une bulle flottante
     compacte, sans agrandir les cartes.
   - Validation par second tap/clic sur le même vote.
   - Fermeture sans validation au tap/clic extérieur.
   ========================================================= */

@media (max-width: 767px), (max-width: 980px) and (max-height: 520px) and (orientation: landscape) {
  body.is-dashboard-shell-visible #dashboard-view > .my-courses-smart-root[data-my-courses-list-root="true"] .my-courses-hero.courses-panel-hero.students-panel-hero .courses-panel-hero__inner {
    padding-top: calc(var(--courses-panel-nav-height, var(--edq-mobile-navbar-height, 76px)) + clamp(3.35rem, 12vw, 4.85rem)) !important;
  }
}

.my-courses-next-reason.my-courses-next-reason--floating {
  position: fixed;
  inset: auto auto auto auto;
  z-index: 14000;
  width: min(26rem, calc(100vw - 1.5rem));
  max-width: calc(100vw - 1.5rem);
  display: grid;
  gap: .42rem;
  margin: 0;
  padding: .62rem .68rem .56rem;
  border-radius: 1rem;
  border: 1px solid color-mix(in srgb, #facc15 52%, transparent);
  background:
    radial-gradient(circle at 10% 0%, color-mix(in srgb, #facc15 18%, transparent), transparent 58%),
    color-mix(in srgb, #020617 88%, #facc15 12%);
  box-shadow:
    0 18px 44px rgba(0, 0, 0, .34),
    inset 0 0 0 1px color-mix(in srgb, #facc15 16%, transparent);
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  transform-origin: 50% 0%;
  animation: myCoursesReasonFloatIn .16s cubic-bezier(.2, .82, .26, 1) both;
}

.my-courses-next-reason.my-courses-next-reason--floating.is-closing {
  animation: myCoursesReasonFloatOut .13s ease both;
}

@keyframes myCoursesReasonFloatIn {
  from {
    opacity: 0;
    transform: translateY(-.28rem) scale(.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes myCoursesReasonFloatOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-.22rem) scale(.985);
  }
}

.my-courses-next-reason.my-courses-next-reason--floating .my-courses-next-reason__field {
  gap: .34rem;
}

.my-courses-next-reason.my-courses-next-reason--floating .my-courses-next-reason__field > span {
  font-size: .7rem;
  letter-spacing: .085em;
}

.my-courses-next-reason.my-courses-next-reason--floating .my-courses-next-reason__field > span em {
  font-size: .64rem;
}

.my-courses-next-reason.my-courses-next-reason--floating textarea {
  min-height: 2.65rem;
  max-height: 5.4rem;
  resize: none;
  padding: .56rem .64rem;
  border-radius: .78rem;
  font-size: .82rem;
  font-weight: 760;
  line-height: 1.28;
}

.my-courses-next-reason__hint {
  margin: 0;
  color: color-mix(in srgb, #facc15 64%, rgba(226, 232, 240, .82) 36%);
  font-size: .68rem;
  font-weight: 850;
  line-height: 1.25;
  letter-spacing: .01em;
}

.my-courses-next-reason.my-courses-next-reason--floating .my-courses-next-reason__actions {
  display: none !important;
}

html:not([data-theme="dark"]) .my-courses-next-reason.my-courses-next-reason--floating {
  background:
    radial-gradient(circle at 10% 0%, color-mix(in srgb, #facc15 22%, transparent), transparent 58%),
    color-mix(in srgb, #ffffff 88%, #facc15 12%);
  box-shadow:
    0 18px 44px rgba(15, 23, 42, .18),
    inset 0 0 0 1px color-mix(in srgb, #facc15 18%, transparent);
}

html:not([data-theme="dark"]) .my-courses-next-reason__hint {
  color: color-mix(in srgb, #854d0e 78%, #64748b 22%);
}

@media (max-width: 767px) {
  .my-courses-next-reason.my-courses-next-reason--floating {
    width: calc(100vw - 1.5rem);
    padding: .58rem .62rem .52rem;
    border-radius: .92rem;
  }

  .my-courses-next-reason.my-courses-next-reason--floating textarea {
    min-height: 2.55rem;
    max-height: 4.9rem;
    font-size: .8rem;
  }

  .my-courses-next-reason__hint {
    font-size: .65rem;
  }
}


/* =========================================================
   V47.2.1 — Mes cours enseignés : alignement Smart Panel
   ---------------------------------------------------------
   Le panel professeur réutilise l'ossature du panel élève :
   hero bord à bord, dock vide, prochains cours, cartes rails
   et menu contextuel sans boutons inline.
   ========================================================= */
.my-courses-panel-body--teacher .my-courses-card-grid--flat {
  align-items: stretch;
}

.my-courses-panel-body--teacher .my-course-card.ui-accent-card {
  cursor: pointer;
}

.my-courses-panel-body--teacher .my-courses-next-card.ui-accent-card {
  cursor: pointer;
}

.my-courses-next-card--teacher .ui-accent-card__body {
  min-height: 100%;
}

.my-courses-next-carousel--teacher .my-courses-next-carousel__slide {
  min-height: 100%;
}

.my-courses-course-context-menu--teacher .course-student-context-menu__item.is-disabled-soft {
  opacity: .62;
}

@media (max-width: 767px) {
  .my-courses-panel-body--teacher .my-courses-hero.courses-panel-hero.students-panel-hero .courses-panel-hero__inner {
    padding-top: calc(var(--courses-panel-nav-height, var(--edq-mobile-navbar-height, 76px)) + clamp(3.35rem, 12vw, 4.85rem)) !important;
  }
}

/* =========================================================
   EDQ V47.4.11 — Mes cours : safe zones paysage mobile
   ---------------------------------------------------------
   Protège les prochains cours, les cartes et le hero des coins
   arrondis / îlots photo en paysage, sans toucher au PC.
   ========================================================= */
@media (max-width: 1023px) {
  body.is-dashboard-shell-visible #dashboard-view > .my-courses-smart-root[data-my-courses-list-root="true"].courses-panel-root {
    --courses-content-safe-left: var(--edq-safe-area-left-effective, env(safe-area-inset-left, 0px));
    --courses-content-safe-right: var(--edq-safe-area-right-effective, env(safe-area-inset-right, 0px));
    --courses-content-gutter: clamp(.7rem, 2.8vw, 1rem);
  }

  body.is-dashboard-shell-visible #dashboard-view > .my-courses-smart-root[data-my-courses-list-root="true"] .my-courses-hero.courses-panel-hero.students-panel-hero .courses-panel-hero__inner {
    box-sizing: border-box !important;
    padding-left: calc(var(--courses-content-safe-left, 0px) + clamp(.9rem, 3vw, 1.2rem)) !important;
    padding-right: calc(var(--courses-content-safe-right, 0px) + clamp(.9rem, 3vw, 1.2rem)) !important;
  }

  body.is-dashboard-shell-visible #dashboard-view > .my-courses-smart-root[data-my-courses-list-root="true"] .my-courses-panel-view > :not(.courses-panel-hero) {
    width: calc(
      100vw
      - var(--courses-content-safe-left, 0px)
      - var(--courses-content-safe-right, 0px)
      - (var(--courses-content-gutter, .9rem) * 2)
    ) !important;
    max-width: none !important;
    margin-left: calc(var(--courses-content-safe-left, 0px) + var(--courses-content-gutter, .9rem)) !important;
    margin-right: calc(var(--courses-content-safe-right, 0px) + var(--courses-content-gutter, .9rem)) !important;
  }
}

@media (max-width: 980px) and (max-height: 520px) and (orientation: landscape) {
  body.is-dashboard-shell-visible #dashboard-view > .my-courses-smart-root[data-my-courses-list-root="true"] .my-courses-hero.courses-panel-hero.students-panel-hero .courses-panel-hero__inner {
    padding-left: calc(var(--courses-content-safe-left, var(--edq-safe-area-left-effective, 0px)) + .95rem) !important;
    padding-right: calc(var(--courses-content-safe-right, var(--edq-safe-area-right-effective, 0px)) + .95rem) !important;
  }
}