.page{ --page-w: 1080px; }

.page__meta{
  max-width: 680px;
  line-height: 1.4;
}

.challenge{
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.challengeBtn{
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid rgba(219,219,219,.16);
  background: rgba(12,15,16,.55);
  color: rgba(219,219,219,.88);
  font-family: "LazyDog", system-ui, sans-serif;
  letter-spacing: .05em;
  font-size: 13px;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, box-shadow .15s ease, background .15s ease;
}
.challengeBtn:hover{ border-color: rgba(255,190,90,.45); }
.challengeBtn--primary{
  background: rgba(61,206,97,.14);
  border-color: rgba(61,206,97,.50);
  color: var(--green);
}
.challengeBtn--primary:hover{
  border-color: rgba(61,206,97,.75);
  box-shadow: 0 0 0 1px rgba(61,206,97,.16);
}

/* =========================
   FILTRES DE CATEGORIES
========================= */
.challengeFilters{
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(219,219,219,.12);
  background: rgba(12,15,16,.40);
}
.challengeFilters__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11px;
  letter-spacing: .06em;
  color: rgba(219,219,219,.60);
}
.challengeFilters__toggle{ display: flex; gap: 6px; }
.challengeFilters__toggle button{
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(219,219,219,.16);
  background: rgba(255,255,255,.03);
  color: rgba(219,219,219,.75);
  font-family: inherit;
  font-size: 9px;
  letter-spacing: .04em;
  cursor: pointer;
}
.challengeFilters__toggle button:hover{ border-color: rgba(255,190,90,.45); }

.challengeFilters__grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
}
.challengeFilterPill{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid rgba(219,219,219,.14);
  background: rgba(255,255,255,.03);
  font-size: 11px;
  color: rgba(219,219,219,.80);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.challengeFilterPill:hover{ border-color: var(--pill-color, rgba(255,190,90,.45)); }
.challengeFilterPill input{ accent-color: var(--pill-color, var(--green)); width: 15px; height: 15px; flex: none; }
.challengeFilterPill__dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--pill-color, var(--green));
  flex: none;
}

.challengeProgress{
  margin: 0;
  text-align: center;
  font-size: 11px;
  letter-spacing: .05em;
  color: rgba(219,219,219,.50);
}

/* =========================
   PLATEAU (3 defis : principal / equipe / bonus)
========================= */
.challengeBoard{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 760px;
  margin: 0 auto;
}
.challengeBoard[hidden]{ display: none; }

.challengeCard{
  --card-accent: #b3000c;
  position: relative;
  display: grid;
  gap: 12px;
  padding: 20px;
  padding-top: 34px;
  border-radius: 16px;
  border: 2px solid color-mix(in srgb, var(--card-accent) 45%, rgba(219,219,219,.16));
  background: linear-gradient(155deg, rgba(20,14,26,.75), rgba(10,8,12,.85));
  box-shadow: 0 18px 44px rgba(0,0,0,.35);
  cursor: pointer;
  text-align: center;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease, opacity .2s ease;
}
.challengeCard:hover{
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--card-accent) 75%, rgba(219,219,219,.16));
  box-shadow: 0 22px 54px rgba(0,0,0,.45), 0 0 0 1px color-mix(in srgb, var(--card-accent) 35%, transparent);
}

.challengeCard__role{
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  color: rgba(219,219,219,.65);
  white-space: nowrap;
}

.challengeCard__badge{
  --pill-color: #b3000c;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--pill-color);
  background: color-mix(in srgb, var(--pill-color) 18%, transparent);
  color: var(--pill-color);
  font-size: 11px;
  letter-spacing: .06em;
  white-space: nowrap;
}

.challengeCard__imgWrap{
  position: relative;
  aspect-ratio: 4 / 3;
  width: 100%;
  max-width: 120px;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(219,219,219,.10);
}
.challengeCard__img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
}

.challengeCard__word{
  margin: 0;
  font-family: "LazyDog", system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.25;
  color: rgba(219,219,219,.95);
}

.challengeCard__desc{
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  letter-spacing: .01em;
  color: rgba(219,219,219,.65);
}

.challengeCard__check{
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--green);
  color: #0c0f10;
  font-size: 13px;
  font-weight: 700;
  opacity: 0;
  transform: scale(.5);
  transition: opacity .2s ease, transform .2s ease;
}

.challengeCard.is-completed{
  border-color: rgba(61,206,97,.75);
  box-shadow: 0 0 0 1px rgba(61,206,97,.25), 0 22px 54px rgba(0,0,0,.45);
}
.challengeCard.is-completed .challengeCard__check{
  opacity: 1;
  transform: scale(1);
}

.challengeCard.is-empty{
  cursor: default;
  opacity: .45;
}
.challengeCard.is-empty:hover{ transform: none; box-shadow: 0 18px 44px rgba(0,0,0,.35); }
.challengeCard.is-empty .challengeCard__img{ opacity: .5; filter: grayscale(1); }

/* particules decoratives quand un defi est marque reussi */
.challengeParticle{
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: rgba(61,206,97,.65);
  animation: challengeParticleFloat 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes challengeParticleFloat{
  0%, 100%{ transform: translate(0,0); opacity: .2; }
  50%{ transform: translate(var(--dx,20px), var(--dy,-20px)); opacity: .8; }
}

.challengeEmpty{
  margin: 0;
  text-align: center;
  padding: 30px 16px;
  border-radius: 14px;
  border: 1px dashed rgba(219,219,219,.20);
  color: rgba(219,219,219,.55);
  font-size: 12px;
  letter-spacing: .03em;
}

.challengeHint{
  margin: 0;
  text-align: center;
  font-size: 10.5px;
  letter-spacing: .02em;
  color: rgba(219,219,219,.45);
}

.challengeActions{
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 820px){
  .challengeBoard{ grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce){
  .challengeCard{ transition: none; }
  .challengeParticle{ animation: none; opacity: .4; }
}