/* | Barre d'achat collante de la fiche produit (thème Cartzilla, toutes variantes de fiche). | Balisage : components/product-single.blade.php ; comportement : js/sticky-atc.js. | | Empilement, du bas vers le haut : | 1030 navbar fixe Bootstrap | 1032 CETTE BARRE | 1035 bulle de chat (#cmwcb-root) -> remontée au-dessus de la barre | 1045+ panneaux latéraux, modales | 2147483000 barre de l'extension Chrome CMW (#cmw-site-bar) -> remontée elle aussi | La hauteur réelle de la barre est publiée par le JS dans --cz-satc-h, sur . | Couleurs : variables du thème uniquement (palette du site, mode sombre compris). */ .cz-satc { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1032; padding: .75rem 0 calc(.75rem + env(safe-area-inset-bottom, 0px)); background: var(--cz-body-bg); border-top: 1px solid var(--cz-border-color); box-shadow: 0 -.5rem 1.5rem rgba(0, 0, 0, .08); transform: translateY(100%); visibility: hidden; transition: transform .3s ease, visibility 0s linear .3s; } .cz-satc.is-on { transform: none; visibility: visible; transition: transform .3s ease; } .cz-satc-inner { display: flex; align-items: center; gap: 1rem; } .cz-satc-thumb { width: 48px; height: 48px; flex-shrink: 0; object-fit: cover; border-radius: var(--cz-border-radius, .5rem); background: var(--cz-tertiary-bg); } .cz-satc-info { flex: 1 1 auto; min-width: 0; } .cz-satc-name { overflow: hidden; font-size: .875rem; font-weight: 500; color: var(--cz-heading-color); white-space: nowrap; text-overflow: ellipsis; } .cz-satc-price { font-weight: 600; color: var(--cz-heading-color); white-space: nowrap; } .cz-satc-btn { flex-shrink: 0; min-width: 240px; } /* Mobile : vignette + prix + bouton large, le nom saute (il est juste au-dessus dans la page). */ @media (max-width: 575.98px) { .cz-satc-inner { gap: .75rem; } .cz-satc-thumb { width: 40px; height: 40px; } .cz-satc-name { display: none; } .cz-satc-info { flex: 0 0 auto; } .cz-satc-btn { flex: 1 1 auto; min-width: 0; font-size: .9375rem; } } /* La barre ne doit rien cacher : ni le bas du pied de page, ni la bulle de chat, ni la barre de l'extension (qui reste au-dessus en z-index ET au-dessus en position). */ body.cz-satc-on { padding-bottom: var(--cz-satc-h, 0px); } #cmwcb-root, #cmw-site-bar { transition: bottom .3s ease; } body.cz-satc-on #cmwcb-root { bottom: calc(var(--cz-satc-h, 0px) + 16px); } body.cz-satc-on #cmw-site-bar { bottom: calc(var(--cz-satc-h, 0px) + 12px); } @media (prefers-reduced-motion: reduce) { .cz-satc, .cz-satc.is-on, #cmwcb-root, #cmw-site-bar { transition: none; } }