body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } /* --- Top bar --- */ .topbar { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px; border-bottom: 1px solid var(--fg-faint); } .brand { display: flex; align-items: center; gap: 10px; } .brand-name { font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 14px; letter-spacing: 0.32em; margin-left: 0.32em; } .topbar .meta { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 10px; letter-spacing: 0.28em; color: var(--fg-dim); text-transform: uppercase; } /* --- Main --- */ main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; width: 100%; max-width: 560px; margin: 0 auto; } .eyebrow { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; display: flex; align-items: center; gap: 10px; } .eyebrow::before, .eyebrow::after { content: ""; width: 24px; height: 1px; background: var(--gold); opacity: 0.7; } h1.page-title { font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: clamp(22px, 5.2vw, 34px); letter-spacing: 0.1em; text-transform: uppercase; text-align: center; line-height: 1.2; margin-bottom: 24px; max-width: 100%; overflow-wrap: break-word; } .lede { font-family: 'Inter', sans-serif; font-weight: 300; font-size: 14px; line-height: 1.6; color: var(--fg-dim); text-align: center; max-width: 420px; margin: 20px auto 36px; text-wrap: pretty; } /* --- Card (status panel) --- */ .card { width: 100%; background: var(--bg-2); border: 1px solid var(--fg-faint); padding: 32px 28px 28px; position: relative; } .card::before, .card::after, .card .corner-bl, .card .corner-br { content: ""; position: absolute; width: 8px; height: 8px; border: 1.5px solid var(--gold); background: var(--bg); } .card::before { top: -1px; left: -1px; border-right: none; border-bottom: none; } .card::after { top: -1px; right: -1px; border-left: none; border-bottom: none; } .card .corner-bl { bottom: -1px; left: -1px; border-right: none; border-top: none; } .card .corner-br { bottom: -1px; right: -1px; border-left: none; border-top: none; } .status-row { display: flex; align-items: center; gap: 14px; padding-bottom: 22px; border-bottom: 1px solid var(--fg-faint); margin-bottom: 22px; } .status-icon { width: 44px; height: 44px; flex: 0 0 44px; border: 1.5px solid var(--gold); display: flex; align-items: center; justify-content: center; color: var(--gold); } .status-icon.error { border-color: var(--error); color: var(--error); } .status-icon.idle { border-color: var(--fg-faint); color: var(--fg-dim); } .status-icon svg { width: 22px; height: 22px; } .status-text { flex: 1; min-width: 0; } .status-label { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 13px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; } .status-label.error { color: var(--error); } .status-label.idle { color: var(--fg-dim); } .status-msg { font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1.5; color: var(--fg); text-wrap: pretty; } .status-msg .accent { color: var(--gold); font-weight: 500; } /* --- Detail grid --- */ .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 18px; } .cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .cell.full { grid-column: 1 / -1; } .cell-label { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 10px; letter-spacing: 0.28em; color: var(--fg-dim); text-transform: uppercase; } .cell-value { font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace; font-weight: 500; font-size: 14px; color: var(--fg); word-break: break-all; } .cell-value.serial { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 16px; letter-spacing: 0.1em; } /* --- Manual lookup form --- */ .form-card { width: 100%; margin-top: 24px; border: 1px dashed var(--fg-faint); padding: 22px; } .form-card .form-title { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.28em; color: var(--fg-dim); text-transform: uppercase; margin-bottom: 12px; } .form-row { display: flex; gap: 8px; flex-wrap: wrap; } .form-row input { flex: 1; min-width: 200px; background: var(--bg); border: 1px solid var(--fg-faint); color: var(--fg); font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 14px; letter-spacing: 0.08em; padding: 12px 14px; outline: none; text-transform: uppercase; } .form-row input::placeholder { color: #555; letter-spacing: 0.08em; } .form-row input:focus { border-color: var(--gold); } .form-row button { background: var(--fg); color: var(--bg); border: none; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; padding: 12px 22px; cursor: pointer; } .form-row button:hover { background: var(--gold); } .form-hint { margin-top: 10px; font-size: 11px; color: #5a5a5a; font-family: 'Inter', sans-serif; } /* --- Footer / back --- */ .back-row { width: 100%; margin-top: 36px; display: flex; justify-content: center; } .back-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border: 1px solid var(--fg-faint); color: var(--fg); text-decoration: none; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; transition: border-color .15s, color .15s; } .back-btn:hover { border-color: var(--gold); color: var(--gold); } .back-btn .arrow { font-size: 14px; } footer { border-top: 1px solid var(--fg-faint); padding: 18px 24px; display: flex; justify-content: space-between; align-items: center; font-family: 'Montserrat', sans-serif; font-size: 10px; letter-spacing: 0.28em; color: var(--fg-dim); text-transform: uppercase; } footer .tagline .sep { color: var(--gold); margin: 0 8px; } /* State-driven hide/show. [data-state-only] is a comma-separated allow-list of body[data-state] values. Hidden by default; revealed when current state matches. Each element keeps its native display via `display: revert`. */ [data-state-only] { display: none !important; } body[data-state="ok"] [data-state-only="ok"], body[data-state="ok"] [data-state-only="ok,error"], body[data-state="ok"] [data-state-only="ok,idle"], body[data-state="error"] [data-state-only="error"], body[data-state="error"] [data-state-only="error,idle"], body[data-state="error"] [data-state-only="ok,error"], body[data-state="idle"] [data-state-only="idle"], body[data-state="idle"] [data-state-only="error,idle"], body[data-state="idle"] [data-state-only="ok,idle"] { display: revert !important; } /* Icons need flex for centered SVG */ body[data-state="ok"] .status-icon[data-state-only="ok"], body[data-state="error"] .status-icon[data-state-only="error"], body[data-state="idle"] .status-icon[data-state-only="idle"] { display: flex !important; } @media (max-width: 480px) { main { padding: 32px 18px; } .topbar { padding: 18px 18px; } footer { flex-direction: column; gap: 6px; padding: 16px; text-align: center; } .card { padding: 24px 20px 22px; } .grid { grid-template-columns: 1fr; gap: 16px; } .status-row { flex-wrap: wrap; } .form-row { flex-direction: column; } .form-row button { width: 100%; } }
UrbanStep
URBANSTEP
Vérification
Contrôle d’authenticité

Vérifiez votre
certificat

Chaque article UrbanStep est livré avec un numéro de série unique imprimé sur son certificat d’authenticité. Saisissez-le ou scannez-le pour confirmer l’authentification.

✓ Authentifié
Le n° US-XXXXXX-XXXX a été vérifié dans notre base de données. Article authentifié par UrbanStep.
N° de série invalide
Le format saisi ne correspond pas à un numéro de série UrbanStep valide. Format attendu : US-XXXXXX-AAAA.
En attente
Aucun numéro de série fourni. Saisissez le numéro de votre certificat ci-dessous pour vérifier son authenticité.
N° de série
—
Statut
AUTHENTIFIÉ
Vérifié le
—
Émis par
UrbanStep · Paris
URL de référence
—
Recherche manuelle
Format : US- suivi de 6 chiffres, puis -AAAA (ex. : US-001234-2026).
← Retour sur urbanstep.fr