/* /public_html/assets/css/ui-accent-card.css
   Composant commun EDQ : carte avec onglet d’accent sur le bord gauche.
   L’ancien rail central disparaît. L’onglet épouse les arrondis de la carte
   et s’élargit au survol, au focus ou à la sélection sans déplacer le contenu.
*/

.ui-accent-card {
  --ui-accent-card-color: var(--color-primary, #38bdf8);
  --ui-accent-card-radius: 26px;
  --ui-accent-card-tab-rest: 5px;
  --ui-accent-card-tab-active: 16px;
  --ui-accent-card-border-rest: color-mix(in srgb, var(--ui-accent-card-color) 24%, color-mix(in srgb, var(--color-border-subtle, #94a3b8) 72%, transparent) 76%);
  --ui-accent-card-border-active: color-mix(in srgb, var(--ui-accent-card-color) 72%, rgba(255,255,255,.22) 28%);
  --ui-accent-card-selection-ring: color-mix(in srgb, var(--ui-accent-card-color) 44%, transparent);
  --ui-accent-card-shadow-rest:
    0 14px 42px color-mix(in srgb, #000 9%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 16%, transparent);

  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--ui-accent-card-border-rest);
  border-radius: var(--ui-accent-card-radius);
  background:
    radial-gradient(circle at 5% 0%, color-mix(in srgb, var(--ui-accent-card-color) 14%, transparent), transparent 34%),
    linear-gradient(145deg,
      color-mix(in srgb, var(--color-surface) 88%, transparent),
      color-mix(in srgb, var(--color-surface-soft) 78%, transparent));
  box-shadow: var(--ui-accent-card-shadow-rest);
  color: var(--theme-text, var(--color-text));
  transform: none;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

html:not([data-theme="dark"]) .ui-accent-card {
  --ui-accent-card-border-rest: color-mix(in srgb, var(--ui-accent-card-color, #0284c7) 22%, rgba(15,23,42,.10) 78%);
  --ui-accent-card-border-active: color-mix(in srgb, var(--ui-accent-card-color, #0284c7) 72%, #0f172a 28%);
  --ui-accent-card-selection-ring: color-mix(in srgb, var(--ui-accent-card-color, #0284c7) 38%, transparent);
  --ui-accent-card-shadow-rest:
    0 14px 42px rgba(15,23,42,.08),
    inset 0 1px 0 rgba(255,255,255,.72);
  background:
    radial-gradient(circle at 4% 0%, color-mix(in srgb, var(--ui-accent-card-color) 18%, transparent), transparent 36%),
    linear-gradient(145deg,
      color-mix(in srgb, var(--color-surface, #ffffff) 92%, var(--ui-accent-card-color) 8%),
      color-mix(in srgb, var(--color-surface-soft, #f8fafc) 78%, var(--ui-accent-card-color) 22%));
}

.ui-accent-card::after {
  content: '';
  position: absolute;
  inset: -34% -18% auto auto;
  width: min(220px, 42vw);
  aspect-ratio: 1;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ui-accent-card-color) 12%, transparent);
  filter: blur(30px);
  opacity: .72;
  pointer-events: none;
  z-index: 0;
}

.ui-accent-card__rail {
  position: absolute;
  inset: -1px auto -1px -1px;
  width: var(--ui-accent-card-tab-rest);
  min-height: calc(100% + 2px);
  border: 0;
  border-radius: var(--ui-accent-card-radius) 0 0 var(--ui-accent-card-radius);
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--ui-accent-card-color) 100%, white 4%) 0%,
      color-mix(in srgb, var(--ui-accent-card-color) 92%, transparent) 42%,
      color-mix(in srgb, var(--ui-accent-card-color) 18%, transparent) 82%,
      transparent 100%);
  box-shadow:
    4px 0 18px color-mix(in srgb, var(--ui-accent-card-color) 24%, transparent),
    inset -1px 0 0 color-mix(in srgb, white 20%, transparent);
  opacity: .74;
  transform: none;
  transform-origin: left center;
  transition:
    width 230ms cubic-bezier(.2,.82,.24,1),
    opacity 180ms ease,
    box-shadow 230ms ease;
  pointer-events: none;
  z-index: 2;
}

.ui-accent-card__rail::before,
.ui-accent-card__rail::after {
  content: none;
}

.ui-accent-card__header,
.ui-accent-card__body,
.ui-accent-card__footer {
  position: relative;
  z-index: 1;
}

.ui-accent-card__header { padding: 18px 18px 0 30px; }
.ui-accent-card__body { padding: 14px 18px 18px 30px; }
.ui-accent-card__footer { padding: 0 18px 18px 30px; }

button.ui-accent-card,
a.ui-accent-card,
.ui-accent-card[tabindex] {
  cursor: pointer;
}

.ui-accent-card:is(.is-selected, .is-courses-desktop-current, [aria-selected="true"], [data-selected="true"], [data-selected="1"], [data-menu-open="true"]) {
  border-color: var(--ui-accent-card-border-active);
  box-shadow:
    var(--ui-accent-card-shadow-rest),
    inset 0 0 0 1px var(--ui-accent-card-selection-ring);
}

.ui-accent-card:is(.is-selected, .is-courses-desktop-current, [aria-selected="true"], [data-selected="true"], [data-selected="1"], [data-menu-open="true"]) > .ui-accent-card__rail {
  width: var(--ui-accent-card-tab-active);
  opacity: 1;
  box-shadow:
    8px 0 24px color-mix(in srgb, var(--ui-accent-card-color) 38%, transparent),
    inset -1px 0 0 color-mix(in srgb, white 28%, transparent);
}

@media (hover: hover) and (pointer: fine) {
  .ui-accent-card:is(:hover, :focus-visible, .is-smart-panel-card-hovered) > .ui-accent-card__rail {
    width: var(--ui-accent-card-tab-active);
    opacity: 1;
    box-shadow:
      8px 0 24px color-mix(in srgb, var(--ui-accent-card-color) 38%, transparent),
      inset -1px 0 0 color-mix(in srgb, white 28%, transparent);
  }
}

@media (max-width: 1023px), (hover: none), (pointer: coarse) {
  .ui-accent-card {
    --ui-accent-card-tab-rest: 6px;
    --ui-accent-card-tab-active: 12px;
  }

  .ui-accent-card > .ui-accent-card__rail {
    opacity: .9;
    transition-duration: 160ms;
  }
}

@media (max-width: 767px), (max-width: 980px) and (max-height: 520px) and (orientation: landscape) {
  .ui-accent-card { --ui-accent-card-radius: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .ui-accent-card,
  .ui-accent-card__rail {
    transition: none;
    animation: none;
  }
}