/* Design system Mystigrille — COMPOSANTS. N'utilise que les tokens sémantiques. */

/* ── Bouton ── */
.btn {
  font: var(--texte-bouton);
  min-height: 64px;
  padding: 0 22px;
  border: var(--trait) solid var(--couleur-trait);
  border-radius: var(--rayon-l);
  background: var(--couleur-surface);
  color: var(--couleur-texte);
  box-shadow: var(--levre-m);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espace-2);
  text-decoration: none;
  text-align: center;
}
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--couleur-trait); }
.btn:disabled { background: var(--couleur-surface-creuse); color: var(--couleur-texte-doux); cursor: default; }
.btn--action { background: var(--couleur-action); color: var(--couleur-action-texte); }
.btn--action:disabled { background: var(--couleur-surface-creuse); color: var(--couleur-texte-doux); }
.btn--grand { min-height: 76px; font-size: 26px; border-radius: 22px; box-shadow: var(--levre-l); }
.btn--outil { min-height: var(--cible-tactile); font: var(--texte-etiquette); border-radius: var(--rayon-m); box-shadow: var(--levre-s); padding: 0 10px; }
.btn--outil[aria-pressed="true"] { border: 3px solid var(--couleur-selection); box-shadow: var(--levre-selection); background: var(--couleur-selection-fond); }
.btn--large { width: 100%; }

/* ── Bouton rond (retour, écouter, aide) ── */
.btn-rond {
  flex: none;
  width: var(--cible-tactile);
  height: var(--cible-tactile);
  border-radius: 50%;
  border: var(--trait) solid var(--couleur-trait);
  background: var(--couleur-surface);
  box-shadow: var(--levre-s);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  position: relative;
}
.btn-rond:active:not(:disabled) { transform: translateY(3px); box-shadow: none; }
.btn-rond:disabled { background: var(--couleur-surface-creuse); }
.btn-rond--aide { background: var(--couleur-aide); }
.btn-rond--petit { width: 44px; height: 44px; }
.pastille-nombre {
  position: absolute; right: -5px; top: -5px;
  min-width: 22px; height: 22px; border-radius: 11px;
  border: 2px solid var(--couleur-trait);
  background: var(--couleur-action); color: var(--couleur-action-texte);
  font: 700 12px/1 var(--police-interface);
  display: flex; align-items: center; justify-content: center;
}

/* ── Carte ── */
.carte {
  background: var(--couleur-surface);
  border: var(--trait) solid var(--couleur-trait);
  border-radius: var(--rayon-l);
  box-shadow: var(--levre-m);
  padding: 10px;
}
.carte--grande { border-width: 3px; border-radius: var(--rayon-xl); box-shadow: var(--levre-l); padding: var(--espace-5); }
.carte--creuse { background: var(--couleur-surface-creuse); }
.carte--lien { display: flex; align-items: center; gap: 10px; }
.carte__corps { flex: 1; min-width: 0; text-decoration: none; }

/* ── Pastille (profil, étoiles) ── */
.pastille {
  min-height: 44px;
  border: var(--trait) solid var(--couleur-trait);
  border-radius: var(--rayon-rond);
  background: var(--couleur-surface);
  box-shadow: var(--levre-s);
  padding: 0 14px 0 8px;
  display: inline-flex; align-items: center; gap: 6px;
  font: var(--texte-bouton);
  text-decoration: none;
}

/* ── Choix (niveaux) ── */
.choix {
  min-height: 60px;
  border: var(--trait) solid var(--couleur-trait);
  border-radius: var(--rayon-l);
  background: var(--couleur-surface);
  box-shadow: var(--levre-m);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 8px 4px;
  font: var(--texte-bouton);
}
.choix[aria-pressed="true"] { border: 3px solid var(--couleur-selection); box-shadow: var(--levre-selection); background: var(--couleur-selection-fond); }
.choix small { font: var(--texte-legende); color: var(--couleur-texte-doux); }
.choix[aria-pressed="true"] small { color: var(--couleur-texte); }

/* ── Champ de saisie ── */
.champ {
  width: 100%; height: 56px;
  border: var(--trait) solid var(--couleur-trait);
  border-radius: var(--rayon-l);
  background: var(--couleur-surface);
  box-shadow: var(--levre-m);
  padding: 0 var(--espace-4);
  font: 700 22px/1 var(--police-lecture);
}

/* ── Avatar rond ── */
.avatar {
  flex: none;
  width: 52px; height: 52px;
  border-radius: 50%;
  border: var(--trait) solid var(--couleur-trait);
  overflow: hidden;
  display: flex; align-items: flex-end; justify-content: center;
  background: var(--couleur-surface);
}
.avatar img { width: 92%; }
.avatar--petit { width: 34px; height: 34px; border-width: 2px; }
.avatar--geant { width: 190px; height: 190px; border-width: 3px; box-shadow: var(--levre-l); }
.avatar--objet { align-items: center; }
.avatar--objet img { width: 76%; }

/* ── Jeton à choisir (rangée de personnages) ── */
.jeton-choix {
  position: relative;
  min-height: 76px;
  border-radius: var(--rayon-m);
  border: var(--trait) solid var(--couleur-trait);
  background: var(--couleur-surface);
  box-shadow: var(--levre-s);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 1px;
  padding: 2px 0 6px;
  font: 700 13px/1 var(--police-interface);
}
.jeton-choix img { width: 44px; height: 44px; }
.jeton-choix[aria-pressed="true"] { border: 3px solid var(--couleur-selection); box-shadow: var(--levre-selection); }
.jeton-choix--pose > img, .jeton-choix--pose > span:not(.coche) { opacity: 0.4; }
.jeton-choix--sans-nom { min-height: 60px; justify-content: center; padding: 0; }
.coche {
  position: absolute; right: -5px; top: -6px;
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--couleur-trait);
  background: var(--couleur-succes);
  display: flex; align-items: center; justify-content: center;
}

/* ── Tuile numérotée d'une enquête ── */
.tuile {
  flex: none; width: 52px; height: 52px;
  border-radius: var(--rayon-m);
  border: var(--trait) solid var(--couleur-trait);
  background: var(--couleur-aide);
  display: flex; align-items: center; justify-content: center;
  font: 700 22px/1 var(--police-interface);
}
.tuile--faite { background: var(--couleur-succes); }

/* ── Message d'encouragement ── */
.message {
  border: 2px dashed var(--couleur-texte-doux);
  border-radius: var(--rayon-m);
  background: var(--couleur-surface);
  padding: 8px 12px;
  font: 700 17px/1.3 var(--police-lecture);
}

/* ── Fête (révélation) ── */
.fete { position: relative; isolation: isolate; }
.fete::before {
  content: ""; position: absolute; z-index: -1;
  left: 50%; top: 120px; width: 720px; height: 720px; margin-left: -360px;
  border-radius: 50%;
  background: repeating-conic-gradient(var(--couleur-fete) 0 12deg, transparent 12deg 24deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 30%, transparent 100%);
}
.etoiles { display: flex; gap: 6px; justify-content: center; }