/* Méthode — frise premium sombre */
.scs-method-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in oklab, var(--primary) 28%, var(--border));
  border-radius: 1.5rem;
  background:
    linear-gradient(
      180deg,
      color-mix(in oklab, var(--background) 96%, var(--primary) 4%),
      color-mix(in oklab, var(--background) 99%, transparent)
    );
  box-shadow:
    inset 0 1px 0 color-mix(in oklab, var(--primary) 18%, transparent),
    0 30px 80px -50px color-mix(in oklab, var(--primary) 50%, transparent);
}

.scs-method-panel::before {
  content: "";
  position: absolute;
  inset: -20% 10% auto;
  height: 10rem;
  pointer-events: none;
  background: radial-gradient(
    circle,
    color-mix(in oklab, var(--primary) 20%, transparent) 0%,
    transparent 72%
  );
  filter: blur(28px);
}

.scs-method-track {
  position: absolute;
  top: 2.45rem;
  left: 10%;
  right: 10%;
  height: 1px;
  z-index: 1;
}

.scs-method-track-line {
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in oklab, var(--primary) 65%, transparent) 10%,
    var(--primary) 50%,
    color-mix(in oklab, var(--primary-glow) 70%, transparent) 90%,
    transparent
  );
  box-shadow: 0 0 18px color-mix(in oklab, var(--primary) 45%, transparent);
}

.scs-method-cursor {
  position: absolute;
  top: 50%;
  left: 0;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 999px;
  background: var(--primary-glow);
  box-shadow:
    0 0 14px 4px color-mix(in oklab, var(--primary) 65%, transparent),
    0 0 34px 10px color-mix(in oklab, var(--primary) 28%, transparent);
  opacity: 0;
  transform: translate(-50%, -50%);
  transition:
    left 180ms ease-out,
    opacity 180ms ease-out;
  pointer-events: none;
}

.scs-method-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.scs-method-card {
  position: relative;
  min-width: 0;
  padding: 1.25rem 1.4rem 1.6rem;
  text-align: center;
  transition:
    background-color 250ms ease,
    transform 250ms ease;
}

.scs-method-card + .scs-method-card {
  border-left: 1px solid color-mix(in oklab, var(--border) 75%, transparent);
}

.scs-method-card:hover,
.scs-method-card.is-lit {
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--primary) 6%, transparent),
    transparent 70%
  );
}

.scs-method-number-wrap {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 3rem;
}

.scs-method-number {
  position: relative;
  z-index: 2;
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border: 2px solid color-mix(in oklab, var(--primary) 72%, transparent);
  border-radius: 999px;
  background: color-mix(in oklab, var(--background) 94%, var(--primary) 6%);
  color: var(--primary);
  font-family: var(--font-display, inherit);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  box-shadow:
    inset 0 0 18px color-mix(in oklab, var(--primary) 10%, transparent),
    0 0 18px color-mix(in oklab, var(--primary) 22%, transparent);
  transition:
    background-color 220ms ease,
    color 220ms ease,
    box-shadow 220ms ease,
    transform 220ms ease;
}

.scs-method-dot {
  position: absolute;
  bottom: -0.5rem;
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 999px;
  background: color-mix(in oklab, var(--primary) 58%, transparent);
  box-shadow: 0 0 10px color-mix(in oklab, var(--primary) 40%, transparent);
  transition:
    background-color 220ms ease,
    box-shadow 220ms ease,
    transform 220ms ease;
}

.scs-method-card:hover .scs-method-number,
.scs-method-card.is-lit .scs-method-number {
  background: var(--primary);
  color: #020617;
  box-shadow:
    0 0 18px 5px color-mix(in oklab, var(--primary) 48%, transparent),
    0 0 42px 12px color-mix(in oklab, var(--primary-glow) 24%, transparent);
  transform: scale(1.07);
}

.scs-method-card:hover .scs-method-dot,
.scs-method-card.is-lit .scs-method-dot {
  background: var(--primary-glow);
  box-shadow:
    0 0 10px 3px color-mix(in oklab, var(--primary) 75%, transparent),
    0 0 24px 8px color-mix(in oklab, var(--primary) 30%, transparent);
  transform: scale(1.18);
}

.scs-method-icon {
  display: grid;
  width: 3rem;
  height: 3rem;
  margin: 2rem auto 0;
  place-items: center;
  color: var(--primary);
  transition:
    color 220ms ease,
    filter 220ms ease,
    transform 220ms ease;
}

.scs-method-icon svg {
  width: 2rem;
  height: 2rem;
}

.scs-method-card:hover .scs-method-icon,
.scs-method-card.is-lit .scs-method-icon {
  color: var(--primary-glow);
  filter: drop-shadow(
    0 0 10px color-mix(in oklab, var(--primary) 70%, transparent)
  );
  transform: translateY(-2px) scale(1.05);
}

.scs-method-title {
  margin-top: 1.15rem;
  color: var(--foreground);
  font-family: var(--font-display, inherit);
  font-size: 1.05rem;
  font-weight: 700;
}

.scs-method-title-line {
  display: block;
  width: 2.8rem;
  height: 2px;
  margin: 0.7rem auto 0;
  border-radius: 999px;
  background: color-mix(in oklab, var(--primary) 68%, transparent);
  box-shadow: 0 0 12px color-mix(in oklab, var(--primary) 28%, transparent);
  transition:
    width 220ms ease,
    background-color 220ms ease,
    box-shadow 220ms ease;
}

.scs-method-card:hover .scs-method-title-line,
.scs-method-card.is-lit .scs-method-title-line {
  width: 3.7rem;
  background: var(--primary-glow);
  box-shadow: 0 0 15px color-mix(in oklab, var(--primary) 55%, transparent);
}

.scs-method-text {
  margin-top: 1rem;
  color: var(--muted-foreground);
  font-size: 0.875rem;
  line-height: 1.7;
}

@media (max-width: 1023px) {
  .scs-method-track {
    display: none;
  }

  .scs-method-grid {
    grid-template-columns: 1fr;
  }

  .scs-method-card {
    padding: 1.5rem;
  }

  .scs-method-card + .scs-method-card {
    border-top: 1px solid color-mix(in oklab, var(--border) 75%, transparent);
    border-left: 0;
  }
}/* Méthode — finition et progression lumineuse */
.scs-method-number {
	width: 3.75rem;
	height: 3.75rem;
	font-size: 0.9rem;
	border-width: 2px;
}

.scs-method-number-wrap {
	min-height: 3.75rem;
}

.scs-method-track {
	top: 3.05rem;
}

.scs-method-icon {
	width: 4.5rem;
	height: 4.5rem;
	margin-top: 2rem;
	border-radius: 999px;
	background: color-mix(in oklab, var(--primary) 7%, transparent);
	box-shadow: inset 0 0 24px color-mix(in oklab, var(--primary) 8%, transparent);
}

.scs-method-icon svg {
	width: 2.45rem;
	height: 2.45rem;
}

.scs-method-title {
	margin-top: 1.25rem;
	font-size: 1.2rem;
}

.scs-method-text {
	max-width: 13rem;
	margin-right: auto;
	margin-left: auto;
	font-size: 0.9rem;
	line-height: 1.75;
}

.scs-method-card + .scs-method-card {
	border-left-color: color-mix(in oklab, var(--border) 42%, transparent);
}

/* Étapes déjà parcourues */
.scs-method-card.is-passed .scs-method-number,
.scs-method-card.is-lit .scs-method-number {
	background: var(--primary);
	color: #020617;
	border-color: var(--primary-glow);
	box-shadow:
		0 0 18px 5px color-mix(in oklab, var(--primary) 55%, transparent),
		0 0 44px 13px color-mix(in oklab, var(--primary-glow) 28%, transparent);
	transform: scale(1.06);
}

.scs-method-card.is-passed .scs-method-dot,
.scs-method-card.is-lit .scs-method-dot {
	background: var(--primary-glow);
	box-shadow:
		0 0 10px 3px color-mix(in oklab, var(--primary) 80%, transparent),
		0 0 26px 9px color-mix(in oklab, var(--primary) 35%, transparent);
}

.scs-method-card.is-passed .scs-method-icon,
.scs-method-card.is-lit .scs-method-icon {
	color: var(--primary-glow);
	background: color-mix(in oklab, var(--primary) 14%, transparent);
	filter: drop-shadow(
		0 0 10px color-mix(in oklab, var(--primary) 70%, transparent)
	);
}

.scs-method-card.is-lit {
	background: linear-gradient(
		180deg,
		color-mix(in oklab, var(--primary) 10%, transparent),
		transparent 75%
	);
}

/* Mobile */
@media (max-width: 1023px) {
	.scs-method-number {
		width: 3.4rem;
		height: 3.4rem;
	}

	.scs-method-icon {
		margin-top: 1.25rem;
	}
}/* Progression lumineuse de la frise Méthode */
.scs-method-track-line {
	position: relative;
	overflow: visible;
}

.scs-method-track-line::after {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--scs-method-progress, 0%);
	height: 2px;
	border-radius: 999px;
	background: linear-gradient(
		90deg,
		var(--primary),
		var(--primary-glow)
	);
	box-shadow:
		0 0 10px color-mix(in oklab, var(--primary) 75%, transparent),
		0 0 24px color-mix(in oklab, var(--primary-glow) 45%, transparent);
	transition: width 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

.scs-method-cursor.is-finished {
	opacity: 1;
	animation: scs-method-pulse 2.5s ease-in-out infinite;
}

@keyframes scs-method-pulse {
	0%,
	100% {
		transform: translate(-50%, -50%) scale(1);
		box-shadow:
			0 0 14px 4px color-mix(in oklab, var(--primary) 65%, transparent),
			0 0 34px 10px color-mix(in oklab, var(--primary) 28%, transparent);
	}

	50% {
		transform: translate(-50%, -50%) scale(1.18);
		box-shadow:
			0 0 18px 6px color-mix(in oklab, var(--primary) 82%, transparent),
			0 0 48px 15px color-mix(in oklab, var(--primary-glow) 38%, transparent);
	}
}

.scs-method-card.is-passed .scs-method-title,
.scs-method-card.is-lit .scs-method-title {
	color: var(--primary-glow);
}

.scs-method-card.is-passed .scs-method-title-line,
.scs-method-card.is-lit .scs-method-title-line {
	width: 3.7rem;
	background: var(--primary-glow);
	box-shadow: 0 0 15px color-mix(in oklab, var(--primary) 55%, transparent);
}

@media (prefers-reduced-motion: reduce) {
	.scs-method-cursor.is-finished {
		animation: none;
	}

	.scs-method-track-line::after {
		transition: none;
	}
}