/* TeamKit — page « TeamKit sur mon Discord » v1.0.0 (6 oct. 2026). Préfixe md-.
   Le guide en deux questions, puis les trois options ; la réponse du guide allume la ou les bonnes cartes. */
.md-chapeau { max-width: 62ch; margin-left: auto; margin-right: auto; }
.md-guide-sec { padding-bottom: 0; }

/* ── Le guide ── */
.md-guide { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.4rem;
  background: linear-gradient(135deg, rgba(0,240,255,.06), rgba(123,44,191,.12)); border: 1px solid var(--border-color);
  border-radius: 18px; padding: 1.6rem 1.8rem; }
.md-q { display: flex; flex-direction: column; gap: .8rem; }
.md-q[hidden], .md-reponse[hidden] { display: none; }
.md-q-titre { display: flex; align-items: center; gap: .7rem; margin: 0; font-family: var(--font-body); font-size: 1.3rem; font-weight: 700;
  text-transform: none; letter-spacing: 0; color: var(--text-primary); }
.md-num { flex: none; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--accent-primary);
  color: #0b0d14; font-family: var(--font-display); font-size: .95rem; }
.md-choix { display: flex; flex-wrap: wrap; gap: .6rem; padding-left: 2.7rem; }
.md-choix button { font: inherit; font-weight: 700; font-size: 1.05rem; color: var(--text-primary); cursor: pointer;
  background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: .65rem 1.3rem; min-height: 44px;
  transition: border-color .15s, background .15s; }
.md-choix button:hover { border-color: var(--accent-primary); }
.md-choix button:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
.md-choix button[aria-pressed="true"] { border-color: var(--accent-primary); background: rgba(0,240,255,.12); color: var(--accent-primary); }

.md-reponse { display: flex; flex-direction: column; gap: .7rem; border: 1px solid rgba(0,255,136,.45); background: rgba(0,255,136,.06);
  border-radius: 14px; padding: 1.1rem 1.3rem; animation: md-in .25s ease; }
.md-reponse h3 { margin: 0; font-family: var(--font-display); font-size: 1rem; letter-spacing: .03em; color: var(--accent-success); }
.md-reponse p { margin: 0; color: var(--text-secondary); line-height: 1.55; }
.md-reponse .md-actions { margin-top: .2rem; }
.md-refaire { align-self: flex-start; background: none; border: 0; padding: 0; color: var(--text-muted); font: inherit; font-size: .9rem;
  text-decoration: underline; cursor: pointer; }
.md-refaire:hover { color: var(--text-primary); }
@keyframes md-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── Les trois options ── */
.md-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; align-items: stretch; }
.md-option { display: flex; flex-direction: column; gap: .7rem; min-width: 0; background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: 16px; padding: 1.4rem; transition: border-color .2s, box-shadow .2s, opacity .2s; scroll-margin-top: 100px; }
.md-option h3 { margin: 0; font-family: var(--font-display); font-size: 1.05rem; letter-spacing: .02em; color: var(--text-primary); }
.md-ico { font-size: 2.2rem; line-height: 1; }
.md-pour { margin: 0; color: var(--accent-primary); font-weight: 700; }
.md-option ul { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: .45rem; color: var(--text-secondary); line-height: 1.5; flex: 1; }
.md-option ul b { color: var(--text-primary); }
.md-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.md-actions .btn { white-space: normal; text-align: center; }
/* Allumée par le guide ; les autres s'effacent un peu, sans disparaître */
.md-options.is-choisi .md-option { opacity: .6; }
.md-options.is-choisi .md-option.is-mise { opacity: 1; border-color: var(--accent-success); box-shadow: 0 0 0 1px rgba(0,255,136,.35), 0 12px 36px rgba(0,255,136,.08); }
.md-badge { display: none; align-self: flex-start; font-size: .78rem; font-weight: 700; color: #06140d; background: var(--accent-success);
  border-radius: 99px; padding: 2px 10px; }
.md-option.is-mise .md-badge { display: inline-block; }

@media (max-width: 980px) {
  .md-options { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .md-guide { padding: 1.2rem 1rem; border-radius: 14px; }
  .md-q-titre { font-size: 1.12rem; align-items: flex-start; }
  .md-choix { padding-left: 0; }
  .md-choix button { flex: 1 1 auto; }
  .md-actions .btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .md-reponse { animation: none; } .md-option { transition: none; } }