/* Dépanne-moi11 — V24
   Correctifs ciblés mobile :
   1) footer accordéon qui gardait une hauteur géante une fois refermé
   2) mots coupés dans le bloc Accès rapide (Imprimante, Démarrage, etc.)
   Aucun changement desktop. */

@media (max-width:820px){
  /* =====================================================
     ACCÈS RAPIDE — garde le design, corrige la typographie
     ===================================================== */
  html body main .dm11-mobile-problem-card{
    overflow:hidden!important;
    box-sizing:border-box!important;
  }

  html body main .dm11-problem-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }

  html body main .dm11-problem-item{
    display:grid!important;
    grid-template-columns:54px minmax(0,1fr)!important;
    align-items:center!important;
    column-gap:8px!important;
    min-width:0!important;
    max-width:100%!important;
    min-height:106px!important;
    padding:12px 10px!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
  }

  html body main .dm11-problem-icon{
    width:54px!important;
    height:54px!important;
    min-width:54px!important;
    margin:0!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    place-items:center!important;
    align-self:center!important;
    justify-self:center!important;
  }

  html body main .dm11-problem-item > div:last-child{
    min-width:0!important;
    width:100%!important;
    max-width:100%!important;
  }

  html body main .dm11-problem-item strong{
    display:block!important;
    width:100%!important;
    margin:0!important;
    font-size:clamp(14px,3.9vw,16px)!important;
    line-height:1.15!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
    hyphens:none!important;
  }

  html body main .dm11-problem-item span{
    display:block!important;
    width:100%!important;
    margin-top:3px!important;
    font-size:clamp(11.5px,3.25vw,13px)!important;
    line-height:1.25!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
    hyphens:none!important;
  }

  /* =====================================================
     FOOTER — les blocs fermés redeviennent réellement petits
     ===================================================== */
  html body footer.pro-footer .pro-footer-grid,
  html body .footer.pro-footer .pro-footer-grid{
    grid-template-columns:1fr!important;
    grid-auto-rows:auto!important;
    align-items:start!important;
    align-content:start!important;
    gap:14px!important;
  }

  html body footer.pro-footer details.footer-section,
  html body .footer.pro-footer details.footer-section{
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    align-self:start!important;
    padding:18px 16px!important;
    margin:0!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }

  html body footer.pro-footer details.footer-section > summary,
  html body .footer.pro-footer details.footer-section > summary{
    min-height:38px!important;
    margin:0!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:12px!important;
    cursor:pointer!important;
    pointer-events:auto!important;
    user-select:none!important;
    list-style:none!important;
  }

  html body footer.pro-footer details.footer-section > summary::-webkit-details-marker,
  html body .footer.pro-footer details.footer-section > summary::-webkit-details-marker{
    display:none!important;
  }

  /* Le + / − est géré ici pour qu'il corresponde toujours au vrai état */
  html body footer.pro-footer details.footer-section > summary::after,
  html body .footer.pro-footer details.footer-section > summary::after{
    content:'+'!important;
    display:block!important;
    flex:0 0 auto!important;
    color:#2587ff!important;
    font-size:34px!important;
    line-height:1!important;
    font-weight:900!important;
  }

  html body footer.pro-footer details.footer-section[open] > summary::after,
  html body .footer.pro-footer details.footer-section[open] > summary::after{
    content:'−'!important;
  }

  html body footer.pro-footer details.footer-section:not([open]) > *:not(summary),
  html body .footer.pro-footer details.footer-section:not([open]) > *:not(summary){
    display:none!important;
  }

  html body footer.pro-footer details.footer-section[open] > ul,
  html body .footer.pro-footer details.footer-section[open] > ul{
    display:grid!important;
    margin:14px 0 0!important;
    padding:0!important;
  }

  /* Empêche un ancien min-height:100% de revenir sur les cartes fermées */
  html body footer.pro-footer details.footer-section:not([open]),
  html body .footer.pro-footer details.footer-section:not([open]){
    min-height:74px!important;
    height:74px!important;
    max-height:74px!important;
  }

  html body footer.pro-footer details.footer-section[open],
  html body .footer.pro-footer details.footer-section[open]{
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
  }
}

/* iPhone / petits Android : donne quelques pixels de plus aux mots */
@media (max-width:430px){
  html body main .dm11-problem-item{
    grid-template-columns:50px minmax(0,1fr)!important;
    column-gap:7px!important;
    padding:11px 8px!important;
  }
  html body main .dm11-problem-icon{
    width:50px!important;
    height:50px!important;
    min-width:50px!important;
  }
  html body main .dm11-problem-item strong{
    font-size:14px!important;
  }
  html body main .dm11-problem-item span{
    font-size:11.5px!important;
  }
}