/* 04 — COMPOSANTS */

/* BOUTONS */

.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) clamp(1rem, 0.7rem + 1.5vw, 1.5rem);
  min-height: 3rem;
  font-family: var(--ff-body);
  font-size: var(--fs-btn);
  white-space: nowrap;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  border: var(--line) solid transparent;
  border-radius: var(--radius-none);
  transition:
    background-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

.c-btn--primary {
  background-color: var(--c-accent-1);
  color: var(--c-on-accent);
  border-color: var(--c-accent-1);
}

.c-btn--primary:hover,
.c-btn--primary:focus-visible {
  background-color: var(--c-bg-2);
  border-color: var(--c-bg-2);
  color: var(--c-on-accent);
}

.c-btn--ghost {
  background-color: transparent;
  color: var(--c-text);
  border-color: var(--c-border-hi);
}

.c-btn--ghost:hover,
.c-btn--ghost:focus-visible {
  border-color: var(--c-accent-1);
  color: var(--c-accent-1);
}

.c-btn--dark {
  background-color: var(--c-bg-1);
  color: var(--c-text);
  border-color: var(--c-bg-1);
}

.c-btn--dark:hover,
.c-btn--dark:focus-visible {
  background-color: transparent;
  color: var(--c-bg-1);
  border-color: var(--c-bg-1);
}

.c-btn__label--long {
  display: none;
}

.c-btn__label--short {
  display: inline;
}

@media (min-width: 768px) {
  .c-btn__label--long {
    display: inline;
  }

  .c-btn__label--short {
    display: none;
  }
}

.c-btn__arrow {
  display: inline-block;
  transition: transform var(--dur-base) var(--ease-out);
}

.c-btn:hover .c-btn__arrow {
  transform: translateY(2px);
}

/* TAG — « FIGMA », « Design system » */

.c-tag {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  border: var(--line) solid var(--c-border-hi);
  font-family: var(--ff-body);
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--c-text);
  background-color: transparent;
  transition:
    border-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out);
}

.c-tag--mono {
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.c-tag--filled {
  background-color: var(--c-bg-2-10);
  border-color: transparent;
}

.c-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0;
  margin: 0;
  list-style: none;
}

/* CADRE À COINS — repères de cadrage lime (barre stats) */

.c-frame {
  position: relative;
}

.c-frame::before,
.c-frame::after,
.c-frame>.c-frame__corners::before,
.c-frame>.c-frame__corners::after {
  content: "";
  position: absolute;
  width: var(--space-6);
  height: var(--space-6);
  border: var(--line-thick) solid var(--c-accent-2);
  pointer-events: none;
}

.c-frame::before {
  top: 0;
  left: 0;
  border-right: 0;
  border-bottom: 0;
}

.c-frame::after {
  top: 0;
  right: 0;
  border-left: 0;
  border-bottom: 0;
}

.c-frame>.c-frame__corners::before {
  bottom: 0;
  left: 0;
  border-right: 0;
  border-top: 0;
}

.c-frame>.c-frame__corners::after {
  bottom: 0;
  right: 0;
  border-left: 0;
  border-top: 0;
}

/* PASTILLE LIVE / REC */

.c-dot {
  display: inline-block;
  width: var(--space-2);
  height: var(--space-2);
  border-radius: 50%;
  background-color: currentColor;
  flex: 0 0 auto;
}

.c-dot--blink {
  animation: tlc-blink 1.6s steps(1, end) infinite;
}

@keyframes tlc-blink {

  0%,
  55% {
    opacity: 1;
  }

  56%,
  100% {
    opacity: 0.25;
  }
}