/* ===== PrepayeCSE — design "pattern break" : éditorial brutaliste, dither, dark/light ===== Marque blanche : les pages éphémères peuvent surcharger --wl-bg / --wl-ink / --wl-accent (posées en inline sur depuis les options de session). */ :root { --bg-l: #f1efe9; --ink-l: #141414; --accent-l: #6d4aff; --bg-d: #0e0e0f; --ink-d: #f3f1ea; --accent-d: #8b6bff; --bg: var(--wl-bg, var(--bg-l)); --ink: var(--wl-ink, var(--ink-l)); --accent: var(--wl-accent, var(--accent-l)); --yellow: #f5d90a; --green: #29b56b; --red: #e5484d; --muted: color-mix(in srgb, var(--ink) 55%, transparent); --line: color-mix(in srgb, var(--ink) 88%, transparent); --panel: color-mix(in srgb, var(--ink) 4%, var(--bg)); --dot: color-mix(in srgb, var(--ink) 9%, transparent); --r: 6px; } @media (prefers-color-scheme: dark) { :root { --bg: var(--wl-bg, var(--bg-d)); --ink: var(--wl-ink, var(--ink-d)); --accent: var(--wl-accent, var(--accent-d)); } } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: "Space Grotesk", system-ui, sans-serif; font-size: 16px; line-height: 1.6; color: var(--ink); background-color: var(--bg); background-image: radial-gradient(var(--dot) 1px, transparent 1.4px); background-size: 7px 7px; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3 { line-height: 1.05; letter-spacing: -0.02em; } .muted { color: var(--muted); } .small { font-size: .82rem; } .mono, .code-val { font-family: "Space Mono", ui-monospace, monospace; } .wrap { max-width: 1080px; margin: 0 auto; padding: 0 1.25rem; } .narrow { max-width: 720px; } main.wrap { padding-top: 1.75rem; padding-bottom: 4rem; } .eyebrow { text-transform: uppercase; letter-spacing: .16em; font-size: .72rem; font-weight: 700; color: var(--muted); margin: 0 0 .35rem; } .h1, .hdr-hello { font-size: clamp(1.8rem, 5vw, 2.8rem); font-weight: 700; margin: 0; } .lead { font-size: 1.05rem; color: var(--muted); max-width: 60ch; } .empty { padding: 2rem 0; color: var(--muted); } .logo { font-weight: 700; font-size: 1.15rem; letter-spacing: -.02em; } .logo span { color: var(--accent); } /* ---- Buttons / pills / links ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; font-family: inherit; font-weight: 700; font-size: .9rem; border: 2px solid var(--line); border-radius: 999px; padding: .55rem 1.1rem; background: transparent; color: var(--ink); cursor: pointer; transition: transform .08s, background .12s, color .12s; } .btn:hover { transform: translateY(-1px); } .btn-accent { background: var(--accent); border-color: var(--accent); color: #fff; } .btn-ink { background: var(--ink); border-color: var(--ink); color: var(--bg); } .btn-lg { padding: .8rem 1.5rem; font-size: 1rem; } .link { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .pill { display: inline-flex; align-items: center; border: 2px solid var(--line); border-radius: 999px; padding: .3rem .8rem; font-weight: 700; font-size: .82rem; } .pill-budget { background: var(--yellow); border-color: var(--ink); color: #141414; } .tag { border: 1.5px solid var(--line); border-radius: 999px; padding: .1rem .55rem; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; background: var(--bg); } /* ---- Shop header ---- */ .shop-hdr { border-bottom: 2px solid var(--line); background: var(--panel); } .shop-hdr-in { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; padding-top: .55rem; padding-bottom: .55rem; } main .hdr-hello { margin: .15rem 0 .2rem; } .shop-hdr-right { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; } /* ---- Filtres (badges catégories + dropdown marques, style "tag" de carte) ---- */ .filters { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; margin: 1.5rem 0 0; } .cat-badges { display: flex; flex-wrap: wrap; gap: .5rem; } /* Badge = même look que le .tag des cartes, mais cliquable (toggle). */ .cat-badge, .brand-drop summary { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; user-select: none; font: inherit; font-weight: 700; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; border: 1.5px solid var(--line); border-radius: 999px; padding: .4rem .85rem; background: var(--bg); color: var(--ink); white-space: nowrap; transition: background .12s, color .12s, border-color .12s, transform .08s; } .cat-badge:hover, .brand-drop summary:hover { transform: translateY(-1px); } .cat-badge[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; } /* Dropdown marques : summary stylé en badge + chevron qui pivote à l'ouverture. */ .brand-drop { position: relative; } .brand-drop summary { list-style: none; } .brand-drop summary::-webkit-details-marker { display: none; } .brand-drop summary::after { content: ""; width: .4rem; height: .4rem; margin-left: .1rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-1px, -2px); transition: transform .15s; } .brand-drop[open] summary { background: var(--accent); border-color: var(--accent); color: #fff; } .brand-drop[open] summary::after { transform: rotate(-135deg) translate(-1px, -1px); } .brand-count { opacity: .8; letter-spacing: 0; text-transform: none; } .brand-list { position: absolute; z-index: 20; top: calc(100% + .4rem); left: 0; min-width: 220px; max-height: 320px; overflow-y: auto; display: grid; gap: .1rem; padding: .5rem; border: 2px solid var(--line); border-radius: var(--r); background: var(--bg); box-shadow: 5px 5px 0 var(--line); } .brand-opt { display: flex; align-items: center; gap: .5rem; font-weight: 500; font-size: .88rem; padding: .3rem .4rem; border-radius: 4px; cursor: pointer; } .brand-opt:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); } .brand-opt input { width: 1.05rem; height: 1.05rem; accent-color: var(--accent); } .card[hidden] { display: none; } /* ---- Catalogue grid ---- */ .grid { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } .card { border: 2px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--panel); transition: transform .1s, box-shadow .1s; } .card:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--line); } .card-visual { position: relative; height: 150px; display: grid; place-items: center; padding: 1rem; border-bottom: 2px solid var(--line); background: color-mix(in srgb, var(--accent) 12%, var(--bg)); } .card-visual img { max-height: 118px; width: auto; } .card-visual .tag { position: absolute; top: 8px; right: 8px; } .card-body { padding: .9rem 1rem 1.1rem; } .card-body h3 { font-size: 1.05rem; margin: 0 0 .2rem; } .price { font-family: "Space Mono", monospace; font-weight: 700; font-size: 1.15rem; margin: 0 0 .8rem; } .add-form { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; } .stepper { display: inline-flex; align-items: center; gap: .35rem; } /* Boutons +/- : même look que les badges (bordés, pill) -> ronds, hauteur du bouton Ajouter. */ .step { --ctl-h: 2.4rem; width: var(--ctl-h); height: var(--ctl-h); padding: 0; border: 1.5px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--ink); font: inherit; font-weight: 700; font-size: 1.2rem; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: background .12s, transform .08s; } .step:hover:not(:disabled) { transform: translateY(-1px); background: color-mix(in srgb, var(--ink) 8%, transparent); } .step:disabled { opacity: .3; cursor: not-allowed; } .step-val { min-width: 1.4rem; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; } .add-form .add-btn { height: 2.4rem; } .add-btn:disabled { opacity: .4; cursor: not-allowed; transform: none; } /* ---- Inputs ---- */ input[type=text], input[type=number], input[type=email], input[type=password], .link-form input, .close-form input { padding: .55rem .7rem; border: 2px solid var(--line); border-radius: var(--r); font: inherit; background: var(--bg); color: var(--ink); width: 100%; } input:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; } label { display: grid; gap: .3rem; font-weight: 700; font-size: .82rem; } /* ---- Cart / tables ---- */ .h1 { margin-bottom: 1rem; } .cart, .tbl { width: 100%; border-collapse: separate; border-spacing: 0; border: 2px solid var(--line); border-radius: var(--r); overflow: hidden; margin: 1rem 0; } .cart th, .cart td, .tbl th, .tbl td { padding: .7rem .9rem; border-bottom: 1.5px solid var(--line); text-align: left; } .cart tr:last-child td, .tbl tr:last-child td { border-bottom: 0; } .cart th, .tbl th { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; background: color-mix(in srgb, var(--ink) 6%, var(--bg)); } .total { font-size: 1.2rem; margin: 1rem 0; } .total strong { font-family: "Space Mono", monospace; } .error { background: color-mix(in srgb, var(--red) 14%, var(--bg)); border: 2px solid var(--red); border-radius: var(--r); padding: .7rem .9rem; font-weight: 600; } /* ---- Codes ---- */ .codes { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; gap: 1rem; } .code-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border: 2px solid var(--line); border-radius: var(--r); padding: 1rem 1.2rem; background: var(--panel); } .code-card h3 { margin: 0 0 .3rem; font-size: 1.05rem; } .code-val { font-size: 1.25rem; font-weight: 700; margin: 0 0 .3rem; letter-spacing: .06em; } .status { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } .code-card.is-void { opacity: .5; } /* ---- Login ---- */ .login-wrap { min-height: 100dvh; display: grid; place-items: center; padding: 2rem 1.25rem; } .login-card { width: 100%; max-width: 380px; border: 2px solid var(--line); border-radius: var(--r); padding: 2rem; background: var(--panel); box-shadow: 6px 6px 0 var(--line); } .stack { display: grid; gap: 1rem; margin: 1.2rem 0; } /* ---- Admin ---- */ .admin-hdr { border-bottom: 2px solid var(--line); background: var(--panel); } .admin-hdr-in { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; } .admin { display: grid; gap: 1.5rem; padding-top: 1.75rem; padding-bottom: 4rem; } .panel { border: 2px solid var(--line); border-radius: var(--r); padding: 1.4rem 1.5rem; background: var(--panel); } .panel h2 { margin: 0 0 .8rem; font-size: 1.2rem; } .link-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .8rem; align-items: end; } .link-form button, .close-form button { align-self: end; } .close-form { display: flex; gap: .8rem; align-items: end; flex-wrap: wrap; } .close-form label { flex: 1 1 200px; } .badge { display: inline-block; padding: .15rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 700; border: 1.5px solid var(--line); } .badge-ok { background: color-mix(in srgb, var(--green) 22%, var(--bg)); border-color: var(--green); } .badge-due { background: color-mix(in srgb, var(--yellow) 30%, var(--bg)); border-color: var(--ink); color: #141414; } .badge-void { background: transparent; color: var(--muted); } .tbl .mono a { word-break: break-all; } .ftr { border-top: 2px solid var(--line); background: var(--panel); } .ftr .wrap { padding: 1.5rem 1.25rem; font-size: .85rem; color: var(--muted); } @media (max-width: 640px) { .cart thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .cart tr { display: block; border-bottom: 2px solid var(--line); } .cart td { display: flex; justify-content: space-between; gap: 1rem; text-align: right; border-bottom: 1px solid var(--dot); } .cart td::before { content: attr(data-label); font-weight: 700; text-transform: uppercase; font-size: .68rem; color: var(--muted); } .code-card { flex-direction: column; align-items: stretch; } }