/* ============================================================ LTD LITTLE SEOUL — base.css Tokens, thèmes, reset, composants partagés. 100% statique — aucune dépendance obligatoire. ============================================================ */ /* ---------- 1. TOKENS ---------- */ :root{ --ltd-red:#e11d2e; --ltd-red-600:#c01324; --ltd-red-300:#ff5a67; --ltd-red-glow:rgba(225,29,46,.35); --ltd-navy:#1a2340; --ltd-navy-600:#0f1530; --ltd-navy-300:#4a5da3; --navy-dim:rgba(46,61,110,.28); --navy-glow:rgba(46,61,110,.45); --ink-900:#08090b; --ink-850:#0b0d10; --ink-800:#0e1116; --ink-700:#13171d; --ink-600:#191e25; --ink-500:#222833; --txt:#f2f5f9; --txt-2:#aeb7c4; --txt-3:#79828f; --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14); --gold:#d9a441; --gold-300:#f2c876; --gold-dim:rgba(217,164,65,.14); --gold-glow:rgba(217,164,65,.35); --ok:#22c55e; --ok-dim:rgba(34,197,94,.14); --info:#3b82f6; --info-dim:rgba(59,130,246,.14); --warn:#f59e0b; --warn-dim:rgba(245,158,11,.14); --danger:#ef4444; --danger-dim:rgba(239,68,68,.14); --red-dim:rgba(225,29,46,.14); --r-xs:8px; --r-sm:10px; --r:14px; --r-lg:20px; --r-xl:28px; --shadow-1:0 1px 0 rgba(255,255,255,.04) inset, 0 12px 30px -18px rgba(0,0,0,.9); --shadow-2:0 1px 0 rgba(255,255,255,.05) inset, 0 30px 60px -30px rgba(0,0,0,.95); --glass:rgba(255,255,255,.035); --font-display:'Archivo','Archivo Black',system-ui,'Segoe UI',sans-serif; --font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --font-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Consolas,monospace; --nav-h:70px; --side-w:264px; --maxw:1280px; --speed:.35s; --ease:cubic-bezier(.2,.7,.25,1); } /* Ouvert dans le téléphone du jeu (voir utils.js, classe posée sur via ?ingame=1) : --nav-h agrandi pour réserver la barre de statut du jeu au-dessus du header — tout ce qui s'appuie déjà sur --nav-h (header, menu mobile, barres latérales sticky) suit automatiquement. 44px est une première estimation, à ajuster avec Morgan une fois testé en jeu. */ html.in-game-phone{--nav-h:114px} /* ---------- 2. THÈMES ---------- */ [data-theme="midnight"]{ --ink-900:#060911; --ink-850:#080c16; --ink-800:#0b111d; --ink-700:#111928; --ink-600:#172133; --ink-500:#212d42; --ltd-red:#e0263a; --ltd-red-300:#ff6272; } [data-theme="executive"]{ --ink-900:#0c0c0d; --ink-850:#101011; --ink-800:#141416; --ink-700:#1b1c1f; --ink-600:#232428; --ink-500:#2e3036; --ltd-red:#d5a24a; --ltd-red-600:#b8862f; --ltd-red-300:#f0c477; --ltd-red-glow:rgba(213,162,74,.3); } [data-theme="carbon"]{ --ink-900:#000; --ink-850:#050505; --ink-800:#0a0a0a; --ink-700:#101010; --ink-600:#171717; --ink-500:#212121; --line:rgba(255,255,255,.1); } [data-theme="light"]{ --ink-900:#f2f4f7; --ink-850:#f6f8fa; --ink-800:#fff; --ink-700:#fff; --ink-600:#f1f3f6; --ink-500:#e5e8ee; --txt:#0d1117; --txt-2:#4a5361; --txt-3:#727c8a; --line:rgba(9,12,20,.1); --line-2:rgba(9,12,20,.18); --glass:rgba(9,12,20,.02); --shadow-1:0 1px 2px rgba(16,24,40,.06), 0 10px 24px -16px rgba(16,24,40,.35); --shadow-2:0 10px 40px -20px rgba(16,24,40,.4); } /* ---------- Thèmes saisonniers & additionnels ---------- */ [data-theme="ete"]{ --ink-900:#07131a; --ink-850:#0a1720; --ink-800:#0e1d28; --ink-700:#142735; --ink-600:#1b3243; --ink-500:#254257; --ltd-red:#ff8a3d; --ltd-red-600:#e56d1f; --ltd-red-300:#ffb877; --ltd-red-glow:rgba(255,138,61,.35); --red-dim:rgba(255,138,61,.14); --info:#22d3ee; } [data-theme="printemps"]{ --ink-900:#0a1310; --ink-850:#0d1713; --ink-800:#111d18; --ink-700:#17271f; --ink-600:#1f3328; --ink-500:#2a4536; --ltd-red:#ec4899; --ltd-red-600:#d1327d; --ltd-red-300:#f882b8; --ltd-red-glow:rgba(236,72,153,.35); --red-dim:rgba(236,72,153,.14); --ok:#4ade80; --info:#5eead4; } [data-theme="automne"]{ --ink-900:#100a06; --ink-850:#140d08; --ink-800:#19110a; --ink-700:#22170d; --ink-600:#2c1f12; --ink-500:#3a2a19; --ltd-red:#d9701f; --ltd-red-600:#b85814; --ltd-red-300:#f2a559; --ltd-red-glow:rgba(217,112,31,.35); --red-dim:rgba(217,112,31,.14); } [data-theme="hiver"]{ --ink-900:#070c14; --ink-850:#0a1019; --ink-800:#0d1420; --ink-700:#131c2c; --ink-600:#1a263a; --ink-500:#24334c; --ltd-red:#5aa9ff; --ltd-red-600:#3d8ce6; --ltd-red-300:#9cccff; --ltd-red-glow:rgba(90,169,255,.35); --red-dim:rgba(90,169,255,.14); --txt:#eef4fb; } [data-theme="noel"]{ --ink-900:#08100a; --ink-850:#0a130c; --ink-800:#0d1810; --ink-700:#122117; --ink-600:#182c1f; --ink-500:#213b2a; --ltd-red:#e0263a; --ltd-red-600:#b8192a; --ltd-red-300:#ff6272; --ltd-red-glow:rgba(224,38,58,.35); --red-dim:rgba(224,38,58,.14); --ok:#2fbf6e; --warn:#d5a24a; } [data-theme="saint-valentin"]{ --ink-900:#12080c; --ink-850:#160a0f; --ink-800:#1c0d13; --ink-700:#26121a; --ink-600:#331722; --ink-500:#44202d; --ltd-red:#ff4d79; --ltd-red-600:#e2315e; --ltd-red-300:#ff90ab; --ltd-red-glow:rgba(255,77,121,.4); --red-dim:rgba(255,77,121,.15); } [data-theme="halloween"]{ --ink-900:#0a070d; --ink-850:#0d0910; --ink-800:#120c17; --ink-700:#191021; --ink-600:#22162d; --ink-500:#2d1e3b; --ltd-red:#ff7a1a; --ltd-red-600:#e0620a; --ltd-red-300:#ffab5c; --ltd-red-glow:rgba(255,122,26,.4); --red-dim:rgba(255,122,26,.16); --info:#a855f7; } [data-theme="neon"]{ --ink-900:#050508; --ink-850:#07070c; --ink-800:#0a0a11; --ink-700:#0e0e18; --ink-600:#131322; --ink-500:#1a1a30; --ltd-red:#ff2e88; --ltd-red-600:#e0106b; --ltd-red-300:#ff7ab8; --ltd-red-glow:rgba(255,46,136,.5); --red-dim:rgba(255,46,136,.16); --info:#00f0ff; --line:rgba(255,255,255,.12); --line-2:rgba(255,255,255,.2); } [data-theme="elegant"]{ --ink-900:#0a0a09; --ink-850:#0d0d0b; --ink-800:#111110; --ink-700:#171614; --ink-600:#1e1c19; --ink-500:#282521; --ltd-red:#c9a668; --ltd-red-600:#ad8a4c; --ltd-red-300:#e2c793; --ltd-red-glow:rgba(201,166,104,.3); --red-dim:rgba(201,166,104,.13); --font-display:'Archivo',system-ui,serif; } [data-theme="industriel"]{ --ink-900:#0c0d0e; --ink-850:#101113; --ink-800:#151719; --ink-700:#1c1f22; --ink-600:#25282c; --ink-500:#323639; --ltd-red:#f0a63a; --ltd-red-600:#d1881f; --ltd-red-300:#f8c777; --ltd-red-glow:rgba(240,166,58,.3); --red-dim:rgba(240,166,58,.13); --line:rgba(255,255,255,.1); --r-xs:4px; --r-sm:6px; --r:8px; --r-lg:12px; --r-xl:16px; } [data-theme="minimaliste"]{ --ink-900:#0a0a0a; --ink-850:#0e0e0e; --ink-800:#121212; --ink-700:#181818; --ink-600:#202020; --ink-500:#2a2a2a; --ltd-red:#e6e6e6; --ltd-red-600:#c4c4c4; --ltd-red-300:#ffffff; --ltd-red-glow:rgba(230,230,230,.2); --red-dim:rgba(230,230,230,.1); --r-xs:2px; --r-sm:4px; --r:6px; --r-lg:10px; --r-xl:14px; } /* ---------- 3. RESET ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ margin:0; font-family:var(--font-body); font-size:15px; line-height:1.55; color:var(--txt); background:var(--ink-900); background-image: radial-gradient(1100px 640px at 92% -10%,rgba(225,29,46,.10),transparent 60%), radial-gradient(900px 560px at -6% 106%,rgba(46,61,110,.16),transparent 62%); background-attachment:fixed; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img,svg,video{max-width:100%;display:block} h1,h2,h3,h4,h5{margin:0;font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;line-height:1.12} p{margin:0 0 .8em} a{color:inherit;text-decoration:none} button,input,select,textarea{font:inherit;color:inherit} ul,ol{margin:0;padding:0;list-style:none} table{border-collapse:collapse;width:100%} hr{border:0;border-top:1px solid var(--line);margin:20px 0} :focus-visible{outline:2px solid var(--ltd-red-300);outline-offset:2px;border-radius:4px} ::selection{background:var(--ltd-red);color:#fff} ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--ink-500);border-radius:20px;border:3px solid transparent;background-clip:content-box} ::-webkit-scrollbar-thumb:hover{background:var(--ltd-red-600);background-clip:content-box} /* ---------- 4. UTILITAIRES ---------- */ .container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:22px} .mono{font-family:var(--font-mono);font-size:.86em;letter-spacing:-.02em} .muted{color:var(--txt-2)} .dim{color:var(--txt-3)} .center{text-align:center} .right{text-align:right} .nowrap{white-space:nowrap} .hidden,[hidden]{display:none !important} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .row{display:flex;align-items:center;gap:10px} .row-between{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap} .stack{display:flex;flex-direction:column;gap:14px} .grow{flex:1 1 auto;min-width:0} .gap-sm{gap:8px} .mt-0{margin-top:0}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:26px}.mt-4{margin-top:40px} .mb-0{margin-bottom:0}.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:26px} .grid{display:grid;gap:18px} .g2{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(3,minmax(0,1fr))} .g4{grid-template-columns:repeat(4,minmax(0,1fr))} .g-auto{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))} /* ---------- Carte "Offre flash" ---------- */ .offer-card{ position:relative;overflow:hidden;border-radius:var(--r-lg);padding:26px 24px 24px; background: radial-gradient(420px 220px at 100% 0%,rgba(225,29,46,.28),transparent 70%), var(--ink-800); border:1px solid rgba(225,29,46,.3); transition:transform .3s var(--ease),border-color .3s; } .offer-card:hover{transform:translateY(-4px);border-color:var(--ltd-red)} .offer-card-badge{ display:inline-flex;align-items:center;gap:6px;background:var(--ltd-red);color:#fff; font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase; padding:5px 12px;border-radius:99px;margin-bottom:16px; } .offer-card-title{font-family:var(--font-display);font-size:22px;text-transform:uppercase;letter-spacing:-.01em;margin-bottom:8px;line-height:1.1} .offer-card-desc{color:var(--txt-2);font-size:14px;line-height:1.6;margin-bottom:18px} .offer-card-price{font-family:var(--font-display);font-weight:800;font-size:32px;color:var(--ltd-red-300)} .g-auto-lg{grid-template-columns:repeat(auto-fill,minmax(330px,1fr))} @media(max-width:1080px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:720px){.g2,.g3,.g4{grid-template-columns:1fr}} .eyebrow{ font-family:var(--font-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase; color:var(--ltd-red-300);display:inline-flex;align-items:center;gap:9px;margin-bottom:14px; } .section-title{font-family:var(--font-display);font-weight:800;font-size:clamp(30px,4.4vw,52px);text-transform:uppercase;letter-spacing:-.03em;line-height:.98} .lead{color:var(--txt-2);font-size:16.5px;max-width:64ch} /* Bande "hazard" — signature LTD */ .hazard{ height:6px;border-radius:3px; background:repeating-linear-gradient(115deg,var(--ltd-red) 0 14px,transparent 14px 28px); opacity:.65; } /* ---------- 5. BOUTONS ---------- */ .btn{ --btn-bg:var(--ink-600);--btn-fg:var(--txt);--btn-bd:var(--line-2); display:inline-flex;align-items:center;justify-content:center;gap:9px; min-height:44px;padding:0 18px;border-radius:var(--r-sm); background:var(--btn-bg);color:var(--btn-fg);border:1px solid var(--btn-bd); font-weight:600;font-size:14.5px;letter-spacing:.01em;cursor:pointer; transition:transform .16s var(--ease),background .2s,border-color .2s,box-shadow .2s,opacity .2s; -webkit-tap-highlight-color:transparent;user-select:none;text-align:center; } .btn:hover{transform:translateY(-1px);border-color:var(--line-2);background:var(--ink-500)} .btn:active{transform:translateY(0) scale(.99)} .btn[disabled],.btn.is-disabled{opacity:.45;pointer-events:none} .btn--primary{--btn-bg:linear-gradient(180deg,var(--ltd-red) 0%,var(--ltd-red-600) 100%);--btn-bd:transparent;--btn-fg:#fff;box-shadow:0 8px 24px -12px var(--ltd-red-glow);position:relative;overflow:hidden} .btn--primary::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.35) 48%,transparent 66%);transform:translateX(-120%);transition:transform .6s var(--ease)} .btn--primary:hover::after{transform:translateX(120%)} .btn--primary:hover{background:linear-gradient(180deg,var(--ltd-red-300) 0%,var(--ltd-red) 100%);box-shadow:0 12px 30px -12px var(--ltd-red-glow)} .btn--ghost{--btn-bg:transparent;--btn-bd:var(--line-2)} .btn--ghost:hover{background:var(--glass)} .btn--mexico{--btn-bg:linear-gradient(180deg,var(--ltd-navy) 0%,var(--ltd-navy-600) 100%);--btn-bd:transparent;--btn-fg:#fff;box-shadow:0 8px 24px -12px var(--navy-glow);position:relative;overflow:hidden} .btn--mexico:hover{background:linear-gradient(180deg,var(--ltd-navy-300) 0%,var(--ltd-navy) 100%);box-shadow:0 12px 30px -12px var(--navy-glow)} .btn--gold{--btn-bg:transparent;--btn-bd:rgba(217,164,65,.45);--btn-fg:var(--gold-300)} .btn--gold:hover{background:var(--gold-dim);border-color:var(--gold);box-shadow:0 10px 26px -16px var(--gold-glow)} .btn--quiet{--btn-bg:transparent;--btn-bd:transparent;--btn-fg:var(--txt-2)} .btn--quiet:hover{background:var(--glass);--btn-fg:var(--txt)} .btn--danger{--btn-bg:var(--danger-dim);--btn-bd:rgba(239,68,68,.4);--btn-fg:#ff8a8a} .btn--danger:hover{--btn-bg:var(--danger);--btn-fg:#fff} .btn--ok{--btn-bg:var(--ok-dim);--btn-bd:rgba(34,197,94,.4);--btn-fg:#7ee2a4} .btn--ok:hover{--btn-bg:var(--ok);--btn-fg:#04140a} .btn--sm{min-height:34px;padding:0 12px;font-size:13px;border-radius:var(--r-xs)} .btn--lg{min-height:54px;padding:0 26px;font-size:16px} .btn--block{width:100%} .btn--icon{min-height:40px;width:40px;padding:0} .btn--icon.btn--sm{min-height:32px;width:32px} /* ---------- 6. FORMULAIRES ---------- */ .field{display:flex;flex-direction:column;gap:7px;min-width:0} .label{font-size:12.5px;font-weight:600;color:var(--txt-2);letter-spacing:.03em;text-transform:uppercase;display:flex;align-items:center;gap:6px} .input,.select,.textarea{ width:100%;min-height:46px;padding:11px 14px; background:var(--ink-800);border:1px solid var(--line);border-radius:var(--r-sm); color:var(--txt);transition:border-color .2s,box-shadow .2s,background .2s; } [data-theme="light"] .input,[data-theme="light"] .select,[data-theme="light"] .textarea{background:#fff} .textarea{min-height:110px;resize:vertical;line-height:1.55} .input::placeholder,.textarea::placeholder{color:var(--txt-3)} .input:focus,.select:focus,.textarea:focus{outline:0;border-color:var(--ltd-red);box-shadow:0 0 0 3px var(--red-dim)} .input:disabled,.select:disabled{opacity:.5;cursor:not-allowed} .select{appearance:none;cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2379828f' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 13px center;padding-right:36px; } .hint{font-size:12.5px;color:var(--txt-3)} /* Zone "coller une image" (sélecteur média, Ctrl+V) */ .media-paste-zone{ display:flex;align-items:center;gap:10px;padding:14px 16px;border-radius:var(--r); border:1.5px dashed var(--line-2);color:var(--txt-3);font-size:12.5px;cursor:text; transition:border-color .2s,color .2s,background .2s; } .media-paste-zone:hover,.media-paste-zone:focus{border-color:var(--ltd-red-300);color:var(--txt-2);background:var(--glass);outline:0} .err{font-size:12.5px;color:#ff8a8a;display:flex;align-items:center;gap:6px} .field.is-invalid .input,.field.is-invalid .select,.field.is-invalid .textarea{border-color:var(--danger)} .check{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:14px;color:var(--txt-2);padding:6px 0} .check input{width:19px;height:19px;accent-color:var(--ltd-red);margin:1px 0 0;flex:none;cursor:pointer} .switch{position:relative;display:inline-flex;align-items:center;gap:12px;cursor:pointer} .switch input{position:absolute;opacity:0;width:0;height:0} .switch .track{width:46px;height:26px;border-radius:20px;background:var(--ink-500);border:1px solid var(--line-2);transition:background .25s;flex:none;position:relative} .switch .track::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--txt-3);transition:transform .25s var(--ease),background .25s} .switch input:checked + .track{background:var(--ltd-red);border-color:transparent} .switch input:checked + .track::after{transform:translateX(20px);background:#fff} .switch input:focus-visible + .track{outline:2px solid var(--ltd-red-300);outline-offset:2px} .form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px} .form-grid .full{grid-column:1/-1} @media(max-width:640px){.form-grid{grid-template-columns:1fr}} /* Intertitre optionnel (UI.form, champ f.section) : regroupe visuellement un long formulaire plat en sections lisibles, sans rien changer pour les formulaires qui ne l'utilisent pas. */ .form-section-title{ grid-column:1/-1;font-family:var(--font-display);font-size:11.5px;font-weight:800; letter-spacing:.12em;text-transform:uppercase;color:var(--ltd-red-300); padding-top:20px;margin-top:4px;border-top:1px solid var(--line); } .form-section-title:first-child{padding-top:0;margin-top:0;border-top:0} /* ---------- 7. CARTES / PANNEAUX ---------- */ .card{ /* .card se répète des dizaines de fois sur une même page (grilles, tableaux) : un backdrop-filter à 18px multiplié par autant d'instances est coûteux pour le compositeur. Le fond est déjà peu transparent (.62) donc le flou apportait très peu visuellement. */ background:linear-gradient(180deg,var(--glass),transparent),rgba(15,18,23,.86); border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-1); position:relative;transition:border-color .25s,box-shadow .25s; } [data-theme="light"] .card{background:linear-gradient(180deg,var(--glass),transparent),rgba(255,255,255,.7)} .card--pad{padding:22px} .card-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 20px;border-bottom:1px solid var(--line);flex-wrap:wrap} .card-head h3{font-size:15px;text-transform:uppercase;letter-spacing:.06em;font-family:var(--font-display);font-weight:800} .card-body{padding:20px} .card-foot{padding:14px 20px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap} .panel{background:rgba(15,18,24,.82);border:1px solid var(--line);border-radius:var(--r);padding:18px} /* ---------- 8. BADGES / PILLS ---------- */ .badge{ display:inline-flex;align-items:center;gap:6px; padding:4px 10px;border-radius:999px;font-size:11.5px;font-weight:700; letter-spacing:.06em;text-transform:uppercase;white-space:nowrap; background:var(--ink-600);color:var(--txt-2);border:1px solid var(--line); } .badge--ok{background:var(--ok-dim);color:#5fe08f;border-color:rgba(34,197,94,.3)} .badge--info{background:var(--info-dim);color:#7fb0ff;border-color:rgba(59,130,246,.3)} .badge--warn{background:var(--warn-dim);color:#ffc35c;border-color:rgba(245,158,11,.3)} .badge--danger{background:var(--danger-dim);color:#ff8a8a;border-color:rgba(239,68,68,.3)} .badge--red{background:var(--red-dim);color:var(--ltd-red-300);border-color:rgba(225,29,46,.35)} .badge--ghost{background:transparent} .dot{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none} .dot--pulse{position:relative} .dot--pulse::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid currentColor;opacity:.6;animation:pulseRing 2s ease-out infinite} @keyframes pulseRing{0%{transform:scale(.6);opacity:.7}100%{transform:scale(1.5);opacity:0}} .chip{ display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px; background:var(--ink-700);border:1px solid var(--line);color:var(--txt-2); font-size:13px;font-weight:600;cursor:pointer;transition:.2s;white-space:nowrap; } .chip:hover{border-color:var(--line-2);color:var(--txt)} .chip.is-active{background:var(--ltd-red);border-color:transparent;color:#fff} /* Chips de filtre par statut : même palette que les badges (.badge--*), pour repérer un statut d'un coup d'œil dans la barre de filtres au lieu d'une rangée uniformément grise. */ .chip--ok{background:var(--ok-dim);color:#5fe08f;border-color:rgba(34,197,94,.3)} .chip--info{background:var(--info-dim);color:#7fb0ff;border-color:rgba(59,130,246,.3)} .chip--warn{background:var(--warn-dim);color:#ffc35c;border-color:rgba(245,158,11,.3)} .chip--danger{background:var(--danger-dim);color:#ff8a8a;border-color:rgba(239,68,68,.3)} .chip--red{background:var(--red-dim);color:var(--ltd-red-300);border-color:rgba(225,29,46,.35)} .chip--ok.is-active{background:#5fe08f;border-color:transparent;color:#0b0d10} .chip--info.is-active{background:#7fb0ff;border-color:transparent;color:#0b0d10} .chip--warn.is-active{background:#ffc35c;border-color:transparent;color:#0b0d10} .chip--danger.is-active{background:#ff8a8a;border-color:transparent;color:#0b0d10} .chip--red.is-active{background:var(--ltd-red);border-color:transparent;color:#fff} .chips{display:flex;gap:9px;flex-wrap:wrap} .chips--scroll{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;scrollbar-width:none} .chips--scroll::-webkit-scrollbar{display:none} /* ---------- 9. TABLEAUX ---------- */ .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch} .table{min-width:640px;font-size:14px} .table th{ text-align:left;padding:12px 16px;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase; color:var(--txt-3);font-weight:700;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--ink-850); } .table th.sortable{cursor:pointer;user-select:none} .table th.sortable:hover{color:var(--txt)} .table th .sort-i{opacity:.4;font-size:10px;margin-left:4px} .table th.is-sorted .sort-i{opacity:1;color:var(--ltd-red-300)} .table td{padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:middle} .table tbody tr{transition:background .16s} .table tbody tr:hover{background:var(--glass)} .table tbody tr:last-child td{border-bottom:0} .table .td-actions{text-align:right;white-space:nowrap} /* Liseré coloré (optionnel, via cfg.rowCls sur UI.table) reprenant la palette des badges — repérer le statut d'une ligne au premier coup d'œil sans devoir lire le badge à droite. */ .table tr.row--ok td:first-child{box-shadow:inset 3px 0 0 #5fe08f} .table tr.row--info td:first-child{box-shadow:inset 3px 0 0 #7fb0ff} .table tr.row--warn td:first-child{box-shadow:inset 3px 0 0 #ffc35c} .table tr.row--danger td:first-child{box-shadow:inset 3px 0 0 #ff8a8a} .table tr.row--red td:first-child{box-shadow:inset 3px 0 0 var(--ltd-red-300)} .table-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:14px 16px;border-bottom:1px solid var(--line)} .table-toolbar .search{flex:1 1 220px;min-width:180px;position:relative} .table-toolbar .search .input{padding-left:38px;min-height:42px} .table-toolbar .search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--txt-3)} .pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-top:1px solid var(--line);flex-wrap:wrap} .pagination .pages{display:flex;gap:6px;flex-wrap:wrap} .pg{min-width:34px;height:34px;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--txt-2);cursor:pointer;font-size:13px;font-weight:600;transition:.2s} .pg:hover{border-color:var(--line-2);color:var(--txt)} .pg.is-active{background:var(--ltd-red);border-color:transparent;color:#fff} .pg[disabled]{opacity:.35;pointer-events:none} /* Menu "..." */ .menu-wrap{position:relative;display:inline-block} .menu{ position:absolute;right:0;top:calc(100% + 6px);min-width:190px;z-index:60; background:var(--ink-700);border:1px solid var(--line-2);border-radius:var(--r-sm); box-shadow:var(--shadow-2);padding:6px; animation:menuIn .16s var(--ease); } @keyframes menuIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}} .menu button{ display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:10px 12px; background:transparent;border:0;border-radius:8px;color:var(--txt-2);font-size:13.5px;cursor:pointer; } .menu button:hover{background:var(--glass);color:var(--txt)} .menu button.danger{color:#ff8a8a} .menu .sep{height:1px;background:var(--line);margin:5px 2px} /* ---------- 10. MODALES / DRAWER ---------- */ .overlay{ position:fixed;inset:0;z-index:900;background:rgba(4,5,8,.72); backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); display:flex;align-items:center;justify-content:center;padding:20px; animation:fadeIn .2s ease;overflow:hidden; } @keyframes fadeIn{from{opacity:0}to{opacity:1}} .modal{ width:100%;max-width:560px;background:var(--ink-800);border:1px solid var(--line-2); border-radius:var(--r-lg);box-shadow:var(--shadow-2);animation:modalIn .28s var(--ease); max-height:calc(100vh - 40px);display:flex;flex-direction:column;margin:auto; } @keyframes modalIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}} .modal--lg{max-width:840px} .modal--xl{max-width:1080px} .modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px 22px 14px} .modal-head h3{font-size:19px} .modal-head .sub{font-size:13px;color:var(--txt-3);margin-top:3px} .modal-body{padding:4px 22px 20px;overflow-y:auto} .modal-foot{padding:16px 22px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap} .modal-foot .btn{flex:0 1 auto} @media(max-width:560px){ .overlay{padding:0;align-items:flex-end} .modal{max-width:100%;border-radius:var(--r-lg) var(--r-lg) 0 0;max-height:94vh} .modal-foot .btn{flex:1 1 46%} } /* ---------- 11. TOASTS ---------- */ .toasts{position:fixed;right:18px;bottom:18px;z-index:1200;display:flex;flex-direction:column;gap:10px;max-width:min(420px,calc(100vw - 36px));pointer-events:none} .toast{ display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--r); background:var(--ink-700);border:1px solid var(--line-2);box-shadow:var(--shadow-2); animation:toastIn .3s var(--ease);pointer-events:auto;position:relative;overflow:hidden; } .toast.out{animation:toastOut .25s var(--ease) forwards} @keyframes toastIn{from{opacity:0;transform:translateX(30px) scale(.96)}to{opacity:1;transform:none}} @keyframes toastOut{to{opacity:0;transform:translateX(30px);height:0;padding:0;margin:0}} .toast .ico{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;background:var(--red-dim);color:var(--ltd-red-300)} .toast--ok .ico{background:var(--ok-dim);color:#5fe08f} .toast--info .ico{background:var(--info-dim);color:#7fb0ff} .toast--warn .ico{background:var(--warn-dim);color:#ffc35c} .toast--danger .ico{background:var(--danger-dim);color:#ff8a8a} .toast .t-title{font-weight:700;font-size:14px} .toast .t-msg{font-size:13px;color:var(--txt-2);margin-top:2px;white-space:pre-line} .toast .t-bar{position:absolute;left:0;bottom:0;height:2px;background:var(--ltd-red);animation:toastBar 4s linear forwards} @keyframes toastBar{from{width:100%}to{width:0}} @media(max-width:560px){.toasts{left:12px;right:12px;bottom:calc(72px + env(safe-area-inset-bottom,0px));max-width:none}} /* Variante "annonce" — même traitement contour + halo que le bandeau recrutement (carte qui brille), pour une annonce client destinée à vraiment se voir au lieu de se fondre parmi les toasts d'action habituels (discrets par design). */ .toast--announce{ border:1.5px solid var(--ltd-red); background:linear-gradient(120deg,var(--ink-800),var(--ink-850) 75%); box-shadow:0 0 0 1px var(--red-dim),0 0 42px -6px var(--ltd-red-glow),0 22px 50px -20px rgba(0,0,0,.7); animation:toastIn .3s var(--ease),toastAnnounceGlow 3.2s ease-in-out .3s infinite; padding:16px 18px; } .toast--announce .ico{ width:34px;height:34px;background:linear-gradient(140deg,var(--ltd-red),var(--ltd-red-600)); color:#fff;box-shadow:0 6px 16px -6px var(--ltd-red-glow); } .toast--announce .t-title{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.02em;font-size:15px} .toast--announce .t-msg{color:var(--txt)} @keyframes toastAnnounceGlow{ 0%,100%{box-shadow:0 0 0 1px var(--red-dim),0 0 30px -6px var(--ltd-red-glow),0 22px 50px -20px rgba(0,0,0,.7)} 50%{box-shadow:0 0 0 1px var(--red-dim),0 0 54px -2px var(--ltd-red-glow),0 22px 50px -20px rgba(0,0,0,.7)} } /* ---------- 12. PROGRESS / SKELETON / EMPTY ---------- */ .progress{height:8px;border-radius:99px;background:var(--ink-600);overflow:hidden} .progress > span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--ltd-red-600),var(--ltd-red-300));transition:width .9s var(--ease)} .progress--ok > span{background:linear-gradient(90deg,#15803d,#4ade80)} .progress--warn > span{background:linear-gradient(90deg,#b45309,#fbbf24)} .skeleton{background:linear-gradient(100deg,var(--ink-700) 20%,var(--ink-600) 40%,var(--ink-700) 60%);background-size:220% 100%;animation:shimmer 1.4s infinite;border-radius:8px;min-height:14px} @keyframes shimmer{from{background-position:120% 0}to{background-position:-20% 0}} .empty{padding:52px 24px;text-align:center;color:var(--txt-3)} .empty .ico{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;margin:0 auto 16px;background:var(--ink-700);border:1px solid var(--line);color:var(--txt-3)} .empty h4{font-size:17px;color:var(--txt);margin-bottom:6px} .empty p{max-width:44ch;margin-inline:auto;font-size:14px} /* ---------- 13. TIMELINE ---------- */ .timeline{position:relative;padding-left:30px} .timeline::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:var(--line)} .tl-item{position:relative;padding-bottom:22px} .tl-item:last-child{padding-bottom:0} .tl-item::before{ content:"";position:absolute;left:-26px;top:4px;width:12px;height:12px;border-radius:50%; background:var(--ink-600);border:2px solid var(--line-2); } .tl-item.done::before{background:var(--ok);border-color:var(--ok)} .tl-item.active::before{background:var(--ltd-red);border-color:var(--ltd-red);box-shadow:0 0 0 4px var(--red-dim)} .tl-title{font-weight:650;font-size:14.5px} .tl-meta{font-size:12.5px;color:var(--txt-3);font-family:var(--font-mono)} .tl-note{font-size:13px;color:var(--txt-2);margin-top:5px;padding:8px 11px;background:var(--ink-850);border-radius:8px;border-left:2px solid var(--line-2)} /* ---------- 14. TABS ---------- */ .tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none} .tabs::-webkit-scrollbar{display:none} .tab{ padding:12px 16px;background:transparent;border:0;border-bottom:2px solid transparent; color:var(--txt-3);font-weight:600;font-size:14px;cursor:pointer;white-space:nowrap;transition:.2s; } .tab:hover{color:var(--txt-2)} .tab.is-active{color:var(--txt);border-bottom-color:var(--ltd-red)} /* ---------- 15. ANIMATIONS PARTAGÉES ---------- */ .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .reveal.in{opacity:1;transform:none} .reveal[data-delay="1"]{transition-delay:.08s} .reveal[data-delay="2"]{transition-delay:.16s} .reveal[data-delay="3"]{transition-delay:.24s} .reveal[data-delay="4"]{transition-delay:.32s} .reveal[data-delay="5"]{transition-delay:.4s} @keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}} @keyframes spinSlow{to{transform:rotate(360deg)}} @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important} .reveal{opacity:1;transform:none} } /* ---------- 16. DÉCLENCHEUR "MENU" + MENU DÉROULANT ---------- Partagé par le site public (en-tête) ET l'administration/espace partenaire (barre du haut) — doit rester dans base.css puisque public.css n'est jamais chargé sur les pages admin/partenaire. */ .burger{ display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 8px 0 18px; border-radius:99px;background:var(--glass);border:1px solid var(--line-2);cursor:pointer; font-family:var(--font-display);font-weight:700;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt); transition:background .25s var(--ease),border-color .25s;position:relative;overflow:hidden;flex:none; } .burger:hover{background:var(--ink-500);border-color:var(--line-2)} .burger .burger-label{position:relative;z-index:1} .burger-ico{width:36px;height:36px;padding:8px;border-radius:50%;background:var(--ltd-red);color:#fff;flex:none;position:relative;transition:transform .4s var(--ease),opacity .3s} .burger-ico--close{position:absolute;right:4px;transform:rotate(-90deg) scale(.4);opacity:0} .burger.is-open .burger-ico--open{transform:rotate(90deg) scale(.4);opacity:0} .burger.is-open .burger-ico--close{position:static;transform:rotate(0) scale(1);opacity:1} @media(max-width:420px){ .burger{padding:0;width:44px;justify-content:center;gap:0} .burger .burger-label{display:none} .burger-ico{width:44px;height:44px;padding:11px} .burger-ico--close{right:0} } .mobile-nav{ position:fixed;top:calc(var(--nav-h) + 10px);right:16px;z-index:900; width:min(380px,calc(100vw - 32px));max-height:min(74vh,600px); background:rgba(13,15,19,.88);backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4); border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--shadow-2); overflow-y:auto; visibility:hidden;opacity:0;transform:translateY(-10px) scale(.97);transform-origin:top right; transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s; } .mobile-nav.is-open{visibility:visible;opacity:1;transform:none} .mobile-nav--left{right:auto;left:16px;transform-origin:top left} .mn-grid{padding:14px;display:flex;flex-direction:column;gap:4px;position:relative} .mn-bg{display:none} .mn-links ul{display:flex;flex-direction:column;gap:1px} .mn-links li{ opacity:0;transform:translateX(10px); transition:opacity .35s var(--ease),transform .35s var(--ease); transition-delay:calc(var(--i) * 35ms); border-bottom:0; } .mn-links li.in{opacity:1;transform:none} .mn-links li:first-child{border-top:0} .mn-links a{ display:flex;align-items:center;gap:14px;padding:12px 12px;border-radius:12px;position:relative; transition:background .2s var(--ease),padding .2s var(--ease); } .mn-links a:hover,.mn-links a:focus-visible{padding-left:16px;background:var(--glass)} .mn-idx{font-family:var(--font-mono);font-size:10.5px;color:var(--txt-3);letter-spacing:.08em;flex:none;width:20px} .mn-label{ flex:1 1 auto;font-family:var(--font-display);font-weight:800;text-transform:uppercase; font-size:16.5px;line-height:1.15;letter-spacing:-.01em;color:var(--txt-2); transition:color .2s var(--ease);text-shadow:none;background:none !important;-webkit-text-fill-color:currentColor !important; } .mn-links a:hover .mn-label,.mn-links a:focus-visible .mn-label,.mn-links a.is-active .mn-label{color:var(--txt)} .mn-chevron{flex:none;width:16px;height:16px;color:var(--ltd-red);opacity:0;transform:translateX(-8px);transition:.25s var(--ease)} .mn-links a:hover .mn-chevron,.mn-links a:focus-visible .mn-chevron{opacity:1;transform:none} .mn-links a.is-active::before{content:"";position:absolute;left:-2px;top:50%;width:5px;height:5px;border-radius:50%;background:var(--ltd-red);transform:translateY(-50%);box-shadow:0 0 0 4px var(--red-dim)} .mn-side{ display:flex;flex-direction:column;gap:10px;padding:12px 4px 4px;margin-top:6px;border-top:1px solid var(--line); opacity:0;transition:opacity .3s var(--ease) .2s; } .mobile-nav.is-open .mn-side{opacity:1} .mn-kicker{display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--txt-3);margin:6px 0 8px 12px} .mn-side-block a:not(.btn){display:flex;align-items:center;gap:9px;color:var(--txt-2);font-size:13.5px;font-weight:600;padding:9px 12px} .mn-side-block a:not(.btn):hover{color:var(--ltd-red-300)} .mn-side-block .btn{margin:0 4px;width:calc(100% - 8px)} .mn-status{display:flex;align-items:center;gap:9px;font-size:11.5px;color:var(--txt-3);padding:10px 12px 2px} @media(max-width:560px){ .mobile-nav{top:calc(var(--nav-h) + 6px);right:10px;left:10px;width:auto} .mn-label{font-size:16px} } @media (prefers-reduced-motion: reduce){ .mn-links li,.mn-side{transition:opacity .15s !important;transform:none !important} } /* En jeu (lb-phone) : la barre de statut du téléphone se pose par-dessus le haut de l'écran, à une hauteur qui dépend du skin du serveur et donc impossible à connaître avec certitude depuis le CSS (déjà pris en défaut une fois avec une marge fixe qui s'est révélée trop courte). Plutôt que de re-deviner un chiffre, le bouton menu est déplacé en bas à droite — une zone qu'aucune surcouche de ce type ne vient jamais recouvrir — pour que la navigation reste toujours accessible même si le header du haut est encore partiellement chevauché. */ html.in-game-phone #burger{ position:fixed;bottom:18px;right:16px;z-index:950; width:56px;height:56px;padding:0;justify-content:center;border-radius:50%; background:var(--ltd-red);border-color:transparent;box-shadow:0 8px 24px rgba(0,0,0,.45); } html.in-game-phone #burger .burger-label{display:none} html.in-game-phone #burger .burger-ico{background:transparent;width:26px;height:26px;padding:0} html.in-game-phone #mobilenav{top:auto;bottom:82px;transform-origin:bottom right} html.in-game-phone .mobile-nav--left{transform-origin:bottom left} /* ---------- CATALOGUE / FICHES PRODUIT — partagé entre le site public ET l'espace partenaire (chargé sur toutes les pages via base.css, pour éviter qu'une page perde ce style selon qu'elle inclue public.css ou app.css). ---------- */ .catalog-layout{display:grid;grid-template-columns:250px 1fr;gap:28px;align-items:start} @media(max-width:940px){.catalog-layout{grid-template-columns:1fr}} .filter-side{position:sticky;top:calc(var(--nav-h) + 18px)} @media(max-width:940px){.filter-side{position:static}} .filter-group{margin-bottom:22px} .filter-group h4{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-3);margin-bottom:12px} .cat-link{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:9px 12px;border-radius:9px;background:transparent;border:0;color:var(--txt-2);font-size:14px;cursor:pointer;text-align:left;transition:.18s} .cat-link:hover{background:var(--glass);color:var(--txt)} .cat-link.is-active{background:color-mix(in srgb, var(--ccat, var(--ltd-red)) 16%, transparent);color:var(--ccat, var(--ltd-red-300));font-weight:600} .cat-link .n{font-family:var(--font-mono);font-size:11.5px;opacity:.7} /* Pastille de couleur — catégorie réelle (base.categories.color, déjà choisie par catégorie côté admin mais jusque-là jamais affichée nulle part sur le site). */ .cat-link-dot{width:9px;height:9px;border-radius:50%;background:var(--ccat, var(--ltd-red));flex:none} .cat-link-label{display:flex;align-items:center;gap:9px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .product-card{ position:relative;background:var(--ink-800);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden; display:flex;flex-direction:column;transition:transform .3s var(--ease),border-color .28s,box-shadow .3s var(--ease); cursor:pointer;text-align:left;padding:0; } .product-card::before{content:"";position:absolute;top:0;left:14%;right:14%;height:2px;z-index:3; background:linear-gradient(90deg,transparent,var(--ccat, var(--ltd-red)),transparent);opacity:0;transition:opacity .3s} .product-card:hover{transform:translateY(-6px);border-color:var(--ccat, var(--ltd-red));box-shadow:var(--shadow-2),0 0 0 1px color-mix(in srgb, var(--ccat, var(--ltd-red)) 22%, transparent),0 22px 48px -22px var(--ltd-red-glow)} .product-card:hover::before{opacity:.9} .product-media{ position:relative;aspect-ratio:4/3;display:grid;place-items:center;overflow:hidden; background:radial-gradient(circle at 50% 40%,var(--ink-600),var(--ink-850)); } .product-media .glyph{font-size:54px;filter:saturate(.9) drop-shadow(0 8px 14px rgba(0,0,0,.4));transition:transform .45s var(--ease)} .product-media img{transition:transform .5s var(--ease)} .product-card:hover .product-media .glyph{transform:scale(1.12) rotate(-4deg)} .product-card:hover .product-media img{transform:scale(1.06)} .product-media img{width:100%;height:100%;object-fit:cover} /* Le positionnement des badges (Nouveauté / Pack) se fait via le conteneur .badges-stack (flex + gap) créé par productMedia() — une règle .badge{position:absolute} redondante ici plaçait CHAQUE badge individuellement au même endroit exact, les faisant se superposer illisiblement dès qu'un produit avait plusieurs badges à la fois. */ .product-media .stock-badge{position:absolute;top:10px;right:10px} .product-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:7px;flex:1} .product-body .ref{font-family:var(--font-mono);font-size:11px;color:var(--txt-3);letter-spacing:.05em} .product-body h3{font-size:16.5px;letter-spacing:-.015em;text-transform:none;line-height:1.28} .product-body .desc{font-size:13px;color:var(--txt-3);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em} .product-body .stock-line{font-size:11.5px;color:var(--txt-3)} .product-body .stock-line.low{color:#f59e0b} .product-body .stock-line.out{color:#ef4444} .product-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:12px;border-top:1px solid var(--line)} .price{font-family:var(--font-display);font-weight:700;font-size:19px;letter-spacing:-.02em} .price small{font-size:11px;color:var(--txt-3);font-family:var(--font-mono);font-weight:400} /* ---------- Filtres catégories — site public (chips horizontales, plus compact que la longue liste verticale d'origine, gère bien un grand nombre de catégories) ---------- */ .cat-chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px} .cat-chip{ display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:99px; background:var(--ink-800);border:1px solid var(--line);color:var(--txt-2);font-size:13px; cursor:pointer;transition:.18s var(--ease);white-space:nowrap; } .cat-chip:hover{border-color:var(--line-2);color:var(--txt)} .cat-chip.is-active{background:var(--red-dim);border-color:var(--ltd-red);color:var(--ltd-red-300);font-weight:600} .cat-chip .n{font-family:var(--font-mono);font-size:11px;opacity:.7} .qty{display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:9px;overflow:hidden} .qty button{width:34px;height:36px;background:transparent;border:0;color:var(--txt-2);cursor:pointer;font-size:16px} .qty button:hover{background:var(--glass);color:var(--txt)} .qty input{width:48px;height:36px;text-align:center;background:transparent;border:0;border-inline:1px solid var(--line);font-family:var(--font-mono);font-size:13px} .qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .qty input[type=number]{-moz-appearance:textfield} /* ---------- CATALOGUE / NOUVELLE COMMANDE — layout élargi avec panier visible ---------- */ .catalog-layout--cart{grid-template-columns:220px 1fr 290px} @media(max-width:1180px){.catalog-layout--cart{grid-template-columns:220px 1fr}} @media(max-width:940px){.catalog-layout--cart{grid-template-columns:1fr}} .partner-catalog-banner{display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:var(--r-lg); border:1px solid var(--line);border-left:3px solid var(--ltd-red);background:var(--ink-800); margin-bottom:18px;font-size:13.5px;color:var(--txt-2)} .partner-catalog-banner .pcb-ico{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center; background:var(--red-dim);color:var(--ltd-red-300)} .cart-side{grid-column:3} @media(max-width:1180px){.cart-side{grid-column:1/-1}} .cart-side{position:sticky;top:calc(var(--nav-h,0px) + 18px);background:var(--ink-800);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden} .cart-side-head{padding:16px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between} .cart-side-head h3{font-size:15px;margin:0} .cart-side-lines{max-height:340px;overflow-y:auto} .cart-line{display:flex;align-items:center;gap:10px;padding:10px 18px;border-bottom:1px solid var(--line)} .cart-line:last-child{border-bottom:0} .cart-line .cl-name{font-size:13px;font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cart-line .cl-price{font-size:12px;color:var(--txt-3);font-family:var(--font-mono)} .cart-side-foot{padding:16px 18px;border-top:1px solid var(--line);background:var(--ink-850)} .cart-side-total{display:flex;justify-content:space-between;align-items:center;font-size:15px;margin-bottom:12px} .cart-side-total b{font-family:var(--font-mono);font-size:19px} .cart-empty{padding:28px 18px;text-align:center;color:var(--txt-3);font-size:13px} /* ---------- Vue "Liste" — outil de commande partenaire, volontairement différent des cartes vitrine du site public (dense, orienté inventaire, pas de grand hover). ---------- */ .view-toggle{display:inline-flex;border:1px solid var(--line-2);border-radius:9px;overflow:hidden} .view-toggle button{width:36px;height:34px;display:grid;place-items:center;background:transparent;border:0;color:var(--txt-3);cursor:pointer;transition:.15s} .view-toggle button:not(:last-child){border-right:1px solid var(--line-2)} .view-toggle button.is-active{background:var(--red-dim);color:var(--ltd-red-300)} .view-toggle button:hover:not(.is-active){color:var(--txt)} .order-list{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden} .order-row{display:flex;align-items:center;gap:14px;padding:11px 14px;background:var(--ink-800)} .order-row.is-out{opacity:.55} .order-row .or-media{width:44px;height:44px;border-radius:9px;flex:none;display:grid;place-items:center;background:var(--ink-700);font-size:21px;overflow:hidden} .order-row .or-media img{width:100%;height:100%;object-fit:cover} .order-row .or-info{flex:1;min-width:0} .order-row .or-info .ref{font-family:var(--font-mono);font-size:10.5px;color:var(--txt-3);letter-spacing:.05em;display:block} .order-row .or-info b{font-size:14px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .order-row .or-stock{font-size:11.5px;color:var(--txt-3);flex:none;width:110px;display:none} .order-row .or-stock.low{color:#f59e0b} .order-row .or-stock.out{color:#ef4444} .order-row .or-price{font-family:var(--font-display);font-weight:700;font-size:15px;flex:none;width:64px;text-align:right} .order-row .or-act{flex:none;width:120px;display:flex;justify-content:flex-end} @media(min-width:760px){.order-row .or-stock{display:block}} @media(max-width:560px){.order-row{flex-wrap:wrap}.order-row .or-price{order:3;width:auto}.order-row .or-act{order:4;width:auto;margin-left:auto}} /* ---------- Confinement des emoji (glyphes catégories/produits) ---------- Le navigateur intégré de FiveM (CEF) ne dispose pas toujours d'une police couleur emoji correctement enregistrée sur certaines configs Windows : un glyphe emoji peut alors se retrouver rendu comme un caractère de remplacement ("tofu") démesuré et flou, qui étire toute la ligne. Ces règles bornent strictement la taille de tout glyphe emoji pour qu'il ne puisse jamais casser la mise en page, même si le rendu est imparfait. */ .glyph-ico{display:inline-flex;align-items:center;justify-content:center;width:1.15em;height:1.15em;overflow:hidden;font-size:1em;line-height:1;vertical-align:-0.15em} .cat-link{overflow:hidden} /* ---------- Studio de personnalisation — galerie de thèmes ---------- */ .theme-card{transition:transform .18s var(--ease),border-color .18s} .theme-card:hover{transform:translateY(-3px);border-color:var(--line-2)} .theme-card.is-active{box-shadow:0 0 0 1px var(--ltd-red)} /* ---------- Webhooks & intégrations (cartes) ---------- */ .wh-card{padding:18px} .wh-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:4px} .wh-card-type{display:flex;align-items:flex-start;gap:10px} .wh-type-ico{flex:none;width:36px;height:36px;border-radius:10px;display:grid;place-items:center; background:var(--ink-600);font-size:17px;line-height:1} .wh-card-head h3{font-size:15.5px;margin:0} .wh-card-desc{font-size:13px;margin:6px 0} .wh-card-url{font-size:11.5px;color:var(--txt-3);background:var(--ink-700);border-radius:7px;padding:8px 10px;margin-top:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .wh-card-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px} .wh-ping-badge{display:inline-flex;align-items:center;gap:5px} .wh-ping-badge .ico{opacity:.85} .wh-card-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)} .wh-card-actions .wh-danger{color:#ff8a8a} /* ---------- Studio Catalogue & tarifs par partenaire ---------- */ .pcat-list{max-height:52vh;overflow-y:auto;border:1px solid var(--line);border-radius:var(--r-sm)} .pcat-row{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--line);opacity:.6;transition:.15s} .pcat-row:last-child{border-bottom:0} .pcat-row.is-on{opacity:1;background:var(--red-dim)} .pcat-glyph{font-size:20px;flex:none} .pcat-info{flex:1;min-width:0;display:flex;flex-direction:column} .pcat-price{text-align:right} /* ---------- Chat (partenaire <-> LTD, employé <-> partenaire) ---------- */ .chat-card{display:flex;flex-direction:column;height:min(70vh,600px)} .chat-body{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:12px} .chat-bubble{max-width:74%;padding:10px 14px;border-radius:14px} .chat-bubble--them{align-self:flex-start;background:var(--ink-700);border-bottom-left-radius:4px} .chat-bubble--me{align-self:flex-end;background:var(--ltd-red);color:#fff;border-bottom-right-radius:4px} .chat-meta{font-size:10.5px;opacity:.7;margin-bottom:3px} .chat-text{font-size:14px;line-height:1.5;white-space:pre-wrap;word-break:break-word} .chat-empty{margin:auto;color:var(--txt-3);font-size:13.5px;text-align:center;padding:20px} .chat-form{display:flex;gap:10px;padding:14px;border-top:1px solid var(--line)} .chat-form input{flex:1;background:var(--ink-700);border:1px solid var(--line-2);border-radius:9px;padding:10px 14px;color:var(--txt);font-size:14px;min-width:0} .chat-form input:focus{outline:none;border-color:var(--ltd-red)} /* ---------- Présence & indicateur de frappe ---------- */ .chat-presence{display:flex;align-items:center;gap:7px;padding:9px 16px;font-size:12px;color:var(--txt-3);border-bottom:1px solid var(--line)} .presence-dot{width:8px;height:8px;border-radius:50%;background:var(--txt-4,#5a5f68);flex:none} .presence-dot.is-on{background:var(--ok);box-shadow:0 0 0 3px var(--ok-dim,rgba(52,199,89,.18))} .chat-typing-row{display:flex;align-items:center;gap:8px;padding:6px 16px;font-size:12px;color:var(--txt-3);font-style:italic} .typing-dots{display:inline-flex;gap:3px} .typing-dots i{width:5px;height:5px;border-radius:50%;background:var(--txt-3);animation:typingBounce 1.1s infinite ease-in-out} .typing-dots i:nth-child(2){animation-delay:.15s} .typing-dots i:nth-child(3){animation-delay:.3s} @keyframes typingBounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-3px);opacity:1}} /* ---------- Timeline de candidature ---------- */ .app-timeline{padding-left:26px;margin-top:4px} .app-timeline .tl-item{padding-bottom:14px} .app-timeline .tl-title{font-size:13px;font-weight:600;color:var(--txt-3)} .app-timeline .tl-item.done .tl-title,.app-timeline .tl-item.active .tl-title{color:var(--txt)} .chat-badge-new{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ltd-red);margin-left:6px;animation:pulseNew 1.6s infinite} @keyframes pulseNew{0%,100%{opacity:1}50%{opacity:.35}} /* ---------- Liste des conversations (admin) ---------- */ .chat-partner-row{display:flex;align-items:center;gap:10px;width:100%;padding:11px 14px;background:transparent;border:0;border-bottom:1px solid var(--line);text-align:left;cursor:pointer;color:var(--txt)} .chat-partner-row:last-child{border-bottom:0} .chat-partner-row:hover{background:var(--glass)} .chat-partner-row.is-active{background:var(--red-dim)} .cp-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} .cp-info b{font-size:13.5px} .cp-last{font-size:12px;color:var(--txt-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .chat-partner-row .pill{flex:none;min-width:20px;height:19px;border-radius:10px;background:var(--ltd-red);color:#fff;font-size:10.5px;font-weight:700;display:grid;place-items:center;padding:0 5px} @media(max-width:860px){#chatLayout{grid-template-columns:1fr !important}} .app-chat-box{border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:var(--ink-850)} .app-chat-box .chat-body{max-height:260px} /* ---------- FICHE CANDIDATURE (vue « propre », admin Recrutement) ---------- */ .app-view-head{display:flex;align-items:center;gap:14px} .app-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:14px 0} @media(max-width:520px){.app-facts{grid-template-columns:1fr}} .app-fact{background:var(--ink-800);border:1px solid var(--line);border-radius:10px;padding:11px 13px} .app-fact .fk{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--txt-3);margin-bottom:3px} .app-fact .fv{font-size:14px;font-weight:600;color:var(--txt)} .app-note{background:var(--ink-800);border:1px solid var(--line);border-left:3px solid var(--ltd-red-300);border-radius:10px;padding:14px 16px;margin-top:12px} .app-note h4{display:flex;align-items:center;gap:7px;font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--txt-3);margin:0 0 8px} .app-note p{margin:0;font-size:13.5px;line-height:1.6;color:var(--txt-2)} .app-note--warn{border-left-color:var(--warn)} .app-note--warn h4{color:#ffc35c} /* Disponibilité déclarée en admin (fiche candidature) : tableau jours × créneaux en lecture seule — mêmes noms de classes que la grille cochable du formulaire public (public.css), mais entièrement scopés sous --readonly pour ne jamais interférer avec elle. */ .avail-grid--readonly{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:2px} .avail-grid--readonly .avail-grid-head,.avail-grid--readonly .avail-grid-row{display:grid;grid-template-columns:1fr repeat(3,64px);align-items:center} .avail-grid--readonly .avail-grid-head{background:var(--ink-850);padding:8px 12px;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--txt-3)} .avail-grid--readonly .avail-grid-head span:first-child{text-align:left} .avail-grid--readonly .avail-grid-head span{text-align:center} .avail-grid--readonly .avail-grid-row{padding:6px 12px;border-top:1px solid var(--line)} .avail-grid--readonly .avail-grid-day{font-size:13px;color:var(--txt-2)} .avail-adm-cell{display:flex;align-items:center;justify-content:center;height:26px;color:var(--txt-4,var(--txt-3))} .avail-adm-cell.is-on{color:var(--ltd-red)} @media(max-width:480px){.avail-grid--readonly .avail-grid-head,.avail-grid--readonly .avail-grid-row{grid-template-columns:1fr repeat(3,44px)}} /* Mini-grille de disponibilité pour le tableau Recrutement — 7 pastilles (une par jour), remplissage proportionnel au nombre de créneaux cochés ce jour-là (0 à 3), pour repérer la "forme" de la dispo (plutôt semaine/week-end/soir) sans ouvrir la fiche candidature. */ .avail-mini{display:flex;gap:3px} .avail-mini-dot{display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;font-size:9.5px;font-weight:700;border:1px solid var(--line);color:var(--txt-4,var(--txt-3));cursor:default} .avail-mini-dot--0{background:transparent} .avail-mini-dot--1{background:var(--info);color:#fff;border-color:transparent} .avail-mini-dot--2{background:var(--warn);color:#1a1a1a;border-color:transparent} .avail-mini-dot--3{background:var(--ok);color:#0a1f10;border-color:transparent} /* Présence à l'entretien (page Recrutement) — trois points cliquables par ligne : gris = message de convocation envoyé, en attente de réponse ; vert = présence confirmée ; rouge = pas répondu / indisponible. Alignés à gauche comme les autres colonnes (Poste, Date, Disponibilité, Statut) — pas de justify-content:flex-end, sinon l'en-tête "Présence" (aligné à gauche par défaut comme les autres) et les points (à droite) se retrouvent décalés l'un de l'autre. Rien n'est coché par défaut : les trois restent de simples anneaux tant qu'aucun clic n'a eu lieu, seul le point choisi se remplit. */ .att-dots{display:flex;gap:6px} .att-dot{width:16px;height:16px;border-radius:50%;border:2px solid var(--line);background:transparent;padding:0;cursor:pointer;transition:transform .12s,background .12s,border-color .12s} .att-dot:hover{transform:scale(1.15)} .att-dot--wait.is-active{background:var(--txt-4,var(--txt-3));border-color:transparent} .att-dot--yes.is-active{background:var(--ok);border-color:transparent} .att-dot--no.is-active{background:var(--danger);border-color:transparent} /* Test d'entretien (notation par "gommette", pas un curseur) — Administration → Recrutement, réservé aux Seniors (permission senior.dashboard). */ .interview-q-row{padding:10px 0;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap} .interview-q-row:first-child{border-top:0} .interview-q-text{font-size:13.5px;color:var(--txt-2);flex:1;min-width:200px} .star-picker{display:flex;gap:2px} .star-btn{background:none;border:0;padding:2px;cursor:pointer;color:var(--line);line-height:0;transition:transform .1s} .star-btn:hover{transform:scale(1.15)} .star-btn.is-on{color:#f5b400} .interview-score{font-size:22px;font-weight:800;color:var(--ltd-red)} .interview-score-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--txt-3)} /* ---------- EFFETS D'AMBIANCE PAR THÈME (Personnalisation) ---------- */ #ltdThemeFx{position:fixed!important;inset:0!important;z-index:999999!important;pointer-events:none!important;overflow:hidden!important;display:block} #ltdThemeFx.is-off{display:none!important} .ltd-fx-particle{position:absolute;top:0;left:0;line-height:1;user-select:none;will-change:transform,opacity;animation-iteration-count:infinite} .ltd-fx--fall{animation-name:ltdFxFall;animation-timing-function:linear} .ltd-fx--fall-sway{animation-name:ltdFxFallSway;animation-timing-function:linear} .ltd-fx--fly{animation-name:ltdFxFly;animation-timing-function:linear} .ltd-fx--twinkle{animation-name:ltdFxTwinkle;animation-timing-function:ease-in-out;color:#fff} .ltd-fx--rise{animation-name:ltdFxRise;animation-timing-function:linear} @keyframes ltdFxFall{from{transform:translateY(-8vh);opacity:.9}to{transform:translateY(108vh);opacity:.6}} @keyframes ltdFxFallSway{ 0%{transform:translate(0,-8vh);opacity:.9} 50%{transform:translate(46px,54vh)} 100%{transform:translate(-30px,108vh);opacity:.6} } @keyframes ltdFxFly{ 0%{transform:translate(0,20vh);opacity:0} 10%{opacity:.85} 90%{opacity:.85} 100%{transform:translate(105vw,10vh);opacity:0} } @keyframes ltdFxTwinkle{0%,100%{opacity:.15;transform:scale(.8)}50%{opacity:1;transform:scale(1.25)}} @keyframes ltdFxRise{0%{transform:translateY(100vh);opacity:0}15%{opacity:.7}100%{transform:translateY(-10vh);opacity:0}} .ltd-fx-santa{ position:absolute;top:8%;left:-20vw;font-size:34px;letter-spacing:-4px; animation:ltdFxSanta 12s linear forwards;filter:drop-shadow(0 6px 10px rgba(0,0,0,.5)); } @keyframes ltdFxSanta{ 0%{transform:translate(0,0)} 50%{transform:translate(60vw,-3vh)} 100%{transform:translate(130vw,2vh)} } /* ---------- LIGNES "CLÉ : VALEUR" (fiches partenaire, candidature, commande…) ---------- */ /* Partagé entre le site public (public.css n'est pas chargé en admin) et l'administration — avant, ce bloc vivait uniquement dans public.css et ne s'appliquait donc jamais aux fiches admin (commande, partenaire, candidature), qui affichaient les libellés collés à la valeur. */ .dispatch-row .k::after{content:" :";margin-right:6px} /* ---------- FICHE COMMANDE (admin) — infos de dispatch ---------- */ .order-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px} .order-info-card{ display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px; background:var(--ink-800);border:1px solid var(--line); } .order-info-card--full{grid-column:1/-1} /* --tint réglé carte par carte (voir orderInfoCard() dans pages-admin.js) — une couleur par nature d'info (origine, mode, créneau, téléphone...) plutôt qu'un bloc rouge uniforme répété pour chaque carte, qui rendait la fiche commande illisible à force de répétition. */ .order-info-ico{ width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none; background:color-mix(in srgb, var(--tint, var(--ltd-red-300)) 16%, transparent); color:var(--tint, var(--ltd-red-300)); } .order-info-lbl{display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3);margin-bottom:3px} .order-info-val{display:block;font-size:13.5px;font-weight:600} @media(max-width:640px){.order-info-grid{grid-template-columns:1fr}} /* ---------- Suivi : mention "actualisé automatiquement" ---------- */ .track-autorefresh{display:flex;align-items:center;gap:7px;justify-content:center;padding:10px;font-size:11.5px;color:var(--txt-3);border-top:1px solid var(--line)}