/* 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;
  }
}

/* Fix page Intégrations IA : texte coupé sur mobile */
@media (max-width: 768px) {
  /* Descriptions et paragraphes */
  p, [class*=description], [class*=subtitle] {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-wrap: break-word !important;
    max-width: 100% !important;
  }
  /* Boutons : texte complet visible */
  button {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    min-width: 0 !important;
  }
  /* Cartes et panneaux */
  [class*=card], [class*=panel], [class*=section] {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }
  /* Titres */
  h1, h2, h3 {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
  }
}

/* Fix radical page Intégrations IA - texte tronqué */
@media (max-width: 768px) {
  /* Tout texte doit passer à la ligne */
  div, span, p {
    white-space: normal !important;
    word-break: break-word !important;
  }
  /* Annule tout ellipsis */
  [style*="text-overflow: ellipsis"], [style*="text-overflow:ellipsis"] {
    text-overflow: clip !important;
  }
  /* Conteneurs flex : permet le retour à la ligne */
  [class*="flex"] {
    flex-wrap: wrap !important;
  }
  /* Le bouton orange et sa zone */
  [class*="banner"], [class*="cta"], [class*="action-bar"] {
    flex-wrap: wrap !important;
    height: auto !important;
    min-height: 0 !important;
  }
  [class*="banner"] button, [class*="cta"] button {
    flex-shrink: 1 !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}