/* Deepstock Concept — identité propre « vitrine nocturne ». Nuit profonde, craie, un seul accent lime. La photo de la paire est le seul élément lumineux de l'écran. Aucune ombre douce, aucun dégradé décoratif, aucun arrondi uniforme : filets d'un pixel et angles francs. Distincte de Nike Scouting (encre / papier / orange), volontairement. Mobile-first. Aucun nom de classe n'a changé. */ :root { /* surfaces */ --nuit: #18191c; --nuit-2: #202227; --nuit-3: #282b31; --nuit-4: #33373e; --paper: var(--nuit); --paper-2: var(--nuit-3); --card: var(--nuit-2); --ink: #edeef0; --ink-2: #b6bac0; --ink-3: #d2d5da; --text: #edeef0; --craie: #edeef0; --muted: #8f949b; --line: rgba(237,238,240,.11); --line-strong: rgba(237,238,240,.22); /* accent unique */ --lime: #d7ff3e; --lime-dim: #aacd21; --lime-ink: #131417; --lime-pale: rgba(215,255,62,.13); --orange: var(--lime); --orange-2: var(--lime); --orange-ink: var(--lime); --orange-pale: var(--lime-pale); /* signaux, employés avec parcimonie */ --green: #6ee7a0; --green-pale: rgba(110,231,160,.13); --red: #ff6257; --red-pale: rgba(255,98,87,.13); --blue: #8fbaff; --blue-pale: rgba(143,186,255,.13); --amber: #ffc24b; --amber-pale: rgba(255,194,75,.13); --radius: 6px; --radius-sm: 4px; --shadow: none; --shadow-lg: 0 32px 64px -32px rgba(0,0,0,.9); --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif; --font-body: "Archivo", "Helvetica Neue", Arial, sans-serif; --wide: 107; /* axe de chasse de la variable Archivo, réservé au display. Au-dela de ~110 les lettres s'elargissent sans gagner en presence, et combinees a un interlettrage negatif elles paraissent ecrasees. */ --tabbar: 66px; --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px); } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html { height: 100%; background: var(--nuit); } body { margin: 0; min-height: 100%; background: var(--nuit); color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.4; -webkit-font-smoothing: antialiased; overscroll-behavior-y: none; font-variant-numeric: tabular-nums; } button, input, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; border: 0; background: none; padding: 0; } img { display: block; max-width: 100%; } #app { max-width: 560px; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; background: var(--nuit); } /* Le display : large, lourd, resserré. L'inverse exact du condensé de l'appli pros. */ .brand-title, .topbar-title, .card h2, .card.hero .big, .section-title, .btn, .chip, .role-chip, .fold-title, .stat .value, .pprice .now, .sc-name, .sc-price .big, .pay-amount, .pay-steps li span.big-ref, .price-preview .big, .deck-count, .chip-btn, .sheet h3, .empty h3, .toast, .slim-title, .sc-zoom, .sc-info-btn, .key, .size-btn, .stepper .val, .stamp, .sc-badge, .sc-last, .hero-kicker, .stat-row > div:last-child { font-family: var(--font-display); font-variation-settings: "wdth" var(--wide); } /* ---------- Barre haute ---------- */ .topbar { background: var(--nuit); color: var(--craie); padding: calc(12px + var(--safe-t)) 18px 14px; position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--line); } .topbar-row { display: flex; align-items: center; gap: 12px; } .brand { display: flex; align-items: center; gap: 11px; flex: 1; min-width: 0; } .brand img { width: 34px; height: 34px; border-radius: 3px; } .brand-title { font-weight: 800; font-size: 19px; letter-spacing: -.01em; text-transform: uppercase; line-height: 1; } .brand-sub { font-size: 11px; color: var(--muted); margin-top: 2px; letter-spacing: .14em; } .role-chip { font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; background: var(--lime); color: var(--lime-ink); padding: 5px 9px; border-radius: 2px; white-space: nowrap; } .role-chip.particulier { background: transparent; color: var(--craie); border: 1px solid var(--line-strong); } .topbar-title { font-weight: 800; font-size: clamp(32px, 9.2vw, 40px); line-height: 1.04; margin: 16px 0 0; letter-spacing: -.004em; } .topbar-title small { display: block; font-variation-settings: "wdth" 100; font-weight: 400; font-size: 13.5px; color: var(--muted); margin-top: 8px; letter-spacing: 0; text-transform: none; } .back-btn { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-weight: 600; font-size: 12px; letter-spacing: .1em; padding: 6px 0; } .back-btn::before { content: "←"; font-size: 15px; } /* ---------- Écrans ---------- */ .screen { flex: 1; padding: 16px 16px calc(var(--tabbar) + var(--safe-b) + 24px); } .screen.no-tabs { padding-bottom: calc(24px + var(--safe-b)); } .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; padding: 16px; margin-bottom: 10px; } .card h2 { margin: 0 0 6px; font-weight: 800; font-size: 21px; letter-spacing: -.004em; line-height: 1.12; } .card p { margin: 6px 0 0; color: var(--muted); font-size: 14.5px; } .card.hero { background: var(--nuit-2); border-color: var(--line-strong); color: var(--craie); } .card.hero p { color: var(--ink-2); } .card.hero .big { font-weight: 800; font-size: 46px; line-height: .95; margin: 10px 0 4px; letter-spacing: -.03em; color: var(--lime); } .notice { display: flex; gap: 10px; align-items: flex-start; padding: 12px 13px; border-radius: var(--radius-sm); background: var(--nuit-3); border-left: 2px solid var(--amber); color: var(--ink-3); font-size: 14.5px; margin-bottom: 10px; } .notice.info { border-left-color: var(--blue); } .notice.ok { border-left-color: var(--green); } .notice b { font-weight: 700; color: var(--craie); } .row { display: flex; align-items: center; gap: 10px; } .row h2 { white-space: nowrap; } .row.between { justify-content: space-between; } .kv { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 15px; } .kv:first-of-type { border-top: 0; } .kv span { color: var(--muted); } .kv b { text-align: right; color: var(--craie); } .section-title { font-weight: 700; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin: 22px 0 8px; } /* ---------- Boutons ---------- */ .btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; padding: 0 18px; border-radius: var(--radius-sm); background: var(--lime); color: var(--lime-ink); font-weight: 800; font-size: 16px; letter-spacing: .1em; text-transform: uppercase; transition: transform .08s, background .15s; box-shadow: none; } .btn:active { transform: scale(.985); background: var(--lime-dim); } .btn:disabled { opacity: .3; } .btn.orange, .btn.signal { background: var(--lime); color: var(--lime-ink); box-shadow: none; } .btn.green { background: var(--green); color: var(--lime-ink); } .btn.red { background: var(--red); color: var(--lime-ink); } .btn.ghost { background: transparent; color: var(--craie); border: 1px solid var(--line-strong); } .btn.ghost:active { background: var(--nuit-3); } .btn.ghost.light { color: var(--craie); border-color: var(--line-strong); } .btn.small { min-height: 44px; font-size: 13px; } .btn.link { background: none; color: var(--lime); min-height: 40px; font-variation-settings: "wdth" 100; font-weight: 600; font-size: 14px; letter-spacing: 0; text-transform: none; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .btn.link:active { background: none; color: var(--lime-dim); } .btn.link.light { color: var(--ink-2); } .btn + .btn { margin-top: 8px; } .btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .btn-row .btn + .btn { margin-top: 0; } /* ---------- Formulaires ---------- */ .field { display: block; margin-top: 14px; } .field > span { display: block; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; } .field > span em { font-style: normal; color: var(--lime); } .input { width: 100%; min-height: 52px; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--nuit-3); color: var(--craie); font-size: 17px; font-weight: 500; outline: none; transition: border-color .15s; } .input:focus { border-color: var(--lime); } .input::placeholder { color: var(--muted); } .input-row { display: flex; gap: 8px; } .input-row .input { flex: 1; } .input-row .eye { width: 52px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--nuit-3); font-size: 18px; filter: grayscale(1) opacity(.8); } .hint { font-size: 13px; color: var(--muted); margin-top: 7px; } .form-msg { min-height: 22px; color: var(--red); font-weight: 600; margin-top: 10px; font-size: 14.5px; } .form-msg.ok { color: var(--green); } .chips { display: flex; flex-wrap: wrap; gap: 6px; } .chip { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; padding: 5px 9px; border-radius: 2px; background: transparent; border: 1px solid var(--line-strong); color: var(--ink-2); white-space: nowrap; } .chip.blue { background: transparent; border-color: rgba(143,186,255,.4); color: var(--blue); } .chip.orange { background: var(--lime-pale); border-color: rgba(215,255,62,.4); color: var(--lime); } .size-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; } .size-btn { min-height: 46px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: transparent; font-weight: 700; font-size: 17px; color: var(--craie); transition: all .1s; } .size-btn.on { background: var(--lime); color: var(--lime-ink); border-color: var(--lime); } .size-btn:active { transform: scale(.95); } .seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 6px; } .seg-btn { min-height: 48px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: transparent; font-weight: 600; font-size: 15px; color: var(--ink-2); } .seg-btn.on { background: var(--lime); border-color: var(--lime); color: var(--lime-ink); font-weight: 700; } .seg-btn.on.orange { background: var(--lime); border-color: var(--lime); color: var(--lime-ink); } /* ---------- Accueil (non connecté) ---------- */ .welcome { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 28px 22px calc(28px + var(--safe-b)); background: var(--nuit); color: var(--craie); min-height: 100dvh; background-image: none; } .welcome-logo { display: flex; align-items: center; gap: 14px; margin-bottom: 30px; } .welcome-logo img { width: 56px; height: 56px; border-radius: 4px; box-shadow: none; } .welcome-logo h1 { margin: 0; font-family: var(--font-display); font-variation-settings: "wdth" var(--wide); font-weight: 800; font-size: 38px; letter-spacing: -.008em; text-transform: uppercase; line-height: 1; } .welcome-logo p { margin: 6px 0 0; color: var(--muted); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; } .welcome .pitch { color: var(--ink-2); font-size: 16.5px; margin: 0 0 26px; line-height: 1.5; } .welcome .pitch b { color: var(--lime); font-weight: 700; } .welcome .steps { display: grid; gap: 1px; margin-bottom: 28px; background: var(--line); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .welcome .step { display: flex; gap: 14px; align-items: center; background: var(--nuit); border-radius: 0; padding: 13px 2px; font-size: 14.5px; color: var(--ink-3); } .welcome .step i { font-style: normal; flex: none; width: 24px; height: 24px; border-radius: 0; display: grid; place-items: center; background: transparent; color: var(--lime); font-family: var(--font-display); font-variation-settings: "wdth" var(--wide); font-weight: 800; font-size: 14px; border-bottom: 2px solid var(--lime); } .welcome .card { background: var(--nuit-2); border-color: var(--line); color: var(--craie); } .welcome .field > span { color: var(--muted); } .welcome .input { background: var(--nuit-3); border-color: var(--line-strong); color: var(--craie); } .welcome .input:focus { border-color: var(--lime); } .welcome .input-row .eye { background: var(--nuit-3); border-color: var(--line-strong); color: var(--craie); } .welcome .hint { color: var(--muted); } .welcome .form-msg { color: var(--red); } .welcome .size-btn { background: transparent; border-color: var(--line-strong); color: var(--craie); } .welcome .size-btn.on { background: var(--lime); border-color: var(--lime); color: var(--lime-ink); } .welcome .seg-btn { background: transparent; border-color: var(--line-strong); color: var(--ink-2); } .welcome .seg-btn.on { background: var(--lime); border-color: var(--lime); color: var(--lime-ink); } .welcome .section-title { color: var(--muted); } .welcome .btn.ghost { color: var(--craie); border-color: var(--line-strong); } .welcome .btn.link { color: var(--ink-2); } /* ---------- Clavier PIN (Shopper) ---------- */ .pin-dots { display: flex; justify-content: center; gap: 14px; margin: 18px 0 14px; } .pin-dots i { width: 10px; height: 10px; border-radius: 0; border: 1px solid var(--line-strong); } .pin-dots i.on { background: var(--lime); border-color: var(--lime); } .keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .key { min-height: 62px; border-radius: var(--radius-sm); background: var(--nuit-3); color: var(--craie); font-weight: 700; font-size: 24px; } .key:active { background: var(--nuit-4); } .key.muted { font-size: 14px; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; } /* ---------- Barre d'onglets : icônes dessinées, plus aucun emoji ---------- */ .tabbar { position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--tabbar) + var(--safe-b)); padding-bottom: var(--safe-b); background: var(--nuit); border-top: 1px solid var(--line); display: flex; z-index: 30; box-shadow: none; } .tabbar-inner { max-width: 560px; margin: 0 auto; width: 100%; display: flex; } .tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--muted); font-weight: 700; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; position: relative; } .tab .ico { position: relative; font-size: 0; width: 22px; height: 22px; display: block; } .tab .ico::before { content: ""; position: absolute; inset: 0; background: currentColor; -webkit-mask: var(--ico) center/22px 22px no-repeat; mask: var(--ico) center/22px 22px no-repeat; } .tab[data-screen="home"] .ico { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.6 12 3.4l9 7.2'/%3E%3Cpath d='M5.6 9.6V20h12.8V9.6'/%3E%3Cpath d='M9.8 20v-5.4h4.4V20'/%3E%3C/svg%3E"); } .tab[data-screen="deck"] .ico { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.4 16.6v-5.9l3.6-1.1 2.6 2.7 4.1 1 5.1 2.2 3.8 1.1v2.1a1 1 0 0 1-1 1H3.4a1 1 0 0 1-1-1z'/%3E%3Cpath d='M8.6 12.3 6.6 9.3'/%3E%3Cpath d='M2.4 16.6h19.2'/%3E%3C/svg%3E"); } .tab[data-screen="orders"] .ico { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.6' y='5.2' width='18.8' height='13.6' rx='1.6'/%3E%3Cpath d='M2.6 9.6h18.8'/%3E%3Cpath d='M6 14.4h4'/%3E%3C/svg%3E"); } .tab.on { color: var(--lime); } .tab.on::after { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 26px; height: 2px; background: var(--lime); border-radius: 0; } .tab.alert { color: var(--lime); font-weight: 700; } .tab .ico .dot { position: absolute; top: -3px; right: -7px; width: 8px; height: 8px; border-radius: 999px; background: var(--red); border: 2px solid var(--nuit); z-index: 2; } /* ---------- Toast & feuille ---------- */ .toast { position: fixed; left: 50%; bottom: calc(var(--tabbar) + var(--safe-b) + 24px); transform: translate(-50%, 12px); background: var(--lime); color: var(--lime-ink); padding: 12px 18px; border-radius: 3px; font-weight: 800; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; opacity: 0; pointer-events: none; transition: all .18s; z-index: 60; max-width: 92vw; text-align: center; box-shadow: var(--shadow-lg); } .toast.show { opacity: 1; transform: translate(-50%, 0); } .sheet-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.72); z-index: 50; display: flex; align-items: flex-end; justify-content: center; } .sheet { width: 100%; max-width: 560px; background: var(--nuit-2); border-top: 1px solid var(--line-strong); border-radius: var(--radius) var(--radius) 0 0; padding: 18px 18px calc(18px + var(--safe-b)); box-shadow: var(--shadow-lg); animation: up .2s ease-out; } .sheet h3 { margin: 0 0 6px; font-weight: 800; font-size: 22px; letter-spacing: -.004em; line-height: 1.1; } .sheet p { margin: 0 0 14px; color: var(--muted); } @keyframes up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } } .empty { text-align: center; padding: 48px 20px; color: var(--muted); } .empty .ico { font-size: 40px; margin-bottom: 10px; filter: grayscale(1) opacity(.35); } .empty h3 { margin: 0 0 6px; font-weight: 800; font-size: 20px; color: var(--craie); } .hidden { display: none !important; } .muted { color: var(--muted); } .small { font-size: 13px; } .txt-orange { color: var(--lime); } .amber { color: var(--amber); } .green { color: var(--green); } .red { color: var(--red); } /* ---------- Shopper : panier général ---------- */ .status-card { border-left: 2px solid var(--line-strong); } .status-card.open { border-left-color: var(--lime); } .status-card.closed { border-left-color: var(--red); } .status-card.settled { border-left-color: var(--blue); } .status-card .btn { margin-top: 12px; } .chip.draft { background: transparent; border-color: var(--line-strong); color: var(--ink-2); } .chip.open { background: var(--lime-pale); border-color: rgba(215,255,62,.4); color: var(--lime); } .chip.closed { background: var(--red-pale); border-color: rgba(255,98,87,.4); color: var(--red); } .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-bottom: 10px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .stat { background: var(--card); border-radius: 0; padding: 13px 12px 11px; border: 0; box-shadow: none; } .stat .label { font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } .stat .value { font-weight: 800; font-size: 26px; line-height: 1.05; margin-top: 5px; letter-spacing: -.02em; } .stat .value.txt-orange { color: var(--lime); } .stat .value.green { color: var(--green); } .stat .sub { font-size: 11px; color: var(--muted); margin-top: 3px; } .fold { padding: 0; overflow: hidden; } .fold-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 14px 16px; text-align: left; } .fold-title { font-weight: 800; font-size: 16px; letter-spacing: -.01em; } .fold-sub { font-size: 13.5px; color: var(--muted); margin-top: 3px; } .fold-arrow { color: var(--muted); font-size: 11px; } .fold-body { padding: 0 16px 16px; border-top: 1px solid var(--line); } .card.list { padding: 0; } .product-row { display: flex; gap: 12px; align-items: center; width: 100%; padding: 11px 14px; border-top: 1px solid var(--line); text-align: left; } .product-row:first-child { border-top: 0; } .product-row:active { background: var(--nuit-3); } .product-row.unavailable { opacity: .45; } .product-row.unavailable .now { text-decoration: line-through; color: var(--muted); } /* 117 lignes dans la liste du shopper, une dizaine visibles a la fois. Le reste n'a pas besoin d'etre mis en page ni dessine tant qu'on n'a pas defile jusqu'a lui : ca divise le cout d'un redessin. `auto` en premier laisse le navigateur retenir la vraie hauteur une fois qu'il l'a vue, donc la barre de defilement ne saute pas. */ .card.list > .product-row { content-visibility: auto; contain-intrinsic-size: auto 81px; } .thumb { width: 58px; height: 58px; border-radius: var(--radius-sm); background: var(--nuit-3) center/cover no-repeat; flex: none; display: grid; place-items: center; font-size: 22px; position: relative; overflow: hidden; } .thumb:not([style*="url"]) { filter: grayscale(1) opacity(.5); } .thumb .n { position: absolute; right: 2px; bottom: 2px; background: var(--nuit); color: var(--craie); font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 2px; } .pinfo { flex: 1; min-width: 0; } .pname { font-weight: 600; font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--craie); } .pmeta { font-size: 13px; color: var(--muted); margin-top: 4px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; } .pprice { text-align: right; flex: none; } .pprice .was { font-size: 12px; color: var(--muted); text-decoration: line-through; } .pprice .now { font-weight: 800; font-size: 19px; line-height: 1.05; letter-spacing: -.02em; } .pprice .pct { font-size: 11px; font-weight: 700; color: var(--lime); letter-spacing: .06em; } .pill { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: transparent; font-weight: 600; font-size: 14px; color: var(--craie); white-space: nowrap; } .pill.on { background: var(--lime); border-color: var(--lime); color: var(--lime-ink); } .pill.orange.on { background: var(--lime); border-color: var(--lime); color: var(--lime-ink); } .pill.cat { min-height: 22px; padding: 0 8px; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; border-color: var(--line-strong); background: transparent; color: var(--ink-2); } .pill.cat[data-cat="enfant"] { border-color: rgba(255,194,75,.4); color: var(--amber); } .pill.cat[data-cat="femme"], .pill.cat[data-cat="big_femme"] { border-color: rgba(255,146,196,.4); color: #ff92c4; } .pill.cat[data-cat="homme"], .pill.cat[data-cat="big_homme"] { border-color: rgba(143,186,255,.4); color: var(--blue); } .chips.scroll { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; margin-right: -16px; padding-right: 16px; scrollbar-width: none; } .chips.scroll::-webkit-scrollbar { display: none; } .cat-line { margin-top: 8px; min-height: 22px; display: flex; align-items: center; gap: 6px; } .photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .photo-cell { aspect-ratio: 1; border-radius: var(--radius-sm); background: var(--nuit-3) center/cover no-repeat; position: relative; overflow: hidden; } .photo-cell .del { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 999px; background: rgba(0,0,0,.8); color: var(--craie); font-size: 14px; display: grid; place-items: center; } .photo-add { aspect-ratio: 1; border-radius: var(--radius-sm); border: 1px dashed var(--line-strong); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; background: transparent; cursor: pointer; } .photo-add .ico { font-size: 24px; filter: grayscale(1) opacity(.5); } .photo-add.big { aspect-ratio: auto; min-height: 150px; grid-column: span 3; font-family: var(--font-display); font-variation-settings: "wdth" var(--wide); font-size: 15px; letter-spacing: .12em; text-transform: uppercase; color: var(--lime); background: var(--lime-pale); border-color: var(--lime); border-style: solid; } .photo-add.big .ico { font-size: 34px; } .price-preview { display: flex; align-items: center; justify-content: space-between; background: var(--nuit-3); border: 1px solid var(--line); color: var(--craie); border-radius: var(--radius); padding: 13px 16px; margin-top: 16px; } .price-preview .lbl { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } .price-preview .big { font-weight: 800; font-size: 32px; line-height: 1; color: var(--lime); letter-spacing: -.025em; } .price-preview .big small { font-size: 13px; color: var(--ink-2); font-variation-settings: "wdth" 100; font-weight: 500; margin-left: 6px; letter-spacing: 0; } .stepper { display: inline-flex; align-items: center; gap: 3px; background: var(--nuit-4); border-radius: var(--radius-sm); padding: 3px; } .stepper button { width: 40px; height: 40px; border-radius: 2px; background: var(--nuit-2); color: var(--craie); font-size: 20px; font-weight: 700; } .stepper button:active { background: var(--nuit); } .stepper .val { min-width: 34px; text-align: center; font-weight: 800; font-size: 19px; } .stepper.mini { background: var(--nuit-3); } .stepper.mini button { width: 34px; height: 34px; font-size: 17px; } .stepper.mini .val { color: var(--craie); font-size: 16px; } .size-rows { display: grid; gap: 6px; } .size-row { display: flex; align-items: center; gap: 8px; } .size-row .input { flex: 1; min-height: 46px; } .size-del { width: 34px; height: 34px; border-radius: 2px; background: var(--red-pale); color: var(--red); font-weight: 700; } .sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; padding: 12px 16px calc(12px + var(--safe-b)); background: linear-gradient(180deg, rgba(24,25,28,0) 0%, var(--nuit) 34%); z-index: 25; } .sticky-cta > * { max-width: 528px; margin: 0 auto; } .screen.no-tabs { padding-bottom: calc(96px + var(--safe-b)); } /* ---------- Particulier : pile de cartes ---------- */ .deck-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; } .deck-count { font-weight: 700; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); } .chip-btn { font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; padding: 8px 12px; border-radius: 2px; background: transparent; border: 1px solid var(--line-strong); color: var(--craie); } .chip-btn.on { background: var(--lime); border-color: var(--lime); color: var(--lime-ink); } .deck { position: relative; height: min(66dvh, 620px); margin-bottom: 14px; } /* La carte : la photo occupe tout, l'information est posée dessus en bas. */ .swipe-card { position: absolute; inset: 0; border-radius: var(--radius); background: var(--nuit-2); border: 1px solid var(--line); box-shadow: var(--shadow-lg); overflow: hidden; display: flex; flex-direction: column; touch-action: none; user-select: none; -webkit-user-select: none; transition: transform .25s ease, opacity .25s ease; will-change: transform; } .swipe-card.behind { transform: scale(.96) translateY(10px); opacity: .5; } .swipe-card.top { z-index: 2; cursor: grab; } .swipe-card.dragging { transition: none; cursor: grabbing; } .swipe-card.fly-right { transform: translate(140%, -40px) rotate(20deg); opacity: 0; } .swipe-card.fly-left { transform: translate(-140%, -40px) rotate(-20deg); opacity: 0; } .sc-photo { flex: 1; min-height: 0; background: #0f1013 center/cover no-repeat; position: relative; display: grid; place-items: center; font-size: 76px; } .sc-photo > span { opacity: .22; filter: grayscale(1); } .sc-dots { position: absolute; top: 12px; left: 0; right: 0; display: flex; justify-content: center; gap: 4px; } .sc-dots i { width: 20px; height: 2px; border-radius: 0; background: rgba(237,238,240,.32); } .sc-dots i.on { background: var(--craie); } .sc-badge { position: absolute; top: 14px; right: 14px; background: var(--lime); color: var(--lime-ink); font-weight: 800; font-size: 20px; padding: 5px 10px; border-radius: 2px; box-shadow: none; letter-spacing: -.02em; } .sc-cart { position: absolute; top: 14px; left: 14px; background: rgba(24,25,28,.86); color: var(--craie); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 6px 9px; border-radius: 2px; max-width: 66%; box-shadow: none; backdrop-filter: none; } .sc-last { position: absolute; bottom: 14px; left: 14px; background: var(--red); color: var(--lime-ink); font-weight: 800; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; padding: 5px 9px; border-radius: 2px; } .stamp { position: absolute; top: 28px; padding: 8px 14px; border: 3px solid; border-radius: 3px; font-weight: 800; font-size: 26px; letter-spacing: .1em; text-transform: uppercase; opacity: 0; pointer-events: none; background: rgba(24,25,28,.74); } .stamp.yes { left: 18px; color: var(--lime); border-color: var(--lime); transform: rotate(-12deg); } .stamp.no { right: 18px; color: var(--red); border-color: var(--red); transform: rotate(12deg); } .sc-info { padding: 13px 16px 15px; background: var(--nuit-2); border-top: 1px solid var(--line); } .sc-name { font-weight: 800; font-size: 23px; line-height: 1.06; letter-spacing: -.006em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sc-meta { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; margin-top: 8px; } .sc-note { font-size: 13.5px; color: var(--muted); margin-top: 7px; } .sc-price { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); } .sc-price .was { font-size: 12.5px; color: var(--muted); text-decoration: line-through; } .sc-price .was s { color: var(--muted); } .sc-price .store { font-size: 13px; font-weight: 600; color: var(--ink-2); margin-top: 2px; } .sc-price .pay { text-align: right; } .sc-price .lbl { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } .sc-price .big { font-weight: 800; font-size: 32px; line-height: 1; color: var(--lime); letter-spacing: -.03em; } .sc-color { font-size: 13.5px; color: var(--ink-2); margin-top: 7px; } .sc-desc { font-size: 13.5px; color: var(--muted); margin-top: 5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .flash { position: absolute; top: 46%; left: 50%; transform: translate(-50%, -50%); z-index: 5; background: var(--lime); color: var(--lime-ink); padding: 12px 18px; border-radius: 3px; font-family: var(--font-display); font-variation-settings: "wdth" var(--wide); font-weight: 800; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; text-align: center; box-shadow: var(--shadow-lg); max-width: 85%; } /* Les trois gestes : carrés, francs, sans anneau pastel. */ .swipe-actions { display: flex; justify-content: center; align-items: center; gap: 14px; margin: 4px 0 6px; } .sw-btn { width: 66px; height: 66px; border-radius: var(--radius-sm); background: var(--nuit-2); border: 1px solid var(--line-strong); box-shadow: none; font-size: 26px; font-weight: 700; display: grid; place-items: center; transition: transform .08s, background .12s; } .sw-btn:active { transform: scale(.94); } .sw-btn.no { color: var(--craie); border-color: var(--line-strong); } .sw-btn.no:active { background: var(--red); color: var(--lime-ink); border-color: var(--red); } .sw-btn.yes { color: var(--lime-ink); background: var(--lime); border-color: var(--lime); width: 96px; } .sw-btn.yes:active { background: var(--lime-dim); } .sw-btn.undo { width: 50px; height: 50px; font-size: 19px; color: var(--muted); border-color: var(--line); background: transparent; } .swipe-legend { display: flex; justify-content: space-between; font-size: 10.5px; letter-spacing: .14em; color: var(--muted); margin: 0 6px 16px; } .resa-list { margin-top: 8px; } .resa-row { display: flex; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); } .resa-row:first-child { border-top: 0; } .resa-row .thumb { width: 48px; height: 48px; font-size: 19px; } .resa-row.off { opacity: .42; } .resa-row.off .now { text-decoration: line-through; color: var(--muted); } .resa-row.wide { width: 100%; text-align: left; } .resa-row.wide:active { background: var(--nuit-3); } .resa-row .pmeta .chip { min-height: 20px; padding: 2px 7px; font-size: 10px; } /* ---------- Caisse, commandes ---------- */ .chip.settled { background: transparent; border-color: rgba(143,186,255,.4); color: var(--blue); } .chip.due, .chip.awaiting_payment { background: var(--amber-pale); border-color: rgba(255,194,75,.45); color: var(--amber); } .chip.paid, .chip.delivered { background: var(--green-pale); border-color: rgba(110,231,160,.45); color: var(--green); } .chip.shipped { background: transparent; border-color: rgba(143,186,255,.4); color: var(--blue); } .chip.cancelled, .chip.to_review { background: var(--red-pale); border-color: rgba(255,98,87,.45); color: var(--red); } .chip.expired { background: transparent; border-color: var(--line-strong); color: var(--muted); } .order-card { border-left: 2px solid var(--amber); } .order-card.paid, .order-card.delivered { border-left-color: var(--green); } .order-card.shipped { border-left-color: var(--blue); } .order-card.cancelled { border-left-color: var(--red); opacity: .6; } .order-card.to_review, .order-card.expired { border-left-color: var(--red); } .sheet .field { margin-top: 10px; } .stat-rows { margin-top: 6px; } .stat-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); } .stat-row:first-child { border-top: 0; } .stat-row > div:last-child { flex: none; font-size: 18px; font-weight: 800; letter-spacing: -.02em; } .ecarts { margin: 8px 0 0; padding-left: 18px; font-size: 13.5px; } .ecarts li { margin: 3px 0; } .card.hero .chip { background: transparent; border-color: var(--line-strong); color: var(--ink-2); } .hero-kicker { font-weight: 700; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--lime); margin-bottom: 6px; } .card.hero .btn { margin-top: 14px; } .steps-list { list-style: none; margin: 8px 0 0; padding: 0; } .steps-list li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--line); opacity: .4; } .steps-list li:first-child { border-top: 0; } .steps-list li.now, .steps-list li.done { opacity: 1; } .steps-list li i { font-style: normal; flex: none; width: 26px; height: 26px; border-radius: 0; display: grid; place-items: center; background: transparent; border-bottom: 2px solid var(--line-strong); color: var(--muted); font-family: var(--font-display); font-variation-settings: "wdth" var(--wide); font-weight: 800; font-size: 13px; } .steps-list li.done i { border-bottom-color: var(--green); color: var(--green); } .steps-list li.now i { border-bottom-color: var(--lime); color: var(--lime); } .steps-list li b { display: block; font-size: 15px; color: var(--craie); } .steps-list li span { display: block; font-size: 13.5px; color: var(--muted); margin-top: 3px; } .sc-zoom { position: absolute; bottom: 14px; right: 14px; width: auto; padding: 0 11px; height: 34px; border-radius: 2px; background: rgba(24,25,28,.86); color: var(--craie); font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; display: grid; grid-auto-flow: column; place-items: center; gap: 6px; box-shadow: none; } .sc-info-btn { flex: none; width: auto; height: 30px; padding: 0 10px; border-radius: 2px; background: transparent; border: 1px solid var(--line-strong); color: var(--ink-2); font-weight: 700; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; display: grid; place-items: center; } textarea.input { min-height: 84px; resize: vertical; line-height: 1.4; } /* ---------- Visionneuse plein écran ---------- */ .viewer { position: fixed; inset: 0; background: #0d0e11; z-index: 80; display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: none; } .viewer-stage { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; transition: transform .2s ease; will-change: transform; } /* p71 : photos voisines posees hors ecran, a 16 px d'ecart (ECART_PHOTOS dans app.js) */ .viewer-stage .voisine { position: absolute; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; pointer-events: none; } .viewer-stage .voisine.avant { left: calc(-100% - 16px); } .viewer-stage .voisine.apres { left: calc(100% + 16px); } .viewer-stage img { max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; -webkit-user-select: none; } .viewer-stage.zoomed { transform: scale(2.2); } .viewer-close { position: absolute; top: calc(12px + var(--safe-t)); right: 14px; width: 44px; height: 44px; border-radius: 2px; background: rgba(237,238,240,.12); color: var(--craie); font-size: 20px; z-index: 2; } .viewer-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 64px; color: var(--craie); font-size: 34px; line-height: 1; background: rgba(0,0,0,.35); border-radius: 2px; z-index: 2; } .viewer-nav.prev { left: 6px; } .viewer-nav.next { right: 6px; } .viewer-dots { position: absolute; bottom: calc(44px + var(--safe-b)); left: 0; right: 0; display: flex; justify-content: center; gap: 5px; } .viewer-dots i { width: 22px; height: 2px; border-radius: 0; background: rgba(237,238,240,.32); } .viewer-dots i.on { background: var(--craie); } .viewer-hint { position: absolute; bottom: calc(16px + var(--safe-b)); left: 0; right: 0; text-align: center; color: var(--muted); font-size: 10.5px; letter-spacing: .14em; } .chip a, a.chip { text-decoration: none; } .pprice .chip { margin-top: 4px; } a.btn { text-decoration: none; } /* ---------- Bloc de paiement ---------- */ .pay-box { margin-top: 12px; padding: 13px 14px; border-radius: var(--radius-sm); background: var(--lime-pale); border: 1px solid rgba(215,255,62,.3); } .pay-title { font-family: var(--font-display); font-variation-settings: "wdth" var(--wide); font-weight: 800; font-size: 18px; color: var(--lime); margin-bottom: 6px; letter-spacing: -.01em; } .pay-box .kv { border-top-color: rgba(215,255,62,.18); padding: 8px 0; } .mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13.5px; letter-spacing: .02em; } .sheet .price-preview { margin-top: 6px; } /* ---------- Écran pile : en-tête d'une ligne, actions toujours visibles ---------- */ .topbar.slim { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: calc(8px + var(--safe-t)) 14px 8px; } .topbar.slim .back-btn { padding: 8px 0; min-height: 44px; } .slim-title { font-weight: 800; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); text-align: center; flex: 1; } .topbar.slim .chip-btn { background: transparent; border-color: var(--line-strong); color: var(--craie); min-height: 40px; } .topbar.slim .chip-btn.on { background: var(--lime); border-color: var(--lime); color: var(--lime-ink); } .deck-screen { padding-top: 10px; } .deck-screen .deck-head { display: none; } .deck-screen .deck { height: calc(100dvh - 62px - var(--safe-t) - 10px - 118px - var(--tabbar) - var(--safe-b)); min-height: 380px; margin-bottom: 8px; } .deck-screen .swipe-actions { position: sticky; bottom: calc(var(--tabbar) + var(--safe-b) + 6px); margin: 0 0 4px; z-index: 3; } .deck-screen .swipe-actions .sw-btn.undo.hidden { display: grid; visibility: hidden; } /* réserve l'espace : ✕ et ✓ ne bougent pas */ .deck-note { text-align: center; font-size: 10.5px; letter-spacing: .14em; color: var(--muted); margin: 0 0 8px; } .card.tony { border-left: 2px solid var(--lime); } .card.tony h2 { font-size: 19px; } /* ---------- Refonte « très simple » (p16) : un écran = une idée ---------- */ /* EN COULEUR, et pas en craie. C'est le seul bouton du bandeau haut : en gris sur l'encre, on ne le voyait pas. Demande de Tony le 22/09. `--lime` vaut l'orange en mode jour : cette ligne habille donc les DEUX themes. Le filet du cadre, lui, est translucide et se regle plus bas. */ .gear-btn { flex: none; width: 42px; height: 42px; border-radius: 2px; border: 1px solid rgba(215, 255, 62, .40); background: transparent; color: var(--lime); font-size: 18px; line-height: 1; cursor: pointer; } .gear-btn:active { background: var(--nuit-3); } .btn.big-btn { min-height: 60px; font-size: 17px; } /* L'appel à payer : le montant d'abord, le bouton ensuite. */ .card.pay-call { border: 1px solid var(--lime); background: var(--lime-pale); text-align: center; } .card.pay-call.wait { border-color: var(--line-strong); background: var(--nuit-2); } .card.pay-call.late { border-color: var(--red); background: var(--red-pale); } .card.pay-call p { margin: 8px 0 16px; font-size: 15.5px; color: var(--ink-2); } .pay-amount { font-weight: 800; font-size: 54px; line-height: .92; color: var(--lime); letter-spacing: -.04em; } .pay-call.wait .pay-amount, .pay-call.late .pay-amount { font-size: 42px; color: var(--craie); } /* La basket qui pendouille — écran « Trop tard ». Filets d'un pixel, aucune ombre, aucun aplat : c'est un dessin au trait, comme le reste de l'identité. On n'anime QUE `transform` (composé sur le GPU). La phase vient de l'horloge, posée en `animation-delay` négatif par `app.js` : l'accueil est redessiné en entier toutes les 8 s et le balancier doit reprendre sans à-coup. */ .pendouille { display: flex; justify-content: center; padding: 2px 0 6px; --pd-duree: 3600ms; } /* --pd-duree est réécrite par app.js : la durée n'a qu'une source */ .pendouille svg { width: 132px; height: auto; overflow: visible; } .pd-brin { fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; } .pd-tige { fill: rgba(237,238,240,.05); stroke: var(--craie); stroke-width: 2; stroke-linejoin: round; } .pd-melle { fill: rgba(237,238,240,.13); stroke: var(--craie); stroke-width: 2; stroke-linejoin: round; } .pd-trait { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-linecap: round; } .pd-lacage { fill: none; stroke: var(--craie); stroke-width: 1.8; stroke-linecap: round; } .pd-col { fill: none; stroke: var(--craie); stroke-width: 1.7; stroke-linecap: round; } .pd-noeud { fill: none; stroke: var(--muted); stroke-width: 1.6; } /* Le pivot du lacet est son point d'attache en haut ; celui de la basket, son œillet. */ .pd-lacet { transform-box: view-box; transform-origin: 65px 5px; animation: pd-balance var(--pd-duree) ease-in-out infinite; } .pd-basket { transform-box: view-box; transform-origin: 65px 85px; animation: pd-suit var(--pd-duree) ease-in-out infinite; } @keyframes pd-balance { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } } /* La basket garde sa propre inclinaison (rotate(14) dans le SVG) et n'ajoute qu'un retard. */ @keyframes pd-suit { 0%, 100% { transform: rotate(3.2deg); } 50% { transform: rotate(-3.2deg); } } @media (prefers-reduced-motion: reduce) { .pd-lacet, .pd-basket { animation: none; } } .pay-head { text-align: center; padding: 4px 0 16px; border-bottom: 1px solid var(--line); margin-bottom: 4px; } .pay-head .pay-sub { font-size: 15px; color: var(--ink-2); margin-top: 6px; } /* Payer = trois gestes numérotés, dans l'ordre. */ .pay-steps { list-style: none; margin: 14px 0 0; padding: 0; } /* L'adresse avant l'IBAN (23/09) : meme case, meme filet, rien de nouveau a apprendre. */ .livraison-avant { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); } .livraison-avant > b { display: block; font-size: 16px; color: var(--craie); } .livraison-avant > .hint { display: block; margin: 4px 0 12px; } .livraison-avant .btn { margin-top: 14px; width: 100%; } .livraison-resume { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); } .livraison-resume b { color: var(--craie); font-weight: 600; } .livraison-resume > span { flex: 1; min-width: 0; overflow-wrap: anywhere; } .livraison-resume .btn.link { min-height: 32px; padding: 0; flex: none; width: auto; } /* Le choix envoi / retrait collait au champ du nom (compte) : un peu d'air. */ .field + .seg { margin-top: 12px; } .pay-steps li { display: flex; gap: 13px; align-items: flex-start; padding: 16px 0; border-top: 1px solid var(--line); } .pay-steps li:first-child { border-top: 0; } .pay-steps li i { font-style: normal; flex: none; width: 26px; height: 26px; border-radius: 0; display: grid; place-items: center; background: transparent; border-bottom: 2px solid var(--lime); color: var(--lime); font-family: var(--font-display); font-variation-settings: "wdth" var(--wide); font-weight: 800; font-size: 14px; } .pay-steps li > div { flex: 1; min-width: 0; } .pay-steps li b { display: block; font-size: 16px; color: var(--craie); } .pay-steps li span { display: block; color: var(--muted); font-size: 14px; margin: 4px 0 10px; word-break: break-word; } .pay-steps li span.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--craie); font-size: 15px; letter-spacing: .04em; } .pay-steps li span.big-ref { font-weight: 800; font-size: 26px; letter-spacing: .02em; color: var(--lime); margin: 3px 0 10px; } .pay-steps .btn.small { width: auto; padding-left: 18px; padding-right: 18px; } /* L'état d'une commande tient en une phrase. */ .order-head { display: flex; gap: 10px; align-items: flex-start; padding: 12px 13px; border-radius: var(--radius-sm); background: var(--nuit-3); border-left: 2px solid var(--line-strong); font-size: 15px; margin-bottom: 12px; color: var(--ink-3); } .order-head.ok { background: var(--green-pale); border-left-color: var(--green); } .order-head.bad { background: var(--red-pale); border-left-color: var(--red); } .order-head > span { font-size: 17px; line-height: 1.15; filter: grayscale(1) opacity(.7); } .order-ref { margin-top: 12px; font-size: 10.5px; color: var(--muted); letter-spacing: .14em; } /* Sous la pile : le rappel de paiement remplace la légende. */ .deck-note.due { display: block; width: 100%; border: 0; border-radius: var(--radius-sm); background: var(--lime); color: var(--lime-ink); font-variation-settings: "wdth" var(--wide); font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: .12em; padding: 14px 14px; margin: 0 0 8px; cursor: pointer; } .deck-note.due:active { background: var(--lime-dim); } .deck-screen.has-due .deck { height: calc(100dvh - 62px - var(--safe-t) - 10px - 148px - var(--tabbar) - var(--safe-b)); } /* Le message éphémère ne doit jamais masquer les trois boutons du geste. */ .deck-screen ~ .toast, body:has(.deck-screen) .toast { bottom: calc(var(--tabbar) + var(--safe-b) + 150px); } /* Choix de la langue : trois boutons égaux, lisibles avant même d'avoir un compte. */ .lang-seg { margin: 6px 0 10px; } .welcome .lang-seg { background: transparent; border-color: var(--line-strong); } .welcome .lang-seg .seg-btn { color: var(--ink-2); } .welcome .lang-seg .seg-btn.on { background: var(--lime); color: var(--lime-ink); } /* ---------- Retouches après premier aperçu ---------- */ /* 1. Fin de la salade d'étiquettes : une seule information mise en avant, la pointure. Le reste passe en retrait — c'était le marqueur « fait par IA » le plus visible après les emoji. */ .sc-meta .chip, .sc-meta .pill.cat { border-color: var(--line); color: var(--muted); background: transparent; } .sc-meta .chip.blue { border-color: var(--lime); color: var(--lime); background: var(--lime-pale); } .pill.cat[data-cat="enfant"], .pill.cat[data-cat="femme"], .pill.cat[data-cat="big_femme"], .pill.cat[data-cat="homme"], .pill.cat[data-cat="big_homme"] { border-color: var(--line); color: var(--muted); } /* 2. Les emoji résiduels du corps de texte ne doivent pas repiquer de la couleur. */ .sc-note, .order-head > span, .photo-add .ico, .empty .ico { filter: grayscale(1) opacity(.72); } /* 3. Correction d'un défaut qui préexistait au design : sur la pile, le message éphémère recouvrait le prix et le bouton « je prends ». Il passe en haut, sous la barre de titre, où il ne peut plus rien masquer. */ body:has(.deck-screen) .toast { top: calc(var(--safe-t) + 74px); bottom: auto; transform: translate(-50%, -10px); } body:has(.deck-screen) .toast.show { transform: translate(-50%, 0); } /* ---------- Icones dessinees : elles remplacent les emoji retires des cles de traduction. Le texte reste traduisible, l'icone est purement visuelle. */ .seg-btn[data-mode], .deck-note.due, .sc-zoom { display: inline-flex; align-items: center; justify-content: center; gap: 9px; } .seg-btn[data-mode]::before, .deck-note.due::before, .sc-zoom::before { content: ""; flex: none; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--ico) center/18px 18px no-repeat; mask: var(--ico) center/18px 18px no-repeat; } .seg-btn[data-mode="envoi"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7.6 12 3l9 4.6v8.8L12 21l-9-4.6z'/%3E%3Cpath d='M3 7.6 12 12l9-4.4'/%3E%3Cpath d='M12 12v9'/%3E%3C/svg%3E"); } .seg-btn[data-mode="retrait"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 11.4a3.6 3.6 0 1 0 0-7.2 3.6 3.6 0 0 0 0 7.2z'/%3E%3Cpath d='M4.4 20.4c0-3.6 3.4-6 7.6-6s7.6 2.4 7.6 6'/%3E%3C/svg%3E"); } .deck-note.due { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.6' y='5.2' width='18.8' height='13.6' rx='1.6'/%3E%3Cpath d='M2.6 9.6h18.8'/%3E%3Cpath d='M6 14.4h4'/%3E%3C/svg%3E"); } .sc-zoom { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.6' cy='10.6' r='6.4'/%3E%3Cpath d='m15.4 15.4 4.4 4.4'/%3E%3C/svg%3E"); } .deck-note.due::before { width: 19px; height: 19px; -webkit-mask-size: 19px 19px; mask-size: 19px 19px; } .sc-zoom::before { width: 15px; height: 15px; -webkit-mask-size: 15px 15px; mask-size: 15px 15px; } /* Un seul accent : l'etape FAITE passe en craie, le lime reste reserve a l'etape EN COURS. Avant, le vert entrait en concurrence avec le lime. */ .steps-list li.done i { border-bottom-color: var(--line-strong); color: var(--craie); } .steps-list li.now i { border-bottom-color: var(--lime); color: var(--lime); } /* Le message ephemere se pose sur la barre de titre : c'est la seule zone ou il ne masque ni le prix, ni le bandeau « dans N paniers », ni les trois gestes. */ body:has(.deck-screen) .toast { top: calc(var(--safe-t) + 9px); bottom: auto; transform: translate(-50%, -8px); } body:has(.deck-screen) .toast.show { transform: translate(-50%, 0); } /* `.chip.blue` ne sert qu'à la pointure (carte de la pile, et page Compte) : même traitement partout, sinon la même information change de couleur d'un écran à l'autre. Un seul accent, une seule règle. */ .chip.blue { border-color: var(--lime); color: var(--lime); background: var(--lime-pale); } /* ---------- Marqueurs : des reperes, pas des numeros ---------- Seule la marche a suivre du paiement reste numerotee (.pay-steps) : l'ordre y est une consigne. Ailleurs, le chiffre ne portait aucune information. */ /* Accueil : un filet lime tient lieu de puce. */ .welcome .step i { font-size: 0; width: 16px; height: 2px; border: 0; border-radius: 0; background: var(--lime); align-self: center; } /* Suivi de commande et « Comment ca marche » : un carre d'etat vaut mieux qu'un chiffre -- il dit ou on en est, ce que « 3 » ne disait pas. */ .steps-list li i { font-size: 0; width: 9px; height: 9px; border: 1px solid var(--line-strong); background: transparent; border-radius: 0; margin-top: 6px; flex: none; } .steps-list li.done i { background: var(--craie); border-color: var(--craie); } .steps-list li.now i { background: var(--lime); border-color: var(--lime); } /* ---------- Plus aucun emoji : les affordances deviennent des dessins ---------- Ce qui portait une FONCTION recoit une icone. Ce qui portait un ETAT est retire : la couleur du filet de la carte le disait deja. */ /* L'engrenage du compte et l'oeil du mot de passe : sans dessin, le bouton serait vide et donc invisible. */ .gear-btn, .eye { position: relative; } .gear-btn::before, .eye::before { content: ""; position: absolute; inset: 0; background: currentColor; -webkit-mask: var(--ico) center/20px 20px no-repeat; mask: var(--ico) center/20px 20px no-repeat; } /* Une SILHOUETTE, plus une roue dentee (demande de Tony, 22/09). La roue annonçait des reglages techniques ; ce bouton ouvre son compte, ses pointures et son adresse. C'est son espace, et la silhouette le dit. */ .gear-btn { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M4.9 20.2a7.6 7.6 0 0 1 14.2 0'/%3E%3C/svg%3E"); } .eye { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.8 12S5.4 5.2 12 5.2 22.2 12 22.2 12 18.6 18.8 12 18.8 1.8 12 1.8 12z'/%3E%3Ccircle cx='12' cy='12' r='2.9'/%3E%3C/svg%3E"); color: var(--ink-2); } .eye.on { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.6 5.6A9.6 9.6 0 0 1 12 5.2c6.6 0 10.2 6.8 10.2 6.8a18 18 0 0 1-3.3 4.2M6.2 7.4A17.6 17.6 0 0 0 1.8 12S5.4 18.8 12 18.8a9.7 9.7 0 0 0 4-.86'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E"); color: var(--lime); } /* Ajouter une photo ou un ticket. */ .photo-add .ico { display: block; width: 26px; height: 26px; background: currentColor; filter: none; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.8 8.2h3.6l1.5-2.4h8.2l1.5 2.4h3.6v10.4H2.8z'/%3E%3Ccircle cx='12' cy='13' r='3.4'/%3E%3C/svg%3E") center/26px 26px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.8 8.2h3.6l1.5-2.4h8.2l1.5 2.4h3.6v10.4H2.8z'/%3E%3Ccircle cx='12' cy='13' r='3.4'/%3E%3C/svg%3E") center/26px 26px no-repeat; } .photo-add.big .ico { width: 34px; height: 34px; -webkit-mask-size: 34px 34px; mask-size: 34px 34px; } /* Vignette et carte sans photo : une silhouette discrete, jamais un emoji. */ .thumb:empty::after, .sc-photo > span:empty::after { content: ""; display: block; width: 60%; height: 60%; background: var(--muted); opacity: .30; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.4 16.6v-5.9l3.6-1.1 2.6 2.7 4.1 1 5.1 2.2 3.8 1.1v2.1a1 1 0 0 1-1 1H3.4a1 1 0 0 1-1-1z'/%3E%3Cpath d='M8.6 12.3 6.6 9.3'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.4 16.6v-5.9l3.6-1.1 2.6 2.7 4.1 1 5.1 2.2 3.8 1.1v2.1a1 1 0 0 1-1 1H3.4a1 1 0 0 1-1-1z'/%3E%3Cpath d='M8.6 12.3 6.6 9.3'/%3E%3C/svg%3E") center/contain no-repeat; } .sc-photo > span:empty { display: block; width: 84px; height: 84px; opacity: 1; } .thumb:empty { display: grid; place-items: center; } /* Les pastilles d'etat vides disparaissent : le filet de couleur suffit. */ .notice > span:empty, .order-head > span:empty, .empty .ico:empty, .steps-list li i:empty, .stat .ico:empty { display: none; } .notice > span:empty + div, .order-head > span:empty + div { margin-left: 0; } /* ---------- Barre d'onglets escamotable (inspiration SNKRS) ---------- On descend : elle glisse vers le bas et rend l'ecran a la marchandise. On remonte : elle revient. En haut de page elle est toujours la. La classe est posee sur par app.js, pas sur .tabbar, parce que la barre est redessinee toutes les 2 secondes. */ .tabbar { transition: transform .3s cubic-bezier(.32,.72,0,1); will-change: transform; } body.nav-cachee .tabbar { transform: translateY(calc(100% + 2px)); } /* La barre haute ne se detache du fond qu'une fois le defilement commence : a plat, aucun filet ne coupe l'ecran. */ .topbar { transition: border-color .22s ease; } body.defile .topbar { border-bottom-color: var(--line-strong); } @media (prefers-reduced-motion: reduce) { .tabbar { transition: none; } body.nav-cachee .tabbar { transform: none; } } /* ---------- L'heure limite, quand rien n'est dû ---------- Elle remplit le vide de l'accueil sans crier : c'est un repère, pas une alarme. Le lime reste réservé à ce qui demande une action. */ .card.limite { border-color: var(--line-strong); text-align: left; } .card.limite .hero-kicker { color: var(--muted); margin-bottom: 8px; } .limite-heure { font-family: var(--font-display); font-variation-settings: "wdth" var(--wide); font-weight: 800; font-size: clamp(38px, 12vw, 50px); line-height: .92; letter-spacing: -.04em; color: var(--craie); text-wrap: balance; } .card.limite p { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--ink-2); } /* ---------- Le mot-marque DPSK ---------- Nike compose SNKRS en Futura / Trade Gothic, sous licence. Jost est l'equivalent libre le plus proche : meme geometrie, meme O circulaire. Elle ne sert qu'ici, le reste de l'appli reste en Archivo. */ .mot-marque { font-family: "Jost", "Century Gothic", "Futura", sans-serif; font-weight: 700; font-size: 22px; letter-spacing: .01em; line-height: 1; color: var(--craie); text-transform: uppercase; } .brand { flex-direction: column; align-items: flex-start; gap: 3px; } .brand .brand-sub { margin-top: 0; } .mot-marque.grand { font-size: 40px; letter-spacing: 0; color: var(--lime); } .welcome-logo { align-items: baseline; gap: 16px; } /* ---------- Transition d'ecran ---------- transform + opacity uniquement : composees sur le GPU, donc 60 i/s. */ @keyframes ecran-droite { from { opacity: 0; transform: translate3d(26px, 0, 0); } to { opacity: 1; transform: none; } } @keyframes ecran-gauche { from { opacity: 0; transform: translate3d(-26px, 0, 0); } to { opacity: 1; transform: none; } } @keyframes ecran-monte { from { opacity: 0; transform: translate3d(0, 16px, 0); } to { opacity: 1; transform: none; } } #app.ecran-entre > main { will-change: transform, opacity; } #app.ecran-entre[data-sens="droite"] > main { animation: ecran-droite .28s cubic-bezier(.22,.61,.36,1) both; } #app.ecran-entre[data-sens="gauche"] > main { animation: ecran-gauche .28s cubic-bezier(.22,.61,.36,1) both; } #app.ecran-entre[data-sens="monte"] > main { animation: ecran-monte .26s cubic-bezier(.22,.61,.36,1) both; } @media (prefers-reduced-motion: reduce) { #app.ecran-entre > main { animation: none; will-change: auto; } } /* ---------- Page d'entrée : le mot-marque passe au-dessus du nom ---------- Côte à côte, DPSK mangeait 150 px de large et « DEEPSTOCK » débordait de l'écran sur un téléphone. Empilés, c'est un vrai bloc-marque et plus rien ne sort du cadre. */ .welcome-logo { flex-direction: column; align-items: flex-start; gap: 12px; } .mot-marque.grand { font-size: 32px; letter-spacing: .012em; } .welcome-logo h1 { font-size: clamp(30px, 8.6vw, 38px); } .welcome-logo > div { min-width: 0; } /* ---------- Le prix barré et l'économie ---------- Le prix Nike reste en retrait à droite : c'est la référence, pas le message. L'économie prend toute la largeur sous le prix, et le pourcentage porte le lime — il se lit en une fraction de seconde, la soustraction non. */ .sc-price .was { text-align: right; font-size: 12.5px; color: var(--muted); } .sc-price .was s { color: var(--muted); } .sc-eco { display: flex; align-items: center; gap: 9px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-2); } .sc-eco b { flex: none; font-family: var(--font-display); font-variation-settings: "wdth" var(--wide); font-weight: 800; font-size: 15px; letter-spacing: -.01em; background: var(--lime); color: var(--lime-ink); padding: 3px 8px; border-radius: 2px; } /* ---------- Référence et histoire sur la carte ---------- La référence en chasse fixe : c'est un code, il se recopie et se compare. Discrète — elle rassure celui qui la cherche sans encombrer les autres. */ .sc-sku { margin-top: 8px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .sc-sku span { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .04em; text-transform: none; color: var(--ink-2); } /* L'histoire du modèle : deux lignes sur la carte, en entier dans la fiche. */ .sc-desc { margin-top: 8px; font-size: 13.5px; line-height: 1.4; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* `.kv b` fixe la couleur du craie et l'emportait sur `.txt-orange` (spécificité 0,0,2,0 contre 0,0,1,0) : le prix du client ne ressortait plus dans la fiche. */ .kv b.txt-orange { color: var(--lime); } /* ---------- Le panneau d'informations de la visionneuse ---------- Replié, il laisse voir le nom et le prix (132 px, valeur partagée avec PANNEAU_VISIBLE dans app.js). On le tire vers le haut pour tout lire. Seule `transform` est animée : composée sur le GPU, donc 60 images/seconde. */ .viewer-infos { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; background: var(--nuit-2); border-top: 1px solid var(--line-strong); border-radius: var(--radius) var(--radius) 0 0; padding: 0 18px calc(20px + var(--safe-b)); max-height: 80%; overflow: hidden; transform: translate3d(0, calc(100% - 132px), 0); transition: transform .28s cubic-bezier(.32,.72,0,1); will-change: transform; touch-action: none; } .viewer-infos.ouvert { transform: translate3d(0, 0, 0); overflow-y: auto; } .viewer-infos.glisse { transition: none; } /* pendant le geste, on suit le doigt */ .viewer-poignee { display: block; width: 42px; height: 4px; border-radius: 999px; background: var(--line-strong); margin: 11px auto 14px; cursor: grab; } .viewer-infos h3 { margin: 0 0 10px; font-family: var(--font-display); font-variation-settings: "wdth" var(--wide); font-weight: 800; font-size: 21px; letter-spacing: -.015em; } .viewer-infos p { margin: 12px 0 0; font-size: 14px; line-height: 1.45; color: var(--ink-2); } .viewer-infos .sc-eco { margin-top: 12px; } .viewer-infos .notice { margin-top: 12px; } @media (prefers-reduced-motion: reduce) { .viewer-infos { transition: none; } } /* ============ La carte a swiper : photo plein cadre + tiroir ============ */ /* Demande de Tony le 20/09 : voir la paire en grand, les informations rangees dans un tiroir qu'on tire vers le haut, les gestes poses sur la photo. */ /* La photo est le seul element lumineux de l'ecran : elle prend toute la carte. `.sc-info` sortant du flux, `.sc-photo` (flex:1) occupe seule la hauteur. */ .sc-photo { flex: 1 1 auto; } /* Un degrade sombre sous la photo : le bas de l'image ne lutte plus avec le tiroir, et la poignee reste lisible quel que soit le cliche. */ /* Le degrade s'arrete au HAUT du tiroir : pose a `bottom: 0`, son extremite sombre passait derriere le panneau et on n'en voyait que le vide. */ .sc-photo::after { content: ''; position: absolute; left: 0; right: 0; /* Le fondu au-dessus de la case reste court : au-dela, il assombrit la chaussure elle-meme, ce qui va contre la demande de Tony (« on voit PLUS l'article »). Il porte la lisibilite du texte, rien d'autre. */ bottom: 0; height: calc(var(--sc-tiroir, 150px) + 76px); background: linear-gradient(to top, rgba(14,15,18,.9) 0%, rgba(14,15,18,.82) 58%, rgba(14,15,18,0) 100%); pointer-events: none; } /* Les pastilles de la photo remontent : le bas appartient au tiroir. */ .sc-last { top: 14px; left: 14px; bottom: auto; } .sc-cart + .sc-last { top: 48px; } .sc-zoom { top: 14px; right: 14px; bottom: auto; } /* ---------------------------------------------------------- le tiroir ---- */ .sc-info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; max-height: 84%; overflow: hidden; padding: 10px 16px 16px; background: var(--nuit-2); border-top: 1px solid var(--line-strong); border-radius: var(--radius) var(--radius) 0 0; transform: translate3d(0, var(--sc-plus, 0px), 0); transition: transform .3s cubic-bezier(.22,.61,.36,1); will-change: transform; touch-action: none; } .sc-info.glisse { transition: none; } /* sous le doigt, aucune inertie */ .sc-info.ouvert { transform: translate3d(0, 0, 0); overflow-y: auto; } .swipe-card.behind .sc-info { transform: translate3d(0, var(--sc-plus, 0px), 0); } /* La poignee dit « ca se tire », sans un mot et sans pictogramme. */ .sc-poignee { width: 34px; height: 3px; border-radius: 2px; margin: 0 auto 10px; background: var(--line-strong); } /* Ce qui attend sous le pli : le SKU et l'histoire du modele. Le reste -- nom, pointure, prix, economie, note du vendeur -- est visible tiroir ferme. */ /* On masque a partir du HAUT de ce bloc : la marge au-dessus reste donc visible et donne l'air qui manquait sous la note du vendeur. */ .sc-plus { margin-top: 14px; padding-top: 2px; } .sc-plus .sc-sku { margin-top: 12px; } .sc-info .sc-name { font-size: 21px; } .sc-info .sc-price { margin-top: 10px; padding-top: 10px; } /* -------------------------------------------------- les gestes en bulles -- */ /* Posees sur la photo, juste au-dessus du tiroir. Elles sont soeurs des cartes dans `.deck`, jamais enfants : un appui dessus ne demarre pas un glissement. */ .deck > .swipe-actions { position: absolute; left: 0; right: 0; z-index: 4; bottom: calc(var(--sc-tiroir, 190px) + 14px); margin: 0; pointer-events: none; } .deck > .swipe-actions .sw-btn { pointer-events: auto; } .deck > .swipe-actions .sw-btn { width: 60px; height: 60px; border-radius: 50%; background: rgba(18,19,22,.52); border: 1.5px solid rgba(237,238,240,.34); color: var(--craie); font-size: 24px; box-shadow: 0 2px 14px rgba(0,0,0,.34); } .deck > .swipe-actions .sw-btn.undo { width: 44px; height: 44px; font-size: 17px; background: rgba(18,19,22,.42); border-color: rgba(237,238,240,.2); color: var(--muted); } .deck > .swipe-actions .sw-btn.yes { border-color: var(--lime); color: var(--lime); background: rgba(18,19,22,.52); } .deck > .swipe-actions .sw-btn.yes:active { background: var(--lime); color: var(--lime-ink); } .deck > .swipe-actions .sw-btn.no:active { background: var(--red); color: var(--lime-ink); border-color: var(--red); } .deck > .swipe-actions .sw-btn.undo.hidden { display: grid; visibility: hidden; } .deck > .swipe-actions { transition: opacity .22s ease; } .deck.tiroir-ouvert > .swipe-actions { opacity: 0; pointer-events: none; } /* La pile recupere la hauteur que la rangee de boutons occupait sous elle. */ .deck-screen .deck { height: calc(100dvh - 62px - var(--safe-t) - 10px - 40px - var(--tabbar) - var(--safe-b)); margin-bottom: 6px; } .deck-screen.has-due .deck { height: calc(100dvh - 62px - var(--safe-t) - 10px - 84px - var(--tabbar) - var(--safe-b)); } @media (prefers-reduced-motion: reduce) { .sc-info { transition: none; } } /* ---- Case reduite et translucide fermee, ample et opaque ouverte ---- */ /* Demande de Tony, 20/09 au soir : « je veux qu'on voie PLUS l'article, la case doit etre plus reduite et transparente, et si on swipe vers le haut elle prend plus de place et devient opaque. » Pas de verre depoli (regle de Tony) : c'est le degrade pose sur la photo, SOUS la case, qui porte la lisibilite du texte. */ .sc-info { padding: 7px 15px 13px; background: rgba(20,21,25,.44); border-top: 1px solid rgba(237,238,240,.13); transition: transform .3s cubic-bezier(.22,.61,.36,1), background-color .26s ease; } .sc-info.ouvert { background: var(--nuit-2); border-top-color: var(--line-strong); } .sc-info.glisse { transition: none; } /* Tout resserrer : chaque pixel rendu ici est un pixel de chaussure en plus. */ .sc-poignee { margin-bottom: 7px; } .sc-info .sc-name { font-size: 19px; } .sc-info .sc-meta { margin-top: 6px; } .sc-info .sc-price { margin-top: 7px; padding-top: 7px; } .sc-info .sc-price .big { font-size: 26px; } .sc-info .sc-note { margin-top: 6px; font-size: 12.5px; } .sc-info-btn { height: 26px; font-size: 9.5px; } /* L'economie tenait une ligne pleine largeur ; elle tient dans une pastille. Le levier de vente reste, la place part a la photo. */ .sc-meta .chip.eco { background: var(--lime); color: var(--lime-ink); border-color: var(--lime); font-weight: 800; letter-spacing: -.01em; } .sc-eco { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); } /* Sous le pli : le rayon, le coloris, le detail en euros, le SKU, l'histoire. */ .sc-plus { margin-top: 12px; } .sc-plus .sc-meta { margin-top: 0; } /* ---- La loupe ne chevauche plus le badge des paniers ---- */ /* Le bouton portait l'icone ET le mot AGRANDIR (~170 px) : il mordait sur « Dans N paniers », qui occupe le haut-gauche. Reduit a une pastille ronde, il ne peut plus toucher le badge, meme au plus long. Meme famille visuelle que les bulles posees sur la photo. */ .sc-zoom { top: 12px; right: 12px; bottom: auto; width: 38px; height: 38px; min-width: 0; padding: 0; gap: 0; border-radius: 50%; background: rgba(14,15,18,.6); border: 1.5px solid rgba(237,238,240,.3); font-size: 0; letter-spacing: 0; } .sc-zoom::before { width: 17px; height: 17px; -webkit-mask-size: 17px 17px; mask-size: 17px 17px; } .sc-cart { max-width: 58%; } /* ---- Les badges de la photo s'empilent ---- */ /* « Dans N paniers » peut tenir sur deux lignes ; « Derniere paire » lui passait dessous. Une colonne flex reglera tous les cas, y compris les autres langues. `right` reserve la colonne de la loupe. */ .sc-badges { position: absolute; top: 12px; left: 12px; right: 60px; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; pointer-events: none; } .sc-badges .sc-cart, .sc-badges .sc-last { position: static; top: auto; left: auto; right: auto; bottom: auto; max-width: 100%; } /* Le bandeau du virement a disparu : la pile ne doit plus lui ceder de hauteur. */ .deck-screen.has-due .deck { height: calc(100dvh - 62px - var(--safe-t) - 10px - 40px - var(--tabbar) - var(--safe-b)); } /* ---- L'ecran de la pile ne defile pas ---- */ /* Tony, 20/09 : « la barre convulse, elle monte et redescend toute seule. » L'ecran heritait des 90 px de marge basse de `.screen`, donc il defilait ; et sa hauteur etait en `dvh`, qui change avec la barre d'adresse du telephone quand on defile. Les deux se renvoyaient la balle. `svh` est la hauteur STABLE : le contenu tient toujours, plus rien ne defile, plus rien ne tremble. Le tiroir ouvert, lui, defile toujours. */ .deck-screen { padding-bottom: 0; overflow: hidden; } .deck-screen .deck, .deck-screen.has-due .deck { height: calc(100svh - 62px - var(--safe-t) - 10px - 40px - var(--tabbar) - var(--safe-b)); min-height: 0; } /* Un rendu ne doit jamais rejouer la transition de la case. */ .sc-info.sans-anim { transition: none; } /* ---- Le double appui n'agrandit plus l'appli ---- */ /* Demande de Tony, 20/09. Le `user-scalable=no` du meta viewport est present depuis l'origine mais Safari iOS l'IGNORE depuis iOS 10 : c'est pourquoi le double appui agrandissait encore la page. `touch-action` n'est pas ignore. `manipulation` = on garde le defilement et le pincement, on retire le zoom par double appui (et, au passage, le delai de 300 ms sur les clics). La visionneuse garde son zoom : il est ecrit en JS (double appui -> .zoomed, avec le point de zoom sous le doigt), il ne depend pas du navigateur. */ /* `manipulation` ne coupait que le double appui : le pincement a deux doigts agrandissait toujours. `pan-x pan-y` ne laisse que le defilement -- c'est ce que Tony demande. L'apercu de la photo garde son zoom, ecrit en JS. */ html, body { touch-action: pan-x pan-y; } /* ---- Le nom de la paire tient sur deux lignes ---- */ /* Mesure sur les 117 vraies cartes du 20/09 : 50 noms tronques en 375 px. Or 70 fiches sur 117 n'ont ni coloris ni description -- le nom est tout ce que le client a, et c'est le coloris, en fin de nom, qui disparaissait. La case mesure sa hauteur au rendu (--sc-plus), elle s'adapte toute seule. */ .sc-info .sc-name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.12; } .sc-info .row.between { align-items: flex-start; gap: 10px; } /* ---- Proposer l'installation sur l'ecran d'accueil du telephone ---- */ .install-bloc { display: flex; align-items: center; gap: 12px; margin: 14px 0 0; padding: 13px 15px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--nuit-2); } .install-bloc .txt { flex: 1; min-width: 0; } .install-bloc .txt b { display: block; font-size: 14px; } .install-bloc .txt small { color: var(--muted); font-size: 12px; line-height: 1.35; display: block; margin-top: 2px; } .install-bloc .btn { flex: none; width: auto; padding: 0 16px; height: 38px; } /* ---- La feuille de filtre ---- */ /* Chaque case porte SON NOMBRE de paires : sans lui, on coche a l'aveugle. */ .size-grid.petite { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 6px; } .size-grid.petite .size-btn { height: 44px; flex-direction: column; gap: 0; font-size: 13px; } .size-grid.petite .size-btn small { font-size: 10px; color: var(--muted); font-weight: 600; } .size-grid.petite .size-btn.on small { color: var(--lime-ink); } .sheet .chips { display: flex; flex-wrap: wrap; gap: 6px; } .sheet .chip-btn { width: auto; } /* ========================================================================== REFONTE DPSK — feuille livrée par le designer le 21/09/2026. Collée telle quelle, à la suite de l'existant. Toutes ses classes sont préfixées `dpsk-` : aucune collision avec ce qui précède, et l'ancien design continue de servir les écrans pas encore repris. Intégrée écran par écran. Aujourd'hui : LA PILE seulement. ========================================================================== */ /* ============================================================================ DPSK — feuille de style unique. Vitrine nocturne. Sans framework, sans build, sans préprocesseur. CSS natif. À coller dans la feuille existante, ou à charger après elle. Prérequis, une seule ligne dans , avant cette feuille : CONTRAINTE D'INTÉGRATION RESPECTÉE L'écran est reconstruit entièrement (app.innerHTML = …) toutes les quelques secondes. Aucun état visuel ne vit donc sur un élément redessiné : les états sont des classes sur et des variables réglées sur . document.body.classList.toggle('dpsk-drawer-open', ouvert); document.body.style.setProperty('--dpsk-dx', dx + 'px'); document.body.style.setProperty('--dpsk-limit', reste); // 1 → 0 Toutes les classes sont préfixées dpsk- : aucune collision possible avec l'existant, aucune classe existante renommée ou supprimée. ========================================================================== */ /* --- 1. JETONS ----------------------------------------------------------- */ :root { /* fonds et surfaces */ --dpsk-bg: #18191c; --dpsk-surface: #202227; --dpsk-surface-2: #282b31; --dpsk-surface-3: #32363d; /* ajout : panneau au-dessus du tiroir */ /* texte */ --dpsk-text: #edeef0; --dpsk-text-soft: #8f949b; --dpsk-text-dim: #5a5f66; /* ajout : étiquettes et texte éteint */ --dpsk-text-on-tint: #a5abb2; /* texte secondaire sur la teinte paire */ --dpsk-text-off: #6e6a62; /* ligne désactivée, paire partie */ /* signal et alerte */ --dpsk-signal: #d7ff3e; --dpsk-on-signal: #18191c; --dpsk-alert: #ff6257; /* filets */ --dpsk-rule: rgba(237, 238, 240, .11); --dpsk-rule-strong: rgba(237, 238, 240, .22); /* ajout : fin de bloc */ --dpsk-rule-soft: rgba(237, 238, 240, .28); /* teinte prise sur la paire — réglée par paire, sinon neutre */ --dpsk-tint: #23262b; /* typographie */ --dpsk-font: 'Archivo', system-ui, -apple-system, sans-serif; --dpsk-font-mark: 'Jost', var(--dpsk-font); --dpsk-wd: 107; /* chasse courante */ --dpsk-wd-tight: 80; /* chasse condensée, titres */ /* espacements */ --dpsk-s1: 4px; --dpsk-s2: 8px; --dpsk-s3: 12px; --dpsk-s4: 16px; --dpsk-s5: 20px; --dpsk-s6: 28px; --dpsk-s7: 40px; /* rayons */ --dpsk-r: 4px; --dpsk-r2: 6px; /* hauteurs de chrome */ --dpsk-head-h: 50px; --dpsk-tabs-h: 58px; /* courbes et durées */ --dpsk-ease-out: cubic-bezier(.2, .8, .3, 1); --dpsk-ease-soft: cubic-bezier(.16, .84, .34, 1); --dpsk-ease-in: cubic-bezier(.4, .1, .7, 1); --dpsk-ease-card: cubic-bezier(.25, .8, .3, 1); --dpsk-t-fast: 160ms; --dpsk-t-ui: 220ms; --dpsk-t-card: 280ms; --dpsk-t-slow: 340ms; /* état, réglé depuis le JS sur */ --dpsk-dx: 0px; --dpsk-rot: 0deg; --dpsk-limit: 1; /* 1 = ouverture, 0 = 12h30 */ } /* --- 2. BASE ------------------------------------------------------------- */ .dpsk-app, .dpsk-app * { box-sizing: border-box; } .dpsk-app { margin: 0; min-height: 100dvh; display: flex; flex-direction: column; background: var(--dpsk-bg); color: var(--dpsk-text); font-family: var(--dpsk-font); font-variation-settings: 'wdth' var(--dpsk-wd); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; overflow-x: hidden; } .dpsk-app a { color: inherit; text-decoration: none; } .dpsk-app button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } .dpsk-app img { display: block; } .dpsk-app ul, .dpsk-app ol, .dpsk-app dl { margin: 0; padding: 0; list-style: none; } .dpsk-app h1, .dpsk-app h2, .dpsk-app h3, .dpsk-app p, .dpsk-app dd { margin: 0; } .dpsk-app ::selection { background: var(--dpsk-signal); color: var(--dpsk-on-signal); } .dpsk-app :focus-visible { outline: 2px solid var(--dpsk-signal); outline-offset: 2px; } /* toute cible tactile : jamais moins de 44px */ .dpsk-hit { min-width: 44px; min-height: 44px; } .dpsk-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* --- 3. TYPOGRAPHIE ------------------------------------------------------ */ .dpsk-h1 { font-size: 54px; font-variation-settings: 'wdth' var(--dpsk-wd), 'wght' 700; letter-spacing: -.045em; line-height: .86; } .dpsk-h2 { font-size: 33px; font-variation-settings: 'wdth' var(--dpsk-wd-tight), 'wght' 700; letter-spacing: -.005em; line-height: .92; text-transform: uppercase; } .dpsk-h3 { font-size: 21px; font-variation-settings: 'wdth' var(--dpsk-wd), 'wght' 600; letter-spacing: -.02em; line-height: 1.1; } .dpsk-body { font-size: 13.5px; line-height: 1.45; } .dpsk-lede { font-size: 15px; line-height: 1.45; color: var(--dpsk-text-soft); } .dpsk-note { font-size: 12.5px; line-height: 1.5; color: var(--dpsk-text-soft); } .dpsk-value { font-size: 13.5px; font-variation-settings: 'wdth' var(--dpsk-wd), 'wght' 500; } .dpsk-label { font-size: 10px; font-variation-settings: 'wdth' var(--dpsk-wd), 'wght' 600; letter-spacing: .14em; text-transform: uppercase; color: var(--dpsk-text-dim); } .dpsk-strike { color: var(--dpsk-text-soft); text-decoration: line-through; } .dpsk-alert { color: var(--dpsk-alert); } /* --- 4. EN-TÊTE ET FILET D'HEURE LIMITE ---------------------------------- */ .dpsk-head { flex: 0 0 auto; height: var(--dpsk-head-h); padding: 0 var(--dpsk-s4); display: flex; align-items: center; justify-content: space-between; gap: var(--dpsk-s3); } .dpsk-head--back { padding-left: 4px; } .dpsk-mark { font-family: var(--dpsk-font-mark); font-weight: 600; font-size: 16px; letter-spacing: .16em; } .dpsk-mark--off { color: var(--dpsk-text-soft); } .dpsk-clock { display: flex; align-items: baseline; gap: var(--dpsk-s2); } .dpsk-clock__v { font-size: 15px; font-variation-settings: 'wdth' var(--dpsk-wd), 'wght' 600; letter-spacing: -.01em; } .dpsk-iconbtn { width: 46px; height: 46px; display: grid; place-items: center; color: var(--dpsk-text); } /* Le filet d'heure limite. Piloté par --dpsk-limit sur , PAS par une animation : l'écran est reconstruit en permanence, une animation repartirait de zéro à chaque fois. */ .dpsk-limit { flex: 0 0 auto; height: 1px; background: var(--dpsk-rule); overflow: hidden; } .dpsk-limit__fill { display: block; height: 1px; width: 100%; background: var(--dpsk-signal); transform: scaleX(var(--dpsk-limit)); transform-origin: left center; transition: transform 1s linear; } body.dpsk-closed .dpsk-limit__fill { background: var(--dpsk-text-dim); } body.dpsk-last-call .dpsk-limit__fill { background: var(--dpsk-alert); } body.dpsk-last-call .dpsk-clock__v { animation: dpsk-beat 3.6s ease-in-out infinite; } /* --- 5. BARRE D'ONGLETS -------------------------------------------------- */ .dpsk-tabs { flex: 0 0 auto; height: var(--dpsk-tabs-h); display: flex; border-top: 1px solid var(--dpsk-rule); transform: translateY(0); transition: transform 240ms var(--dpsk-ease-out); } body.dpsk-tabs-away .dpsk-tabs, body.dpsk-drawer-open .dpsk-tabs { transform: translateY(100%); transition-duration: 200ms; transition-timing-function: var(--dpsk-ease-in); } .dpsk-tab { flex: 1 1 0; display: flex; align-items: center; justify-content: center; padding: 0 var(--dpsk-s1); margin-top: -1px; border-top: 2px solid transparent; font-size: 10px; font-variation-settings: 'wdth' var(--dpsk-wd), 'wght' 600; letter-spacing: .1em; text-align: center; color: var(--dpsk-text-dim); } .dpsk-tab--on { color: var(--dpsk-text); border-top-color: var(--dpsk-signal); } /* --- 6. LA PILE ---------------------------------------------------------- */ .dpsk-stage { position: relative; flex: 1 1 auto; } .dpsk-card { position: absolute; inset: 12px 10px 10px; overflow: hidden; display: flex; flex-direction: column; background: var(--dpsk-surface); border: 1px solid var(--dpsk-rule); border-radius: var(--dpsk-r2); cursor: grab; touch-action: none; transform: translateX(var(--dpsk-dx)) rotate(var(--dpsk-rot)); transition: transform var(--dpsk-t-card) var(--dpsk-ease-card), opacity var(--dpsk-t-card) var(--dpsk-ease-card); } /* pendant le geste, la carte colle au doigt : aucune transition */ body.dpsk-dragging .dpsk-card { transition: none; cursor: grabbing; } /* repositionnement instantané juste après la sortie */ body.dpsk-snap .dpsk-card, body.dpsk-snap .dpsk-card__veil { transition: none; } .dpsk-card--out { opacity: 0; } .dpsk-card__photo { position: relative; flex: 0 0 auto; height: 372px; } .dpsk-card__photo img { width: 100%; height: 100%; object-fit: cover; } /* Le voile : la carte suivante arrive opaque puis devient limpide. Rien n'est visible derrière pendant le geste. */ .dpsk-card__veil { position: absolute; inset: 0; background: var(--dpsk-bg); pointer-events: none; opacity: 0; transition: opacity var(--dpsk-t-slow) var(--dpsk-ease-out); } body.dpsk-reveal .dpsk-card__veil { opacity: 1; } .dpsk-acts { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; align-items: center; justify-content: center; gap: 26px; } .dpsk-bubble { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: rgba(24, 25, 28, .62); border: 1px solid rgba(237, 238, 240, .24); color: var(--dpsk-text); } .dpsk-bubble--undo { width: 46px; height: 46px; border-color: rgba(237, 238, 240, .16); color: var(--dpsk-text-soft); } .dpsk-bubble--take { background: var(--dpsk-signal); border: 0; color: var(--dpsk-on-signal); } .dpsk-stamp { position: absolute; top: 26px; padding: 5px 12px; font-size: 22px; font-variation-settings: 'wdth' var(--dpsk-wd), 'wght' 700; letter-spacing: .1em; background: rgba(24, 25, 28, .4); opacity: 0; transform: scale(.92); transition: opacity var(--dpsk-t-fast) cubic-bezier(.2, .7, .3, 1), transform var(--dpsk-t-fast) cubic-bezier(.2, .7, .3, 1); } .dpsk-stamp--take { left: 20px; border: 2px solid var(--dpsk-signal); color: var(--dpsk-signal); rotate: -11deg; } .dpsk-stamp--skip { right: 20px; border: 2px solid var(--dpsk-text); color: var(--dpsk-text); rotate: 11deg; } body.dpsk-to-take .dpsk-stamp--take, body.dpsk-to-skip .dpsk-stamp--skip { opacity: 1; transform: scale(1); } /* --- 7. FICHE : TITRE, PRIX, LIGNES --------------------------------------- */ .dpsk-sheet { flex: 1 1 auto; display: flex; flex-direction: column; } .dpsk-sheet__head { padding: 14px var(--dpsk-s4) var(--dpsk-s3); } .dpsk-sheet__head .dpsk-label { display: block; margin-top: 7px; } .dpsk-price { background: var(--dpsk-tint); border-top: 1px solid var(--dpsk-rule); border-bottom: 1px solid var(--dpsk-rule); padding: var(--dpsk-s3) var(--dpsk-s4) 14px; } .dpsk-price .dpsk-label { color: var(--dpsk-text-on-tint); } .dpsk-price__v { display: block; margin-top: 6px; font-size: 88px; font-variation-settings: 'wdth' var(--dpsk-wd), 'wght' 700; letter-spacing: -.05em; line-height: .78; color: var(--dpsk-signal); } .dpsk-price__foot { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-top: 10px; font-size: 13px; } .dpsk-price__foot .dpsk-strike { color: var(--dpsk-text-on-tint); } .dpsk-save { font-variation-settings: 'wdth' var(--dpsk-wd), 'wght' 600; } .dpsk-rows { display: flex; flex-direction: column; } .dpsk-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 10px var(--dpsk-s4); border-bottom: 1px solid var(--dpsk-rule); } .dpsk-row--top { border-top: 1px solid var(--dpsk-rule-strong); border-bottom: 0; } .dpsk-row__k { flex: 0 0 auto; } .dpsk-row__v { text-align: right; font-size: 13.5px; font-variation-settings: 'wdth' var(--dpsk-wd), 'wght' 500; } .dpsk-row__v--alert { color: var(--dpsk-alert); } .dpsk-row__v--soft { color: var(--dpsk-text-soft); } .dpsk-pull { margin-top: auto; height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; font-size: 9.5px; font-variation-settings: 'wdth' var(--dpsk-wd), 'wght' 600; letter-spacing: .16em; color: var(--dpsk-text-dim); } .dpsk-pull::before, .dpsk-grip { content: ''; display: block; width: 36px; height: 1px; background: var(--dpsk-rule-soft); } /* --- 8. TIROIR ----------------------------------------------------------- */ .dpsk-drawer { position: absolute; left: 0; right: 0; bottom: 0; height: 452px; padding: var(--dpsk-s3) var(--dpsk-s4) var(--dpsk-s4); display: flex; flex-direction: column; background: var(--dpsk-surface-2); border-top: 1px solid var(--dpsk-rule-strong); border-radius: var(--dpsk-r2) var(--dpsk-r2) 0 0; transform: translateY(100%); transition: transform var(--dpsk-t-ui) var(--dpsk-ease-in); } body.dpsk-drawer-open .dpsk-drawer { transform: translateY(0); transition: transform 300ms var(--dpsk-ease-soft); } .dpsk-drawer__grip { align-self: center; width: 60px; height: 22px; display: grid; place-items: center; } .dpsk-drawer__grip span { display: block; width: 36px; height: 1px; background: rgba(237, 238, 240, .34); } /* --- 9. BOUTONS ET ÉTIQUETTES -------------------------------------------- */ .dpsk-btn { width: 100%; height: 52px; border-radius: var(--dpsk-r); font-family: var(--dpsk-font); font-variation-settings: 'wdth' var(--dpsk-wd), 'wght' 600; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; } .dpsk-btn--primary { background: var(--dpsk-signal); color: var(--dpsk-on-signal); font-variation-settings: 'wdth' var(--dpsk-wd), 'wght' 700; font-size: 15px; } .dpsk-btn--ghost { border: 1px solid var(--dpsk-rule-strong); color: var(--dpsk-text); } .dpsk-btn--quiet { border: 1px solid var(--dpsk-signal); color: var(--dpsk-signal); } .dpsk-btn--tall { height: 58px; font-size: 16px; } .dpsk-btn--small { width: auto; height: 44px; padding: 0 14px; font-size: 13px; } .dpsk-btn:active { transform: scale(.98); transition: transform 120ms var(--dpsk-ease-out); } .dpsk-btn-row { display: flex; gap: 10px; } .dpsk-btn-row .dpsk-btn { flex: 1 1 0; } .dpsk-btn-row .dpsk-btn--primary { flex-grow: 1.7; } .dpsk-tag { display: inline-block; padding: 3px 7px; border: 1px solid var(--dpsk-rule-strong); font-size: 11px; font-variation-settings: 'wdth' var(--dpsk-wd), 'wght' 600; letter-spacing: .08em; } .dpsk-tag--alert { border-color: var(--dpsk-alert); color: var(--dpsk-alert); font-size: 9.5px; letter-spacing: .14em; padding: 2px 6px; } .dpsk-tag--on { border-color: var(--dpsk-signal); color: var(--dpsk-signal); font-size: 9px; letter-spacing: .12em; padding: 2px 5px; } .dpsk-tag--off { border-color: var(--dpsk-text-soft); color: var(--dpsk-text-soft); font-size: 9px; letter-spacing: .12em; padding: 2px 5px; } .dpsk-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--dpsk-signal); display: inline-block; } /* --- 10. LISTES (panier, liste de caisse) -------------------------------- */ .dpsk-list { border-top: 1px solid var(--dpsk-rule-strong); } .dpsk-item { display: flex; align-items: flex-start; gap: 14px; padding: 14px var(--dpsk-s4); border-bottom: 1px solid var(--dpsk-rule); } .dpsk-item__thumb { width: 66px; height: 84px; object-fit: cover; border-radius: var(--dpsk-r); flex: 0 0 auto; } .dpsk-item__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; } .dpsk-item__name { font-size: 19px; font-variation-settings: 'wdth' 82, 'wght' 700; line-height: 1.05; text-transform: uppercase; } .dpsk-item__meta { font-size: 11.5px; color: var(--dpsk-text-soft); } .dpsk-item__side { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; } .dpsk-item__price { font-size: 19px; font-variation-settings: 'wdth' var(--dpsk-wd), 'wght' 700; letter-spacing: -.02em; } .dpsk-item--gone .dpsk-item__thumb { opacity: .4; filter: grayscale(1); } .dpsk-item--gone .dpsk-item__name, .dpsk-item--gone .dpsk-item__price { color: var(--dpsk-text-off); text-decoration: line-through; } .dpsk-total { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; padding: 14px 0 var(--dpsk-s3); border-top: 1px solid var(--dpsk-rule-strong); } .dpsk-total__v { font-size: 52px; font-variation-settings: 'wdth' var(--dpsk-wd), 'wght' 700; letter-spacing: -.045em; line-height: .8; } /* --- 11. PAYER ----------------------------------------------------------- */ .dpsk-amount { background: var(--dpsk-tint); padding: 18px var(--dpsk-s4); border-bottom: 1px solid var(--dpsk-rule-strong); } .dpsk-amount .dpsk-label { color: var(--dpsk-text-on-tint); } .dpsk-amount__v { display: flex; align-items: baseline; gap: var(--dpsk-s2); margin-top: var(--dpsk-s2); font-size: 92px; font-variation-settings: 'wdth' var(--dpsk-wd), 'wght' 700; letter-spacing: -.055em; line-height: .76; color: var(--dpsk-signal); } .dpsk-amount__cur { font-size: 30px; font-variation-settings: 'wdth' var(--dpsk-wd), 'wght' 600; } .dpsk-step { display: flex; align-items: flex-start; gap: var(--dpsk-s3); padding: 15px var(--dpsk-s4); border-bottom: 1px solid var(--dpsk-rule); } .dpsk-step__n { flex: 0 0 auto; width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--dpsk-rule-strong); font-size: 12px; font-variation-settings: 'wdth' var(--dpsk-wd), 'wght' 600; } .dpsk-step__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; } .dpsk-iban { font-size: 14px; font-variation-settings: 'wdth' var(--dpsk-wd), 'wght' 500; letter-spacing: .02em; line-height: 1.4; } .dpsk-ref { font-size: 22px; font-variation-settings: 'wdth' var(--dpsk-wd), 'wght' 700; letter-spacing: .04em; line-height: 1; } /* --- 12. SOURCEUR (interne) ---------------------------------------------- */ .dpsk-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--dpsk-rule); border-bottom: 1px solid var(--dpsk-rule-strong); } .dpsk-kpi { background: var(--dpsk-bg); padding: 11px var(--dpsk-s2); display: flex; flex-direction: column; gap: var(--dpsk-s1); } .dpsk-kpi__n { font-size: 21px; font-variation-settings: 'wdth' var(--dpsk-wd), 'wght' 700; letter-spacing: -.02em; } .dpsk-kpi__l { font-size: 8.5px; font-variation-settings: 'wdth' var(--dpsk-wd), 'wght' 600; letter-spacing: .12em; color: var(--dpsk-text-dim); } .dpsk-kpi--on .dpsk-kpi__n { color: var(--dpsk-signal); } .dpsk-kpi--bad .dpsk-kpi__n { color: var(--dpsk-alert); } .dpsk-hero { padding: 18px var(--dpsk-s4) var(--dpsk-s4); border-bottom: 1px solid var(--dpsk-rule-strong); } .dpsk-hero__n { font-size: 76px; font-variation-settings: 'wdth' var(--dpsk-wd), 'wght' 700; letter-spacing: -.05em; line-height: .78; color: var(--dpsk-signal); } /* --- 13. ÉCRAN FERMÉ ET RIDEAU ------------------------------------------- */ .dpsk-band { height: 94px; overflow: hidden; border-top: 1px solid var(--dpsk-rule); border-bottom: 1px solid var(--dpsk-rule); display: flex; align-items: center; } .dpsk-band__track { display: flex; gap: var(--dpsk-s2); padding-left: var(--dpsk-s4); flex: 0 0 auto; will-change: transform; animation: dpsk-drift 56s linear infinite; } .dpsk-band__track img { width: 62px; height: 78px; object-fit: cover; border-radius: var(--dpsk-r); opacity: .38; filter: grayscale(1); flex: 0 0 auto; } /* Rideau : un panneau de lames qui glisse dans une fenêtre. Les lames ne se déforment pas — surtout ne pas utiliser scaleY. */ .dpsk-shutter { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .dpsk-shutter__panel { position: absolute; top: 0; left: 0; right: 0; height: calc(100% + 14px); background: repeating-linear-gradient( to bottom, var(--dpsk-surface) 0, var(--dpsk-surface) 13px, rgba(237, 238, 240, .07) 13px, rgba(237, 238, 240, .07) 14px); transform: translateY(-101%); transition: transform var(--dpsk-t-slow) var(--dpsk-ease-in); } body.dpsk-shutter-closed .dpsk-shutter__panel { transform: translateY(0); transition: transform 420ms cubic-bezier(.3, .9, .3, 1); } .dpsk-shutter__rail { position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: var(--dpsk-surface-2); border-top: 1px solid var(--dpsk-rule-strong); } .dpsk-shutter__mark { position: absolute; left: 0; right: 0; top: 40%; text-align: center; font-family: var(--dpsk-font-mark); font-weight: 600; font-size: 34px; letter-spacing: .22em; color: rgba(237, 238, 240, .09); } /* --- 14. CHARGEMENT ------------------------------------------------------ */ /* Amplitude volontairement faible : l'écran étant reconstruit en permanence, une amplitude forte rendrait le redémarrage de l'animation visible. */ .dpsk-skel { display: block; background: #2b2f36; border-radius: 2px; animation: dpsk-wait 1900ms ease-in-out infinite; } .dpsk-skel--photo { height: 372px; border-radius: 0; } /* --- 15. ARRIVÉE D'ÉCRAN ------------------------------------------------- */ .dpsk-rise { animation: dpsk-rise 320ms var(--dpsk-ease-soft) both; } .dpsk-rise--1 { animation-delay: 60ms; } .dpsk-rise--2 { animation-delay: 120ms; } .dpsk-rise--3 { animation-delay: 180ms; } /* transition d'écran : la classe --back inverse le sens */ .dpsk-in { animation: dpsk-in var(--dpsk-t-card) var(--dpsk-ease-out) both; } .dpsk-out { animation: dpsk-out var(--dpsk-t-card) var(--dpsk-ease-out) both; } body.dpsk-back .dpsk-in { animation-name: dpsk-in-back; } body.dpsk-back .dpsk-out { animation-name: dpsk-out-back; } /* --- 16. IMAGES ---------------------------------------------------------- */ .dpsk-photo { width: 100%; height: 100%; object-fit: cover; } .dpsk-photo--sm { width: 46px; height: 58px; border-radius: 3px; } .dpsk-photo--gone { opacity: .4; filter: grayscale(1); } /* --- 17. ANIMATIONS ------------------------------------------------------ */ @keyframes dpsk-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @keyframes dpsk-in { from { opacity: .6; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } } @keyframes dpsk-out { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(-16px); } } @keyframes dpsk-in-back { from { opacity: .6; transform: translateX(-24px); } to { opacity: 1; transform: translateX(0); } } @keyframes dpsk-out-back { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(16px); } } @keyframes dpsk-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes dpsk-wait { 0%, 100% { opacity: .34; } 50% { opacity: .5; } } @keyframes dpsk-beat { 0%, 100% { opacity: 1; } 12% { opacity: .55; } 24% { opacity: 1; } } /* --- 18. MOUVEMENT RÉDUIT ------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { .dpsk-app *, .dpsk-app *::before, .dpsk-app *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; } .dpsk-skel { opacity: .42; } .dpsk-band__track { transform: none; } .dpsk-limit__fill { transition: none; } } /* --- AJUSTEMENTS D'INTÉGRATION (Claude Code, 21/09) ---------------------- Ces quelques règles ne viennent pas du designer : elles raccordent sa feuille à la réalité du code. Chacune est justifiée. ------------------------------------------------------------------------ */ /* La feuille pose `transform: translateX(var(--dpsk-dx))` sur TOUTE `.dpsk-card`. Or la pile en contient deux : sans ça, la carte du dessous suivrait le doigt elle aussi. Seule celle du dessus bouge. */ .dpsk-card--behind { transform: none; } /* Le tiroir mesure 452 px de haut dans la feuille. Sur un écran court, il déborderait de la carte : on le borne à la hauteur disponible. */ .dpsk-drawer { max-height: calc(100% - 12px); } /* Constaté à l'écran, sur un 390 × 844 réel (iPhone courant) : 1. Le prix à 88 px déborde. « 62,99 € » touche déjà le bord droit, et un prix à trois chiffres passerait dessous. On garde l'impact sur les grands écrans et on laisse la taille céder sur les petits. 2. La fiche entière (titre + prix + lignes + « tout voir ») dépassait la hauteur de la carte, et `overflow: hidden` coupait les lignes POINTURE et BOÎTE : le client ne voyait plus sa pointure. La photo cède quelques pixels plutôt que l'information. Aucune des deux ne change le dessin : elles le rendent tenable. */ .dpsk-price__v { font-size: clamp(52px, 15vw, 88px); } .dpsk-card__photo { max-height: 46%; } .dpsk-sheet { min-height: 0; } /* Le mouvement réduit du designer est porté par `.dpsk-app *`, c'est-à-dire la coquille entière — que l'on n'a pas encore adoptée (elle restylerait aussi les écrans non repris : fond, police, boutons). On porte donc la règle sur ce qui EST migré. Quand toute l'appli passera au nouveau dessin, `#app` prendra la classe `dpsk-app` et la règle d'origine reprendra la main d'elle-même. */ @media (prefers-reduced-motion: reduce) { .dpsk-card, .dpsk-card *, .dpsk-card::before, .dpsk-card::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; } } /* --- LA PILE PLEIN ÉCRAN (retours de Tony, 21/09 au soir) ----------------- « elle ne prend pas tout l'écran » : l'ancienne règle `.deck` plafonnait la pile à 66 % de la hauteur. La carte occupe maintenant tout l'espace entre la barre du haut et les onglets, et la PHOTO occupe toute la carte. -------------------------------------------------------------------------- */ .deck-screen { display: flex; flex-direction: column; padding: 0 0 calc(var(--tabbar) + var(--safe-b)); } .deck.dpsk-stage { height: auto; flex: 1 1 auto; min-height: 0; margin-bottom: 0; } .dpsk-card__photo { flex: 1 1 auto; height: auto; max-height: none; } /* « Elle ne fait toujours pas tout l'écran » : il restait la marge de `.screen` (16 px de chaque côté) ET le retrait de la carte (12/10/10). Bord à bord. */ .dpsk-card { inset: 0; border-radius: 0; border-left: 0; border-right: 0; } /* « Quand je swipe, on voit ce qu'il y a derrière. » Le voile du dessin appartient à la carte du DESSOUS et ne devait s'opacifier qu'après un swipe. Il doit la masquer EN PERMANENCE : la suivante ne se découvre qu'une fois qu'elle est passée devant. */ .dpsk-card--behind .dpsk-card__veil { opacity: 1; } /* « J'ai l'impression qu'il n'y a plus d'article derrière. » La carte du dessous reste MASQUÉE (on ne doit pas découvrir la paire suivante en glissant), mais la pile retrouve sa profondeur : elle dépasse un peu, et son voile prend la teinte d'une surface, pas celle du fond. On voit qu'il y a quelque chose, pas quoi. */ .dpsk-card--behind { transform: scale(.955) translateY(10px); } .dpsk-card--behind .dpsk-card__veil { background: var(--dpsk-surface); } /* `touch-action` : la carte est en `none`, donc le geste y passe. La case et le tiroir héritaient de `auto` — au doigt, le navigateur y voyait un défilement et ANNULAIT le geste. D'où « le swipe vers le haut ne fonctionne pas » et « je mets 10 ans à réduire le panneau ». Invisible à la souris. */ .dpsk-sheet, .dpsk-drawer { touch-action: none; } /* La case se réduit à ce qui décide du geste : le modèle, la pointure, le prix. Elle est POSÉE SUR la photo, translucide — on voit la chaussure au travers — et un dégradé sous elle porte la lisibilité. Pas de verre dépoli (règle de Tony) : c'est un aplat translucide et un dégradé, rien d'autre. */ .dpsk-sheet { position: absolute; left: 0; right: 0; bottom: 0; flex: none; display: block; padding: 12px var(--dpsk-s4) 14px; /* Constate a l'ecran : a .62 le texte se battait avec un ticket blanc en dessous. Une case posee sur une photo doit tenir sur TOUTES les photos, pas sur une photo sombre. Le degrade est allonge pour la meme raison. */ background: rgba(24, 25, 28, .86); border-top: 1px solid var(--dpsk-rule); } .dpsk-sheet::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 120px; background: linear-gradient(to top, rgba(24, 25, 28, .86), rgba(24, 25, 28, 0)); pointer-events: none; } .dpsk-sheet__head { padding: 0; } .dpsk-face { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 8px; } .dpsk-face--eco { margin-top: 6px; font-size: 12.5px; } .dpsk-face--eco .dpsk-strike { color: var(--dpsk-text-soft); } .dpsk-face--eco .dpsk-save { color: var(--dpsk-signal); } /* Le bouton « Copier » du SKU : discret, mais assez large pour le pouce. */ .dpsk-row__v--copiable { display: inline-flex; align-items: center; gap: 10px; } .dpsk-copier { border: 1px solid var(--dpsk-rule-strong); border-radius: 4px; padding: 5px 10px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--dpsk-text-soft); background: none; font-variation-settings: 'wdth' var(--dpsk-wd), 'wght' 600; } .dpsk-copier:active { color: var(--dpsk-signal); border-color: var(--dpsk-signal); } .dpsk-face__prix { font-size: 34px; line-height: 1; letter-spacing: -.03em; color: var(--dpsk-signal); font-variation-settings: 'wdth' var(--dpsk-wd), 'wght' 700; } /* « TOUT VOIR » est une invitation au geste : en `--dpsk-text-dim` sur une photo, il disparaissait. Il monte d'un cran, et son filet aussi. */ .dpsk-sheet .dpsk-pull { height: auto; margin-top: 10px; color: var(--dpsk-text-soft); } .dpsk-sheet .dpsk-pull::before { background: var(--dpsk-rule-strong); } /* Les étiquettes qui pressent (dernière paire, déjà dans des paniers) montent SUR la photo : la case ne porte plus qu'un nom, une pointure et un prix. */ .dpsk-badges { position: absolute; top: 12px; left: 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; max-width: 74%; } /* La note du vendeur se lit comme un avertissement, mais elle a sa PROPRE classe : confondue avec « dernière paire », plus rien ne permettait de les distinguer — ni à l'œil, ni dans un contrôle. */ .dpsk-tag--note { border-color: var(--dpsk-alert); color: var(--dpsk-alert); } /* Le bandeau « photo du modèle » : discret mais jamais escamotable. Il dit au client que cette image illustre la chaussure, pas l'exemplaire qu'il recevra. */ .viewer-modele { position: absolute; left: 50%; transform: translateX(-50%); bottom: 88px; padding: 7px 14px; border-radius: 4px; background: rgba(24, 25, 28, .86); border: 1px solid var(--dpsk-rule-strong); color: var(--dpsk-text-soft); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; text-align: center; max-width: 86%; } /* Les bulles se posent juste au-dessus de la case. Sa hauteur est MESURÉE au rendu (`--dpsk-case`) : elle varie avec la longueur du nom. */ .dpsk-acts { bottom: calc(var(--dpsk-case, 104px) + 14px); } body.dpsk-drawer-open .dpsk-acts { opacity: 0; pointer-events: none; } body.dpsk-drawer-open .dpsk-sheet { opacity: 0; } .dpsk-acts, .dpsk-sheet { transition: opacity var(--dpsk-t-ui) var(--dpsk-ease-out); } /* ---- La bulle du nombre de photos (demande de Tony, 22/09) ---- */ /* « Si l'article a plusieurs photo mets une bulle avec le nombre de photo. » Sans elle, rien n'indique au client qu'il y a d'autres vues derrière la première : il croit avoir tout vu. Posée SOUS la loupe, même famille visuelle, et à droite — la colonne de gauche appartient aux avertissements (« dernière du rayon », défaut de boîte), qui priment. */ .dpsk-compte { position: absolute; top: 58px; right: 12px; z-index: 3; min-width: 38px; height: 26px; padding: 0 9px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; border-radius: 13px; background: rgba(14,15,18,.6); border: 1.5px solid rgba(237,238,240,.3); color: var(--craie); font: 700 12px/1 var(--police, inherit); letter-spacing: .04em; cursor: pointer; } .dpsk-compte::before { content: ''; width: 13px; height: 13px; flex: 0 0 auto; background: currentColor; -webkit-mask: var(--ico-photos) center / 13px 13px no-repeat; mask: var(--ico-photos) center / 13px 13px no-repeat; } :root { --ico-photos: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='3' width='14' height='14' rx='2'/%3E%3Cpath d='M17 21H5a2 2 0 0 1-2-2V7'/%3E%3C/svg%3E"); } /* ========================================================================== MODE JOUR (22/09) — l'identité de NS PANIER, en clair, dans la même appli. Tony : « est-ce possible d'avoir les 2 designs en une seule appli, genre mode jour et mode nuit ? » Oui, et sans toucher au balisage : Deepstock Concept n'a jamais renommé une classe en se refondant, il a seulement redéfini ses variables. On redéfinit donc les mêmes variables une seconde fois, sous `[data-theme="jour"]`. La nuit reste le défaut : c'est l'identité de la marque. Le jour est un choix du client, gardé sur SON appareil. Deux choses ne se règlent PAS par une variable, et sont réécrites plus bas : le bandeau haut (encre sur papier, sa signature) et la case posée sur la photo, qui ne peut plus être translucide — voir le bloc qui la concerne. ========================================================================== */ :root[data-theme="jour"] { /* Surfaces : la nuit redevient du papier. */ --nuit: #f3f0e8; --nuit-2: #ffffff; --nuit-3: #eae5da; --nuit-4: #e1dbcf; --paper: var(--nuit); --paper-2: var(--nuit-3); --card: var(--nuit-2); /* Encre : le texte bascule du clair au sombre. */ --ink: #1c1915; --ink-2: #7c7568; --ink-3: #3d3830; --text: #1c1915; --craie: #1c1915; --muted: #7c7568; --line: #e1dbcf; --line-strong: #cfc7b8; /* Accent : le lime cède à l'orange de chantier. */ --lime: #f4581e; --lime-dim: #b53b0c; --lime-ink: #ffffff; --lime-pale: #ffe9de; --orange: var(--lime); --orange-2: #ff7a3d; --orange-ink: #b53b0c; --orange-pale: var(--lime-pale); /* Signaux : les mêmes rôles, lisibles sur fond clair. */ --green: #1f9c58; --green-pale: #dff5e7; --red: #d8362c; --red-pale: #fde3e0; --blue: #1f6fd6; --blue-pale: #e0ecfb; --amber: #d98d0b; --amber-pale: #fff0d2; /* Forme : l'angle franc et le filet d'un pixel cèdent à l'arrondi et l'ombre. */ --radius: 16px; --radius-sm: 10px; --shadow: 0 8px 24px -14px rgba(20, 18, 15, .35), 0 1px 2px rgba(20, 18, 15, .06); --shadow-lg: 0 18px 44px -18px rgba(20, 18, 15, .45); /* Lettre : le condensé de chantier. Barlow n'a pas d'axe de chasse ; les réglages `wdth` sont donc ramenés à 100, où le navigateur les ignore. */ --font-display: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", sans-serif; --font-body: "Barlow", "Helvetica Neue", Arial, sans-serif; --wide: 100; /* La refonte de la carte a sa PROPRE famille de jetons : sans ce second bloc, la carte resterait nocturne au milieu d'une appli devenue claire. */ --dpsk-bg: #f3f0e8; --dpsk-surface: #ffffff; --dpsk-surface-2: #faf8f3; --dpsk-surface-3: #eae5da; --dpsk-text: #1c1915; --dpsk-text-soft: #7c7568; --dpsk-text-dim: #9a9284; --dpsk-text-on-tint: #7c7568; --dpsk-text-off: #b0a99c; --dpsk-signal: #f4581e; --dpsk-on-signal: #ffffff; --dpsk-alert: #d8362c; --dpsk-rule: rgba(20, 18, 15, .12); --dpsk-rule-strong: rgba(20, 18, 15, .22); --dpsk-rule-soft: rgba(20, 18, 15, .18); --dpsk-tint: #f8f4ec; --dpsk-font: "Barlow", "Helvetica Neue", Arial, sans-serif; --dpsk-wd: 100; --dpsk-wd-tight: 100; --dpsk-r: 10px; --dpsk-r2: 16px; } /* :root EST html : ecrire :root[...] html ne designerait rien du tout. */ :root[data-theme="jour"], :root[data-theme="jour"] body, :root[data-theme="jour"] #app { background: var(--paper); } :root[data-theme="jour"] body { background-image: radial-gradient(1200px 500px at 50% -200px, #fff8f1 0%, rgba(255, 248, 241, 0) 70%); } /* Le bandeau haut de NS PANIER : de l'encre, souligné d'orange. C'est sa signature — sans elle on ne reconnaît pas l'appli des pros. Il reste donc SOMBRE même en plein jour, comme chez eux. */ :root[data-theme="jour"] .topbar { background: #14120f; color: #ffffff; border-bottom: 0; box-shadow: 0 2px 0 var(--orange); } :root[data-theme="jour"] .topbar .brand-title, :root[data-theme="jour"] .topbar .topbar-title, :root[data-theme="jour"] .mot-marque { color: #ffffff; } :root[data-theme="jour"] .topbar .brand-sub, :root[data-theme="jour"] .topbar .topbar-title small, :root[data-theme="jour"] .topbar .back-btn { color: #b9b2a5; } /* Le filet du cadre suit l'orange, la couleur de l'icone venant deja de `--lime`, redefini plus haut. */ :root[data-theme="jour"] .gear-btn { border-color: rgba(244, 88, 30, .55); } :root[data-theme="jour"] .topbar-title { text-transform: uppercase; letter-spacing: .03em; font-size: clamp(26px, 7.4vw, 32px); } :root[data-theme="jour"] .role-chip { background: var(--orange); color: #fff; border-radius: 999px; } :root[data-theme="jour"] .role-chip.particulier { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .35); } /* La barre mince de l'écran des paires reprend le même bandeau. */ :root[data-theme="jour"] .topbar.slim .slim-title { color: #ffffff; } :root[data-theme="jour"] .topbar.slim .chip-btn { color: #e6e1d6; border-color: rgba(255, 255, 255, .34); } /* Cartes, panneaux et boutons retrouvent l'arrondi et l'ombre portée. */ :root[data-theme="jour"] .card, :root[data-theme="jour"] .sheet, :root[data-theme="jour"] .notice, :root[data-theme="jour"] .order-card { border-radius: var(--radius); box-shadow: var(--shadow); border-color: var(--line); } :root[data-theme="jour"] .btn { border-radius: 999px; } :root[data-theme="jour"] .btn.ghost { border: 1px solid var(--line-strong); color: var(--ink); background: var(--card); } :root[data-theme="jour"] .tabbar { background: rgba(243, 240, 232, .94); border-top: 1px solid var(--line); } :root[data-theme="jour"] .sticky-cta { background: linear-gradient(180deg, rgba(243, 240, 232, 0) 0%, var(--paper) 34%); } /* ------------------------------------------------------------------------ LA CARTE. C'est le seul endroit où le mode jour demande de vraies décisions, pas une simple bascule de couleur. ------------------------------------------------------------------------ */ /* 1. La case posée sur la photo ne peut PLUS être translucide. Elle est sombre à dessein la nuit : « une case posée sur une photo doit tenir sur TOUTES les photos ». Or les vues Nike sont sur fond BLANC : une case claire translucide y rendrait le nom de la paire illisible. Elle devient donc OPAQUE, et la photo s'arrête au-dessus d'elle. */ :root[data-theme="jour"] .dpsk-sheet { background: rgba(255, 255, 255, .70); -webkit-backdrop-filter: blur(20px) saturate(1.15); backdrop-filter: blur(20px) saturate(1.15); border-top: 1px solid rgba(20, 18, 15, .10); } :root[data-theme="jour"] .dpsk-sheet::before { background: linear-gradient(to top, rgba(255, 255, 255, .62), rgba(255, 255, 255, 0)); } /* La ou le navigateur ne sait pas flouter, la case redevient OPAQUE : mieux vaut cacher le bas de la chaussure que rendre son nom illisible. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :root[data-theme="jour"] .dpsk-sheet { background: #ffffff; } :root[data-theme="jour"] .dpsk-sheet::before { background: linear-gradient(to top, rgba(255, 255, 255, .96), rgba(255, 255, 255, 0)); } } /* 2. La photo perd son cadre : blanc sur papier, la chaussure se dissout. On lui rend un fond franc et un filet, pour qu'elle redevienne un objet. */ :root[data-theme="jour"] .dpsk-card { box-shadow: var(--shadow-lg); } :root[data-theme="jour"] .dpsk-card__photo { background: #ffffff; } :root[data-theme="jour"] .dpsk-card__photo::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(20, 18, 15, .07); } /* 3. Les bulles de geste : blanches sur une chaussure blanche, elles disparaissaient. Filet appuyé pour « je passe », plein orange pour « je prends ». */ :root[data-theme="jour"] .dpsk-bubble { background: rgba(255, 255, 255, .94); border: 1px solid rgba(20, 18, 15, .26); color: #1c1915; box-shadow: var(--shadow); } :root[data-theme="jour"] .dpsk-bubble--take { background: var(--orange); border: 0; color: #fff; } :root[data-theme="jour"] .dpsk-bubble--undo { border-color: rgba(20, 18, 15, .18); color: var(--muted); } /* 4. Les pastilles et tampons posés sur la photo. */ :root[data-theme="jour"] .sc-photo { background-color: #eae5da; } :root[data-theme="jour"] .sc-cart, :root[data-theme="jour"] .sc-zoom, :root[data-theme="jour"] .dpsk-compte { background: rgba(255, 255, 255, .94); color: #1c1915; box-shadow: var(--shadow); } :root[data-theme="jour"] .sc-dots i { background: rgba(20, 18, 15, .22); } :root[data-theme="jour"] .sc-dots i.on { background: var(--orange); } :root[data-theme="jour"] .dpsk-stamp, :root[data-theme="jour"] .stamp { background: rgba(255, 255, 255, .84); } :root[data-theme="jour"] .viewer-modele { background: rgba(255, 255, 255, .94); color: #3d3830; } /* La visionneuse reste NOIRE en plein jour : on y regarde une photo, et un fond clair autour d'une chaussure blanche mange ses contours. */ :root[data-theme="jour"] .viewer { background: #0d0e10; } /* ---------- La bande de l'accueil ---------- Les paires du jour defilent, en photos prises au rayon. Decorative : elle est `aria-hidden`, ne prend pas le doigt, et s'arrete si le telephone demande moins d'animation. La piste contient DEUX fois la meme suite ; elle glisse d'exactement une suite, donc la boucle ne se voit pas. Le `- 5px` compense l'espace en trop entre les deux copies. */ .bande { margin: 14px 0 0; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); } .bande-piste { display: flex; gap: 10px; width: max-content; animation: bande-defile calc(var(--bande-n, 14) * 3s) linear infinite; will-change: transform; } .bande-piste img { flex: none; width: 84px; height: 84px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--paper-2); } @keyframes bande-defile { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 5px)); } } @media (prefers-reduced-motion: reduce) { .bande-piste { animation: none; } .bande { overflow-x: auto; } } /* ---------- Messagerie : un fil, deux camps ---------- Ajoutee le 23/09. Tout passe par les jetons : le mode jour suit sans une seule ligne de plus. */ .presence { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .presence i { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); flex: none; } .presence.on { color: var(--green); } .presence.on i { background: var(--green); box-shadow: 0 0 0 3px rgba(110, 231, 160, .18); } /* Le fil. Il defile SEUL : la page ne bouge pas sous le doigt pendant qu'on ecrit, et le composeur reste sous les yeux. */ .fil { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 0; max-height: 54vh; overflow-y: auto; padding: 2px; scroll-behavior: smooth; } .bulle { max-width: 82%; display: flex; flex-direction: column; gap: 3px; } .bulle.moi { align-self: flex-end; align-items: flex-end; } .bulle.eux { align-self: flex-start; align-items: flex-start; } .bulle-txt { padding: 10px 13px; border-radius: var(--radius); font-size: 15px; line-height: 1.45; border: 1px solid var(--line); background: var(--card); color: var(--text); word-break: break-word; } /* Le client parle en accent, le service repond sur la surface neutre : on sait qui parle sans lire une etiquette. */ .bulle.moi .bulle-txt { background: var(--lime); border-color: var(--lime); color: var(--lime-ink); } .bulle-h { font-size: 10.5px; color: var(--muted); letter-spacing: .06em; padding: 0 4px; } .composer { display: flex; gap: 8px; align-items: flex-end; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); } .composer textarea { flex: 1; resize: none; min-height: 46px; } .composer .btn { flex: none; width: auto; padding: 0 18px; min-height: 46px; } /* Cote Shopper : une ligne par client. */ .fil-ligne { display: block; width: 100%; text-align: left; position: relative; } .fil-ligne.non-lu { border-color: var(--lime); } .fil-ligne .pastille { position: absolute; top: 12px; right: 12px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--lime); color: var(--lime-ink); font-size: 11px; font-weight: 800; display: grid; place-items: center; } /* QUATRE onglets au lieu de trois : les libelles doivent retrecir, sinon ils se coupent a la largeur d'un telephone. */ .tabbar .tab { font-size: 10.5px; letter-spacing: .04em; } /* L'onglet Contact : une bulle de dialogue. Sans cette ligne, le masque n'a pas d'image et le carre de couleur s'affiche en entier -- c'est ce qu'on a vu sur la premiere capture. */ .tab[data-screen="contact"] .ico { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.4 12.4a7.6 7.6 0 0 1-10.9 6.9L3.6 20.4l1.1-5.9a7.6 7.6 0 1 1 15.7-2.1z'/%3E%3C/svg%3E"); } /* ---------- Le logo DEEPSTOCK SNEAKERS ---------- `logo-deepstock.png` ne contient AUCUNE couleur : c'est un pochoir, la forme vit dans son canal alpha. La feuille le peint avec la couleur d'accent, donc il suit le theme tout seul -- vert citron la nuit, orange le jour -- sans qu'on ait a fabriquer deux images. */ .welcome-logo { display: block; text-align: center; margin-bottom: 30px; } .logo-dpsk { width: min(280px, 72vw); aspect-ratio: 720 / 442; margin: 0 auto; background: var(--lime); -webkit-mask: url("logo-deepstock.png") center/contain no-repeat; mask: url("logo-deepstock.png") center/contain no-repeat; } .logo-sous { margin: 14px 0 0; color: var(--muted); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; } /* Le nom reste lisible par un lecteur d'ecran : un logo n'est pas un titre. */ .lecteur-seul { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Le logo en petit : dans la barre du haut, et sur les pages d'entree. `aspect-ratio` tient la hauteur : on ne regle qu'une largeur. */ /* Cale a GAUCHE dans la barre : la regle de base centre le logo (margin auto), ce qui le posait au milieu du bandeau au lieu du coin. */ .logo-dpsk--barre { width: 74px; margin: 0; } .logo-dpsk--moyen { width: 118px; } /* Ces trois pages gardent le logo A COTE du titre, pas au-dessus : elles ont deja leur propre titre (« Ton compte », « Content de te revoir »). */ .welcome-logo.entete { display: flex; align-items: center; gap: 16px; text-align: left; } .welcome-logo.entete .logo-dpsk { margin: 0; } /* La bande de la page d'entree : meme dessin, un peu plus serree, et sans les filets qui la separeraient des cartes -- ici elle vit dans le flux du texte. */ .welcome .bande { margin: 4px 0 22px; } .welcome .section-title { margin-top: 18px; } /* ---- Le corps defilant du tiroir (23/09) ---- Le tiroir a une hauteur fixe (452 px) et l'histoire du modele fait jusqu'a 420 caracteres : le texte sortait par le bas, sans aucun moyen de le lire. Seul le CORPS defile -- la poignee reste en place, et le tiroir garde `touch-action: none`, sinon le navigateur reprend le geste de swipe (bug du 21/09). `pan-y` ici, et la seulement. */ .dpsk-drawer__corps { flex: 1 1 auto; min-height: 0; /* sans lui, un enfant flex refuse de retrecir */ overflow-y: auto; overscroll-behavior: contain; /* arrive en bout, on ne tire pas la page */ touch-action: pan-y; scrollbar-width: thin; scrollbar-color: var(--dpsk-rule-strong) transparent; } .dpsk-drawer__corps::-webkit-scrollbar { width: 3px; } .dpsk-drawer__corps::-webkit-scrollbar-thumb { background: var(--dpsk-rule-strong); border-radius: 3px; } /* L'ombre qui dit « ca continue ». Les deux premiers plans sont en `local` : ils defilent AVEC le contenu et masquent l'ombre quand on touche le bord. Rien a calculer en JS, et aucune ombre quand le texte tient entier. */ .dpsk-drawer__corps { background: linear-gradient(var(--dpsk-surface-2) 30%, rgba(0, 0, 0, 0)) top / 100% 26px no-repeat local, linear-gradient(rgba(0, 0, 0, 0), var(--dpsk-surface-2) 70%) bottom / 100% 26px no-repeat local, radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .28), rgba(0, 0, 0, 0)) top / 100% 13px no-repeat scroll, radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .28), rgba(0, 0, 0, 0)) bottom / 100% 13px no-repeat scroll; } /* Le dernier paragraphe ne doit pas coller au bord bas du tiroir. */ .dpsk-drawer__corps > :last-child { margin-bottom: 2px; } /* ---------- Pilote : « Aujourd'hui », onglets, archives (p66) ---------- Mêmes jetons que le reste : la nuit garde ses angles francs et ses filets, le jour ses arrondis. Une info par carte fermée ; le chiffre est plus gros que son étiquette. Cibles tactiles de 56 px minimum. */ .tab[data-screen="pilote-today"] .ico { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='M12 7.4V12l3 2'/%3E%3C/svg%3E"); } .tab[data-screen="shopper-home"] .ico { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1.5 12h-11z'/%3E%3Cpath d='M9 8a3 3 0 0 1 6 0'/%3E%3C/svg%3E"); } .tab[data-screen="pilote-orders"] .ico { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3.6' width='16' height='16.8' rx='1.4'/%3E%3Cpath d='M8 8.6h8M8 12.4h8M8 16.2h5'/%3E%3C/svg%3E"); } .tab[data-screen="pilote-archives"] .ico { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='5' rx='1'/%3E%3Cpath d='M5 9v11h14V9M10 13h4'/%3E%3C/svg%3E"); } .pilote-tabs .tab { min-height: 56px; } .screen.pilote-avec-cta { padding-bottom: calc(var(--tabbar) + var(--safe-b) + 96px); } .sticky-cta.sur-onglets { bottom: calc(var(--tabbar) + var(--safe-b)); padding-bottom: 12px; transition: transform .3s cubic-bezier(.32,.72,0,1); } body.nav-cachee .sticky-cta.sur-onglets { transform: translateY(calc(var(--tabbar) + var(--safe-b))); } .pilote-today { padding-top: 12px; } .pt-hero { display: flex; align-items: center; gap: 18px; padding: 18px 16px; margin-bottom: 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } .pt-hero-txt { min-width: 0; } .pt-hero-txt small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } .pt-hero-txt h1 { margin: 6px 0 10px; font-family: var(--font-display); font-weight: 800; font-size: 24px; line-height: 1.05; color: var(--ink); } .pt-puce { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 5px 9px; border: 1px solid currentColor; border-radius: var(--radius-sm); } .pt-puce i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .pt-puce.green { color: var(--green); } .pt-puce.amber { color: var(--amber); } .pt-puce.muted { color: var(--muted); } .pt-anneau { position: relative; width: 96px; height: 96px; flex: none; } .pt-anneau svg { width: 100%; height: 100%; transform: rotate(-90deg); } .pt-anneau circle { fill: none; stroke-width: 7; } .pt-anneau .fond { stroke: var(--nuit-3); } .pt-anneau .arc { stroke: var(--lime); stroke-linecap: butt; transition: stroke-dashoffset .8s cubic-bezier(.2,.8,.3,1); } .pt-anneau.red .arc { stroke: var(--red); } .pt-anneau.green .arc { stroke: var(--green); } .pt-anneau.muted .arc { stroke: var(--muted); } .pt-anneau-v { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 12px; } .pt-anneau-v b { font-family: var(--font-display); font-weight: 800; font-size: 20px; line-height: 1; color: var(--ink); white-space: nowrap; } .pt-anneau-v small { margin-top: 4px; font-size: 11px; color: var(--muted); line-height: 1.1; } .pt-anneau.red .pt-anneau-v b { color: var(--red); } .pt-carte { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 10px; transition: border-color .25s; } .pt-carte.ouverte { border-color: var(--line-strong); } .pt-carte.afaire.actif { border-color: var(--lime); } .pt-tete { width: 100%; display: flex; align-items: center; gap: 14px; padding: 16px; min-height: 76px; text-align: left; } .pt-ico { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: var(--radius-sm); } .pt-ico svg { width: 22px; height: 22px; } .pt-ico.lime { background: var(--lime-pale); color: var(--lime); } .pt-ico.green { background: var(--green-pale); color: var(--green); } .pt-ico.muted { background: var(--nuit-3); color: var(--muted); } .pt-ico.plein { background: var(--lime); color: var(--lime-ink); } .pt-titre { flex: 1; min-width: 0; } .pt-titre small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; } .pt-titre strong { font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 1.05; color: var(--ink); } .pt-titre strong.petit { font-size: 16px; font-family: var(--font-body); font-weight: 700; } .pt-titre em { font-style: normal; font-size: 13px; color: var(--muted); margin-left: 6px; } .pt-barre { display: flex; height: 4px; margin-top: 10px; background: var(--nuit-3); overflow: hidden; border-radius: 2px; } .pt-barre i { display: block; height: 100%; } .pt-barre .lime { background: var(--lime); } .pt-barre .amber { background: var(--amber); } .pt-barre .green { background: var(--green); } .pt-chev { width: 28px; height: 28px; flex: none; display: grid; place-items: center; color: var(--muted); transition: transform .3s cubic-bezier(.2,.8,.3,1); } .pt-chev svg { width: 14px; height: 14px; } .pt-carte.ouverte .pt-chev { transform: rotate(180deg); } .pt-bas { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s cubic-bezier(.2,.8,.3,1); } .pt-carte.ouverte .pt-bas { grid-template-rows: 1fr; } .pt-bas > div { overflow: hidden; } .pt-corps { padding: 0 16px 16px; } .pt-corps .btn { width: 100%; margin-top: 12px; } .pt-ligne { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 14px; } .pt-ligne span { color: var(--muted); } .pt-ligne b { color: var(--ink); text-align: right; } .pt-ligne b.lime { color: var(--lime); } .pt-ligne b.green { color: var(--green); } .pt-ligne b.amber { color: var(--amber); } .pt-ligne b.muted { color: var(--muted); font-weight: 500; } .pt-note { margin: 10px 0 0; font-size: 13px; color: var(--muted); } .pt-tache { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px; min-height: 60px; margin-top: 8px; text-align: left; background: var(--nuit-3); border-radius: var(--radius-sm); font-size: 14px; color: var(--ink); } .pt-tache:active { background: var(--nuit-4); } .pt-n { min-width: 38px; height: 38px; padding: 0 6px; display: grid; place-items: center; font-weight: 800; font-size: 15px; border-radius: var(--radius-sm); } .pt-n.lime { background: var(--lime-pale); color: var(--lime); } .pt-n.amber { background: var(--amber-pale); color: var(--amber); } .pt-n.red { background: var(--red-pale); color: var(--red); } .pt-tache-t { flex: 1; min-width: 0; font-weight: 700; } .pt-tache-t small { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--muted); } .pt-fleche { width: 18px; height: 18px; flex: none; color: var(--muted); } .pt-fleche svg { width: 100%; height: 100%; } @media (prefers-reduced-motion: reduce) { .pt-bas, .pt-chev, .pt-anneau .arc, .sticky-cta.sur-onglets { transition: none; } } .notice.un-virement { margin: 12px 0 0; } /* ---------- Mot de passe oublié (p67) ---------- */ .code-input { letter-spacing: .4em; font-size: 22px; font-weight: 800; text-align: center; } .reset-card h2 { margin: 0; } .reset-card p { margin: 8px 0; } .reset-code { margin: 12px 0 4px; padding: 14px; text-align: center; font-family: var(--font-display); font-weight: 800; font-size: 40px; letter-spacing: .3em; color: var(--lime); background: var(--nuit-3); border-radius: var(--radius-sm); } .reset-card .btn-row a.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; } /* ---------- Textes légaux, CGV, rétractation (p68) ---------- */ .liens-legaux { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 8px; margin-top: 18px; } .liens-legaux .btn.link { width: auto; min-height: 44px; padding: 0 4px; font-size: 13px; } .liens-legaux span { color: var(--muted); } .card .liens-legaux { justify-content: flex-start; margin-top: 4px; } .legal-feuille { max-height: 82vh; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; margin: -4px -4px 0; padding: 0 4px; } .legal-tete { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 0 8px; background: var(--nuit-2); z-index: 1; } .legal-tete h3 { margin: 0; } .legal-tete .btn.link { width: auto; min-height: 44px; } .legal { font-size: 14px; line-height: 1.55; color: var(--ink-3); } .legal h2 { font-size: 15px; margin: 18px 0 6px; color: var(--ink); text-transform: none; letter-spacing: 0; } .legal p, .legal ul, .legal ol { margin: 0 0 10px; } .legal ul, .legal ol { padding-left: 20px; } .legal a { color: var(--lime); } .legal mark.a-completer { background: var(--amber-pale); color: var(--amber); padding: 0 3px; } .legal .legal-version { color: var(--muted); font-size: 12px; } .legal .legal-form { margin: 10px 0 14px; padding: 12px; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); font-size: 13px; } .check-cgv { display: flex; gap: 12px; align-items: flex-start; margin: 18px 0 4px; font-size: 14px; line-height: 1.45; color: var(--ink-3); cursor: pointer; } .check-cgv input { width: 22px; height: 22px; flex: none; margin: 1px 0 0; accent-color: var(--lime); } .check-cgv a { color: var(--lime); } .retract-btn { margin-top: 10px; width: auto; min-height: 44px; font-size: 14px; text-decoration: underline; } .retract-until { margin-top: 0; }