.deco-portail-a { background: #84cc16; border-radius: 5px; width: 46px; height: 16px; }
.deco-portail-b { background: #fb923c; border-radius: 5px; width: 46px; height: 16px; }
.deco-troupe    { background: #a3e635; }

.rules { --rules-symbole: '\00D7'; }
.rules a { color: #fdba74; }

.mode-card .mode-badge {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
}
.badge-solo         { background: rgba(163, 230, 53, 0.18); color: #bef264; }
.badge-defi         { background: rgba(251, 191, 36, 0.18); color: #fcd34d; }
.badge-action       { background: rgba(251, 146, 60, 0.18); color: #fdba74; }
.badge-entrainement { background: rgba(96, 165, 250, 0.18); color: #93c5fd; }
.badge-sansfin      { background: rgba(244, 114, 182, 0.18); color: #f9a8d4; }
.badge-tables       { background: rgba(45, 212, 191, 0.18); color: #5eead4; }

.modes-header {
  text-align: center;
  font-weight: 700;
  margin: 6px 0 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.82rem;
}
a.mode-card { text-decoration: none; display: block; }
a.mode-card h2 { margin: 6px 0 4px; }


.lien-classement-accueil { text-align: center; margin: 18px 0 26px; }
.lien-classement-accueil a {
  display: inline-block; min-height: 48px; padding: 12px 22px; border-radius: 12px;
  background: rgba(251, 191, 36, 0.12); border: 1px solid rgba(251, 191, 36, 0.4);
  color: #fcd34d; font-weight: 700; text-decoration: none;
}
.lien-classement-accueil a:hover, .lien-classement-accueil a:focus-visible { background: rgba(251, 191, 36, 0.2); }


.ops-legende { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 12px 0 16px; }
.ops-legende div { padding: 12px 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); text-align: center; font-size: 0.88rem; line-height: 1.4; }
.ops-legende strong { display: block; font-size: 1.5rem; margin-bottom: 2px; }
.ops-legende .op-fois strong { color: #a3e635; }
.ops-legende .op-plus strong { color: #38bdf8; }
.ops-legende .op-moins strong { color: #fb923c; }
.ops-legende .op-div strong { color: #f472b6; }


.guides-accueil { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 10px 0 6px; }
.guides-accueil a {
  display: block; padding: 14px 16px; border-radius: 12px; text-decoration: none;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); color: inherit; line-height: 1.5;
}
.guides-accueil a strong { display: block; color: #bef264; margin-bottom: 4px; }
.guides-accueil a:hover, .guides-accueil a:focus-visible { border-color: #a3e635; }


.faq-section { display: grid; gap: 8px; margin-top: 10px; }
.faq-item { border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; background: rgba(255, 255, 255, 0.03); overflow: hidden; }
.faq-question {
  display: block; width: 100%; min-height: 48px; padding: 12px 40px 12px 14px; position: relative;
  background: none; border: 0; color: inherit; font: inherit; font-weight: 700; text-align: left; cursor: pointer;
}
.faq-question::after { content: '+'; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 1.3rem; color: #a3e635; }
.faq-question[aria-expanded="true"]::after { content: '−'; }
.faq-question:focus-visible { outline: 2px solid #a3e635; outline-offset: -2px; }
.faq-answer { padding: 0 14px 14px; line-height: 1.6; color: #cbd5e1; }
.faq-answer[hidden] { display: none; }


.table-defilante { overflow-x: auto; margin: 10px 0 14px; }
.table-regles { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.table-regles th, .table-regles td { padding: 8px 10px; text-align: left; border-bottom: 1px solid rgba(255, 255, 255, 0.1); vertical-align: top; }
.table-regles thead th { color: #bef264; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.table-regles tbody th { white-space: nowrap; }


#app footer a { display: inline-block; padding: 6px 4px; }