/* Dépanne-moi11 — V19 finition mobile ciblée
   Base: V18. Ce fichier se charge en dernier et ne touche qu'au mobile. */
@media (max-width:820px){
  /* 1) Tous les petits badges/titres cyan : centrés de façon cohérente */
  html body main span.k,
  html body main span.k2,
  html body main .eyebrow,
  html body main .section-kicker,
  html body main .section-label{
    display:block!important;
    width:max-content!important;
    max-width:calc(100% - 24px)!important;
    margin:0 auto 12px!important;
    text-align:center!important;
    color:#4ceeff!important;
    opacity:1!important;
    font-weight:900!important;
    line-height:1.15!important;
    letter-spacing:.08em!important;
    box-sizing:border-box!important;
  }

  /* 2) Section Pourquoi nous choisir : bloc centré et plus équilibré */
  html body.home-page main .trust,
  html body main .trust{
    grid-template-columns:1fr!important;
    gap:18px!important;
  }
  html body.home-page main .trust > div:first-child,
  html body main .trust > div:first-child{
    text-align:center!important;
    width:100%!important;
    max-width:650px!important;
    margin:0 auto!important;
  }
  html body.home-page main .trust > div:first-child h2,
  html body main .trust > div:first-child h2{
    margin:0 auto 14px!important;
    max-width:620px!important;
    text-align:center!important;
    color:#fff!important;
    opacity:1!important;
    line-height:1.12!important;
  }
  html body.home-page main .trust > div:first-child p,
  html body main .trust > div:first-child p{
    margin:0 auto 18px!important;
    max-width:590px!important;
    text-align:center!important;
    color:#dcecff!important;
    opacity:1!important;
    line-height:1.55!important;
  }
  html body.home-page main .trust .actions,
  html body main .trust .actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    width:100%!important;
    max-width:520px!important;
    margin:0 auto!important;
  }
  html body.home-page main .trust .actions .btn,
  html body main .trust .actions .btn{
    width:100%!important;
    min-height:54px!important;
    justify-content:center!important;
    text-align:center!important;
    color:#fff!important;
    border-color:rgba(76,238,255,.28)!important;
    box-sizing:border-box!important;
  }

  /* 3) Accès rapide : plus aucun débordement latéral */
  html body main .dm11-mobile-problem-card{
    overflow:hidden!important;
    box-sizing:border-box!important;
  }
  html body main .dm11-mobile-problem-head{
    display:grid!important;
    grid-template-columns:1fr 46px!important;
    align-items:start!important;
    gap:10px!important;
    width:100%!important;
  }
  html body main .dm11-mobile-problem-head > div:first-child{
    min-width:0!important;
    padding-left:46px!important; /* compense l'icône à droite pour un vrai centrage visuel */
    box-sizing:border-box!important;
  }
  html body main .dm11-mobile-problem-head h2{
    max-width:100%!important;
    font-size:clamp(25px,7vw,32px)!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }
  html body main .dm11-mini-shield{
    width:46px!important;
    height:46px!important;
    flex:none!important;
    justify-self:end!important;
  }
  html body main .dm11-problem-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:10px!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }
  html body main .dm11-problem-item{
    display:grid!important;
    grid-template-columns:42px minmax(0,1fr)!important;
    align-items:center!important;
    column-gap:10px!important;
    width:auto!important;
    max-width:100%!important;
    min-width:0!important;
    min-height:96px!important;
    padding:12px!important;
    margin:0!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
  }
  html body main .dm11-problem-icon{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    flex:none!important;
    margin:0!important;
  }
  html body main .dm11-problem-item > div:last-child{
    min-width:0!important;
    max-width:100%!important;
  }
  html body main .dm11-problem-item strong{
    display:block!important;
    font-size:15.5px!important;
    line-height:1.15!important;
    overflow-wrap:break-word!important;
  }
  html body main .dm11-problem-item span{
    display:block!important;
    margin-top:3px!important;
    font-size:12.5px!important;
    line-height:1.25!important;
    overflow-wrap:break-word!important;
  }
  html body main .dm11-problem-other{
    width:100%!important;
    max-width:100%!important;
    box-sizing:border-box!important;
    gap:10px!important;
  }
  html body main .dm11-client-trust-strip{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    width:100%!important;
    max-width:100%!important;
    gap:8px!important;
    box-sizing:border-box!important;
  }
  html body main .dm11-client-trust-strip span{
    min-width:0!important;
    width:100%!important;
    box-sizing:border-box!important;
    overflow-wrap:break-word!important;
    text-align:center!important;
  }

  /* 4) Titres de sections principaux : centrage homogène quand un badge les précède */
  html body main .container.title,
  html body main .section-heading,
  html body main .svc-title,
  html body main .tp-title,
  html body main .pack-head{
    text-align:center!important;
  }
  html body main .container.title > h2,
  html body main .section-heading > h2,
  html body main .svc-title > h2,
  html body main .tp-title > h2,
  html body main .pack-head > h2{
    margin-left:auto!important;
    margin-right:auto!important;
    text-align:center!important;
  }

  /* 5) Empêche toute section de pousser la page hors écran */
  html body main,
  html body main section,
  html body main .container{
    max-width:100%!important;
    box-sizing:border-box!important;
  }
}

@media (max-width:430px){
  html body main .dm11-mobile-problem-head > div:first-child{
    padding-left:42px!important;
  }
  html body main .dm11-problem-item{
    grid-template-columns:38px minmax(0,1fr)!important;
    column-gap:9px!important;
    padding:11px 10px!important;
  }
  html body main .dm11-problem-icon{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
  }
  html body main .dm11-problem-item strong{font-size:14.5px!important}
  html body main .dm11-problem-item span{font-size:12px!important}
}