/* === Product tiles === */ .prods { cursor: pointer; border-radius: 14px; overflow: hidden; transition: opacity 0.12s ease, transform 0.1s ease; } .prods:active { opacity: 0.82; transform: scale(0.97); } /* === Commande top bar (retour) === */ .pdc-commande-topbar { padding: 0.6rem 1rem 0; } /* === Product / category grid === */ /* .pdc-prod-section { padding: 0.75rem 0.75rem 200px; } */ .pdc-prod-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; } @media (min-width: 576px) { .pdc-prod-grid { grid-template-columns: repeat(3, 1fr); gap: 0.85rem; } } @media (min-width: 992px) { .pdc-prod-grid { grid-template-columns: repeat(4, 1fr); } } /* === Sections de catégories regroupées par cat-principale === Background coloré (rgba calculé en PHP avec opacité %) + titre coloré. */ .pdc-cat-section { --cat-color: #6c757d; /* margin-bottom: 1rem; border-radius: 10px; *//* */ padding: 0.85rem; } .pdc-cat-section-header { font-weight: 700; font-size: 0.95rem; margin-bottom: 0.55rem; display: flex; align-items: center; gap: 0.5rem; text-transform: uppercase; letter-spacing: 0.03em; color: #6c757d; } .pdc-cat-section-header i { font-size: 0.95rem; } .pdc-cat-breadcrumb { opacity: 0.6; font-weight: 500; } .pdc-cat-section .pdc-prod-grid { margin: 0; } /* === Tile shared === */ .pdc-prod-tile, .pdc-cat-tile { border-radius: 14px; overflow: hidden; cursor: pointer; text-decoration: none; color: #fff; display: block; transition: transform 0.1s ease, opacity 0.1s ease; } .pdc-prod-tile:active, .pdc-cat-tile:active { transform: scale(0.96); opacity: 0.85; color: #fff; } .pdc-cat-tile:hover { color: #fff; text-decoration: none; } .pdc-prod-img { position: relative; background-size: cover; background-position: center; background-repeat: no-repeat; min-height: 9em; display: flex; flex-direction: column; justify-content: space-between; align-items: stretch; } .pdc-prod-name { background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 1.5rem; font-weight: 600; padding: 0.35rem 0.5rem; text-align: center; line-height: 1.25; backdrop-filter: blur(2px); } .pdc-prod-price { background: rgba(37, 99, 235, 0.85); color: #fff; font-size: 0.95rem; font-weight: 700; text-align: center; padding: 0.3rem 0.5rem; backdrop-filter: blur(2px); } .pdc-prod-qty { padding: 0.3rem 0.5rem; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); } .pdc-prod-qty .input-group { gap: 0; } .pdc-prod-qty .btn { min-width: 36px; min-height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; font-size: 0.85rem; } .pdc-prod-qty .form-control { text-align: center; font-weight: 700; font-size: 0.95rem; background: rgba(255,255,255,0.12); border: none; color: #fff; min-width: 0; } /* Quantity input (generic) */ .input-number { text-align: center; font-weight: 700; font-size: 1rem; } /* === Internal scroll container === Pour empêcher le jitter de la barre URL mobile, on désactive le scroll du et on le déporte dans un conteneur interne. Les navigateurs mobiles n'animent leur barre URL QUE sur le scroll du body : pas de scroll body, pas d'animation, donc #order (en position:fixed) reste rigoureusement collé au bas de l'écran. */ html, body { height: 100vh; /* fallback */ height: 100svh; /* small viewport, stable */ margin: 0; overflow: hidden; } .pdc-scroll-wrap { height: calc(100vh - var(--pdc-bar-height, 56px)); height: calc(100svh - var(--pdc-bar-height, 56px)); overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; } /* Le footer global (V'olt services) est inclus après dans commande.php : le navigateur le ré-injecte dans et il s'affiche dans la zone basse, créant un espace vide visible sous le contenu. Sur la page commande, #order occupe déjà la zone basse — on masque donc le footer global ici. */ body > footer.pdc-footer { display: none; } /* === Order panel (fixed bottom) === */ #order { position: fixed; bottom: 0; left: 0; right: 0; width: 100%; z-index: 900; background: var(--pdc-surface); border-top: 1px solid var(--pdc-border); box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.4); } .pdc-order-bar { cursor: pointer; user-select: none; background: var(--pdc-primary); color: #fff; padding: 0.65rem 1rem; display: flex; align-items: center; font-weight: 600; font-size: 0.95rem; margin: 0; } .pdc-order-bar:active { filter: brightness(0.88); } #t_order { cursor: pointer; user-select: none; } #t_order:active { filter: brightness(0.88); } #content_order { overflow-x: hidden; max-height: 20vh; overflow-y: auto; } .fullsize { max-height: 80vh !important; } /* === Order list items === */ #content_order .list-group-item { padding: 0.55rem 0.75rem; } /* Quantity controls in pending order */ #content_order .btn-sm { min-width: 32px; min-height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; padding: 0; } /* Action buttons row */ .pdc-order-actions { display: flex; gap: 0.5rem; padding: 0.625rem 0.75rem; } .pdc-order-actions .btn { flex: 1; border-radius: 10px; font-weight: 600; font-size: 0.9rem; } #new_table { margin-right: 5px; } /* === Mobile enhancements === */ @media (max-width: 767.98px) { .modal-fullscreen-md-down .modal-footer { padding-bottom: calc(1rem + env(safe-area-inset-bottom, 16px)); } /* Bigger touch targets for quantity buttons on product tiles */ .quantity-minus, .quantity-plus { min-width: 44px; min-height: 44px; } }