/* Dépanne-moi11 — V25 mobile stable
   But : supprimer le flash de l'ancien menu, les écrans vides au scroll,
   garder le footer accordéon compact et éviter les mots coupés.
   Aucun changement desktop. */

@media (max-width:820px){
  /* 1) Sécurité Safari / iPhone : pas de sections "virtuelles" qui deviennent vides. */
  html body.home-page main > section,
  html body.home-page .section,
  html body.home-page .dashboard,
  html body.home-page footer{
    content-visibility:visible !important;
    contain:none !important;
    contain-intrinsic-size:none !important;
  }

  /* 2) Cache immédiatement tous les anciens menus mobiles / desktop susceptibles de flasher. */
  html body .desktop-nav,
  html body .mobile-menu,
  html body .mobile-menu-btn,
  html body #mobileMenuBtn,
  html body .menu-toggle,
  html body .mobile-bottom,
  html body .mobile-bottom-nav,
  html body .dm11-mobile-nav-old,
  html body .dm11-mobile-nav,
  html body .dm12-mobile-nav,
  html body .dm13-mobile-nav,
  html body .dm14-mobile-nav,
  html body .v12-bottom-sheet,
  html body .dm13-bottom-sheet,
  html body .dm14-bottom-sheet{
    display:none !important;
    visibility:hidden !important;
  }

  /* Le menu V23 voulu reste visible. */
  html body .dm17-mobile-nav{
    display:grid !important;
    visibility:visible !important;
  }

  /* 3) Accès rapide : mots complets, icônes propres, pas de coupure lettre par lettre. */
  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:12px !important;
    width:100% !important;
    min-width:0 !important;
  }
  html body main .dm11-problem-item{
    display:grid !important;
    grid-template-columns:58px minmax(0,1fr) !important;
    align-items:center !important;
    column-gap:12px !important;
    min-width:0 !important;
    width:100% !important;
    min-height:112px !important;
    padding:13px 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;
    margin:0 !important;
    padding:0 !important;
    display:grid !important;
    place-items:center !important;
    align-self:center !important;
    justify-self:center !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:29px !important;
    line-height:1 !important;
  }
  html body main .dm11-problem-item > div:last-child{
    min-width:0 !important;
    width:100% !important;
  }
  html body main .dm11-problem-item strong,
  html body main .dm11-problem-item span{
    white-space:normal !important;
    word-break:keep-all !important;
    overflow-wrap:normal !important;
    hyphens:none !important;
  }
  html body main .dm11-problem-item strong{
    display:block !important;
    font-size:16px !important;
    line-height:1.16 !important;
    margin:0 0 4px !important;
  }
  html body main .dm11-problem-item span{
    display:block !important;
    font-size:13px !important;
    line-height:1.28 !important;
    margin:0 !important;
  }

  /* 4) Footer : fermé = compact, ouvert = hauteur du contenu uniquement. */
  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{
    align-self:start !important;
    min-height:0 !important;
    height:auto !important;
    max-height:none !important;
    margin:0 !important;
    padding:18px 16px !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }
  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{
    display:none !important;
  }
  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:not([open]) > *:not(summary){
    display:none !important;
  }
  html body footer.pro-footer details.footer-section[open]{
    min-height:0 !important;
    height:auto !important;
    max-height:none !important;
  }
  html body footer.pro-footer details.footer-section[open] > ul{
    display:grid !important;
    margin:14px 0 0 !important;
    padding:0 !important;
  }

  /* Laisse le + / − déjà géré par V18/V23, mais garantit la bonne zone tactile. */
  html body footer.pro-footer details.footer-section > summary::after{
    flex:0 0 auto !important;
  }
}

@media (max-width:430px){
  html body main .dm11-problem-item{
    grid-template-columns:54px minmax(0,1fr) !important;
    column-gap:10px !important;
    padding:12px 10px !important;
  }
  html body main .dm11-problem-icon{
    width:54px !important;
    height:54px !important;
    min-width:54px !important;
  }
  html body main .dm11-problem-icon i,
  html body main .dm11-problem-icon svg{font-size:27px !important}
  html body main .dm11-problem-item strong{font-size:15px !important}
  html body main .dm11-problem-item span{font-size:12.5px !important}
}