/* css/icons.css
   Rendu des icônes SVG (voir js/icons.js). Aucun emoji Unicode n'est
   affiché dans l'interface : tout passe par ces <svg>, ce qui garantit un
   rendu identique sur tous les appareils (les emoji système d'Apple,
   Android et Windows ne se ressemblent pas et jurent avec la charte).

   Taille : `1em` par défaut, donc une icône suit automatiquement la taille
   de police de son contexte — et n'importe quel écran peut la
   redimensionner par une simple règle CSS (`width`/`height`, ou en
   changeant le `font-size` du parent). */

.icon {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  display: inline-block;
  vertical-align: -0.125em; /* alignement optique sur la ligne de base du texte */
}

/* Icône insérée au fil du texte (message de chat, titre) : légèrement plus
   grande que la police environnante, comme le serait un emoji, et avec un
   petit espace pour ne pas coller aux mots. */
.icon-inline {
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.22em;
  margin: 0 0.06em;
}

/* Bouton dont le contenu est uniquement une icône : on remonte la taille,
   sinon l'icône hérite de la taille de police du bouton et paraît petite
   dans une cible tactile de 44px. */
.btn-icon .icon {
  width: 1.35em;
  height: 1.35em;
  vertical-align: middle;
}

/* ---------- Tailles utilitaires ---------- */
.icon-sm {
  width: 1.25em;
  height: 1.25em;
}

.icon-lg {
  width: 1.6em;
  height: 1.6em;
}

/* ---------- Emplacements spécifiques ---------- */

/* Sélecteur d'emoji du chat : grille d'icônes cliquables. */
.chat-emoji-picker .icon {
  width: 1.7rem;
  height: 1.7rem;
}

.chat-emoji-btn .icon,
.chat-mic-btn .icon,
.chat-send-btn .icon,
.chat-voice-play .icon,
.chat-recording-cancel .icon,
.chat-recording-send .icon {
  width: 1.2em;
  height: 1.2em;
}

/* Pastilles décoratives (cartes de jeu, onboarding, landing, écran
   d'appel) : chacune fixe déjà un `font-size` calibré pour le pictogramme
   qu'elle contient, donc la taille `1em` par défaut de `.icon` tombe juste
   sans règle supplémentaire. On ne corrige ci-dessous que les deux cas où
   la taille héritée serait trop discrète, et on garantit le centrage
   là où le conteneur ne le faisait pas déjà. */
.onboarding-step-icon .icon {
  width: 1.35em;
  height: 1.35em;
}

.games-chip .icon {
  width: 1.4em;
  height: 1.4em;
}

.group-invite-icon .icon {
  width: 1.5em;
  height: 1.5em;
}

.call-circle-placeholder,
.landing-hero-link {
  display: grid;
  place-items: center;
}

/* Phrase d'accueil du profil : l'icône accompagne la phrase, sans la
   dominer. */
.profile-summary-copy p .icon {
  width: 1.1em;
  height: 1.1em;
  margin-left: 0.15em;
}

/* Puces de règles/variantes des fiches de jeu. */
.game-variant-tag .icon {
  width: 1.05em;
  height: 1.05em;
  margin-right: 0.2em;
}