). Restyle le markup legacy ProKX * (.restaurent-detail-banner, .rest-menu-main, .menu-item-block, #cart-data, modale) * en look Wax. Le sous-arbre .tunnel-menu prime sur les règles listing partagées. * ========================================================================== */ body.wax2c .tunnel-menu .page-contant { padding: 0 !important; background: transparent !important; } body.wax2c .tunnel-menu .loader-default { background-color: transparent; } /* ---- HERO marchand (.restaurent-detail-banner) ---- */ body.wax2c .tunnel-menu .restaurent-detail-banner { display: flex !important; gap: 22px; align-items: stretch; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-sm); padding: 18px; margin-bottom: 22px; flex-wrap: wrap; } body.wax2c .tunnel-menu .restaurent-detail-left { display: flex; gap: 18px; flex: 1 1 520px; min-width: 0; align-items: flex-start; } body.wax2c .tunnel-menu .proImg-block { flex: 0 0 auto; } body.wax2c .tunnel-menu .proImage { width: 168px; height: 132px; border-radius: var(--r-mid); background-size: cover !important; background-position: center !important; position: relative; overflow: hidden; } body.wax2c .tunnel-menu .proImage .opening-time { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(46,20,12,.82); color: #F8EFE2; font-family: var(--mono); font-size: 10px; letter-spacing: .03em; text-transform: uppercase; padding: 6px 8px; text-align: center; } body.wax2c .tunnel-menu .rest-caption { min-width: 0; flex: 1; } body.wax2c .tunnel-menu .rest-name { display: flex; align-items: center; gap: 12px; } body.wax2c .tunnel-menu .rest-name h3 { font-family: var(--display); font-weight: 800; font-size: 26px; letter-spacing: -.02em; color: var(--burgundy); line-height: 1.1; float: none !important; } body.wax2c .tunnel-menu .add-favorate { margin-left: auto; float: none !important; } body.wax2c .tunnel-menu .add-favorate .fav-check { position: relative; display: inline-flex; } body.wax2c .tunnel-menu .add-favorate input.favouriteManualStore { width: 38px; height: 38px; opacity: 0; position: absolute; inset: 0; cursor: pointer; z-index: 2; margin: 0; } body.wax2c .tunnel-menu .add-favorate .custom-check { width: 38px; height: 38px; border-radius: 999px; background: var(--calico-3); border: 1px solid var(--line); display: grid; place-items: center; color: var(--burgundy); } body.wax2c .tunnel-menu .add-favorate .custom-check::before { content: "\ea98"; font-family: "tabler-icons"; font-size: 19px; } body.wax2c .tunnel-menu .add-favorate input.favouriteManualStore:checked + .custom-check { background: var(--orange-soft); border-color: rgba(226,90,46,.4); color: var(--orange-2); } body.wax2c .tunnel-menu .add-favorate input.favouriteManualStore:checked + .custom-check::before { content: "\eac7"; } body.wax2c .tunnel-menu .who-txt-details { color: var(--burgundy) !important; border-top: 0 !important; margin: 8px 0 0 !important; font-weight: 600; font-size: 12.5px; } body.wax2c .tunnel-menu .who-txt-details img { filter: none !important; } body.wax2c .tunnel-menu .rest-location { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; margin-top: 6px; } body.wax2c .tunnel-menu .rest-location .time_info { width: 16px; cursor: pointer; } body.wax2c .tunnel-menu .food-type { color: var(--muted); font-size: 13px; margin-top: 4px; } body.wax2c .tunnel-menu .regard-rest { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-2); } body.wax2c .tunnel-menu .regard-rest > div { line-height: 1.2; } body.wax2c .tunnel-menu .regard-rest .rating { display: inline-flex; align-items: center; gap: 5px; font-family: var(--display); font-weight: 800; font-size: 17px; color: var(--ink); } body.wax2c .tunnel-menu .regard-rest .rating img { width: 16px; } body.wax2c .tunnel-menu .regard-rest .del-duration, body.wax2c .tunnel-menu .regard-rest .couple-amt { font-family: var(--display); font-weight: 800; font-size: 17px; color: var(--ink); display: block; } body.wax2c .tunnel-menu .regard-rest label { font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); display: block; margin-top: 2px; } body.wax2c .tunnel-menu .restaurent-detail-right { flex: 0 0 auto; display: flex; flex-direction: column; gap: 12px; justify-content: center; } body.wax2c .tunnel-menu .restaurent-detail-right fieldset { border: 0; } body.wax2c .tunnel-menu .restaurent-detail-right label { font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } body.wax2c .tunnel-menu .discount-promos { background: var(--orange-soft); border: 1px solid rgba(226,90,46,.3); border-radius: var(--r-mid); padding: 10px 13px; color: var(--orange-2); font-weight: 700; font-size: 13px; margin-top: 4px; } body.wax2c .tunnel-menu .discount-capt img { display: inline; width: 16px; vertical-align: middle; margin-right: 6px; } body.wax2c .tunnel-menu .food-cat-row { display: flex; gap: 16px; } body.wax2c .tunnel-menu .food-cat-type { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; } body.wax2c .tunnel-menu .food-cat-type .checkbox-holding { position: relative; display: inline-flex; } body.wax2c .tunnel-menu .food-cat-type input { width: 18px; height: 18px; cursor: pointer; accent-color: var(--forest); } body.wax2c .tunnel-menu .closetxt { color: var(--danger); } /* ---- Layout 2 colonnes : menu + panier ---- */ body.wax2c .tunnel-menu .rest-menu-main { display: grid !important; grid-template-columns: minmax(0,1fr) 360px; gap: 24px; align-items: start; float: none !important; } body.wax2c .tunnel-menu .rest-menu-left { min-width: 0; float: none !important; width: auto !important; } body.wax2c .tunnel-menu .rest-menu-right { float: none !important; width: auto !important; position: sticky; top: 96px; } /* recherche menu */ body.wax2c .tunnel-menu .search-main { margin-bottom: 16px; } body.wax2c .tunnel-menu .search-holder { display: flex; align-items: center; gap: 10px; height: 50px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 0 18px; box-shadow: var(--shadow-sm); } body.wax2c .tunnel-menu .search-holder input { border: 0 !important; background: none !important; outline: none; font: inherit; font-size: 14.5px; width: 100%; padding: 0 !important; } body.wax2c .tunnel-menu .search-holder .close_ico { width: 16px; cursor: pointer; opacity: .6; } /* rail catégories -> barre d'onglets horizontale sticky */ body.wax2c .tunnel-menu .leftbar-filter { position: sticky; top: 92px; z-index: 5; margin-bottom: 18px; left: auto !important; } body.wax2c .tunnel-menu .leftbar-filter .filter-data { left: auto !important; } body.wax2c .tunnel-menu .leftbar-filter nav > ul { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; list-style: none; margin: 0; } body.wax2c .tunnel-menu .leftbar-filter nav > ul::-webkit-scrollbar { height: 0; } body.wax2c .tunnel-menu .leftbar-filter nav li { flex: 0 0 auto; } body.wax2c .tunnel-menu .leftbar-filter nav li a { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font-weight: 600; font-size: 13.5px; color: var(--ink); white-space: nowrap; cursor: pointer; } body.wax2c .tunnel-menu .leftbar-filter nav li a:hover { background: var(--calico-3); } body.wax2c .tunnel-menu .leftbar-filter nav li a.active { background: var(--burgundy); color: #F8EFE2; border-color: var(--burgundy); } body.wax2c .tunnel-menu .leftbar-filter .more-menu { display: none; } /* sections + cartes articles */ body.wax2c .tunnel-menu .product-list-right { width: auto !important; float: none !important; } body.wax2c .tunnel-menu .rest-menu-cat { margin-bottom: 26px; } body.wax2c .tunnel-menu .hold-cat-title { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; } body.wax2c .tunnel-menu .hold-cat-title h3 { font-family: var(--display); font-weight: 800; font-size: 20px; color: var(--burgundy); } body.wax2c .tunnel-menu .hold-cat-title span { font-family: var(--mono); font-size: 11px; color: var(--muted); } body.wax2c .tunnel-menu .rest-menu-cat .flex-row { display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 14px; } body.wax2c .tunnel-menu .menu-item-block { background: var(--card) !important; border: 1px solid var(--line) !important; border-radius: var(--r-card) !important; box-shadow: var(--shadow-sm); overflow: hidden; cursor: pointer; transition: transform .15s, box-shadow .15s; display: flex; flex-direction: column; position: relative; width: auto !important; margin: 0 !important; } body.wax2c .tunnel-menu .menu-item-block:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } body.wax2c .tunnel-menu .menu-item-image, body.wax2c .tunnel-menu .menu-item-block .main-silder { height: 140px; background-size: cover !important; background-position: center !important; position: relative; } body.wax2c .tunnel-menu .menu-item-block .food-type-sym { position: absolute; top: 10px; left: 10px; width: 20px; height: 20px; border-radius: 5px; z-index: 2; } body.wax2c .tunnel-menu .menu-item-caption { padding: 13px 14px 14px; display: flex; flex-direction: column; gap: 3px; flex: 1; } body.wax2c .tunnel-menu .menu-item-caption strong { font-family: var(--display); font-weight: 700; font-size: 15.5px; color: var(--ink); } body.wax2c .tunnel-menu .menu-item-desc { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } body.wax2c .tunnel-menu .price-with-add { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 10px; } body.wax2c .tunnel-menu .menu-item-price { font-family: var(--display); font-weight: 800; font-size: 16px; color: var(--burgundy); } body.wax2c .tunnel-menu .menu-item-block .add_cart { height: 38px; padding: 0 16px; border-radius: 11px; background: var(--orange); color: #fff; font-weight: 700; font-size: 13px; box-shadow: 0 2px 0 var(--orange-2); display: inline-flex; align-items: center; gap: 6px; } body.wax2c .tunnel-menu .menu-item-block .add_cart:hover { background: var(--orange-2); } body.wax2c .tunnel-menu .menu-item-block .add_cart::before { content: "\eb0b"; font-family: "tabler-icons"; font-size: 16px; } body.wax2c .tunnel-menu #ribbon-container a, body.wax2c .tunnel-menu .mi-work a { display: inline-block; background: var(--gold-soft); color: var(--burgundy); font-family: var(--mono); font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase; font-weight: 700; padding: 3px 9px; border-radius: 999px; position: absolute; top: 10px; right: 10px; z-index: 3; } /* ---- Panier latéral (#cart-data, rempli par ajax_view_cart_to_restaurant) ---- */ body.wax2c .tunnel-menu .checkout-block { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-sm); overflow: hidden; } body.wax2c .tunnel-menu #cart-data:empty::before { content: "Votre panier est vide"; display: block; padding: 40px 20px; text-align: center; color: var(--muted); font-size: 13.5px; } body.wax2c .tunnel-menu #cart-data { padding: 4px; } body.wax2c .tunnel-menu #cart-data .total-row, body.wax2c .tunnel-menu #cart-data #total-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; font-family: var(--display); font-weight: 800; color: var(--burgundy); border-top: 1px solid var(--line-2); } body.wax2c .tunnel-menu #cart-data .btnstatus button, body.wax2c .tunnel-menu #cart-data #checkout-block, body.wax2c .tunnel-menu #cart-data button[type="submit"] { width: 100%; height: 48px; border-radius: 12px; background: var(--orange); color: #fff; font-family: var(--display); font-weight: 700; font-size: 15px; box-shadow: 0 2px 0 var(--orange-2); margin-top: 6px; } body.wax2c .tunnel-menu #cart-data .btnstatus button:hover { background: var(--orange-2); } body.wax2c .tunnel-menu #cart-data .msgmaxquty, body.wax2c .tunnel-menu #cart-data .msgminimumtotal { color: var(--danger); font-size: 12px; padding: 4px 14px; display: none; } body.wax2c .tunnel-menu #cart-data .msgmaxquty.show, body.wax2c .tunnel-menu #cart-data .msgminimumtotal.show { display: block; } body.wax2c #usershoppingcart a { color: var(--orange-2) !important; } /* ---- Modale options/addons (#myModal) — hors

, scope direct ---- */ body.wax2c .product-model-overlay { position: fixed; inset: 0; background: rgba(46,20,12,.55); z-index: 200; display: none; align-items: center; justify-content: center; padding: 20px; } body.wax2c .product-model-overlay.active { display: flex; } body.wax2c .product-model { background: var(--card); border-radius: var(--r-card); box-shadow: var(--shadow-md); max-width: 560px; width: 100%; max-height: 88vh; overflow: hidden; position: relative; display: flex; flex-direction: column; } body.wax2c .product-model .close-icon { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 999px; background: rgba(46,20,12,.5); display: grid; place-items: center; cursor: pointer; z-index: 3; } body.wax2c .product-model-left:empty { display: none; } body.wax2c .product-model-right { padding: 22px; overflow-y: auto; } body.wax2c .product-model #menuitename { font-family: var(--display); font-weight: 800; font-size: 21px; color: var(--burgundy); } body.wax2c .product-model .stock-cost { display: block; color: var(--muted); font-size: 13px; margin-top: 4px; } body.wax2c .product-model .what-extra { list-style: none; margin: 10px 0; padding: 0; } body.wax2c .product-model .increment-cart { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-top: 1px solid var(--line-2); flex-wrap: wrap; } body.wax2c .product-model .count-block { display: inline-flex; align-items: center; gap: 14px; border: 1px solid var(--line); border-radius: 999px; padding: 4px 6px; } body.wax2c .product-model .count-block button { width: 32px; height: 32px; border-radius: 999px; background: var(--calico-3); color: var(--burgundy); font-size: 18px; font-weight: 700; display: grid; place-items: center; } body.wax2c .product-model .addCart-button { flex: 1; min-width: 160px; height: 48px; border-radius: 12px; background: var(--orange); color: #fff; font-family: var(--display); font-weight: 700; font-size: 15px; box-shadow: 0 2px 0 var(--orange-2); } body.wax2c .product-model .addCart-button:hover { background: var(--orange-2); } body.wax2c .product-model #optionserror, body.wax2c .product-model #addonerror { color: var(--danger); font-size: 12px; } @media (max-width: 1080px) { body.wax2c .tunnel-menu .rest-menu-main { grid-template-columns: 1fr !important; } body.wax2c .tunnel-menu .rest-menu-right { position: static; } } @media (max-width: 620px) { body.wax2c .tunnel-menu .rest-menu-cat .flex-row { grid-template-columns: 1fr; } body.wax2c .tunnel-menu .restaurent-detail-left { flex: 1 1 100%; } } /* ============================================================================ * TUNNEL — PANIER (fragment ajax_view_cart_to_restaurant.php injecté dans * #cart-data de la Page 2 menu). Scopé body.wax2c #cart-data. Restyle le markup * legacy en place (initial = rechargé par loadingtime()) → corrige la couture * Page 2. Hooks JS préservés (number_update/.plus/.minus/.numbercart_update/ * #total-row/#subtotalamount/.btnstatus/#checkout-form). FCFA = backend, no ratio. * ========================================================================== */ body.wax2c #cart-data { font-family: var(--sans); color: var(--ink); } body.wax2c #cart-data .cart-data { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-sm); overflow: hidden; } body.wax2c #cart-data .cart-header { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--line-2); background: var(--calico-3); } body.wax2c #cart-data .cart-header .wx-cart-ic { width: 34px; height: 34px; border-radius: 10px; background: var(--orange-soft); color: var(--orange-2); display: grid; place-items: center; font-size: 19px; flex: 0 0 auto; } body.wax2c #cart-data .cart-header h5 { font-family: var(--display); font-weight: 800; font-size: 16px; margin: 0; color: var(--burgundy); } /* lignes article */ body.wax2c #cart-data .cart-data-row { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line-2); } body.wax2c #cart-data .cart-data-row:last-of-type { border-bottom: 0; } body.wax2c #cart-data .open-modal { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 10px; } body.wax2c #cart-data .wx-line-vt img { width: 16px; height: 16px; margin-top: 3px; } body.wax2c #cart-data .wx-line-txt { min-width: 0; display: flex; flex-direction: column; gap: 1px; } body.wax2c #cart-data .cart-item-name { font-family: var(--display); font-weight: 700; font-size: 14.5px; line-height: 1.2; cursor: pointer; } body.wax2c #cart-data .cart-item { color: var(--muted); font-size: 12.5px; } body.wax2c #cart-data .wx-line-acts { display: flex; gap: 12px; margin-top: 5px; } body.wax2c #cart-data .edit_ele, body.wax2c #cart-data .remove_ele { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 600; cursor: pointer; color: var(--muted); } body.wax2c #cart-data .edit_ele i, body.wax2c #cart-data .remove_ele i { font-size: 14px; } body.wax2c #cart-data .edit_ele:hover { color: var(--burgundy); } body.wax2c #cart-data .remove_ele:hover { color: var(--danger); } /* stepper quantité — .plus = décrément (−), .minus = incrément (+) */ body.wax2c #cart-data .count-block { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 11px; overflow: hidden; flex: 0 0 auto; background: var(--card); } body.wax2c #cart-data .count-block button { width: 32px; height: 36px; display: grid; place-items: center; color: var(--burgundy); background: none; border: 0; cursor: pointer; font-size: 0; } body.wax2c #cart-data .count-block button:hover { background: var(--calico-3); } body.wax2c #cart-data .count-block button.plus::before { content: "\2212"; font-size: 16px; font-weight: 700; } body.wax2c #cart-data .count-block button.minus::before { content: "+"; font-size: 17px; font-weight: 700; } body.wax2c #cart-data .count-block .numbercart_update { width: 34px; min-width: 34px; text-align: center; font-weight: 700; font-size: 14px; border: 0; background: none; color: var(--ink); padding: 0; pointer-events: none; } body.wax2c #cart-data .count-block input[type="hidden"] { display: none; } body.wax2c #cart-data [id^="show_price_update"] { flex: 0 0 auto; min-width: 78px; text-align: right; } body.wax2c #cart-data .cart-item-cost { font-family: var(--display); font-weight: 700; font-size: 14.5px; color: var(--burgundy); } /* récap (sous-total / livraison / total) — #total-row.wx-recap */ body.wax2c #cart-data .wx-recap { padding: 14px 18px; background: var(--calico-3); border-top: 1px solid var(--line); } body.wax2c #cart-data .wx-recap-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13.5px; color: var(--muted); padding: 4px 0; } body.wax2c #cart-data .wx-recap-row #subtotalamount { color: var(--muted); } body.wax2c #cart-data .wx-recap-val { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; } body.wax2c #cart-data .wx-recap .wx-disc .wx-recap-val { color: var(--forest); } body.wax2c #cart-data .wx-recap-total { border-top: 1px dashed var(--line); margin-top: 6px; padding-top: 11px; } body.wax2c #cart-data .wx-recap-total > div:first-child { font-family: var(--display); font-weight: 700; font-size: 16px; color: var(--ink); } body.wax2c #cart-data .wx-recap-total .wx-recap-val { font-family: var(--display); font-weight: 800; font-size: 20px; color: var(--burgundy); } /* notes */ body.wax2c #cart-data .msgmaxquty, body.wax2c #cart-data .msgminimumtotal { font-size: 12px; padding: 6px 18px; } body.wax2c #cart-data .taxMessage { font-size: 11.5px !important; color: var(--muted) !important; padding: 0 18px 8px !important; } body.wax2c #cart-data .hide { display: none; } body.wax2c #cart-data .show { display: block; } /* bouton commande */ body.wax2c #cart-data .btn-hold { padding: 14px 18px; } body.wax2c #cart-data .btn-hold button, body.wax2c #cart-data #checkout-block { width: 100%; height: 50px; border-radius: 13px; background: var(--orange); color: #fff; font-family: var(--display); font-weight: 700; font-size: 15px; border: 0; cursor: pointer; box-shadow: 0 2px 0 var(--orange-2); display: inline-flex; align-items: center; justify-content: center; gap: 8px; } body.wax2c #cart-data .btn-hold button:hover, body.wax2c #cart-data #checkout-block:hover { background: var(--orange-2); } body.wax2c #cart-data .btn-hold.cart-disable button[disabled], body.wax2c #cart-data .btn-hold button[disabled] { background: var(--calico-2); color: var(--muted); box-shadow: none; cursor: not-allowed; } body.wax2c #cart-data #checkout-form { margin: 0; } /* état vide */ body.wax2c #cart-data .wx-cart-empty { text-align: center; padding: 36px 20px 10px; } body.wax2c #cart-data .wx-cart-empty .wx-empty-ic { width: 64px; height: 64px; border-radius: 18px; background: var(--calico-3); display: grid; place-items: center; margin: 0 auto 12px; font-size: 30px; color: var(--burgundy); } body.wax2c #cart-data .wx-cart-empty .note_ { color: var(--muted); font-size: 13.5px; } /* ============================================================================ * TUNNEL — CONFIRMATION (thanks.php). Scopé body.wax2c. Réutilise .panel. * ========================================================================== */ body.wax2c .conf { max-width: 680px; margin: 0 auto; } body.wax2c .hero-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-md); text-align: center; padding: 42px 36px 32px; position: relative; overflow: hidden; } body.wax2c .hero-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: linear-gradient(90deg, var(--orange), var(--gold), var(--forest)); } body.wax2c .hero-card .check { width: 96px; height: 96px; border-radius: 50%; background: var(--forest-soft); display: grid; place-items: center; margin: 0 auto 22px; } body.wax2c .hero-card .check i { font-size: 52px; color: var(--forest); } body.wax2c .hero-card h1 { font-family: var(--display); font-weight: 800; font-size: 30px; letter-spacing: -.02em; color: var(--burgundy); } body.wax2c .hero-card .sub { color: var(--muted); font-size: 15px; margin-top: 8px; } body.wax2c .hero-card .sub b { color: var(--ink); font-weight: 700; } body.wax2c .hero-card .ordnum { display: inline-flex; align-items: center; gap: 9px; margin-top: 18px; background: var(--calico-3); border: 1px solid var(--line); border-radius: 999px; padding: 9px 18px; font-family: var(--mono); font-weight: 700; font-size: 14px; letter-spacing: .04em; } body.wax2c .hero-card .ordnum i { color: var(--orange); font-size: 17px; } body.wax2c .conf .panel { margin-top: 18px; } body.wax2c .conf .srow { display: flex; justify-content: space-between; font-size: 14px; padding: 8px 0; color: var(--muted); } body.wax2c .conf .srow .v { color: var(--ink); font-weight: 600; } body.wax2c .conf .srow.total { border-top: 1px dashed var(--line); margin-top: 8px; padding-top: 14px; } body.wax2c .conf .srow.total .lbl { font-family: var(--display); font-weight: 700; font-size: 17px; color: var(--ink); } body.wax2c .conf .srow.total .v { font-family: var(--display); font-weight: 800; font-size: 21px; color: var(--burgundy); } body.wax2c .conf .actions { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; } body.wax2c .conf .actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 50px; padding: 0 22px; border-radius: 13px; font-family: var(--display); font-weight: 700; font-size: 14.5px; flex: 1; } body.wax2c .conf .actions .btn-ghost { background: var(--card); border: 1px solid var(--line); color: var(--ink); } body.wax2c .conf .actions .btn-ghost:hover { background: var(--calico-3); } body.wax2c .conf .actions .btn-burg { background: var(--burgundy); color: #F8EFE2; } body.wax2c .conf .actions .btn-burg:hover { background: var(--burgundy-2); } body.wax2c .conf .help-note { text-align: center; color: var(--muted); font-size: 13px; margin-top: 22px; } /* ============================================================================ * TUNNEL — DÉTAIL / SUIVI COMMANDE (order-detail.php). Scopé body.wax2c. * Migré de _app_shell.php : tokens remappés (--shell-card→--card, etc.). * ========================================================================== */ body.wax2c .od-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 24px; } @media (max-width: 960px) { body.wax2c .od-grid { grid-template-columns: 1fr; } } body.wax2c .od-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-sm); padding: 22px 24px; margin-bottom: 18px; } body.wax2c .od-card h3 { font-family: var(--display); font-weight: 700; font-size: 16px; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; color: var(--ink); } body.wax2c .od-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 16px; margin-bottom: 16px; } body.wax2c .od-head .num { font-family: var(--display); font-weight: 800; font-size: 28px; color: var(--burgundy); letter-spacing: -.01em; } body.wax2c .od-head .meta { font-family: var(--mono); font-size: 12px; opacity: .65; letter-spacing: .04em; } body.wax2c .od-item { display: grid; grid-template-columns: 36px 1fr auto auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px dashed var(--line); } body.wax2c .od-item:last-child { border-bottom: 0; } body.wax2c .od-item .qty { background: var(--burgundy); color: var(--calico); font-family: var(--display); font-weight: 700; font-size: 13px; width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; } body.wax2c .od-item .name { font-size: 14.5px; font-weight: 600; color: var(--ink); } body.wax2c .od-item .opts { font-family: var(--mono); font-size: 11px; opacity: .6; margin-top: 2px; } body.wax2c .od-item .unit { font-family: var(--mono); font-size: 12px; opacity: .55; text-align: right; } body.wax2c .od-item .total { font-family: var(--display); font-weight: 700; font-size: 14px; color: var(--burgundy); text-align: right; white-space: nowrap; } body.wax2c .od-summary .row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 14px; } body.wax2c .od-summary .row.total { border-top: 1px solid var(--ink); margin-top: 8px; padding-top: 14px; font-family: var(--display); font-weight: 800; font-size: 18px; color: var(--burgundy); } body.wax2c .od-summary .row .lbl { opacity: .7; } body.wax2c .od-summary .row.discount .val { color: var(--orange-2); } body.wax2c .od-actor { display: flex; align-items: center; gap: 12px; padding: 6px 0; } body.wax2c .od-actor .avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--gold); color: var(--burgundy-2); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 800; font-size: 16px; } body.wax2c .od-actor .name { font-weight: 600; font-size: 14.5px; } body.wax2c .od-actor .sub { font-family: var(--mono); font-size: 11.5px; opacity: .6; } /* Timeline de statut (+ items live legacy injectés par ajax_getOrderstatus.php) */ body.wax2c .od-timeline, body.wax2c .od-live { list-style: none; margin: 4px 0 0; padding: 0 0 0 22px; position: relative; } body.wax2c .od-timeline::before, body.wax2c .od-live::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: var(--line); } body.wax2c .od-timeline li, body.wax2c .od-live li { position: relative; padding: 8px 0 8px 14px; } body.wax2c .od-timeline li::before, body.wax2c .od-live li::before { content: ""; position: absolute; left: -19px; top: 12px; width: 11px; height: 11px; border-radius: 50%; background: var(--card); border: 2px solid var(--line); } body.wax2c .od-timeline li.done::before, body.wax2c .od-live li.work-invoice::before { background: var(--forest); border-color: var(--forest); } body.wax2c .od-timeline li.current::before, body.wax2c .od-live li.work-invoice-new::before { background: var(--orange); border-color: var(--orange); box-shadow: 0 0 0 4px var(--orange-soft); } body.wax2c .od-timeline li.cancel::before, body.wax2c .od-live li.cancel::before { background: var(--danger); border-color: var(--danger); } body.wax2c .od-timeline li strong, body.wax2c .od-live li strong { display: block; font-size: 14px; font-weight: 700; color: var(--ink); } body.wax2c .od-timeline li .t { font-family: var(--mono); font-size: 11px; color: var(--muted); } body.wax2c .od-live li p { font-size: 12.5px; color: var(--muted); margin: 2px 0 0; } body.wax2c .od-live b { display: none; } body.wax2c .od-live-note { margin-top: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; } /* ============================================================================ * SERVICE PHARMACIE — bandeau « Déposer une ordonnance » (restaurant_menu.php, * affiché si iServiceId=5). Upload réel -> prescription_images. Scopé body.wax2c. * ========================================================================== */ body.wax2c .ordo { display: flex; align-items: center; gap: 18px; background: var(--gold-soft); border: 1px solid var(--line); border-radius: var(--r-card, 18px); padding: 18px 22px; margin: 0 0 22px; } body.wax2c .ordo .oi { width: 54px; height: 54px; border-radius: 15px; background: var(--card); border: 1px solid var(--line); color: var(--burgundy); display: grid; place-items: center; font-size: 27px; flex: 0 0 auto; } body.wax2c .ordo .ordo-txt { flex: 1 1 auto; min-width: 0; } body.wax2c .ordo .on { font-family: var(--display); font-weight: 800; font-size: 17px; color: var(--burgundy); } body.wax2c .ordo .os { color: var(--ink); opacity: .72; font-size: 13px; margin-top: 2px; } body.wax2c .ordo .btn { margin-left: auto; height: 48px; padding: 0 22px; border: 0; cursor: pointer; border-radius: 12px; background: var(--burgundy); color: #F8EFE2; font-family: var(--display); font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 9px; } body.wax2c .ordo .btn:hover { background: var(--burgundy-2); } body.wax2c .ordo .btn:disabled { opacity: .6; cursor: default; } body.wax2c .ordo-files { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px; } body.wax2c .ordo-chip { font-size: 13px; color: #1f7a3d; display: inline-flex; align-items: center; gap: 6px; background: rgba(31,122,61,.08); border-radius: 8px; padding: 4px 10px; } @media (max-width: 980px) { body.wax2c .ordo { flex-wrap: wrap; } body.wax2c .ordo .btn { width: 100%; margin-left: 0; } } /* ============================================================================ * SERVICE TAXI / VTC — écran ESTIMATION (fareestimate.php, route /fare-estimate). * Re-skin du widget legacy : form #from/#to + #setEstimate_figure (cartes véhicule * via ajax_find_estimate.php) + carte Google #map-canvas. Scopé body.wax2c. * ========================================================================== */ body.wax2c main.taxi-estimate { padding: 18px 0 8px; } body.wax2c .taxi-estimate .breadcrumb { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); margin-bottom: 14px; } body.wax2c .taxi-estimate .breadcrumb a { color: var(--muted); } body.wax2c .taxi-estimate .breadcrumb a:hover { color: var(--burgundy); } body.wax2c .te-grid { display: grid; grid-template-columns: minmax(0,1fr) 432px; gap: 22px; align-items: stretch; min-height: 600px; } /* carte (Google map legacy #map-canvas reskinnée en map-card) */ body.wax2c .te-grid .map-card { position: relative; order: -1; border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-md); min-height: 440px; background: var(--calico-2); } body.wax2c .te-grid .map-card #map-canvas { position: absolute; inset: 0; width: 100%; height: 100%; } body.wax2c .map-badge { position: absolute; left: 16px; bottom: 16px; z-index: 500; background: var(--card); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 12px 16px; display: flex; align-items: center; gap: 12px; } body.wax2c .map-badge .mi { width: 42px; height: 42px; border-radius: 12px; background: var(--forest-soft); color: var(--forest); display: grid; place-items: center; font-size: 21px; } body.wax2c .map-badge .ml { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } body.wax2c .map-badge .mv { font-family: var(--display); font-weight: 800; font-size: 16px; color: var(--burgundy); line-height: 1.15; } /* panneau réservation */ body.wax2c .te-grid .book { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-md); display: flex; flex-direction: column; overflow: hidden; } body.wax2c .te-grid .book-scroll { overflow-y: auto; padding: 22px 22px 8px; flex: 1; } body.wax2c .te-grid .book h1 { font-family: var(--display); font-weight: 800; font-size: 23px; letter-spacing: -.02em; color: var(--burgundy); } body.wax2c .te-grid .book .bsub { color: var(--muted); font-size: 13.5px; margin: 2px 0 16px; } body.wax2c .te-grid .fields { background: var(--calico-3); border: 1px solid var(--line); border-radius: var(--r-mid); padding: 4px 14px; position: relative; } body.wax2c .te-grid .fields .fconnector { position: absolute; left: 19px; top: 30px; bottom: 30px; width: 2px; background: repeating-linear-gradient(var(--line) 0 3px, transparent 3px 7px); } body.wax2c .te-grid .ff { display: flex; align-items: center; gap: 13px; padding: 11px 0; } body.wax2c .te-grid .ff + .ff { border-top: 1px solid var(--line-2); } body.wax2c .te-grid .ff .dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; } body.wax2c .te-grid .ff .dot.dep { background: var(--forest); } body.wax2c .te-grid .ff .dot.arr { background: var(--orange); } body.wax2c .te-grid .ff .ftxt { flex: 1; min-width: 0; } body.wax2c .te-grid .ff .fl { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } body.wax2c .te-grid .ff input[type=text] { width: 100%; border: 0; background: transparent; font-family: var(--sans); font-weight: 600; font-size: 14.5px; color: var(--ink); padding: 2px 0; outline: none; } body.wax2c .te-grid .ff input::placeholder { color: var(--muted); font-weight: 500; } body.wax2c .te-grid .ff .fa { color: var(--muted); font-size: 18px; } body.wax2c .te-grid .sec-l { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 18px 0 11px; } body.wax2c .te-hint { color: var(--muted); font-size: 13px; padding: 2px 2px 4px; } /* cartes véhicule = markup legacy #setEstimate_figure > ul > li > label > (texte) + img(?) + b(prix) */ body.wax2c #setEstimate_figure ul { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; } body.wax2c #setEstimate_figure ul li { list-style: none; border: 1.5px solid var(--line); border-radius: var(--r-mid); transition: border-color .14s, background .14s; } body.wax2c #setEstimate_figure ul li:hover { background: var(--calico-3); border-color: var(--orange); } body.wax2c #setEstimate_figure ul li label { display: flex; align-items: center; gap: 12px; margin: 0; padding: 14px 16px; cursor: default; font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--ink); } body.wax2c #setEstimate_figure ul li label::before { content: "\ebbb"; font-family: "tabler-icons" !important; font-weight: 400; -webkit-font-smoothing: antialiased; width: 46px; height: 40px; border-radius: 11px; background: var(--calico-2); color: var(--burgundy); display: grid; place-items: center; font-size: 22px; flex: 0 0 auto; } body.wax2c #setEstimate_figure ul li label img { width: 17px; height: 17px; opacity: .45; cursor: pointer; } body.wax2c #setEstimate_figure ul li label b { margin-left: auto; font-family: var(--display); font-weight: 800; font-size: 17px; color: var(--burgundy); white-space: nowrap; } body.wax2c #setEstimate_figure h4 { color: var(--muted); font-size: 13.5px; font-weight: 600; padding: 6px 2px; } /* paiement (placeholder honnête : choix réel à la réservation) */ body.wax2c .te-grid .pay-sel { display: flex; align-items: center; gap: 12px; padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--r-mid); background: var(--calico-3); } body.wax2c .te-grid .pay-sel .pi { width: 40px; height: 32px; border-radius: 8px; background: var(--gold-soft); color: var(--burgundy); display: grid; place-items: center; font-size: 18px; flex: 0 0 auto; } body.wax2c .te-grid .pay-sel .pn { font-weight: 700; font-size: 13.5px; } body.wax2c .te-grid .pay-sel .ps { color: var(--muted); font-size: 12px; } body.wax2c .te-grid .book-foot { padding: 16px 22px; border-top: 1px solid var(--line-2); flex: 0 0 auto; } body.wax2c .te-grid .btn-book { width: 100%; height: 54px; border-radius: 14px; background: var(--orange); color: #fff; font-family: var(--display); font-weight: 700; font-size: 16.5px; box-shadow: 0 2px 0 var(--orange-2); display: flex; align-items: center; justify-content: center; gap: 10px; } body.wax2c .te-grid .btn-book:hover { background: var(--orange-2); color: #fff; } body.wax2c .te-grid .book-foot-note { font-size: 11.5px; color: var(--muted); text-align: center; margin-top: 9px; } body.wax2c #imageIcons { padding: 10px; text-align: center; } @media (max-width: 1080px) { body.wax2c .te-grid { grid-template-columns: 1fr; min-height: 0; } body.wax2c .te-grid .map-card { min-height: 320px; } } /* ============================================================================ * HUB CLIENT (user-home.php) — reconstruction FIDÈLE du design « Client - Accueil (Hub) ». * TOUT est scopé body.wax2c .hubx (anti-collision : .panel/.svc/.pill/.btn existent ailleurs). * Header/footer = shell. Tokens déjà définis sur body.wax2c. Composants portés du