/* ════════════════════════════════════════════════════════ */ /* VINTAGE TECH — Centralized CSS Stylesheet */ /* ════════════════════════════════════════════════════════ */ @font-face { font-family: "Vintage"; src: url("https://www.vintagetech.fr/includes/fonts/vintage.woff2") format("woff2"); } @font-face { font-family: "Realvintage"; src: url("https://www.vintagetech.fr/includes/fonts/realvintage.woff2") format("woff2"); } @font-face { font-family: "Tech"; src: url("https://www.vintagetech.fr/includes/fonts/tech.woff2") format("woff2"); } /* ── TOKENS ─────────────────────────────────────────── */ /* ══════════════════════════════════════════════════════ THÈMES — data-theme sur ══════════════════════════════════════════════════════ */ /* ── 1. PHOSPHORE (défaut) — ambre CRT sur nuit bleue ── */ [data-theme="phosphore"], :root{ --bg:#080c10;--bg2:#0d1117;--bg3:#111820; --amber:#ffb800;--cyan:#00e5ff;--red:#ff3d3d;--green:#39ff14; --txt:#e8eaf0;--muted:#6b7a8d;--dim:#3d4a5a; --border:#1e2a38;--border2:#2a3f55; --glow-a:0 0 20px rgba(255,184,0,.35); --glow-c:0 0 20px rgba(0,229,255,.35); --nav-h:52px; --font-display:Tech; --font-mono:'Tech',monospace; --font-body:Vintage; --scanline-opacity:.18; --nav-bg:rgba(8,12,16,.97); --nav-border:var(--amber); } /* ── 2. SYNTHWAVE — magenta néon & violet profond ── */ [data-theme="synthwave"]{ --bg:#0d0015;--bg2:#130020;--bg3:#1a0030; --amber:#ff2d9e;--cyan:#b44dff;--red:#ff3d6b;--green:#00ffcc; --txt:#f0e4ff;--muted:#7a5e99;--dim:#3d2a55; --border:#2d1050;--border2:#4a1a80; --glow-a:0 0 24px rgba(255,45,158,.45); --glow-c:0 0 24px rgba(180,77,255,.45); --nav-h:52px; --font-display:Tech; --font-mono:'Tech',monospace; --font-body:Vintage; --scanline-opacity:.12; --nav-bg:rgba(13,0,21,.97); --nav-border:var(--amber); } /* ── 3. TERMINAL VERT — phosphore P1, style PDP-11 ── */ [data-theme="terminal"]{ --bg:#000c00;--bg2:#001400;--bg3:#001e00; --amber:#00ff41;--cyan:#00cc33;--red:#ff4444;--green:#33ff66; --txt:#b8ffb8;--muted:#3d8040;--dim:#1a4020; --border:#0a3010;--border2:#145020; --glow-a:0 0 18px rgba(0,255,65,.45); --glow-c:0 0 18px rgba(0,204,51,.35); --nav-h:52px; --font-display:Tech; --font-mono:'Tech',monospace; --font-body:'Courier Prime',monospace; --scanline-opacity:.22; --nav-bg:rgba(0,12,0,.97); --nav-border:var(--amber); } /* ── 4. Vintage Tech ── */ [data-theme="commodore"]{ --bg:#0020a0;--bg2:#0026b8;--bg3:#002ed0; --amber:#9090ff;--cyan:#ffffaa;--red:#ff6666;--green:#66ff66; --txt:#7b71f5;--muted:#5555cc;--dim:#334499; --border:#1133cc;--border2:#2244ee; --glow-a:0 0 16px rgba(144,144,255,.5); --glow-c:0 0 16px rgba(255,255,170,.4); --nav-h:52px; --font-display:Tech; --font-mono:'Tech',monospace; --font-body:Tech; --scanline-opacity:.08; --nav-bg:rgba(0,32,160,.97); --nav-border:var(--amber); } /* ── 5. Vintage Tech ── */ [data-theme="paper"]{ --bg:black;--bg2:transparent;--bg3:black; --amber:white;--cyan:#dddddd;--red:#9a9a9a;--green:#1a5c1a; --txt:white;--muted:#dddddd;--dim:#9a9a9a; --border:#474747;--border2:#b8b0a0; --glow-a:none; --glow-c:none; --nav-h:52px; --font-display:'Vintage',monospace; --font-mono:'Tech',monospace; --font-body:'Vintage', monospace; --scanline-opacity:0; --nav-bg:black; --nav-border:var(--amber); } /* Appliquer les polices selon le thème */ [data-theme="terminal"] body, [data-theme="terminal"] p, [data-theme="terminal"] span, [data-theme="terminal"] div { font-family: var(--font-body); } [data-theme="commodore"] body { font-family: var(--font-body); } [data-theme="paper"] body { font-family: var(--font-body); background:var(--bg); color:var(--txt); } [data-theme="paper"] .Vintage, [data-theme="paper"] .font-Vintage, [data-theme="paper"] h1, [data-theme="paper"] h2, [data-theme="paper"] .page-title, [data-theme="paper"] .page-title-cyan, [data-theme="paper"] .sec-title, [data-theme="paper"] .nav-logo, [data-theme="paper"] .acard-title, [data-theme="paper"] .vt-price, [data-theme="paper"] .vt-price-lg, /* [data-theme="paper"] .vt-stat { font-family:'Vintage',cursive !important; } */ /* Paper : inverser les éléments noirs-sur-blanc */ [data-theme="paper"] .card { background:var(--bg2); border-color:var(--border); } [data-theme="paper"] nav.topnav { border-bottom-color:var(--bg); } [data-theme="paper"] body::before { display:none; } /* pas de scanlines */ [data-theme="paper"] .btn-primary { background:var(--amber); color:black; } [data-theme="paper"] .btn-outline { color:var(--amber); border-color:var(--amber); } [data-theme="paper"] .btn-cyan { background:var(--cyan); color:#fff; } [data-theme="paper"] .tag-amber { background:rgba(26,26,26,.08); } [data-theme="paper"] .tag-cyan { background:rgba(26,58,110,.08); color:var(--cyan); border-color:var(--cyan); } [data-theme="paper"] .form-control{ background:var(--bg); border-color:var(--border2); color:var(--txt); } [data-theme="paper"] ::-webkit-scrollbar-thumb { background:var(--amber); } /* Scanlines : intensité variable selon thème */ body::before { opacity:var(--scanline-opacity); } *,*::before,*::after{margin:0;padding:0;box-sizing:border-box;} body{font-family:Vintage;background:var(--bg);color:var(--txt);min-height:100vh;} body::before{content:'';position:fixed;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.1) 2px,rgba(0,0,0,.1) 4px);pointer-events:none;z-index:9998;opacity:.18;} ::-webkit-scrollbar{width:5px;}::-webkit-scrollbar-track{background:var(--bg);}::-webkit-scrollbar-thumb{background:var(--amber);border-radius:3px;} a{color:inherit;text-decoration:none;} img{max-width:100%;} /* ── CONTAINERS ─────────────────────────────────────── */ .container{max-width:1280px;margin:0 auto;padding:0 24px;} .container-sm{max-width:860px;margin:0 auto;padding:0 24px;} .container-xs{max-width:520px;margin:0 auto;padding:0 20px;} @media(max-width:600px){ .container,.container-sm,.container-xs{padding:0 16px;} } /* ── GRILLES RESPONSIVES ────────────────────────────── */ .g2{display:grid;grid-template-columns:1fr 1fr;gap:16px;} .g3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;} .g4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;} .g5{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;} @media(max-width:768px){ .g2,.g3,.g4{grid-template-columns:1fr;} .g5{grid-template-columns:repeat(2,1fr);gap:10px;} } @media(max-width:480px){ .g5{grid-template-columns:1fr;} } /* Grille auto cartes */ .grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;} @media(max-width:480px){.grid-cards{grid-template-columns:repeat(2,1fr);gap:10px;}} /* ── GRILLES SPÉCIFIQUES (responsive) ──────────────── */ .auction-grid{display:grid;grid-template-columns:1fr 370px;gap:24px;align-items:start;} @media(max-width:900px){.auction-grid{grid-template-columns:1fr;}} .dash-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:28px;} .dash-cols{display:grid;grid-template-columns:1fr 1fr;gap:24px;} @media(max-width:900px){ .dash-stats{grid-template-columns:repeat(3,1fr);} .dash-cols{grid-template-columns:1fr;} } @media(max-width:480px){ .dash-stats{grid-template-columns:repeat(2,1fr);gap:8px;} } .msg-layout{display:grid;grid-template-columns:280px 1fr;height:calc(100vh - 108px);} @media(max-width:768px){ .msg-layout{grid-template-columns:1fr;height:auto;} .msg-sidebar{display:none;} .msg-sidebar.show{display:block;} } .bo{display:grid;grid-template-columns:220px 1fr;min-height:calc(100vh - var(--nav-h));} .bo-nav{overflow-y:auto;} @media(max-width:900px){ .bo{grid-template-columns:1fr;} .bo-nav{display:none;} .bo-nav.show{display:block;} } .bo-stat-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:20px;} @media(max-width:1024px){.bo-stat-grid{grid-template-columns:repeat(3,1fr);}} @media(max-width:480px){.bo-stat-grid{grid-template-columns:repeat(2,1fr);gap:8px;}} .price-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border);} @media(max-width:480px){.price-stats{grid-template-columns:1fr;gap:6px;}} .settings-group{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;} @media(max-width:700px){.settings-group{grid-template-columns:1fr;}} .menus-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;} @media(max-width:900px){.menus-grid{grid-template-columns:1fr;}} /* ── FLEXBOX UTILITAIRES ────────────────────────────── */ .flex{display:flex;}.flex-col{flex-direction:column;}.flex-wrap{flex-wrap:wrap;} .items-center{align-items:center;}.items-start{align-items:flex-start;} .justify-between{justify-content:space-between;}.justify-center{justify-content:center;}.justify-end{justify-content:flex-end;} .gap-4{gap:4px;}.gap-6{gap:6px;}.gap-8{gap:8px;}.gap-10{gap:10px;} .gap-12{gap:12px;}.gap-14{gap:14px;}.gap-16{gap:16px;}.gap-20{gap:20px;}.gap-24{gap:24px;} .flex-1{flex:1;}.flex-shrink-0{flex-shrink:0;}.min-w-0{min-width:0;} /* ── SPACING & DISPLAY ──────────────────────────────── */ .d-block{display:block;}.d-none{display:none;}.d-inline{display:inline;}.d-contents{display:contents;} .relative{position:relative;} .sticky{position:sticky;top:calc(var(--nav-h) + 12px);} .overflow-hidden{overflow:hidden;} .text-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .text-center{text-align:center;}.text-right{text-align:right;} .whitespace-nowrap{white-space:nowrap;} .mt-2{margin-top:8px;}.mt-3{margin-top:12px;}.mt-4{margin-top:16px;}.mt-6{margin-top:24px;} .mr-2{margin-right:8px;}.ml-2{margin-left:8px;}.ml-3{margin-left:12px;} .mb-2{margin-bottom:12px;}.mb-3{margin-bottom:20px;}.mb-4{margin-bottom:32px;} .pb-page{padding-bottom:60px;}.pt-4{padding-top:16px;}.py-4{padding:32px 0;}.p-0{margin-bottom:0;} .w-100{width:100%;} /* ── TYPOGRAPHIE ─────────────────────────────────────── */ .mono{font-family:'Tech',monospace;} .vt{font-family:Tech;} .text-xs{font-size:.62rem;}.text-sm{font-size:.72rem;} .text-base{font-size:.88rem;}.text-lg{font-size:1rem;} .text-amber{color:var(--amber);}.text-cyan{color:var(--cyan);} .text-green{color:var(--green);}.text-red{color:var(--red);} .text-muted{color:var(--muted);}.text-dim{color:var(--dim);} .fw-700{font-weight:700;} .label-sm{font-family:'Tech',monospace;font-size:.62rem;color:var(--dim);letter-spacing:unset;text-transform:uppercase;} .label-xs{font-family:'Tech',monospace;font-size:.58rem;color:var(--dim);margin-top:3px;} .label-tiny{font-family:'Tech',monospace;font-size:.65rem;color:var(--dim);} .vt-price{font-family:Tech;font-size:1.2rem;color:var(--amber);} .vt-price-lg{font-family:Tech;font-size:2.2rem;color:var(--amber);text-shadow:var(--glow-a);} .vt-stat{font-family:Tech;font-size:1.9rem;} .page-title{font-family:Tech;font-size:2.2rem;color:var(--amber);text-shadow:var(--glow-a);} .page-title-cyan{font-family:Tech;font-size:2.2rem;color:var(--cyan);text-shadow:var(--glow-c);} .page-subtitle{color:var(--muted);font-family:'Tech',monospace;font-size:.73rem;margin-top:4px;} .breadcrumb{font-family:'Tech',monospace;font-size:.7rem;color:var(--dim);letter-spacing:unset;margin-bottom:6px;} @media(max-width:480px){ .page-title,.page-title-cyan{font-size:1.75rem;} .vt-price-lg{font-size:1.8rem;} .vt-stat{font-size:1.6rem;} } /* ── BOUTONS ─────────────────────────────────────────── */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:8px 16px;border-radius:3px;font-family:Vintage;font-weight:700;font-size:.83rem;letter-spacing:unset;text-transform:uppercase;cursor:pointer;border:none;transition:all .18s;text-decoration:none;white-space:nowrap;} .btn-primary{background:var(--amber);color:#000;} .btn-primary:hover{background:#1c1b29; color:white; transform:translateY(-1px);box-shadow:var(--glow-a);} .btn-outline{background:transparent;color:var(--amber);border:1px solid var(--amber);} .btn-outline:hover{background:rgb(79 81 140 / 10%);} .btn-cyan{background:var(--cyan);color:#000;} .btn-cyan:hover{background:#66efff;box-shadow:var(--glow-c);} .btn-ghost{background:transparent;color:var(--muted);border:1px solid var(--border2);} .btn-ghost:hover{color:var(--txt);border-color:var(--muted);} .btn-red{background:var(--red);color:#fff;} .btn-green{background:var(--green);color:#000;} .btn-sm{padding:5px 11px;font-size:.72rem;} .btn-lg{padding:11px 26px;font-size:.95rem;} @media(max-width:480px){.btn-lg{padding:10px 20px;font-size:.88rem;}} /* ── CARTES ──────────────────────────────────────────── */ .card{background:var(--bg2);border:1px solid var(--border);border-radius:5px;overflow:hidden;} .card-head{padding:13px 18px;border-bottom:1px solid var(--border);font-family:'Tech',monospace;font-size:.72rem;color:var(--amber);letter-spacing:unset;display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;} .card-body{padding:18px;} @media(max-width:480px){ .card-body{padding:14px;} .card-head{padding:10px 14px;} } /* ── FORMULAIRES ─────────────────────────────────────── */ .form-label{display:block;font-family:'Tech',monospace;font-size:.68rem;letter-spacing:unset;text-transform:uppercase;color:var(--muted);margin-bottom:6px;} .form-control{width:100%;background:var(--bg3);border:1px solid var(--border2);border-radius:3px;padding:9px 13px;color:var(--txt);font-family:Vintage;font-size:.95rem;outline:none;transition:border-color .2s;} .form-control:focus{border-color:var(--amber);} .form-control::placeholder{color:var(--dim);} textarea.form-control{resize:vertical;} select.form-control{appearance:none;cursor:pointer;} .form-group{margin-bottom:16px;} .form-error{color:var(--red);font-size:.78rem;margin-top:4px;font-family:'Tech',monospace;} .form-hint{color:var(--dim);font-size:.75rem;margin-top:4px;font-family:'Tech',monospace;} .input-wrap{position:relative;} .eye-btn{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--dim);cursor:pointer;font-size:1.1rem;} .disabled-input{opacity:.5;cursor:not-allowed;} .checkbox-acc-amber{width:16px;height:16px;accent-color:var(--amber);margin-top:2px;flex-shrink:0;} .checkbox-acc-cyan{width:20px;height:20px;accent-color:var(--cyan);} /* ── TAGS & FLASH ────────────────────────────────────── */ .tag{display:inline-block;padding:2px 8px;border-radius:3px;font-size:.68rem;font-family:'Tech',monospace;} .tag-amber{background:rgba(255,184,0,.12);color:var(--amber);border:1px solid rgba(255,184,0,.25);} .tag-cyan{background:rgba(0,229,255,.08);color:var(--cyan);border:1px solid rgba(0,229,255,.2);} .tag-green{background:rgba(57,255,20,.08);color:var(--green);border:1px solid rgba(57,255,20,.2);} .tag-red{background:rgba(255,61,61,.08);color:var(--red);border:1px solid rgba(255,61,61,.2);} .flash{padding:12px 16px;border-radius:4px;font-size:.9rem;margin-bottom:14px;} .flash-success{background:rgba(57,255,20,.08);border:1px solid rgba(57,255,20,.25);color:var(--green);} .flash-error{background:rgba(255,61,61,.08);border:1px solid rgba(255,61,61,.25);color:var(--red);} .flash-info{background:rgba(0,229,255,.08);border:1px solid rgba(0,229,255,.2);color:var(--cyan);} .unread-badge{background:var(--red);color:#fff;font-size:.58rem;padding:1px 4px;border-radius:8px;margin-left:3px;vertical-align:top;} .escrow-badge{font-family:'Tech',monospace;font-size:.65rem;color:var(--amber);border:1px solid var(--amber);padding:2px 6px;border-radius:3px;} .cash-badge{font-family:'Tech',monospace;font-size:.65rem;color:var(--cyan);border:1px solid var(--cyan);padding:2px 6px;border-radius:3px;} /* ── PAGE HERO ───────────────────────────────────────── */ .page-hero{background:var(--bg3);border-bottom:1px solid var(--border);padding:24px 0;margin-bottom:24px;} .hero-bar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;} @media(max-width:600px){ .page-hero{padding:16px 0;margin-bottom:16px;} .hero-bar{flex-direction:column;align-items:flex-start;gap:10px;} } /* ── AUCTION CARD ────────────────────────────────────── */ .acard{background:var(--bg2);border:1px solid var(--border);border-radius:5px;overflow:hidden;transition:all .22s;display:flex;flex-direction:column;} .acard:hover{border-color:var(--amber);transform:translateY(-3px);box-shadow:0 8px 30px rgba(255,184,0,.1);} .acard-thumb{position:relative;padding-top:65%;background:var(--bg3);} .acard-thumb img,.acard-thumb-ico{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} .acard-thumb-ico{display:flex;align-items:center;justify-content:center;font-size:4rem;} .acard-badge{position:absolute;top:8px;left:8px;background:var(--amber);color:#000;font-family:'Tech',monospace;font-size:.6rem;padding:2px 7px;font-weight:700;} .acard-time{position:absolute;bottom:8px;right:8px;background:rgba(0,0,0,.88);color:var(--cyan);font-family:'Tech',monospace;font-size:.65rem;padding:3px 8px;border:1px solid var(--cyan);} .acard-body{padding:13px;flex:1;display:flex;flex-direction:column;gap:6px;} .acard-title{font-size:.9rem;font-weight:700;line-height:1.3;} .acard-price{font-family:Tech;font-size:1.45rem;color:var(--amber);} .acard-meta{font-size:.7rem;color:var(--dim);font-family:'Tech',monospace;} @media(max-width:480px){ .acard:hover{transform:none;} .acard-body{padding:10px;} } /* ── SECTION TITLE ───────────────────────────────────── */ .sec-title{font-family:Tech;font-size:1.8rem;color:var(--amber);text-shadow:var(--glow-a);letter-spacing:unset;display:flex;align-items:center;gap:10px;} .sec-title::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--amber),transparent);} /* ── COMPOSANTS DIVERS ───────────────────────────────── */ .stat-block{text-align:center;padding:16px;} .stat-block .stat-num{font-family:Tech;font-size:1.9rem;} .stat-block .stat-lbl{font-family:'Tech',monospace;font-size:.58rem;color:var(--dim);text-transform:uppercase;margin-top:3px;} .lot-row{background:var(--bg2);border:1px solid var(--border);border-radius:5px;padding:12px 14px;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center;gap:10px;} .lot-row-left{flex:1;min-width:0;}.lot-row-right{text-align:right;flex-shrink:0;} .lot-title{font-weight:700;font-size:.88rem;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .lot-meta{font-family:'Tech',monospace;font-size:.65rem;color:var(--dim);margin-top:2px;} .lot-actions{margin-top:8px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;} .action-link{background:none;border:none;padding:0;font-family:'Tech',monospace;font-size:.63rem;cursor:pointer;} .action-link-amber{color:var(--amber);}.action-link-cyan{color:var(--cyan);} .action-link-muted{color:var(--muted);}.action-link-green{color:var(--green);} @media(max-width:520px){ .lot-row{flex-direction:column;align-items:flex-start;} .lot-row-right{text-align:left;} } .order-sep{margin-top:10px;padding-top:10px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;} .cancel-btn{background:transparent;border:1px solid rgba(255,61,61,.35);color:var(--red);font-family:'Tech',monospace;font-size:.62rem;padding:3px 8px;border-radius:3px;cursor:pointer;transition:all .15s;white-space:nowrap;} .cancel-btn:hover{background:rgba(255,61,61,.1);} .thumb-sm{width:54px;height:44px;flex-shrink:0;border-radius:3px;overflow:hidden;background:var(--bg3);} .thumb-sm img{width:100%;height:100%;object-fit:cover;} .img-cover{width:100%;height:100%;object-fit:cover;} .section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;} .danger-zone{margin-top:32px;border:1px solid rgba(255,61,61,.25);border-radius:5px;overflow:hidden;} .danger-head{background:rgba(255,61,61,.06);padding:12px 16px;font-family:'Tech',monospace;font-size:.65rem;color:var(--red);letter-spacing:unset;border-bottom:1px solid rgba(255,61,61,.15);} .danger-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding:12px;background:var(--bg3);border-radius:4px;} .danger-row-red{background:rgba(255,61,61,.04);border:1px solid rgba(255,61,61,.12);} .info-box{border-radius:4px;padding:14px 16px;display:flex;gap:10px;} .info-box-green{background:rgba(57,255,20,.05);border:1px solid rgba(57,255,20,.2);} .info-box-cyan{background:rgba(0,229,255,.05);border:1px solid rgba(0,229,255,.2);} .info-box-amber{background:rgba(255,184,0,.06);border:1px solid rgba(255,184,0,.25);} .info-box-red{background:rgba(255,61,61,.05);border:1px solid rgba(255,61,61,.2);} .info-box-icon{font-size:1.4rem;flex-shrink:0;} .photo-drop{border:2px dashed var(--border2);border-radius:4px;padding:28px;text-align:center;background:var(--bg3);cursor:pointer;transition:border-color .2s,background .2s;} .photo-drop:hover{border-color:var(--amber);background:rgba(255,184,0,.03);} .photo-drop-icon{font-size:2.5rem;margin-bottom:8px;} .photo-drop-hint{font-size:.8rem;color:var(--dim);} .pay-panel-bg{background:var(--bg3);border:1px solid var(--border);border-radius:4px;padding:12px;font-family:'Tech',monospace;font-size:.75rem;color:var(--dim);} /* ── ANIMATIONS ──────────────────────────────────────── */ @keyframes flicker{0%,19%,21%,23%,25%,54%,56%,100%{opacity:1;}20%,24%,55%{opacity:.6;}} @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}} .live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);animation:pulse 1.3s infinite;vertical-align:middle;margin-right:4px;} /* ── NAVIGATION DESKTOP ──────────────────────────────── */ nav.topnav{ background:var(--nav-bg, black); border-bottom:2px solid var(--nav-border, var(--amber)); padding:0 20px; height:var(--nav-h); display:flex;align-items:center;gap:6px; position:sticky;top:0;z-index:999; backdrop-filter:blur(12px); } .nav-logo{ font-family:Tech;font-size:1.65rem; color:var(--amber);text-shadow:var(--glow-a); letter-spacing:unset;margin-right:12px; animation:flicker 9s infinite;white-space:nowrap;flex-shrink:0; } .nav-search{ flex:0 1 260px;background:var(--bg3);border:1px solid var(--border); border-radius:3px;padding:6px 12px;color:var(--txt); font-family:Vintage;font-size:.9rem;outline:none;transition:border-color .2s; } .nav-search:focus{border-color:var(--amber);} .nav-spacer{flex:1;} .nav-link{ font-family:'Tech',monospace;font-size:.8rem; letter-spacing:unset; color:var(--muted);padding:6px 10px;border-radius:3px; transition:all .18s;white-space:nowrap; } .nav-link:hover{color:var(--amber);background:rgba(255,184,0,.06);} .nav-sep{width:1px;height:20px;background:var(--border2);margin:0 4px;flex-shrink:0;} /* Hamburger — masqué desktop */ .nav-hamburger{ display:none; flex-direction:column;justify-content:center; gap:5px;width:38px;height:38px; cursor:pointer;background:none;border:none;padding:5px;flex-shrink:0; } .nav-hamburger span{ display:block;height:2px;background:var(--amber); border-radius:2px;transition:all .28s cubic-bezier(.4,0,.2,1); } .nav-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);} .nav-hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0);} .nav-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} /* Drawer mobile */ .nav-drawer{ display:none; position:fixed;top:var(--nav-h);left:0;right:0;bottom:0; background:rgba(8,12,16,.99); border-top:1px solid var(--border); overflow-y:auto;z-index:998; flex-direction:column; padding:8px 0 48px; animation:drawerIn .22s ease; } @keyframes drawerIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} .nav-drawer.open{display:flex;} .nav-drawer-search{ margin:14px 20px 6px; background:var(--bg3);border:1px solid var(--border2);border-radius:3px; padding:11px 14px;color:var(--txt); font-family:Vintage;font-size:1rem; outline:none;width:calc(100% - 40px); } .nav-drawer-search:focus{border-color:var(--amber);} .nav-drawer-link{ display:flex;align-items:center;gap:12px; padding:15px 20px; color:var(--muted); font-family:'Tech',monospace;font-size:.75rem; letter-spacing:1.5px;text-transform:uppercase; border-bottom:1px solid rgba(30,42,56,.5); transition:color .15s,background .15s; } .nav-drawer-link:hover{color:var(--amber);background:rgba(255,184,0,.04);} .nav-drawer-link.accent{color:var(--cyan);} .nav-drawer-link.dim{color:var(--dim);} .nav-drawer-sep{margin:6px 20px;height:1px;background:var(--border2);} /* Breakpoints nav */ @media(max-width:1024px){ .nav-search{flex:0 1 200px;} } @media(max-width:720px){ .nav-link-md-hide{display:none;} } @media(max-width:640px){ nav.topnav{padding:0 14px;gap:4px;} .nav-search{display:none;} .nav-desktop{display:none;} .nav-hamburger{display:flex;} .nav-spacer{display:none;} } /* Classes visibilité */ @media(max-width:640px){.desktop-only{display:none!important;}} @media(min-width:641px){.mobile-only{display:none!important;}} /* ── SÉLECTEUR DE THÈME ──────────────────────────────── */ .theme-toggle{position:relative;} .theme-toggle-btn{ background:none;border:1px solid var(--border2);color:var(--muted); cursor:pointer;width:32px;height:32px;border-radius:4px;font-size:.9rem; display:flex;align-items:center;justify-content:center; transition:all .15s;flex-shrink:0; } .theme-toggle-btn:hover{border-color:var(--amber);color:var(--amber);} .theme-toggle-btn.active{border-color:var(--amber);color:var(--amber);background:rgba(255,184,0,.08);} .theme-menu{ display:none;position:absolute;top:calc(100% + 8px);right:0; background:var(--bg2);border:1px solid var(--border2); border-radius:6px;min-width:210px;z-index:2000; box-shadow:0 12px 40px rgba(0,0,0,.6);overflow:hidden; } .theme-menu.open{display:block;} .theme-menu-title{ font-family:var(--font-mono,'Tech',monospace); font-size:.58rem;color:var(--dim);letter-spacing:3px; padding:10px 14px 8px;border-bottom:1px solid var(--border); } .theme-opt{ display:flex;align-items:center;gap:10px; width:100%;padding:9px 14px;background:none;border:none; cursor:pointer;text-align:left;transition:background .12s; border-bottom:1px solid var(--border); } .theme-opt:last-child{border-bottom:none;} .theme-opt:hover{background:rgba(255,255,255,.05);} .theme-opt.current{background:rgba(255,184,0,.07);} .theme-swatch{ width:22px;height:22px;border-radius:50%;flex-shrink:0; box-shadow:0 2px 6px rgba(0,0,0,.4); } .theme-opt-name{ font-family:var(--font-mono,'Tech',monospace); font-size:.72rem;color:var(--txt);flex:1; } .theme-opt-sub{font-size:.6rem;color:var(--dim);} .theme-opt.current .theme-opt-name{color:var(--amber);} .theme-opt.current .theme-opt-name::after{content:' ✓';} /* Boutons thème dans le drawer mobile */ .theme-drawer-opt{ background:var(--bg3);border:1px solid var(--border2); color:var(--muted);font-family:var(--font-mono,'Tech',monospace); font-size:.62rem;padding:8px 10px;border-radius:4px;cursor:pointer; transition:all .15s;text-align:center; } .theme-drawer-opt:hover,.theme-drawer-opt.current{ border-color:var(--amber);color:var(--amber);background:rgba(255,184,0,.08); } /* ════════════════════════════════════════════════════════ */ /* INLINE STYLE CLASSES - Additional helper classes */ /* ════════════════════════════════════════════════════════ */ /* Navigation styles */ .nav-logo-img { height:34px; max-width:180px; object-fit:contain; vertical-align:middle; } .nav-search-form { display:contents; } /* Logo and admin header */ .admin-header { padding:12px 20px; font-family:'VT323',monospace; font-size:1.3rem; color:var(--cyan); letter-spacing:2px; } .admin-subheader { padding:0 20px 12px; } /* Stat cards */ .stat-card { text-align:center; } /* Slideshow */ .slideshow { position:relative; overflow:hidden; border-bottom:1px solid var(--border); min-height:420px; background:var(--bg); } .slide { position:absolute; inset:0; opacity:0; transition:opacity .7s cubic-bezier(.4,0,.2,1); pointer-events:none; display:flex; align-items:center; } .slide.active { opacity:1; pointer-events:auto; z-index:2; } .slide.prev { opacity:0; z-index:1; } .slide-bg { position:absolute; inset:0; background-size:cover; background-position:center; transition:transform 8s linear; } .slide.active .slide-bg { transform:scale(1.04); } .slide-overlay { position:absolute; inset:0; background:linear-gradient(135deg,rgba(5,8,5,.82) 0%,rgba(5,7,16,.68) 100%); } .slide-content { position:relative; z-index:5; width:100%; padding:56px 0; } @media(max-width:600px){ .slideshow { min-height:320px; } .slide-content { padding:36px 0; } } .slide-badge { font-family:'Vintage',monospace; margin-bottom:12px; opacity:.9; } .slide-title { font-family:'Tech',monospace; font-size:2.5rem; line-height:.92; margin-bottom:16px; animation:flicker 9s infinite; white-space:pre-line; } @media(max-width:600px){ .slide-title { font-size:2rem; } } .slide-subtitle { color:var(--muted); max-width:500px; line-height:1.7; margin-bottom:26px; font-size:.95rem; } .slide-buttons { display:flex; gap:12px; flex-wrap:wrap; } /* Slideshow Navigation */ .ss-nav { position:absolute; bottom:18px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:14px; z-index:10; } .ss-dot { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.22); border:none; cursor:pointer; transition:all .2s; padding:0; } .ss-dot.active { background:var(--amber); transform:scale(1.35); } .ss-arrow { position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.6); cursor:pointer; width:38px; height:38px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; border-radius:3px; z-index:10; transition:all .2s; } .ss-arrow:hover { background:#1c1b29; border-color:var(--amber); color:var(--amber); } .ss-arrow-l { left:14px; } .ss-arrow-r { right:14px; } .ss-progress { position:absolute; bottom:0; left:0; height:2px; background:#b7b7b7; width:0%; z-index:10; transition:width linear; } /* Modal & dialog */ .modal-close-btn { background:none; border:none; color:var(--dim); cursor:pointer; font-size:1.2rem; } .modal-overlay { position:fixed; bottom:20px; right:20px; background:var(--bg2); border:1px solid var(--amber); color:var(--amber); font-family:'Share Tech Mono',monospace; font-size:.7rem; padding:7px 12px; border-radius:4px; display:none; z-index:100; } /* Admin section */ .admin-option-delete { background:rgba(255,61,61,.12); color:var(--red); border:1px solid rgba(255,61,61,.3); } .hint-box { display:none; } /* Tables and rows */ .table-ellipsis { max-width:160px; } .table-link { text-decoration:none; } /* Override bootstrap type gaps */ .g2e { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:8px; } /* Label sizes */ .label-tiny-block { display:block; margin-bottom:3px; } /* Overflow containers */ .overflow-x { overflow-x:auto; } /* Add space */ .mt-20 { margin-top:20px; } .pt-14 { padding-top:14px; } .mb-3 { margin-bottom:20px; } /* Display settings */ .display-contents { display:contents; } /* Position fixed buttons */ .fixed-bottom { position:fixed; bottom:20px; right:20px; background:var(--bg2); border:1px solid var(--amber); color:var(--amber); font-family:'Share Tech Mono',monospace; font-size:.7rem; padding:7px 12px; border-radius:4px; display:none; z-index:100; } /* Responsive slide */ @media(max-width:600px){ .slideshow { min-height:320px; } .slide-title { font-size:2rem; } } /* Page-specific utilities */ .page-padding { padding-top:24px; } .page-margin { margin-bottom:24px; } /* Card border variations */ .card-border-cyan { border-color:var(--cyan); } .card-head-cyan { color:var(--cyan); } /* Form input style variants */ .form-input-sm { font-size:.82rem; padding:5px 9px; } /* Track button styles */ .track-btn { font-size:.6rem; padding:3px 7px; } /* Unmet message styles */ .text-dim-section { color:var(--dim); } /* Carrier styles */ .carrier-notify { position:fixed; bottom:20px; right:20px; background:var(--bg2); border:1px solid var(--amber); color:var(--amber); font-family:'Share Tech Mono',monospace; font-size:.7rem; padding:7px 12px; border-radius:4px; display:none; z-index:100; } /* Category image styles */ .category-icon { height:64px; margin-bottom:10px; filter:invert(1); } .category-icon-sm { height:36px; flex-shrink:0; filter:invert(1); } .category-icon-xs { height:18px; flex-shrink:0; filter:invert(1); }