/* Dépanne-moi11 — V20 mobile : finition icônes + performance
   Ciblé uniquement mobile, sans modifier la structure visuelle. */
@media (max-width:820px){
  /* Icônes Accès rapide plus grandes et plus nettes */
  html body main .dm11-problem-item{
    grid-template-columns:52px minmax(0,1fr)!important;
    column-gap:10px!important;
    min-height:104px!important;
  }
  html body main .dm11-problem-icon{
    width:52px!important;
    height:52px!important;
    min-width:52px!important;
    border-radius:15px!important;
    display:grid!important;
    place-items:center!important;
    box-shadow:0 0 18px rgba(24,220,255,.16),inset 0 1px 0 rgba(255,255,255,.06)!important;
  }
  html body main .dm11-problem-icon i,
  html body main .dm11-problem-icon svg{
    font-size:22px!important;
    width:22px!important;
    height:22px!important;
  }
  html body main .dm11-mini-shield{
    width:54px!important;
    height:54px!important;
    flex-basis:54px!important;
  }
  html body main .dm11-mini-shield i{font-size:23px!important}
  html body main .dm11-problem-item strong{
    overflow-wrap:normal!important;
    word-break:normal!important;
    hyphens:none!important;
  }

  /* Même rendu du hero, avec une image mobile plus légère */
  html body.home-page .hero{
    background-image:
      linear-gradient(90deg,rgba(2,11,28,.94) 0%,rgba(2,12,30,.83) 24%,rgba(2,12,30,.28) 52%,rgba(2,12,30,.23) 100%),
      linear-gradient(180deg,rgba(1,7,20,.04) 0%,rgba(2,12,30,.08) 64%,rgba(2,12,30,.74) 100%),
      url("fond-accueil-mobile-v20.webp")!important;
  }
  html body.home-page .dm17-van-scene{
    background-image:url("fond-accueil-mobile-v20.webp")!important;
  }

  /* Rend le bas de page moins coûteux à calculer tant qu'il est hors écran */
  html body.home-page main > section:nth-of-type(n+6){
    content-visibility:auto;
    contain-intrinsic-size:auto 760px;
  }
}


/* Dépanne-moi11 — V21 mobile : pictogrammes centrés + fluidité */
@media (max-width:820px){
  /* Accès rapide : centrage réel du pictogramme Font Awesome */
  html body main .dm11-problem-icon{
    width:54px!important;
    height:54px!important;
    min-width:54px!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    place-items:center!important;
    overflow:hidden!important;
    text-align:center!important;
  }
  html body main .dm11-problem-icon i,
  html body main .dm11-problem-icon svg{
    position:static!important;
    inset:auto!important;
    top:auto!important;
    right:auto!important;
    bottom:auto!important;
    left:auto!important;
    transform:none!important;
    translate:none!important;
    margin:0!important;
    padding:0!important;
    width:auto!important;
    height:auto!important;
    min-width:0!important;
    flex:0 0 auto!important;
    display:block!important;
    font-size:27px!important;
    line-height:1!important;
    text-align:center!important;
    vertical-align:middle!important;
  }
  html body main .dm11-problem-icon i::before{
    display:block!important;
    width:auto!important;
    line-height:1!important;
    margin:0!important;
  }

  /* La vidéo n'est pas utile sur téléphone et coûte CPU/GPU/réseau. */
  html body.home-page .home-showcase-video-wrap{
    display:none!important;
  }
  html body.home-page .home-showcase-grid{
    grid-template-columns:1fr!important;
  }

  /* Réduction des effets GPU coûteux sans changer les couleurs/cartes. */
  html body.home-page .home-showcase-video-wrap,
  html body.home-page .dm11-problem-card,
  html body.home-page .dm11-problem-item,
  html body.home-page .quick-card,
  html body.home-page .service-card,
  html body.home-page .detail-service-card,
  html body.home-page .review{
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }

  /* Les sections loin sous l'écran ne sont calculées qu'à l'approche. */
  html body.home-page main > section:nth-of-type(n+4){
    content-visibility:auto;
    contain-intrinsic-size:auto 720px;
  }

  /* Le widget externe Tawk ne doit jamais occuper de ressources visuelles mobile. */
  iframe[src*="tawk"], iframe[src*="embed.tawk"],
  [id*="tawk"], [class*="tawk-"]{
    display:none!important;
    visibility:hidden!important;
  }
}


/* V22 : camionnette plus visible sur mobile, sans recharger la page */
@media (max-width:820px){
  /* Le hero garde sa fluidité, mais montre mieux l'image de fond */
  html body.home-page .hero{
    background-image:
      linear-gradient(90deg,rgba(2,11,28,.90) 0%,rgba(2,12,30,.76) 24%,rgba(2,12,30,.24) 56%,rgba(2,12,30,.16) 100%),
      linear-gradient(180deg,rgba(1,7,20,.02) 0%,rgba(2,12,30,.08) 62%,rgba(2,12,30,.70) 100%),
      url("fond-accueil-mobile-v20.webp")!important;
    background-position:0 0,0 0,66% 12%!important;
    background-size:auto,auto,cover!important;
  }

  /* Carte camionnette : plus lisible et mieux cadrée */
  html body.home-page .dm17-van-scene{
    display:block!important;
    width:100%!important;
    height:196px!important;
    margin:14px 0 12px!important;
    border-radius:24px!important;
    background:
      linear-gradient(180deg,rgba(1,13,31,.05),rgba(1,13,31,.14)),
      url("fond-accueil-depannemoi11.webp") 58% 52%/cover no-repeat!important;
    border:1px solid rgba(82,210,255,.42)!important;
    box-shadow:0 16px 36px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.04)!important;
    position:relative!important;
    overflow:hidden!important;
  }
  html body.home-page .dm17-van-scene::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0) 24%,rgba(3,14,35,.10) 100%);
    pointer-events:none;
  }
}


/* =========================================================
   V23 — finition mobile finale : fluidité + hero + navigation
   Ciblé uniquement mobile. Aucun changement PC.
   ========================================================= */
@media (max-width:820px){
  /* Scrolling plus fluide : évite les fonds fixes et les flous GPU inutiles. */
  html,html body{background-attachment:scroll!important;scroll-behavior:auto!important}
  html body .dm17-mobile-nav,
  html body .dm17-sheet-backdrop{
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }
  html body .dm17-mobile-nav{
    background:linear-gradient(180deg,rgba(3,22,48,.995),rgba(1,13,30,1))!important;
  }

  /* Camionnette : cadrage dédié mobile, net et léger. */
  html body.home-page .dm17-van-scene{
    width:100%!important;
    height:auto!important;
    aspect-ratio:960/350!important;
    margin:14px 0 14px!important;
    border-radius:22px!important;
    background:
      linear-gradient(180deg,rgba(1,13,31,.015),rgba(1,13,31,.07)),
      url("camionnette-mobile-v23.webp") center center/cover no-repeat!important;
    border:1px solid rgba(82,210,255,.44)!important;
    box-shadow:0 14px 30px rgba(0,0,0,.25),inset 0 0 0 1px rgba(255,255,255,.035)!important;
  }
  html body.home-page .dm17-van-scene::after{
    background:linear-gradient(180deg,rgba(255,255,255,.015),transparent 27%,rgba(2,12,30,.05) 100%)!important;
  }

  /* Petites finitions tactiles sans modifier la mise en page. */
  html body a,html body button{touch-action:manipulation}
  html body .hero-actions .btn{-webkit-tap-highlight-color:transparent}
  html body .dm17-mobile-nav a,
  html body .dm17-mobile-nav button{-webkit-tap-highlight-color:transparent}

  /* Réserve l'espace du menu fixe pour que rien ne soit caché en fin de page. */
  html body.home-page main{padding-bottom:104px!important}
  html body.home-page footer.pro-footer{padding-bottom:116px!important}
}

@media (max-width:390px){
  html body.home-page .dm17-van-scene{border-radius:18px!important}
}

@media (prefers-reduced-motion:reduce){
  html body.home-page *,html body .dm17-mobile-nav *{
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}