/* ISPARE PASS102 — responsive source of truth
   Breakpoints: mobile <=760, tablet 761-900, desktop >=901.
   Loaded after legacy page styles so one compact contract wins. */

:root{
  --isp-topbar-h:32px;
  --isp-nav-h:72px;
  --isp-header-h:104px;
  --isp-page-gutter:clamp(14px,3vw,32px);
  --isp-touch:44px;
}

html{overflow-x:clip;scroll-padding-top:var(--isp-header-h)}
body{max-width:100%;overflow-x:clip}
*,*::before,*::after{box-sizing:border-box}
img,video,svg,canvas{max-width:100%;height:auto}
iframe{max-width:100%}
pre,code{max-width:100%;overflow-wrap:anywhere}
input,select,textarea,button{max-width:100%}
.table-wrap,[class*="table-wrap"],.orders-table,.quotes-table{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}

/* Prevent long identifiers, emails, SKUs and URLs from forcing page overflow. */
.card,.pcard,.dashboard-card,.panel,.box,.co-card,.account-card,.product-card,
[class*="card"],[class*="panel"]{min-width:0}
.card p,.card div,.pcard p,.pcard div,.dashboard-card td,.dashboard-card th,
[class*="card"] p,[class*="card"] div{overflow-wrap:anywhere}

/* Stable tap targets for interactive chrome; tiny decorative carousel dots are exempt. */
a.btn,button:not(.hv-dot),.btn,[role="button"]:not(.hv-dot),input[type="submit"],input[type="button"],select{
  min-height:var(--isp-touch);
}

/* PASS161 — carousel pagination is a compact visual control, not a 44px action.
   Keep it compact at EVERY viewport width (including 901–1100px tablets /
   small desktop widths such as 958px). */
.hv-dot{width:9px!important;min-width:9px!important;height:9px!important;min-height:9px!important;padding:0!important;border-radius:50%!important}
.hv-dot.on{width:24px!important;min-width:24px!important;height:9px!important;min-height:9px!important;border-radius:6px!important}

/* Desktop is the default contract. */
@media (min-width:901px){
  :root{--isp-nav-h:72px;--isp-header-h:104px}
  .nav .nav-links{display:flex!important;visibility:visible!important;opacity:1!important}
  .nav .isp-burger,.isp-mobile-panel{display:none!important}
  .nav-r{min-width:0}
  .nav-search{min-width:190px;max-width:320px}
  .hero-in,.pgh-in,.ph-in,.co-grid,.product-page .grid{min-width:0}
}

/* Tablet / iPad contract. */
@media (min-width:761px) and (max-width:900px){
  :root{--isp-nav-h:64px;--isp-header-h:96px}
  html{scroll-padding-top:96px}

  #ispTopbar{height:32px!important;min-height:32px!important;overflow-x:auto!important;overflow-y:hidden!important;white-space:nowrap!important}
  .nav{height:64px!important;min-height:64px!important;max-height:64px!important;padding:8px 14px!important;gap:8px!important;flex-wrap:nowrap!important}
  .nav .nav-links{display:none!important;visibility:hidden!important;opacity:0!important}
  .nav .isp-burger{display:inline-flex!important;width:44px!important;min-width:44px!important;height:44px!important;align-items:center!important;justify-content:center!important}
  .nav-r{display:flex!important;flex:1 1 auto!important;min-width:0!important;justify-content:flex-end!important;gap:8px!important;margin-left:auto!important}
  .nav-search{flex:1 1 240px!important;min-width:120px!important;max-width:330px!important;height:44px!important}
  .nav-r .btn-cta{display:none!important}
  #ispBtn,.nav-r>.btn-ico{width:44px!important;min-width:44px!important;height:44px!important}
  .isp-mobile-panel{top:96px!important;left:14px!important;right:14px!important;max-height:calc(100dvh - 112px)!important}

  .hero,.pg-hero,.promo-hero,.pro-hero,.co-grid,.compte-wrap,.product-page{max-width:100%!important}
  .hero-in,.pgh-in,.ph-in{grid-template-columns:minmax(0,1fr)!important;gap:28px!important}
  .product-page .grid,.co-grid,.compte-wrap{grid-template-columns:minmax(0,1fr)!important}
  .c-sidebar{position:static!important;max-width:100%!important}
  .hero-stats,.ph-stats-grid,.stats-row,.pro-cats,.pro-benefits{grid-template-columns:repeat(2,minmax(0,1fr))!important}

  /* Cards: keep comfortable tablet density without forcing 4 narrow columns. */
  .prods-grid,.products-grid,.catalogue-grid,.grid-products{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .isp-ai-panel{max-width:min(430px,calc(100vw - 28px))!important}
}

/* Phone contract. */
@media (max-width:760px){
  :root{--isp-nav-h:64px;--isp-header-h:96px;--isp-page-gutter:14px}
  html{overflow-x:hidden!important;scroll-padding-top:96px!important}
  body{overflow-x:hidden!important}
  input,select,textarea{font-size:16px!important}

  #ispTopbar{
    position:sticky!important;top:0!important;z-index:1200!important;
    height:32px!important;min-height:32px!important;padding:0 8px!important;
    justify-content:flex-start!important;overflow-x:auto!important;overflow-y:hidden!important;
    white-space:nowrap!important;-webkit-overflow-scrolling:touch!important;scrollbar-width:none!important;
  }
  #ispTopbar::-webkit-scrollbar{display:none!important}
  #ispTopbar .tb-sep{display:none!important}
  #ispTopbar .tb-i{font-size:.72rem!important;flex:0 0 auto!important;max-width:none!important}

  .nav{
    position:sticky!important;top:32px!important;z-index:1190!important;
    height:64px!important;min-height:64px!important;max-height:64px!important;
    padding:6px 8px!important;gap:4px!important;flex-wrap:nowrap!important;overflow:visible!important;
  }
  .nav .logo-wrap{flex:0 1 auto!important;min-width:86px!important;max-width:120px!important;width:auto!important}
  .nav .logo-name{font-size:1rem!important;white-space:nowrap!important}
  .nav .logo-tag{display:none!important}
  .nav .nav-links,.nav .nav-links *{display:none!important;visibility:hidden!important;opacity:0!important}
  .nav-r{display:flex!important;flex:1 1 auto!important;min-width:0!important;margin-left:auto!important;align-items:center!important;justify-content:flex-end!important;gap:4px!important}
  .nav-r .btn-cta,.nav-r .nav-account,.nav-r a.nav-account,
  .nav-r a[href*="connexion"],.nav-r a[href*="login"],.nav-r a[href*="compte"],
  a.btn-ico[href*="login"],a.btn-ico[href*="compte"]{display:none!important;visibility:hidden!important}
  .nav-search{order:1!important;flex:0 0 44px!important;width:44px!important;min-width:44px!important;max-width:44px!important;height:44px!important;padding:0!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important}
  .nav-search input{display:none!important}
  .nav-r>.isp-user-zone{order:3!important;display:inline-flex!important;flex:0 0 44px!important}
  #ispBtn,.nav-r>.btn-ico,.nav .isp-burger{width:44px!important;min-width:44px!important;height:44px!important;min-height:44px!important;padding:0!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}
  .nav-menu-btn,.isp-mobile-menu-btn,.ispMobileMenuBtn{display:none!important}
  .nav .isp-burger{order:4!important;flex:0 0 44px!important;margin:0!important;border-radius:10px!important}

  .isp-mobile-panel{
    position:fixed!important;top:96px!important;left:8px!important;right:8px!important;z-index:1180!important;
    width:auto!important;max-width:none!important;max-height:0!important;overflow:hidden!important;
    border-radius:14px!important;background:#fff!important;
  }
  .isp-mobile-panel.open{max-height:calc(100dvh - 108px)!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch!important}

  main,#main,.pg-hero,.hero,.product-page,.co-grid,.compte-wrap,.pro-hero,.promo-hero{scroll-margin-top:96px!important}
  .hero,.pg-hero,.promo-hero,.pro-hero,.product-page,.co-grid,.compte-wrap{width:100%!important;max-width:100%!important;box-sizing:border-box!important}
  .hero-in,.pgh-in,.ph-in,.product-page .grid,.co-grid,.compte-wrap{grid-template-columns:minmax(0,1fr)!important;max-width:100%!important;min-width:0!important}
  .co-grid,.compte-wrap{padding-left:12px!important;padding-right:12px!important;gap:16px!important}
  .c-sidebar{position:static!important;max-width:100%!important}

  .hero-search-wrap,.hero-search,.hero-ctas,.btns,.ph-ctas,.pro-form-s{max-width:100%!important}
  .hero-search input,.pro-form-s input,.pro-form-s textarea,.co-grid input,.co-grid textarea,.co-grid select{min-width:0!important;width:100%;max-width:100%!important}
  .hero-ctas,.ph-ctas,.btns{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:9px!important}
  .hero-ctas>*,.ph-ctas>*,.btns>*{width:100%!important;max-width:100%!important}

  .hero-stats,.ph-stats-grid,.stats-row,.pro-cats,.pro-benefits{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .hstat,.ph-stat-card,.stat-card,.pc-card,.pb-card{min-width:0!important;overflow:hidden!important}

  .prods-s{padding-left:14px!important;padding-right:14px!important}
  .prods-head{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:14px!important}
  .ph-tabs{display:flex!important;flex-wrap:wrap!important;overflow:visible!important;width:100%!important;gap:7px!important;padding:0!important}
  .ph-tabs .ptab{flex:0 0 auto!important;min-height:44px!important;padding:9px 14px!important}
  .prods-grid,.products-grid,.catalogue-grid,.grid-products{grid-template-columns:minmax(0,1fr)!important;min-height:0!important}
  .prods-grid .pcard{opacity:1!important;transform:none!important;filter:none!important}

  .hero-visual{padding-bottom:64px!important;overflow:visible!important}
  .hv-b1{bottom:8px!important;left:8px!important;right:8px!important;max-width:none!important;width:auto!important}
  .hv-b1>div:last-child{min-width:0!important}
  .hv-b1-s{white-space:normal!important;line-height:1.25!important}
  .hv-dots{bottom:13px!important;align-items:center!important}
  .hv-dot{width:9px!important;min-width:9px!important;height:9px!important;min-height:9px!important;padding:0!important;border-radius:50%!important}
  .hv-dot.on{width:24px!important;min-width:24px!important;height:9px!important;border-radius:6px!important}

  /* Floating help must not mask checkout/content. */
  .isp-wa-wrap{right:10px!important;bottom:10px!important;gap:8px!important}
  .isp-wa-wrap .isp-devis{display:none!important}
  .isp-ai-btn,.isp-wa{width:48px!important;height:48px!important}
  .isp-ai-panel{left:10px!important;right:10px!important;bottom:70px!important;width:auto!important;max-width:none!important;max-height:72dvh!important}

  /* Long tables keep their semantics and scroll instead of shrinking text to illegibility. */
  table{max-width:none}
  .table-wrap table,[class*="table-wrap"] table{min-width:620px}
}

@media (max-width:380px){
  .nav{padding-left:6px!important;padding-right:6px!important;gap:3px!important}
  .nav .logo-wrap{min-width:80px!important;max-width:100px!important}
  .nav-r{gap:3px!important}
  .hero-stats,.ph-stats-grid,.stats-row,.pro-cats,.pro-benefits{grid-template-columns:minmax(0,1fr)!important}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}