/* Fix UX mobile : les mentions ne doivent pas sortir du cadre */
@media (max-width: 768px) {
  /* Cartes de mentions */
  .mention-card, [class*="mention"], [data-mention] {
    max-width: 100% !important;
    overflow-x: hidden !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  
  /* Titres et textes longs */
  .mention-card h3, .mention-card p,
  [class*="mention"] h3, [class*="mention"] p {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    max-width: 100% !important;
  }
  
  /* Empêche le défilement horizontal */
  body, #root, [data-generated-space-root] {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  
  /* Badges et tags */
  .mention-card [class*="badge"], .mention-card [class*="tag"] {
    flex-wrap: wrap !important;
    max-width: 100% !important;
  }
  
  /* Métriques (likes, commentaires) */
  .mention-card [class*="metric"], .mention-card [class*="stat"] {
    flex-wrap: wrap !important;
    font-size: 12px !important;
  }
  
  /* Boutons d'action */
  .mention-card button {
    max-width: 100% !important;
    white-space: normal !important;
    text-align: center !important;
  }
  
  /* URLs longues */
  .mention-card a {
    word-break: break-all !important;
    overflow-wrap: break-word !important;
  }
}