:root { --bg: #f5f7fb; --glass: rgba(255,255,255,0.6); --border: rgba(255,255,255,0.3); --primary: #0f62fe; --radius: 18px; --shadow: 0 20px 40px rgba(0,0,0,0.08); } * { box-sizing: border-box; margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Inter", sans-serif; } body { background: linear-gradient(180deg, #eef2ff, #ffffff); color: #111; } .header { position: fixed; top: 0; width: 100%; height: 110px; padding: 16px 24px; display: flex; justify-content: space-between; align-items: center; z-index: 10; overflow: visible; } .header::before { content: ""; position: absolute; inset: 0; background-image: url("assets/header-bg.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 0; } .header::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.45); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255,255,255,0.35); z-index: 1; } .header::before, .header::after { pointer-events: none; } .header > * { position: relative; z-index: 2; } .header { box-shadow: 0 12px 30px rgba(0,0,0,0.25); } .logo { display: flex; align-items: flex-start; } .logo img { height: 80px; margin-left: -12px; } .logo { pointer-events: auto; touch-action: manipulation; } .logo img { pointer-events: none; } .header-actions { display: flex; align-items: center; gap: 10px; } .cart-icon { position: relative; font-size: 2.2rem; margin-right: 10px; } .cart-icon span { position: absolute; top: -6px; right: -8px; background: var(--primary); color: #fff; font-size: 0.7rem; padding: 2px 6px; border-radius: 999px; } .container { padding: 150px 20px 40px; max-width: 1200px; margin: auto; } .products { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; } .card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; display: flex; flex-direction: column; } .card img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 14px; } .card .description { margin-bottom: 12px; /* espace entre description et prix */ } .card h3 { margin: 12px 0 4px; } .price { font-weight: 600; margin-bottom: 8px; } .quantity { display: flex; align-items: center; gap: 10px; } .quantity button { width: 32px; height: 32px; border-radius: 50%; border: none; background: #eee; cursor: pointer; } .total { margin: 8px 0; font-weight: 600; } .add-btn { margin-top: auto; background: #111; color: #fff; border: none; padding: 12px; border-radius: 12px; cursor: pointer; } /* MODAL */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); display: none; align-items: center; justify-content: center; z-index: 999; } .modal { background: var(--glass); backdrop-filter: blur(20px); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; width: 90%; max-width: 480px; animation: pop .3s ease; position: relative; z-index: 1000; } @keyframes pop { from { transform: scale(.9); opacity: 0; } to { transform: scale(1); opacity: 1; } } .close-modal { background: none; border: none; font-size: 1.2rem; float: right; cursor: pointer; } .modal-total { font-size: 1.2rem; font-weight: 700; margin: 16px 0; } /* 🖼️ MODAL IMAGE PRODUIT */ .image-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.45); backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center; z-index: 6000; } .image-modal-card { background: var(--glass); backdrop-filter: blur(20px); border: 1px solid var(--border); border-radius: var(--radius); width: 92%; max-width: 520px; padding: 16px; position: relative; animation: pop .3s ease; } .image-close { position: absolute; top: -14px; right: -14px; width: 36px; height: 36px; background: #111; color: #fff; border-radius: 50%; border: 2px solid #fff; cursor: pointer; z-index: 20; box-shadow: 0 8px 18px rgba(0,0,0,0.35); } .image-info h3 { margin-bottom: 12px; /* avant : ~6px → plus d’air */ } .slider-viewport { width: 100%; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 14px; background: #fff; margin-bottom: 16px; } .slider-track { display: flex; height: 100%; transition: transform 0.35s ease; } .slider-track img { min-width: 100%; height: 100%; object-fit: cover; border-radius: 14px; } .image-indicators { position: static; display: flex; justify-content: center; gap: 8px; margin-top: 14px; } .image-indicators span { width: 8px; height: 8px; border-radius: 50%; background: rgba(0,0,0,0.35); transition: transform 0.2s ease, background 0.2s ease; } .image-indicators span.active { background: #000; transform: scale(1.2); } .payment-buttons { display: flex; flex-direction: column; gap: 16px; margin-top: 20px; } .payment-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .pay-btn { border: none; border-radius: 16px; padding: 14px 16px; font-size: 0.95rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; color: #fff; box-shadow: 0 12px 28px rgba(0,0,0,0.15); transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease; } .pay-btn:hover { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(0,0,0,0.22); filter: brightness(1.05); } .pay-btn:active { transform: scale(0.97); } .pay-btn.wave { background: linear-gradient(135deg, #1dcaff, #007aff); } .pay-btn.orange { background: linear-gradient(135deg, #ff9a1f, #ff6a00); } .pay-btn.cash { background: linear-gradient(135deg, #2ecc71, #27ae60); } .pay-btn.confirm { background: linear-gradient(135deg, #111, #333); } @media (max-width: 480px) { .payment-row { grid-template-columns: 1fr; } } .modal .pay-btn { appearance: none; -webkit-appearance: none; background: none; } .payment-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .pay-btn { width: 100%; text-align: center; } #order-summary { max-height: 300px; overflow-y: auto; padding-right: 8px; } #order-summary::-webkit-scrollbar { width: 6px; } #order-summary::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.25); border-radius: 999px; } .modal h2 { margin-bottom: 18px; } #order-summary > div:first-child { margin-top: 6px; } .modal .pay-btn.wave { background: linear-gradient(135deg, #00c3ff, #0066cc); color: #fff; } .modal .pay-btn.orange { background: linear-gradient( 135deg, #ff9a00 0%, #ff6b00 70% ); color: #fff; } .modal .pay-btn.cash { background: linear-gradient(135deg, #4f5d75, #2f3e55); color: #fff; } .modal .pay-btn.confirm { background: linear-gradient( 135deg, #f6d365 0%, #f1c40f 45%, #d4af37 100% ); color: #111; font-weight: 700; border: 1px solid #000; box-shadow: 0 10px 22px rgba(212, 175, 55, 0.45), inset 0 1px 0 rgba(255,255,255,0.5); } .modal .pay-btn.confirm:hover { filter: brightness(1.08); box-shadow: 0 14px 30px rgba(212, 175, 55, 0.6), inset 0 1px 0 rgba(255,255,255,0.55); } .modal .pay-btn.confirm:active { transform: scale(0.97); box-shadow: 0 6px 16px rgba(212, 175, 55, 0.4), inset 0 2px 4px rgba(0,0,0,0.15); } .modal .pay-btn { min-height: 20px; height: 20px; padding: 0 14px; font-size: 0.9rem; border-radius: 22px; line-height: 1; } .modal .pay-btn { height: 56px; border-radius: 26px; } .header .order-btn { background: var(--primary); color: #fff; border: none; padding: 12px 22px; border-radius: 999px; font-weight: 600; cursor: pointer; box-shadow: 0 10px 24px rgba(15, 98, 254, 0.35); transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease; } .header .order-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(15, 98, 254, 0.45); filter: brightness(1.05); } .header .order-btn:active { transform: scale(0.96); } .pwa-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 9999; } .pwa-overlay.hidden { display: none; } .pwa-card { background: #fff; width: min(90%, 380px); padding: 24px; border-radius: 20px; text-align: center; box-shadow: 0 20px 40px rgba(0,0,0,0.25); animation: pop 0.3s ease; } .pwa-card h2 { margin-bottom: 10px; font-size: 1.4rem; } .pwa-card p { font-size: 0.95rem; color: #555; margin-bottom: 20px; } .pwa-actions { display: flex; gap: 12px; } .pwa-install { flex: 1; background: #000; color: #fff; border: none; padding: 14px; font-size: 1rem; border-radius: 14px; } .pwa-close { flex: 1; background: transparent; border: 2px solid #000; padding: 14px; font-size: 1rem; border-radius: 14px; } @keyframes pop { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } } .install-link { font-size: 14px; font-weight: 600; color: #0f62fe; cursor: pointer; white-space: nowrap; } .install-link:hover { text-decoration: underline; } @media (max-width: 768px) { .install-link { font-size: 13px; } } .logo.pwa-installable { cursor: pointer; } .logo.pwa-installable img { transition: transform 0.2s ease, filter 0.2s ease; } .logo.pwa-installable:hover img { transform: scale(1.03); filter: brightness(1.05); } .slider-arrow { position: absolute; top: 42%; width: 42px; height: 42px; border-radius: 50%; border: none; background: rgba(0,0,0,0.55); color: #fff; font-size: 26px; cursor: pointer; z-index: 30; display: none; } .slider-arrow.left { left: 8px; } .slider-arrow.right { right: 8px; } @media (min-width: 768px) { .slider-arrow { display: flex; align-items: center; justify-content: center; } } .modal input, .modal select { width: 100%; padding: 12px; margin: 10px 0 16px; border-radius: 12px; border: 1px solid #ccc; font-size: 0.95rem; } .add-btn { margin-top: auto; background: #111; color: #fff; border: none; border-radius: 14px; padding: 12px 16px; font-weight: 600; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease; box-shadow: 0 6px 16px rgba(0,0,0,0.35); } .add-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(34,197,94,0.45); } .add-btn:active { transform: scale(0.94); box-shadow: 0 4px 10px rgba(34,197,94,0.3); } .add-btn:focus-visible { outline: 3px solid rgba(34,197,94,0.6); outline-offset: 2px; } .add-btn.added { background: linear-gradient(135deg, #0ea5e9, #0284c7); box-shadow: 0 8px 20px rgba(14,165,233,0.45); transform: scale(1.05); } .search-bar-wrapper { position: sticky; top: 110px; z-index: 9; padding: 8px 16px; background: rgba(0,0,0,0.35); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255,255,255,0.12); } .search-bar { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 16px; background: rgba(20,20,20,0.8); box-shadow: 0 10px 24px rgba(0,0,0,0.45); } .search-row { max-width: 1000px; margin: auto; display: flex; align-items: center; gap: 10px; } .search-bar input { flex: 1; border: none; outline: none; background: transparent; font-size: 14px; color: #fff; } .search-bar input::placeholder { color: rgba(255,255,255,0.55); } .search-icon { font-size: 18px; color: rgba(255,255,255,0.7); } #clearSearch { border: none; background: none; font-size: 16px; cursor: pointer; color: rgba(255,255,255,0.5); } #clearSearch:hover { color: #fff; } .search-bar { flex: 1; min-width: 0; max-width: none; } .layout-toggle { width: 48px; height: 28px; border-radius: 999px; border: none; padding: 0; cursor: pointer; position: relative; flex-shrink: 0; font-size: 0; color: transparent; text-indent: -9999px; overflow: hidden; outline: none; box-shadow: none; -webkit-tap-highlight-color: transparent; background: linear-gradient( 135deg, #f6d365, #f1c40f, #d4af37 ); } .layout-toggle:focus, .layout-toggle:focus-visible { outline: none; box-shadow: none; } .layout-toggle::before { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: rgb(20, 20, 20); transition: transform 0.25s cubic-bezier(.4,0,.2,1); } .layout-toggle.active { background: linear-gradient( 135deg, #ffb347, #ff9800, #ff6f00 ); } .layout-toggle.active::before { transform: translateX(20px); } @media (max-width: 640px) { .products.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .products.grid-2 .card { padding: 12px; } .products.grid-2 .card h3 { font-size: 0.95rem; } .products.grid-2 .description { display: none; } .products.grid-2 .add-btn { font-size: 0.85rem; padding: 10px; } } @media (max-width: 768px) { .cart-icon { padding: 6px; border-radius: 50%; background: rgba(255,255,255,0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform 0.15s ease, box-shadow 0.15s ease; } .cart-icon:active { transform: scale(0.9); box-shadow: 0 3px 10px rgba(0,0,0,0.25), inset 0 2px 4px rgba(0,0,0,0.15); } }