/* Dépanne-moi11 — V26 : cartes Accès rapide plus présentables sur mobile
   Objectif : plus aucun texte coupé sur PC lent / Imprimante / Internet-Wi‑Fi */

@media (max-width:820px){
  html body main .dm11-mobile-problem-card{
    overflow:hidden !important;
  }

  html body main .dm11-problem-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px !important;
  }

  /* On passe les cartes en colonne pour récupérer toute la largeur texte. */
  html body main .dm11-problem-item{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
    gap:10px !important;
    min-width:0 !important;
    width:100% !important;
    min-height:148px !important;
    padding:14px 12px !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }

  html body main .dm11-problem-icon{
    width:58px !important;
    height:58px !important;
    min-width:58px !important;
    min-height:58px !important;
    margin:0 !important;
    padding:0 !important;
    display:grid !important;
    place-items:center !important;
    align-self:flex-start !important;
    justify-self:auto !important;
    border-radius:16px !important;
  }

  html body main .dm11-problem-icon i,
  html body main .dm11-problem-icon svg{
    margin:0 !important;
    padding:0 !important;
    transform:none !important;
    font-size:28px !important;
    line-height:1 !important;
  }

  html body main .dm11-problem-item > div:last-child,
  html body main .dm11-problem-item > span:last-child{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    overflow:visible !important;
  }

  html body main .dm11-problem-item strong,
  html body main .dm11-problem-item b{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 0 6px !important;
    font-size:14px !important;
    line-height:1.18 !important;
    font-weight:800 !important;
    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:break-word !important;
    hyphens:none !important;
    text-wrap:balance !important;
  }

  html body main .dm11-problem-item small,
  html body main .dm11-problem-item span{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    font-size:12px !important;
    line-height:1.28 !important;
    color:#d8e4f2 !important;
    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:break-word !important;
    hyphens:none !important;
  }
}

@media (max-width:390px){
  html body main .dm11-problem-grid{
    gap:10px !important;
  }

  html body main .dm11-problem-item{
    min-height:142px !important;
    padding:12px 10px !important;
  }

  html body main .dm11-problem-icon{
    width:54px !important;
    height:54px !important;
    min-width:54px !important;
    min-height:54px !important;
  }

  html body main .dm11-problem-icon i,
  html body main .dm11-problem-icon svg{
    font-size:26px !important;
  }

  html body main .dm11-problem-item strong,
  html body main .dm11-problem-item b{
    font-size:13.5px !important;
  }

  html body main .dm11-problem-item small,
  html body main .dm11-problem-item span{
    font-size:11.6px !important;
  }
}