/* PASS12 — document mobile unique + ordre visuel identique au modèle desktop.
   Ce fichier est chargé après les thèmes Classic/SaaS afin de neutraliser
   les anciennes règles desktop qui pouvaient survivre dans une page imbriquée.
   Sur mobile, l’ordre source est conservé : colonne Poule Pack, puis tunnel. */

.pps-checkout.pps-modern-v2,
.pps-checkout.pps-modern-v2 *,
.pps-checkout.pps-modern-v2 *::before,
.pps-checkout.pps-modern-v2 *::after{
  box-sizing:border-box;
}

body.pps-standalone-front-simulator-document,
body.pps-standalone-simulator-document,
body.pps-regional-single-simulator-document{
  width:100%;
  max-width:100%;
  overflow-x:hidden!important;
}

.pps-front-simulator-standalone-root,
.pps-simulator-standalone-root,
.pps-regional-single-simulator-root{
  width:100%!important;
  max-width:none!important;
  overflow-x:hidden!important;
}

.pps-front-simulator-standalone-root > .pps-checkout,
.pps-simulator-standalone-root > .pps-checkout,
.pps-regional-single-simulator-root > .pps-checkout{
  width:min(1500px,100%)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* max-device-width est conservé comme garde de sécurité pour les anciennes
   pages/iframes qui imposaient artificiellement un viewport desktop. */
@media (max-width:980px), (max-device-width:980px){
  .pps-front-simulator-standalone-root,
  .pps-simulator-standalone-root,
  .pps-regional-single-simulator-root{
    padding:0!important;
  }

  .pps-checkout.pps-modern-v2{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    border-left:0!important;
    border-right:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    overflow:hidden!important;
  }

  .pps-checkout.pps-modern-v2 > .pps-plugin-main-title{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:18px 14px!important;
    font-size:clamp(22px,6.4vw,32px)!important;
    line-height:1.14!important;
    letter-spacing:-.025em!important;
    text-wrap:balance;
  }

  .pps-checkout.pps-modern-v2 > .pps-modern-shell{
    display:flex!important;
    flex-direction:column!important;
    grid-template-columns:none!important;
    min-height:0!important;
    width:100%!important;
    background:#f8fafc!important;
  }

  .pps-checkout.pps-modern-v2 .pps-modern-main{
    order:2!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    padding:14px!important;
  }

  /* Même ordre que le modèle desktop : la colonne Poule Pack reste avant le tunnel. */
  .pps-checkout.pps-modern-v2:not(.is-checkout-step) .pps-modern-sidebar{
    order:1!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    width:100%!important;
    min-width:0!important;
    gap:14px!important;
    padding:20px 14px!important;
    border-radius:0!important;
  }
  .pps-checkout.pps-modern-v2.is-checkout-step .pps-modern-sidebar{
    display:none!important;
  }

  .pps-checkout.pps-modern-v2 .pps-modern-sidebar > *{
    min-width:0!important;
    grid-column:1!important;
  }
  .pps-checkout.pps-modern-v2 .pps-brand-block{
    margin:0!important;
  }
  .pps-checkout.pps-modern-v2 .pps-brand-logo{
    width:54px!important;
    height:54px!important;
    font-size:31px!important;
  }
  .pps-checkout.pps-modern-v2 .pps-brand-block strong{
    font-size:25px!important;
  }
  .pps-checkout.pps-modern-v2 .pps-sidebar-client-actions-buttons{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
  }
  .pps-checkout.pps-modern-v2 .pps-sidebar-client-actions .pps-front-login-open{order:1!important;}
  .pps-checkout.pps-modern-v2 .pps-sidebar-review-submit-button{order:2!important;}
  .pps-checkout.pps-modern-v2 .pps-sidebar-card,
  .pps-checkout.pps-modern-v2 .pps-sidebar-client-actions,
  .pps-checkout.pps-modern-v2 .pps-sidebar-top-reviews > *{
    width:100%!important;
    min-width:0!important;
    margin:0!important;
  }
  .pps-checkout.pps-modern-v2 .pps-seed-mix-2026-card,
  .pps-checkout.pps-modern-v2 .pps-seed-mix-2026-card p{
    font-size:max(15px,var(--pps-seed-mix-font-size,15px))!important;
    line-height:1.55!important;
  }

  .pps-checkout.pps-modern-v2 .pps-modern-footer{
    grid-template-columns:1fr!important;
    gap:18px!important;
  }
}

@media (max-width:620px), (max-device-width:620px){
  .pps-checkout.pps-modern-v2 .pps-modern-main{
    padding:10px!important;
  }

  /* Progression compacte et lisible sur 360/390/430 px. */
  .pps-checkout.pps-modern-v2 .pps-modern-steps{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;
    width:100%!important;
    min-height:0!important;
    margin:0 0 12px!important;
    padding:7px!important;
    border-radius:14px!important;
  }
  .pps-checkout.pps-modern-v2 .pps-modern-steps span{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    min-width:0!important;
    min-height:58px!important;
    gap:4px!important;
    padding:7px 3px!important;
    border-radius:11px!important;
    text-align:center!important;
  }
  .pps-checkout.pps-modern-v2 .pps-modern-steps span:not(:last-child)::after{
    display:none!important;
  }
  .pps-checkout.pps-modern-v2 .pps-modern-steps b{
    width:27px!important;
    height:27px!important;
    min-width:27px!important;
    flex:0 0 27px!important;
    font-size:12px!important;
  }
  .pps-checkout.pps-modern-v2 .pps-modern-steps strong{
    max-width:100%!important;
    font-size:11.5px!important;
    line-height:1.15!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }

  .pps-checkout.pps-modern-v2 .pps-head,
  .pps-checkout.pps-modern-v2 .pps-panel,
  .pps-checkout.pps-modern-v2 .pps-order-zone,
  .pps-checkout.pps-modern-v2 .pps-checkout-step{
    width:100%!important;
    min-width:0!important;
    padding:14px!important;
    border-radius:13px!important;
  }

  .pps-checkout.pps-modern-v2 .pps-promo-inline{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:8px!important;
    width:100%!important;
    padding:10px!important;
  }
  .pps-checkout.pps-modern-v2 .pps-promo-inline label,
  .pps-checkout.pps-modern-v2 .pps-promo-message{
    grid-column:1 / -1!important;
    width:100%!important;
    text-align:left!important;
  }
  .pps-checkout.pps-modern-v2 .pps-promo-code{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:44px!important;
  }
  .pps-checkout.pps-modern-v2 .pps-promo-apply{
    min-height:44px!important;
    padding-left:12px!important;
    padding-right:12px!important;
    white-space:nowrap!important;
  }

  .pps-checkout.pps-modern-v2 .pps-packs,
  .pps-checkout.pps-modern-v2 .pps-grid.two,
  .pps-checkout.pps-modern-v2 .pps-customer-fields,
  .pps-checkout.pps-modern-v2 .pps-checkout-layout{
    grid-template-columns:1fr!important;
  }
  .pps-checkout.pps-modern-v2 .pps-packs{
    gap:10px!important;
  }
  .pps-checkout.pps-modern-v2 .pps-pack{
    width:100%!important;
    min-width:0!important;
    padding:15px!important;
    text-align:left!important;
  }

  /* Les contrôles département restent sur une seule ligne, sans gros boutons empilés. */
  .pps-checkout.pps-modern-v2 .pps-dept-row{
    display:grid!important;
    grid-template-columns:48px minmax(0,1fr) 48px!important;
    gap:8px!important;
    align-items:stretch!important;
  }
  .pps-checkout.pps-modern-v2 .pps-dept-minus{order:1!important;}
  .pps-checkout.pps-modern-v2 .pps-dept-control{
    order:2!important;
    display:block!important;
    width:100%!important;
    min-width:0!important;
  }
  .pps-checkout.pps-modern-v2 .pps-dept-plus{order:3!important;}
  .pps-checkout.pps-modern-v2 .pps-dept-step{
    width:48px!important;
    min-width:48px!important;
    height:48px!important;
    min-height:48px!important;
    padding:0!important;
    border-radius:11px!important;
  }
  .pps-checkout.pps-modern-v2 .pps-dept-step small{
    display:none!important;
  }
  .pps-checkout.pps-modern-v2 .pps-dept-step span{
    font-size:24px!important;
  }
  .pps-checkout.pps-modern-v2 .pps-dept-select{
    width:100%!important;
    min-width:0!important;
    height:48px!important;
    min-height:48px!important;
    padding:0 30px 0 8px!important;
    font-size:14px!important;
  }

  .pps-checkout.pps-modern-v2 .pps-button,
  .pps-checkout.pps-modern-v2 .pps-open-checkout,
  .pps-checkout.pps-modern-v2 .pps-validate-order{
    width:100%!important;
    min-height:48px!important;
    margin-top:12px!important;
    padding:12px!important;
  }

  .pps-checkout.pps-modern-v2 .pps-modern-footer{
    width:100%!important;
    margin:14px 0 0!important;
    padding:20px 14px!important;
  }
}

@media (max-width:380px), (max-device-width:380px){
  .pps-checkout.pps-modern-v2 > .pps-plugin-main-title{
    padding:16px 11px!important;
    font-size:21px!important;
  }
  .pps-checkout.pps-modern-v2 .pps-modern-main{
    padding:8px!important;
  }
  .pps-checkout.pps-modern-v2 .pps-modern-steps{
    gap:4px!important;
    padding:5px!important;
  }
  .pps-checkout.pps-modern-v2 .pps-modern-steps span{
    min-height:56px!important;
    padding:6px 2px!important;
  }
  .pps-checkout.pps-modern-v2 .pps-modern-steps strong{
    font-size:10.5px!important;
  }
  .pps-checkout.pps-modern-v2 .pps-promo-inline{
    grid-template-columns:1fr!important;
  }
  .pps-checkout.pps-modern-v2 .pps-promo-apply{
    width:100%!important;
  }
}