/* ─── Direction artistique : noir profond & or ─────────────────────────── */ :root { --bg: #070707; --bg-raise: #0e0e0e; --surface: #131313; --line: rgba(214, 178, 94, 0.14); --line-soft: rgba(214, 178, 94, 0.08); --line-strong: rgba(214, 178, 94, 0.36); --gold: #d6b25e; --gold-hi: #f1dea3; --gold-lo: #9a7532; --gold-grad: linear-gradient(135deg, #f5e4ab 0%, #d6b25e 45%, #a17a2e 100%); --ink: #171006; --text: #f3eee4; --muted: #8d877b; --faint: #57524a; --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --radius: 18px; --tabbar-h: 64px; --tabbar-gap: 12px; --safe-top: max(env(safe-area-inset-top), var(--tg-content-safe-area-inset-top, 0px)); --safe-bottom: max(env(safe-area-inset-bottom), var(--tg-safe-area-inset-bottom, 0px)); color-scheme: dark; } * { box-sizing: border-box; } [hidden] { display: none !important; } html { min-height: 100%; background: var(--bg); } /* Le fond est porté par seul : un fond sur recouvrait le halo et le grain (calques fixes en z-index -1) sur la hauteur du contenu → bande de couleur différente en bas. */ body { margin: 0; min-height: 100vh; min-height: 100dvh; background: transparent; color: var(--text); font: 500 15px/1.5 var(--font); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; } /* Halo doré discret + grain */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(110% 55% at 50% -12%, rgba(214, 178, 94, 0.13), transparent 62%), radial-gradient(80% 40% at 50% 112%, rgba(214, 178, 94, 0.05), transparent 70%); } body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } .icon--sm { width: 18px; height: 18px; } .eyebrow { margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); } /* ─── Boutons : pilules plates, sans dégradé ni halo ───────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 50px; padding: 0 22px; border: 0; border-radius: 999px; font: 700 15px/1 var(--font); cursor: pointer; transition: background-color 0.15s ease, opacity 0.2s ease, transform 0.15s ease; } .btn:active { transform: scale(0.98); } .btn:disabled { opacity: 0.4; cursor: default; transform: none; } .btn small { font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.6; } .btn .icon { width: 18px; height: 18px; stroke-width: 2.2; } .btn--gold { background: var(--gold); color: #120f08; } .btn--gold:active { background: #c7a352; } .btn--line { background: rgba(255, 255, 255, 0.07); color: var(--text); } .btn--line:active { background: rgba(255, 255, 255, 0.12); } /* ─── Écran d'accès ────────────────────────────────────────────────────── */ .gate { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; padding: calc(28px + var(--safe-top)) 28px calc(24px + var(--safe-bottom)); text-align: center; } .brand { font-size: 14px; font-weight: 800; letter-spacing: 0.3em; padding-left: 0.3em; text-transform: uppercase; color: var(--gold); } .gate__view { flex: 1; width: 100%; max-width: 360px; display: flex; flex-direction: column; align-items: center; justify-content: center; animation: rise 0.55s ease both; } .crest { position: relative; width: 88px; height: 88px; margin-bottom: 30px; display: grid; place-items: center; border-radius: 50%; color: var(--gold-hi); background: radial-gradient(circle at 50% 30%, rgba(214, 178, 94, 0.18), rgba(214, 178, 94, 0.02) 72%); } .crest::before { content: ""; position: absolute; inset: 0; padding: 1px; border-radius: 50%; background: conic-gradient(from 210deg, rgba(214, 178, 94, 0.06), var(--gold-hi) 18%, rgba(214, 178, 94, 0.06) 42%, var(--gold) 68%, rgba(214, 178, 94, 0.06)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .crest::after { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 1px solid var(--line-soft); } .crest .icon { width: 32px; height: 32px; stroke-width: 1.6; } .crest--loading { background: none; } .crest--loading::before { background: conic-gradient(from 0deg, transparent 0 55%, var(--gold) 85%, var(--gold-hi)); animation: spin 1.3s linear infinite; } .gate__caption { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .gate__title { margin: 0 0 12px; font-size: 30px; font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; } .gate__text { margin: 0 0 32px; font-size: 15px; line-height: 1.6; color: var(--muted); text-wrap: balance; } .gate__actions { width: 100%; display: grid; gap: 12px; } .gate__hint { margin: 18px 0 0; font-size: 13px; line-height: 1.5; color: var(--gold); text-wrap: balance; } .gate__foot { font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); } /* Saisie du mot de passe d'accès */ .code-field { width: 100%; height: 58px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 14px; outline: 0; background: var(--surface); color: var(--gold-hi); font: 700 17px/1 var(--font); letter-spacing: 0.1em; text-align: center; font-variant-numeric: tabular-nums; transition: border-color 0.2s, box-shadow 0.2s; } .code-field::placeholder { color: var(--faint); } .code-field:focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(214, 178, 94, 0.08); } .code-field.is-error { border-color: #b35a4c; animation: shake 0.4s ease; } .gate__error { margin: 16px 0 0; font-size: 13px; line-height: 1.5; color: #dd8f80; text-wrap: balance; } /* ─── Pages ────────────────────────────────────────────────────────────── */ .pages { max-width: 560px; margin: 0 auto; padding: calc(16px + var(--safe-top)) 16px calc(var(--tabbar-h) + var(--tabbar-gap) + var(--safe-bottom) + 28px); } .page { animation: rise 0.35s ease both; } .section-title { margin: 32px 0 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); } .empty { display: flex; flex-direction: column; align-items: center; padding: 52px 24px; text-align: center; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, rgba(214, 178, 94, 0.05), rgba(214, 178, 94, 0) 65%); } .empty__icon { width: 64px; height: 64px; margin-bottom: 18px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--gold); } .empty h2 { margin: 0 0 8px; font-size: 19px; font-weight: 800; letter-spacing: -0.02em; } .empty p { margin: 0; max-width: 280px; font-size: 14px; line-height: 1.6; color: var(--muted); text-wrap: balance; } .empty .btn { width: auto; margin-top: 24px; } .empty--compact { padding: 26px 20px; } /* Recherche */ .search { display: flex; align-items: center; gap: 12px; height: 54px; margin-bottom: 18px; padding: 0 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--muted); transition: border-color 0.2s, box-shadow 0.2s, color 0.2s; } .search:focus-within { border-color: var(--line-strong); box-shadow: 0 0 0 4px rgba(214, 178, 94, 0.07); color: var(--gold); } .search .icon { width: 20px; height: 20px; } .search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--text); font: 600 16px var(--font); } .search input::placeholder { color: var(--faint); font-weight: 500; } .search input::-webkit-search-cancel-button { -webkit-appearance: none; } /* Compte */ .profile { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-raise); } .avatar { width: 60px; height: 60px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: var(--gold-grad); color: var(--ink); font-size: 22px; font-weight: 800; letter-spacing: -0.02em; } .avatar { position: relative; overflow: hidden; } .avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: fade-in 0.3s ease; } .avatar.has-photo { box-shadow: 0 0 0 2px var(--bg-raise), 0 0 0 3.5px var(--gold); } .profile__info { min-width: 0; } .profile__name { margin: 0 0 2px; font-size: 18px; font-weight: 800; letter-spacing: -0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .profile__handle { margin: 0; font-size: 14px; color: var(--muted); } .list { margin: 0; padding: 0; list-style: none; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-raise); } .list li { display: flex; align-items: center; gap: 14px; padding: 17px 18px; font-size: 14px; } .list li + li { border-top: 1px solid var(--line-soft); } .list .icon { width: 20px; height: 20px; color: var(--gold); } .list span { flex: 1; color: var(--muted); } .list strong { font-weight: 700; text-align: right; } .list .is-gold { color: var(--gold-hi); } /* ─── Barre de navigation : pilule flottante, floutée, sans bordure ────── */ .tabbar { position: fixed; left: 50%; bottom: calc(var(--tabbar-gap) + var(--safe-bottom)); z-index: 10; width: calc(100% - 32px); max-width: 420px; height: var(--tabbar-h); padding: 0 8px; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; border-radius: 32px; background: rgba(24, 24, 24, 0.6); -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%); box-shadow: 0 14px 36px -10px rgba(0, 0, 0, 0.8); transform: translateX(-50%); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .tabbar { background: rgba(24, 24, 24, 0.96); } } .tab { position: relative; height: 48px; margin: 0 2px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 24px; background: transparent; color: rgba(243, 238, 228, 0.55); cursor: pointer; transition: color 0.2s ease, background-color 0.25s ease; } .tab .icon { width: 25px; height: 25px; transition: transform 0.2s ease; } .tab:active .icon { transform: scale(0.86); } .tab.is-active { color: var(--gold-hi); background: rgba(214, 178, 94, 0.14); } .tab.is-active .icon { stroke-width: 2.1; } .tab__badge { position: absolute; top: 6px; left: calc(50% + 6px); min-width: 17px; height: 17px; padding: 0 5px; display: grid; place-items: center; border-radius: 9px; background: var(--gold); color: var(--ink); font-size: 10px; font-weight: 800; } /* Notification */ .toast { position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + var(--tabbar-gap) + var(--safe-bottom) + 14px); z-index: 60; width: max-content; max-width: calc(100% - 40px); padding: 13px 18px; border-radius: 14px; background: rgba(28, 25, 18, 0.92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); font-size: 13px; font-weight: 600; line-height: 1.45; text-align: center; opacity: 0; pointer-events: none; transform: translate(-50%, 10px); transition: opacity 0.3s ease, transform 0.3s ease; } .toast.is-visible { opacity: 1; transform: translate(-50%, 0); } /* ─── Boutique : cartes ────────────────────────────────────────────────── */ .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } /* Carte sombre, contour doré en dégradé (effet métal) + léger relief */ .card { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid transparent; border-radius: 20px; background: linear-gradient(180deg, #171512, #0b0b0b) padding-box, linear-gradient(150deg, rgba(245, 228, 171, 0.9), rgba(154, 117, 50, 0.3) 38%, rgba(214, 178, 94, 0.65) 72%, rgba(110, 82, 30, 0.35)) border-box; box-shadow: inset 0 1px 0 rgba(255, 236, 190, 0.1), 0 18px 30px -18px rgba(0, 0, 0, 0.95), 0 8px 22px -14px rgba(214, 178, 94, 0.3); cursor: pointer; -webkit-user-select: none; user-select: none; transition: transform 0.2s ease; } .card:active { transform: scale(0.97); } .card__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #101010; } .card__media::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, 0.45)); pointer-events: none; } .card__category { position: absolute; top: 9px; left: 9px; z-index: 1; max-width: calc(100% - 18px); } .card__flag { position: absolute; bottom: 9px; left: 9px; z-index: 2; } .card__body { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 11px 11px 12px; } .card__title { margin: 0; font-size: 14px; font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .card.is-soldout .card__media .media { filter: grayscale(0.7) brightness(0.6); } .card--skeleton { aspect-ratio: 4 / 6.4; cursor: default; box-shadow: none; background: linear-gradient(100deg, #111 30%, #1b1914 50%, #111 70%) padding-box, linear-gradient(150deg, rgba(214, 178, 94, 0.25), rgba(214, 178, 94, 0.08)) border-box; background-size: 300% 100%, 100% 100%; animation: shimmer 1.4s linear infinite; } .media { display: block; width: 100%; height: 100%; object-fit: cover; } .media-placeholder { width: 100%; height: 100%; display: grid; place-items: center; color: var(--gold-lo); background: radial-gradient(circle at 50% 40%, rgba(214, 178, 94, 0.12), transparent 70%); } .media-placeholder .icon { width: 34px; height: 34px; } /* Pastille floutée posée sur l'image (catégorie, épuisé) */ .chip-glass { display: inline-block; overflow: hidden; padding: 5px 10px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px; background: rgba(12, 12, 12, 0.4); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); color: var(--gold-hi); font-size: 11px; font-weight: 700; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; } /* Petites pastilles rondes, contour doré, transparentes (options) */ .pills { display: flex; flex-wrap: wrap; gap: 5px; } .pill { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border: 1px solid rgba(214, 178, 94, 0.55); border-radius: 999px; background: rgba(214, 178, 94, 0.07); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--gold-hi); font-size: 10.5px; font-weight: 700; white-space: nowrap; } .pills--lg { margin-bottom: 4px; gap: 7px; } .pills--lg .pill { height: 32px; padding: 0 13px; gap: 7px; font-size: 13px; } .pills--lg .pill .icon { width: 16px; height: 16px; stroke-width: 2; } /* ─── Fiche produit (modal) ────────────────────────────────────────────── */ html.is-locked, html.is-locked body { overflow: hidden; } .modal { position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-end; justify-content: center; } .modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: fade-in 0.25s ease both; } .modal__sheet { position: relative; display: flex; flex-direction: column; overflow: hidden; width: 100%; max-width: 560px; height: calc(100dvh - var(--safe-top) - 24px); border: 1px solid rgba(214, 178, 94, 0.35); border-bottom: 0; border-radius: 28px 28px 0 0; background: linear-gradient(180deg, #151411, #0a0a0a 45%); box-shadow: 0 -24px 60px -24px rgba(214, 178, 94, 0.28); animation: sheet-up 0.38s cubic-bezier(0.2, 0.8, 0.2, 1) both; } .modal.is-closing .modal__sheet { animation: sheet-down 0.22s ease both; } .modal.is-closing .modal__backdrop { animation: fade-out 0.22s ease both; } .modal__media { position: relative; flex: 0 0 auto; height: min(52dvh, 115vw); background: #0d0d0d; } .modal__media::after { content: ""; position: absolute; inset: 65% 0 0; background: linear-gradient(transparent, #151411); pointer-events: none; } .modal__close { position: absolute; top: 14px; right: 14px; z-index: 2; } .modal__category { position: absolute; top: 20px; left: 16px; z-index: 2; padding: 6px 12px; font-size: 12px; } .modal__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 8px 20px calc(28px + var(--safe-bottom)); } .sheet-title { margin: 0 0 8px; font-size: 26px; font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; } .tags { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 14px; font-size: 13px; font-weight: 700; color: var(--gold); } .sheet-text { margin: 0 0 16px; font-size: 14.5px; line-height: 1.6; color: var(--muted); white-space: pre-line; } .soldout-note { margin: 0 0 12px; font-size: 13px; font-weight: 700; color: #dd8f80; } /* ─── Étoiles et favoris ───────────────────────────────────────────────── */ .card__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; } .stars { position: relative; display: inline-flex; flex-shrink: 0; } .stars__row { display: inline-flex; gap: 2px; color: rgba(214, 178, 94, 0.32); } .stars__fill { position: absolute; top: 0; bottom: 0; left: 0; width: calc(var(--rating) / 5 * 100%); overflow: hidden; color: var(--gold); } .stars .icon { width: 13px; height: 13px; stroke-width: 1.6; } .stars .icon.is-filled { fill: currentColor; } .stars--lg .stars__row { gap: 3px; } .stars--lg .icon { width: 18px; height: 18px; } .fav { width: 30px; height: 30px; margin: -5px -5px -5px 0; flex-shrink: 0; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: none; color: rgba(243, 238, 228, 0.55); cursor: pointer; } .fav .icon { width: 18px; height: 18px; stroke-width: 1.9; transition: color 0.2s, fill 0.2s; } .fav.is-active { color: #e5484d; } .fav.is-active .icon { fill: currentColor; } .fav.is-popping .icon { animation: pop 0.35s ease; } .fav--lg { width: 40px; height: 40px; margin: 0 0 0 auto; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); } .fav--lg .icon { width: 20px; height: 20px; } .rating-row { display: flex; align-items: center; gap: 10px; margin: 4px 0 14px; } .rating-row__value { font-size: 15px; font-weight: 800; color: var(--gold-hi); } .rating-row__count { font-size: 13px; font-weight: 600; color: var(--muted); } .rate { display: flex; align-items: center; gap: 10px; width: fit-content; margin: -2px 0 16px; padding: 4px 14px 4px 14px; border: 1px dashed var(--line-strong); border-radius: 999px; } .rate__label { font-size: 12px; font-weight: 800; color: var(--gold); white-space: nowrap; } .rate__label em { margin-left: 4px; font-style: normal; font-weight: 600; color: var(--faint); } .rate__stars { display: inline-flex; } .rate__star { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; background: none; color: rgba(214, 178, 94, 0.4); cursor: pointer; } .rate__star .icon { width: 21px; height: 21px; } .rate__star.is-on { color: var(--gold); } .rate__star.is-on .icon { fill: currentColor; } .rate__clear { padding: 0; border: 0; background: none; color: var(--muted); font: 700 12px var(--font); cursor: pointer; } /* Petites pastilles quantité · prix, même famille que les options */ .pills--tiers { gap: 12px 8px; padding-top: 4px; } .tier-pill { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 4px 0 13px; border: 1px solid rgba(214, 178, 94, 0.55); border-radius: 999px; background: rgba(214, 178, 94, 0.07); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--text); font: 700 13px var(--font); white-space: nowrap; cursor: pointer; transition: background-color 0.2s, border-color 0.2s; } .tier-pill:disabled { opacity: 0.4; cursor: default; } .tier-pill__price { font-weight: 800; color: var(--gold-hi); font-variant-numeric: tabular-nums; } .tier-pill__icon { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--gold); color: #120f08; transition: background-color 0.2s; } .tier-pill__icon .icon { width: 15px; height: 15px; stroke-width: 2.8; } .tier-pill.in-cart { border-color: var(--gold); background: rgba(214, 178, 94, 0.15); } .tier-pill.is-added .tier-pill__icon { background: var(--gold-hi); animation: pop 0.4s ease; } .tier-pill__count { position: absolute; top: -8px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px; display: grid; place-items: center; border-radius: 10px; background: var(--text); color: #0a0a0a; font-size: 10.5px; font-weight: 800; } .tier-pill.is-added .tier-pill__count { animation: pop 0.4s ease; } .cart-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 0; border: 0; background: none; color: var(--gold-hi); font: 700 14px var(--font); cursor: pointer; } .cart-link .icon { width: 16px; height: 16px; } .cart-link__count { min-width: 20px; height: 20px; padding: 0 6px; display: grid; place-items: center; border-radius: 10px; background: var(--gold); color: #120f08; font-size: 11px; font-weight: 800; } /* Bouton rond (fermer, retour, supprimer) */ .icon-btn { width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 50%; background: rgba(12, 12, 12, 0.42); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); color: #fff; cursor: pointer; } .icon-btn .icon { width: 20px; height: 20px; } .icon-btn--plain { border-color: var(--line); background: var(--surface); color: var(--gold-hi); -webkit-backdrop-filter: none; backdrop-filter: none; } .icon-btn--sm { width: 36px; height: 36px; } .icon-btn--sm .icon { width: 17px; height: 17px; } .icon-btn--danger { border-color: rgba(179, 90, 76, 0.35); background: rgba(179, 90, 76, 0.08); color: #e39a8c; -webkit-backdrop-filter: none; backdrop-filter: none; } /* ─── Recherche ────────────────────────────────────────────────────────── */ .search-hint { margin: 28px 0 0; text-align: center; font-size: 14px; color: var(--muted); } /* ─── Panier ───────────────────────────────────────────────────────────── */ .cart { display: grid; gap: 10px; } .cart-line { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg-raise); } .cart-line__thumb { width: 56px; height: 56px; flex-shrink: 0; overflow: hidden; border-radius: 12px; background: #111; } .cart-line__info { flex: 1; min-width: 0; } .cart-line__name { margin: 0 0 3px; overflow: hidden; font-size: 14px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; } .cart-line__meta { margin: 0; font-size: 13px; color: var(--muted); } .stepper { display: flex; align-items: center; gap: 8px; } .stepper button { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line-strong); border-radius: 50%; background: transparent; color: var(--gold-hi); cursor: pointer; } .stepper button .icon { width: 16px; height: 16px; } .stepper span { min-width: 16px; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; } .cart-summary { display: grid; gap: 14px; margin-top: 16px; padding: 18px; border: 1px solid var(--line-strong); border-radius: 18px; background: linear-gradient(160deg, #18140c, #0b0b0b 70%); } .cart-summary__row { display: flex; align-items: baseline; justify-content: space-between; font-weight: 700; color: var(--muted); } .cart-summary__row strong { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: var(--gold-hi); } /* ─── Compte : accès admin ─────────────────────────────────────────────── */ .list-link { display: flex; align-items: center; gap: 14px; width: 100%; margin-top: 16px; padding: 17px 18px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: rgba(214, 178, 94, 0.05); color: var(--gold-hi); font: 700 15px var(--font); text-align: left; cursor: pointer; } .list-link span { flex: 1; } .list-link .icon { width: 20px; height: 20px; } /* ─── Administration ───────────────────────────────────────────────────── */ .topbar { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; } .topbar__title { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; } .segmented { display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; gap: 4px; padding: 4px; border-radius: 999px; background: var(--surface); } .segmented button { height: 40px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: 700 14px var(--font); cursor: pointer; transition: background-color 0.2s, color 0.2s; } .segmented button.is-active { background: #26241f; color: var(--gold-hi); } .admin-panel { display: grid; gap: 12px; margin-top: 16px; } .admin-list { display: grid; gap: 8px; } .admin-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px 10px 10px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg-raise); color: var(--text); font: inherit; text-align: left; cursor: pointer; } .admin-row--static { padding-left: 16px; cursor: default; } .admin-row__thumb { width: 52px; height: 52px; flex-shrink: 0; overflow: hidden; border-radius: 12px; background: #111; } .admin-row__info { flex: 1; min-width: 0; display: grid; gap: 2px; } .admin-row__info strong, .admin-row__info span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .admin-row__info strong { font-size: 14.5px; font-weight: 800; } .admin-row__info span { font-size: 12.5px; color: var(--muted); } .admin-row__chevron { width: 18px; height: 18px; color: var(--faint); } .badge { padding: 3px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); color: var(--muted); font-size: 11px; font-weight: 700; } .inline-form { display: flex; gap: 8px; } .inline-form .field { flex: 1; } .btn--sm { width: auto; height: 40px; padding: 0 16px; font-size: 14px; } .btn--sm .icon { width: 16px; height: 16px; } .btn--danger { background: rgba(227, 154, 140, 0.1); color: #e39a8c; } .inline-form .btn { height: 48px; } .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .panel-head__count { font-size: 13px; font-weight: 700; color: var(--muted); } /* Formulaires */ .field { width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; outline: 0; background: var(--surface); color: var(--text); font: 600 16px var(--font); -webkit-appearance: none; appearance: none; transition: border-color 0.2s, box-shadow 0.2s; } .field:focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(214, 178, 94, 0.08); } .field::placeholder { color: var(--faint); font-weight: 500; } .field--area { height: auto; min-height: 92px; padding: 12px 14px; line-height: 1.5; resize: vertical; } select.field { padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d6b25e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-position: right 14px center; background-repeat: no-repeat; background-size: 16px; } .field-group { display: grid; gap: 8px; } .label { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); } .label em { margin-left: 6px; font-style: normal; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--faint); } .help { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--faint); } .form-error { margin: 0; padding: 12px 14px; border-radius: 12px; background: rgba(179, 90, 76, 0.1); color: #e39a8c; font-size: 13.5px; font-weight: 600; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .affix { position: relative; display: block; } .affix .field { padding-right: 34px; } .affix span { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); color: var(--muted); font-size: 13px; font-weight: 700; pointer-events: none; } .tiers { display: grid; gap: 8px; } .tier { display: grid; grid-template-columns: 1fr 1fr 36px; align-items: center; gap: 8px; } .btn--line.btn--sm { justify-self: start; } .tags-input { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 48px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); } .tags-input:focus-within { border-color: var(--gold); } .tags-input input { flex: 1; min-width: 120px; height: 32px; border: 0; outline: 0; background: none; color: var(--text); font: 600 16px var(--font); } .tags-input input::placeholder { color: var(--faint); font-weight: 500; } .tag-chips { display: contents; } .tag-chip { display: inline-flex; align-items: center; gap: 2px; height: 30px; padding: 0 4px 0 11px; border: 1px solid rgba(214, 178, 94, 0.5); border-radius: 999px; background: rgba(214, 178, 94, 0.08); color: var(--gold-hi); font-size: 13px; font-weight: 700; } .tag-chip button { width: 22px; height: 22px; display: grid; place-items: center; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; } .tag-chip .icon { width: 14px; height: 14px; } .toggles { display: grid; gap: 8px; } .toggle { position: relative; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); font-weight: 700; cursor: pointer; transition: border-color 0.2s; } .toggle > span { flex: 1; display: flex; align-items: center; gap: 10px; } .toggle > span .icon { width: 19px; height: 19px; color: var(--gold); } .toggle input { position: absolute; opacity: 0; pointer-events: none; } .toggle i { position: relative; width: 44px; height: 26px; flex-shrink: 0; border-radius: 999px; background: #2a2926; transition: background 0.2s; } .toggle i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #8d877b; transition: transform 0.2s, background-color 0.2s; } .toggle input:checked ~ i { background: var(--gold); } .toggle input:checked ~ i::after { transform: translateX(18px); background: var(--ink); } .toggle:has(input:checked) { border-color: var(--line-strong); } .upload { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; max-height: 340px; overflow: hidden; border: 1px dashed var(--line-strong); border-radius: 18px; background: rgba(214, 178, 94, 0.03); cursor: pointer; } .upload__preview { position: absolute; inset: 0; } .upload__empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 20px; text-align: center; font-size: 12.5px; color: var(--muted); } .upload__empty .icon { width: 30px; height: 30px; margin-bottom: 6px; color: var(--gold); } .upload__empty strong { font-size: 15px; color: var(--text); } .upload { cursor: default; } .upload__file { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 20px; text-align: center; font-size: 12.5px; color: var(--muted); } .upload__file .icon { width: 30px; height: 30px; color: var(--gold); } .upload__file strong { max-width: 100%; overflow: hidden; font-size: 14px; color: var(--text); text-overflow: ellipsis; white-space: nowrap; } .upload-actions { display: flex; gap: 8px; } .upload-actions .btn { flex: 1; } .upload-actions .btn--danger { flex: 0 0 auto; } .link-btn { justify-self: center; padding: 6px 10px; border: 0; background: none; color: #e39a8c; font: 700 13px var(--font); cursor: pointer; } /* Éditeur plein écran */ .modal--full .modal__sheet { height: calc(100dvh - var(--safe-top) - 10px); } .editor__head { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; gap: 8px; padding: 14px 14px 12px; border-bottom: 1px solid var(--line-soft); } .editor__head h2 { margin: 0; text-align: center; font-size: 17px; font-weight: 800; } .editor__body { flex: 1; display: grid; align-content: start; gap: 22px; overflow-y: auto; overscroll-behavior: contain; padding: 18px 18px 0; } /* Bouton Enregistrer toujours visible en bas de l'éditeur (le collage se fait sur la zone de contenu, d'où l'absence de marge basse sur le formulaire : c'est cette barre qui porte l'espace du bas) */ .editor__save { position: sticky; bottom: 0; margin: 0 -18px; padding: 14px 18px calc(16px + var(--safe-bottom)); background: linear-gradient(to top, #0a0a0a 75%, rgba(10, 10, 10, 0)); } @keyframes shimmer { from { background-position: 100% 0, 0 0; } to { background-position: -100% 0, 0 0; } } @keyframes sheet-up { from { transform: translateY(100%); } } @keyframes sheet-down { to { transform: translateY(100%); } } @keyframes fade-in { from { opacity: 0; } } @keyframes fade-out { to { opacity: 0; } } @keyframes pop { 40% { transform: scale(1.2); } } @keyframes rise { from { opacity: 0; transform: translateY(10px); } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ─── Éléments partagés (admin, commande, messagerie) ──────────────────── */ .stack { display: grid; gap: 10px; } .stack--lg { gap: 16px; } .field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .field-row--postal { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } .help--center { text-align: center; } .label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .counter { font-size: 12px; font-weight: 700; color: var(--faint); font-variant-numeric: tabular-nums; } .counter.is-over { color: #e39a8c; } .pill--soon { opacity: 0.45; } .link-btn--gold { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 4px 0; color: var(--gold-hi); } .icon-btn:disabled { opacity: 0.35; cursor: default; } .chips { display: flex; flex-wrap: wrap; gap: 6px; } .chips--scroll { flex-wrap: nowrap; overflow-x: auto; margin: 0 -18px; padding: 0 18px 2px; scrollbar-width: none; } .chips--scroll::-webkit-scrollbar { display: none; } .chip { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); font: 700 13px var(--font); white-space: nowrap; cursor: pointer; transition: background-color 0.2s, color 0.2s, border-color 0.2s; } .chip span { color: var(--faint); font-variant-numeric: tabular-nums; } .chip.is-active { border-color: var(--gold); background: rgba(214, 178, 94, 0.14); color: var(--gold-hi); } .chip.is-active span { color: var(--gold); } /* Onglets de l'administration : défilement horizontal */ .admin-tabs { display: flex; gap: 4px; overflow-x: auto; margin: 0 -16px; padding: 0 16px; scrollbar-width: none; } .admin-tabs::-webkit-scrollbar { display: none; } .admin-tabs button { flex-shrink: 0; height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--surface); color: var(--muted); font: 700 14px var(--font); cursor: pointer; transition: background-color 0.2s, color 0.2s; } .admin-tabs button.is-active { background: #26241f; color: var(--gold-hi); } .settings-card { display: grid; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-raise); } .settings-card__title { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 16px; font-weight: 800; letter-spacing: -0.01em; } .settings-card__title .icon { width: 19px; height: 19px; color: var(--gold); } .settings-card.is-soon { opacity: 0.5; } .toggle--head { min-height: 44px; padding: 0; border: 0; background: none; font-size: 16px; font-weight: 800; } /* ─── Livraison : zones et créneaux ────────────────────────────────────── */ .zone { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--line-soft); border-radius: 16px; background: var(--surface); } .zone__head { display: flex; gap: 8px; align-items: center; } .zone .field, .slot .field { background: var(--bg); } .slot { display: grid; gap: 8px; padding: 10px; border-radius: 14px; background: rgba(255, 255, 255, 0.03); } .days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .day { height: 34px; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--muted); font: 800 13px var(--font); cursor: pointer; } .day.is-on { border-color: var(--gold); background: var(--gold); color: #120f08; } .slot__times { display: grid; grid-template-columns: 1fr auto 1fr 36px; align-items: center; gap: 6px; } .slot__times > span { color: var(--faint); font-weight: 700; } .slot__times .field { height: 42px; padding: 0 8px; font-size: 15px; text-align: center; } .inline-field { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 10px; } .inline-field > span { font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); } .slot .inline-field .field { height: 42px; font-size: 15px; } .toggle--head .badge { flex: 0 0 auto; } .help.is-error { color: #e39a8c; } [data-hours-hint]:empty { display: none; } .tg-preview__text { max-height: 420px; overflow-y: auto; } .field::-webkit-calendar-picker-indicator { filter: invert(0.7) sepia(1) saturate(3) hue-rotate(5deg); } /* ─── Bot : aperçu façon Telegram et éditeur ───────────────────────────── */ .tg-preview { overflow: hidden; border-radius: 16px 16px 16px 6px; background: #1c1d21; } .tg-preview__media { max-height: 320px; overflow: hidden; background: #111; } .tg-preview__media .media { max-height: 320px; object-fit: contain; } .tg-preview__text { padding: 10px 12px 12px; font-size: 14.5px; line-height: 1.45; color: #f1f1f1; white-space: pre-wrap; overflow-wrap: anywhere; } .tg-preview__text blockquote { margin: 4px 0; padding: 2px 10px; border-left: 3px solid #7aa7ff; border-radius: 4px; background: rgba(122, 167, 255, 0.1); } .tg-preview__text code, .tg-preview__text pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; color: #9fc1ff; } .tg-preview__text pre { margin: 4px 0; white-space: pre-wrap; } .tg-link { color: #7aa7ff; } .tg-spoiler { border-radius: 4px; background: rgba(255, 255, 255, 0.18); color: transparent; } .tg-placeholder { color: var(--faint); } .tg-buttons { display: grid; gap: 4px; margin-top: -8px; } .tg-buttons:empty { display: none; } .tg-buttons__row { display: flex; gap: 4px; } .tg-button { flex: 1; min-width: 0; overflow: hidden; padding: 10px 8px; border-radius: 10px; background: rgba(40, 42, 48, 0.9); color: #fff; font-size: 13.5px; font-weight: 700; text-align: center; text-overflow: ellipsis; white-space: nowrap; } .tg-button--primary { background: #6d5bd0; } .tg-button--success { background: #3a9d5d; } .tg-button--danger { background: #d0514c; } .toolbar { display: flex; flex-wrap: wrap; gap: 6px; } .toolbar button { display: inline-flex; align-items: center; gap: 6px; min-width: 38px; height: 36px; padding: 0 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); font: 700 14px var(--font); cursor: pointer; } .toolbar button:active, .toolbar button.is-active { border-color: var(--gold); color: var(--gold-hi); } .toolbar .icon { width: 17px; height: 17px; color: var(--gold); } .field--code { min-height: 180px; font: 500 14px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .emoji-panel { display: grid; gap: 10px; padding: 12px; border: 1px dashed var(--line-strong); border-radius: 14px; } .emoji-known { display: flex; flex-wrap: wrap; gap: 6px; } .emoji-known:empty { display: none; } .emoji-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text); font: 600 15px var(--font); cursor: pointer; } .emoji-chip span { font-size: 11px; font-weight: 700; color: var(--muted); } .emoji-form { display: grid; grid-template-columns: minmax(0, 1fr) 72px auto; gap: 6px; } .emoji-form #emojiFallback { text-align: center; padding: 0 6px; } .emoji-form .field { height: 40px; font-size: 15px; } .emoji-form .btn { height: 40px; } .button-row { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line-soft); border-radius: 16px; background: var(--surface); } .button-row__head { display: flex; align-items: center; justify-content: space-between; } .button-row__tools { display: flex; gap: 6px; } .bot-button { display: grid; gap: 8px; padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); } .bot-button__head { display: flex; gap: 8px; align-items: center; } .bot-button .field { height: 44px; background: var(--bg); font-size: 15px; } /* ─── Commandes (admin) ────────────────────────────────────────────────── */ .order { border: 1px solid var(--line); border-radius: 16px; background: var(--bg-raise); } .order[open] { border-color: var(--line-strong); } .order summary { display: flex; align-items: center; gap: 12px; padding: 12px 14px; list-style: none; cursor: pointer; } .order summary::-webkit-details-marker { display: none; } .order__icon { width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; border-radius: 12px; background: rgba(214, 178, 94, 0.1); color: var(--gold); } .order__icon .icon { width: 19px; height: 19px; } .order__info { flex: 1; min-width: 0; display: grid; gap: 2px; } .order__info strong { font-size: 14.5px; font-weight: 800; } .order__info span { overflow: hidden; font-size: 12.5px; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; } .order__chevron { width: 18px; height: 18px; color: var(--faint); transition: transform 0.2s; } .order[open] .order__chevron { transform: rotate(180deg); } .order__body { display: grid; gap: 12px; padding: 2px 14px 14px; } .order__row { display: grid; grid-template-columns: 76px 1fr; gap: 10px; font-size: 13.5px; line-height: 1.5; } .order__row > span { padding-top: 2px; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); } .order__row p { margin: 0; overflow-wrap: anywhere; } .order__row em { font-style: normal; color: var(--muted); } .order__row a { color: var(--gold-hi); } .order__actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; } /* ─── Validation du panier ─────────────────────────────────────────────── */ .choices { display: grid; gap: 8px; } .choice { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 60px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color 0.2s, background-color 0.2s; } .choice > .icon { width: 22px; height: 22px; color: var(--gold); } .choice__text { flex: 1; min-width: 0; display: grid; gap: 1px; } .choice__text strong { font-size: 15px; font-weight: 800; } .choice__text small { overflow: hidden; font-size: 12.5px; font-weight: 600; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; } .choice.is-active { border-color: var(--gold); background: rgba(214, 178, 94, 0.1); } .choice.is-active::after { content: ""; width: 18px; height: 18px; flex-shrink: 0; border-radius: 50%; background: var(--gold); box-shadow: inset 0 0 0 5px #1d1a12; } .choice:disabled { opacity: 0.4; cursor: default; } .choice:disabled > .icon { color: var(--faint); } .zone-hint { margin: 0; padding: 10px 12px; border-radius: 12px; background: rgba(214, 178, 94, 0.08); color: var(--gold-hi); font-size: 13px; font-weight: 700; } .zone-hint.is-error { background: rgba(179, 90, 76, 0.1); color: #e39a8c; } .slot-pills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .slot-pill:disabled { border-style: dashed; background: transparent; } .slot-pills:empty { display: none; } .slot-pill { display: grid; place-content: center; height: 46px; padding: 0 8px; border: 1px solid rgba(214, 178, 94, 0.45); border-radius: 999px; background: rgba(214, 178, 94, 0.05); color: var(--text); font: 700 14px/1.15 var(--font); font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color 0.2s, border-color 0.2s, color 0.2s; } .slot-pill small { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; } .slot-pill.is-active { border-color: var(--gold); background: var(--gold); color: #120f08; } .slot-pill:disabled { opacity: 0.35; cursor: default; } .summary { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--line-strong); border-radius: 16px; background: linear-gradient(160deg, #18140c, #0b0b0b 70%); } .summary__line { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; } .summary__line span { min-width: 0; } .summary__line em { font-style: normal; color: var(--muted); } .summary__line strong { flex-shrink: 0; font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; } .summary__line--muted { color: var(--muted); } .summary__line--muted strong { font-weight: 700; color: var(--text); } .summary__total { display: flex; align-items: baseline; justify-content: space-between; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--line-soft); font-weight: 700; color: var(--muted); } .summary__total strong { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--gold-hi); } .checkout-done { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 28px calc(28px + var(--safe-bottom)); text-align: center; animation: rise 0.45s ease both; } .checkout-done .btn { max-width: 320px; } .checkout-done .gate__title { letter-spacing: 0.02em; font-variant-numeric: tabular-nums; } /* ─── Messagerie ───────────────────────────────────────────────────────── */ .chat-fab { position: fixed; right: max(16px, calc(50% - 264px)); bottom: calc(var(--tabbar-h) + var(--tabbar-gap) + var(--safe-bottom) + 14px); z-index: 11; width: 54px; height: 54px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(24, 24, 24, 0.66); -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%); box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.85); color: var(--gold-hi); cursor: pointer; animation: fade-in 0.3s ease both; transition: transform 0.15s ease; } .chat-fab:active { transform: scale(0.92); } .chat-fab .icon { width: 25px; height: 25px; stroke-width: 1.9; } .chat-fab__badge { position: absolute; top: 2px; right: 2px; min-width: 19px; height: 19px; padding: 0 5px; display: grid; place-items: center; border-radius: 10px; background: var(--gold); color: var(--ink); font-size: 10.5px; font-weight: 800; } .chat.modal__sheet { height: calc(100dvh - var(--safe-top) - 10px); } .chat__head { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; gap: 10px; min-height: 66px; padding: 12px 14px; border-bottom: 1px solid var(--line-soft); } .chat__head:has(.chat__actions button) { grid-template-columns: 82px 1fr 82px; } .chat__heading { min-width: 0; text-align: center; } .chat__heading h2 { margin: 0; overflow: hidden; font-size: 16px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; } .chat__heading p { margin: 1px 0 0; overflow: hidden; font-size: 12px; font-weight: 600; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; } .chat__actions { display: flex; justify-content: flex-end; gap: 6px; } .chat__thread, .chat__inbox { flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .chat__thread { display: flex; flex-direction: column; gap: 6px; padding: 14px 14px 10px; } .chat__inbox { display: grid; align-content: start; gap: 2px; padding: 8px 8px calc(16px + var(--safe-bottom)); } .chat__loading { flex: 1; display: grid; place-items: center; min-height: 200px; } .chat__loading .crest { width: 44px; height: 44px; margin: 0; } .chat__loading .crest::after { display: none; } .chat__empty { margin: auto; max-width: 290px; padding: 32px 12px; display: flex; flex-direction: column; align-items: center; text-align: center; } .chat__empty p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); text-wrap: balance; } .chat__day { margin: 10px 0 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; text-align: center; color: var(--faint); } .chat__inbox .chat__day { margin: 16px 0 6px; } .msg { align-self: flex-start; max-width: 82%; padding: 8px 12px 6px; border-radius: 18px 18px 18px 6px; background: var(--surface); animation: rise 0.2s ease both; } .msg p { margin: 0; font-size: 14.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; } .msg time { display: block; margin-top: 2px; font-size: 10.5px; font-weight: 600; text-align: right; color: var(--faint); } .msg--mine { align-self: flex-end; border-radius: 18px 18px 6px 18px; background: #2a2416; } .msg--mine time { color: rgba(241, 222, 163, 0.5); } .composer { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px calc(10px + var(--safe-bottom)); border-top: 1px solid var(--line-soft); background: #0b0b0b; } .composer textarea { flex: 1; min-height: 44px; max-height: 132px; padding: 11px 16px; border: 1px solid var(--line); border-radius: 22px; outline: 0; background: var(--surface); color: var(--text); font: 500 16px/1.4 var(--font); resize: none; } .composer textarea:focus { border-color: var(--line-strong); } .composer textarea::placeholder { color: var(--faint); } .composer__send { width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--gold); color: #120f08; cursor: pointer; transition: opacity 0.2s, transform 0.15s; } .composer__send:disabled { opacity: 0.3; cursor: default; } .composer__send:active { transform: scale(0.92); } .composer__send .icon { width: 20px; height: 20px; stroke-width: 2.6; } .inbox-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; border: 0; border-radius: 14px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; } .inbox-row:active { background: var(--surface); } .inbox-row.is-closed { opacity: 0.6; } .avatar--sm { width: 46px; height: 46px; font-size: 16px; } .inbox-row__info { flex: 1; min-width: 0; display: grid; gap: 2px; } .inbox-row__info strong, .inbox-row__info > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .inbox-row__info strong { font-size: 15px; font-weight: 800; } .inbox-row__info strong em { font-style: normal; font-weight: 600; color: var(--muted); } .inbox-row__info > span { font-size: 13px; color: var(--muted); } .inbox-row__side { display: grid; justify-items: end; gap: 5px; } .inbox-row__side time { font-size: 11.5px; font-weight: 600; color: var(--faint); } .inbox-row__badge { min-width: 20px; height: 20px; padding: 0 6px; display: grid; place-items: center; border-radius: 10px; background: var(--gold); color: var(--ink); font-size: 11px; font-weight: 800; } .bot-button .inline-field { grid-template-columns: 68px minmax(0, 1fr); } /* ─── Utilisateurs, équipe et envois groupés ───────────────────────────── */ .broadcast { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--line-soft); border-radius: 16px; background: var(--surface); } .broadcast__text { display: grid; gap: 2px; } .broadcast__text strong { font-size: 15px; font-weight: 800; } .broadcast__text span { font-size: 13px; color: var(--muted); } .broadcast__actions { display: flex; flex-wrap: wrap; gap: 8px; } .broadcast__actions .btn { flex: 1 1 auto; } .restock-preview { max-height: 260px; border-radius: 14px; font-size: 13.5px; } .progress-card { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line-strong); border-radius: 16px; background: rgba(214, 178, 94, 0.06); } .progress-card__head { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; } .progress-card__head span { color: var(--muted); font-variant-numeric: tabular-nums; } .progress { height: 8px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, 0.08); } .progress span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--gold); transition: width 0.4s ease; } .progress-card .link-btn { justify-self: start; padding: 0; } .history { display: grid; gap: 4px; } .history:empty { display: none; } .history p { display: flex; justify-content: space-between; gap: 10px; margin: 0; font-size: 12.5px; color: var(--muted); } .history p strong { color: var(--text); font-weight: 700; } .search--compact { height: 46px; margin: 0; } .user-row { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg-raise); } .user-row__head { display: flex; align-items: center; gap: 12px; } .user-row__info { flex: 1; min-width: 0; display: grid; gap: 2px; } .user-row__info strong, .user-row__info span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-row__info strong { font-size: 14.5px; font-weight: 800; } .user-row__info span { font-size: 12.5px; color: var(--muted); } .user-row__tags { display: flex; flex-wrap: wrap; gap: 5px; } .user-row__actions { display: flex; flex-wrap: wrap; gap: 8px; } .tag { height: 22px; padding: 0 9px; display: inline-flex; align-items: center; border-radius: 999px; background: rgba(255, 255, 255, 0.06); color: var(--muted); font-size: 11px; font-weight: 700; } .tag--gold { background: rgba(214, 178, 94, 0.16); color: var(--gold-hi); } .tag--ok { background: rgba(58, 157, 93, 0.14); color: #8fd4a8; } .tag--warn { background: rgba(179, 90, 76, 0.14); color: #e39a8c; } /* Paiement : une seule possibilité pour le moment */ .payment-note { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: 16px; background: rgba(214, 178, 94, 0.07); } .payment-note .icon { width: 22px; height: 22px; color: var(--gold); } .payment-note span { display: grid; gap: 2px; } .payment-note strong { font-size: 15px; font-weight: 800; } .payment-note small { font-size: 12.5px; color: var(--muted); }