/* Bande communauté — orange plein, CTA blanc + contour blanc. */

.tk-community {
  background: var(--tk-orange, #ee8b00);
  padding: 2.75rem 0;
}

.tk-community__title {
  font-family: var(--tk-font-heading);
  font-weight: var(--tk-font-weight-bold, 700);
  font-size: 1.75rem;
  color: var(--tk-white, #fff);
  margin: 0;
}

.tk-community__subtitle {
  color: #fff3e0;
  font-size: 0.9375rem;
  margin: 8px auto 20px;
  max-width: 560px;
}

.tk-community__ctas {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.tk-community__cta {
  font-size: 0.9375rem;
  font-weight: var(--tk-font-weight-bold, 700);
  padding: 12px 22px;
  border-radius: var(--tk-radius-md, 10px);
  text-decoration: none;
  transition: transform var(--tk-transition-fast), background-color var(--tk-transition-fast), color var(--tk-transition-fast);
}

.tk-community__cta:hover {
  transform: translateY(-1px);
}

.tk-community__cta--solid {
  background: var(--tk-white, #fff);
  color: var(--tk-orange-dark, #c26f00);
}

.tk-community__cta--solid:hover {
  color: var(--tk-orange-deep, #8f5200);
}

.tk-community__cta--outline {
  border: 1.5px solid var(--tk-white, #fff);
  color: var(--tk-white, #fff);
}

.tk-community__cta--outline:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--tk-white, #fff);
}

.tk-community__apps {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 22px;
  flex-wrap: wrap;
}

.tk-community__app-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: var(--tk-radius-md, 10px);
  color: var(--tk-white, #fff);
  text-decoration: none;
  font-size: 1.125rem;
  transition: background-color var(--tk-transition-fast);
}

.tk-community__app-badge:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--tk-white, #fff);
}

.tk-community__app-badge-text {
  display: flex;
  flex-direction: column;
  text-align: left;
  line-height: 1.2;
}

.tk-community__app-badge-label {
  font-size: 0.625rem;
  opacity: 0.85;
}

.tk-community__app-badge-name {
  font-size: 0.8125rem;
  font-weight: var(--tk-font-weight-bold, 700);
}

@media (prefers-reduced-motion: reduce) {
  .tk-community__cta,
  .tk-community__app-badge {
    transition: none;
  }
}