/*! Void UI — 158 composants · 2026-10-25 · https://ui.voidlabs.fr/
puis copie le HTML d'un composant depuis la galerie. */
@font-face { font-family: "Nunito"; font-weight: 600; font-display: swap; src: url("https://ui.voidlabs.fr/nunito-600.ttf") format("truetype"); }
@font-face { font-family: "Nunito"; font-weight: 800; font-display: swap; src: url("https://ui.voidlabs.fr/nunito-800.ttf") format("truetype"); }
:root {
--bg: #07060f;
--deep: #0d0b1c;
--surface: #110e24;
--surface-2: #171330;
--border: rgba(160, 140, 255, 0.14);
--border-2: rgba(160, 140, 255, 0.3);
--text: #f0eeff;
--muted: #a7a1cf;
--dim: #6c6796;
--accent: #9a6cff;
--accent-2: #5fe8f0;
--grad: linear-gradient(100deg, #9a6cff, #5fe8f0);
--accent-ink: #07060f;
--accent-soft: rgba(154, 108, 255, 0.1);
--accent-glow: rgba(154, 108, 255, 0.35);
--green: #4ade80;
--red: #f87171;
--orange: #fbbf24;
--blue: #5fe8f0;
--radius: 18px;
--radius-sm: 12px;
--font: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
body {
margin: 0;
background: var(--bg);
color: var(--text);
font: 600 16px/1.6 var(--font);
-webkit-font-smoothing: antialiased;
}
/* ═════ Typographie ═════ */
/* Titre hero — hero */
.v-hero{max-width:640px}
.v-eyebrow{font:800 13px var(--font);color:var(--accent-2);letter-spacing:3px;text-transform:uppercase}
.v-hero__title{margin:12px 0 10px;font:800 clamp(40px,7vw,64px)/1 var(--font);letter-spacing:-.02em;color:var(--text)}
.v-hero__sub{margin:0;font-size:18px;color:var(--muted)}
.v-hl{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
/* Titre avec mot surligné — gradient-title */
.v-hl-title{margin:0;font:800 44px/1.05 var(--font);letter-spacing:-.02em;color:var(--text)}
/* Label de section — section-label */
.v-label{display:flex;align-items:center;gap:12px;font:500 13px var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.v-label__num{color:var(--accent)}
.v-label__line{width:40px;height:1px;background:var(--border-2)}
/* ═════ Boutons ═════ */
/* Bouton principal (glow) — btn-primary */
.v-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 32px;border:0;border-radius:var(--radius);background:var(--grad);color:var(--accent-ink);font:600 17px var(--font);cursor:pointer;box-shadow:0 0 40px var(--accent-glow);transition:transform .15s,box-shadow .2s}
.v-btn:hover{transform:translateY(-1px);box-shadow:0 0 60px var(--accent-glow)}
.v-btn:active{transform:translateY(0)}
.v-btn__arrow{transition:transform .2s}
.v-btn:hover .v-btn__arrow{transform:translateX(4px)}
/* Variantes de boutons — btn-variants */
.v-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.v-btn2{padding:10px 18px;border-radius:999px;font:600 14px var(--font);cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.v-btn2--solid{background:var(--grad);color:var(--accent-ink);border:1px solid var(--accent)}
.v-btn2--solid:hover{filter:brightness(.92)}
.v-btn2--outline{background:var(--accent-soft);color:var(--accent);border:1px solid rgba(154,108,255,.35)}
.v-btn2--outline:hover{background:rgba(154,108,255,.14)}
.v-btn2--ghost{background:transparent;color:var(--text);border:1px solid var(--border-2)}
.v-btn2--ghost:hover{background:var(--surface-2)}
.v-btn2--danger{background:rgba(239,68,68,.1);color:var(--red);border:1px solid rgba(239,68,68,.35)}
/* Bouton icône — btn-icon */
.v-icon-btn{width:40px;height:40px;display:grid;place-items:center;border-radius:10px;border:1px solid var(--border-2);background:var(--surface);color:var(--text);font-size:18px;cursor:pointer;transition:background .15s,border-color .15s}
.v-icon-btn:hover{background:var(--surface-2);border-color:var(--dim)}
.v-icon-btn--accent{background:var(--grad);color:var(--accent-ink);border-color:var(--accent);box-shadow:0 0 24px var(--accent-glow)}
/* ═════ Formulaires ═════ */
/* Champ texte — input */
.v-field{display:flex;flex-direction:column;gap:8px;width:100%;max-width:380px}
.v-field__label{font:500 14px var(--font);color:var(--text)}
.v-field__hint{font-size:13px;color:var(--dim)}
.v-input{padding:13px 16px;border:1px solid var(--border-2);border-radius:10px;background:var(--surface);color:var(--text);font:15px var(--font);outline:none;transition:border-color .15s,box-shadow .15s}
.v-input::placeholder{color:var(--dim)}
.v-input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
/* Champ style commande — input-cmd */
.v-cmd-input{display:flex;align-items:center;gap:10px;width:100%;max-width:480px;padding:12px 16px;background:var(--deep);border:1px solid var(--border);border-radius:10px;font-family:var(--mono);transition:border-color .15s}
.v-cmd-input:focus-within{border-color:var(--accent)}
.v-cmd-input__prompt{color:var(--accent)}
.v-cmd-input input{flex:1;background:none;border:0;outline:none;color:var(--text);font:14px var(--mono)}
.v-cmd-input input::placeholder{color:var(--dim)}
.v-cmd-input kbd{color:var(--dim);font-size:12px;border:1px solid var(--border-2);border-radius:5px;padding:1px 6px}
/* Select — select */
.v-select{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid var(--border-2);border-radius:8px;background:var(--surface);font-size:14px}
.v-select select{appearance:none;background:none;border:0;outline:none;color:var(--text);font:14px var(--font);padding-right:16px;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:right 5px center,right 0 center;background-size:5px 5px;background-repeat:no-repeat}
.v-select option{background:var(--surface)}
/* Interrupteur — toggle */
.v-toggle{display:inline-flex;align-items:center;gap:12px;color:var(--text);font-size:15px;cursor:pointer}
.v-toggle input{position:absolute;opacity:0;pointer-events:none}
.v-toggle__track{position:relative;width:44px;height:24px;border-radius:999px;background:var(--border-2);transition:background .2s}
.v-toggle__track::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--text);transition:transform .2s}
.v-toggle input:checked+.v-toggle__track{background:var(--grad);box-shadow:0 0 16px var(--accent-glow)}
.v-toggle input:checked+.v-toggle__track::after{transform:translateX(20px);background:var(--accent-ink)}
.v-toggle input:focus-visible+.v-toggle__track{outline:2px solid var(--accent);outline-offset:3px}
/* Cases à cocher — checkbox */
.v-checks{display:flex;flex-direction:column;gap:12px}
.v-check{display:inline-flex;align-items:center;gap:10px;color:var(--text);font-size:15px;cursor:pointer}
.v-check input{position:absolute;opacity:0;pointer-events:none}
.v-check__box{width:20px;height:20px;border:1px solid var(--border-2);border-radius:6px;background:var(--surface);display:grid;place-items:center;transition:background .15s,border-color .15s}
.v-check input:checked+.v-check__box{background:var(--grad);border-color:var(--accent)}
.v-check input:checked+.v-check__box::after{content:'✓';color:var(--accent-ink);font-size:13px;font-weight:700}
.v-check input:focus-visible+.v-check__box{outline:2px solid var(--accent);outline-offset:2px}
/* Contrôle segmenté — segmented */
.v-seg{display:inline-flex;padding:4px;border:1px solid var(--border);border-radius:999px;background:var(--surface)}
.v-seg input{position:absolute;opacity:0}
.v-seg label{padding:8px 18px;border-radius:999px;color:var(--muted);font:500 14px var(--font);cursor:pointer;transition:background .15s,color .15s}
.v-seg label em{font-style:normal;color:var(--accent);font-size:12px}
.v-seg input:checked+label{background:var(--text);color:var(--bg)}
.v-seg input:checked+label em{color:var(--bg)}
/* Choix en cartes (radio) — radio-cards */
.v-radio{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;width:100%;max-width:560px}
.v-radio input{position:absolute;opacity:0;pointer-events:none}
.v-radio span{position:relative;display:grid;gap:4px;padding:16px 16px 16px 44px;border:1px solid var(--border-2);border-radius:var(--radius);background:var(--surface);cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s}
.v-radio span::before{content:"";position:absolute;left:16px;top:18px;width:16px;height:16px;border-radius:50%;border:2px solid var(--border-2);box-sizing:border-box;transition:border .15s}
.v-radio b{font:700 15px var(--font);color:var(--text)}
.v-radio small{font:13px var(--font);color:var(--muted)}
.v-radio em{font:600 13px var(--mono);font-style:normal;color:var(--accent-2)}
.v-radio label:hover span{border-color:rgba(154,108,255,.4)}
.v-radio input:checked+span{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 24px var(--accent-glow)}
.v-radio input:checked+span::before{border:5px solid var(--accent)}
.v-radio input:focus-visible+span{outline:2px solid var(--accent-2);outline-offset:2px}
/* Curseur (range) — range */
.v-range{display:grid;gap:10px;width:100%;max-width:360px;font:500 14px var(--font);color:var(--muted)}
.v-range__top{display:flex;justify-content:space-between}
.v-range__top b{color:var(--text);font-family:var(--mono)}
.v-range input{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--accent-2)) 0/var(--p,50%) 100% no-repeat,var(--surface-2);outline:none;cursor:pointer}
.v-range input::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--text);border:3px solid var(--accent);box-shadow:0 0 16px var(--accent-glow)}
.v-range input::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--text);border:3px solid var(--accent);box-shadow:0 0 16px var(--accent-glow)}
.v-range__ticks{display:flex;justify-content:space-between;font:12px var(--mono);color:var(--dim)}
/* Champ à étiquettes — tag-input */
.v-tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px;width:100%;max-width:420px;min-height:46px;padding:7px 10px;border:1px solid var(--border-2);border-radius:var(--radius-sm);background:var(--surface);cursor:text;box-sizing:border-box;transition:border-color .15s,box-shadow .15s}
.v-tags:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.v-tags__t{display:inline-flex;align-items:center;gap:4px;padding:4px 6px 4px 10px;border-radius:99px;background:var(--accent-soft);border:1px solid rgba(154,108,255,.35);color:var(--accent);font:600 13px var(--font)}
.v-tags__t button{width:18px;height:18px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;font-size:14px;cursor:pointer}
.v-tags__t button:hover{background:rgba(154,108,255,.25)}
.v-tags input{flex:1;min-width:90px;border:0;background:transparent;color:var(--text);font:14px var(--font);outline:none}
.v-tags input::placeholder{color:var(--dim)}
/* Code de vérification (OTP) — otp */
.v-otp{display:grid;justify-items:center;gap:14px;font:14px var(--font);color:var(--muted)}
.v-otp p{margin:0;color:var(--text);font-weight:600}
.v-otp__cells{display:flex;align-items:center;gap:8px}
.v-otp__cells span{color:var(--dim)}
.v-otp__cells input{width:46px;height:56px;border:1px solid var(--border-2);border-radius:12px;background:var(--surface);color:var(--text);font:700 22px var(--mono);text-align:center;outline:none;transition:border-color .15s,box-shadow .15s}
.v-otp__cells input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft),0 0 20px var(--accent-glow)}
.v-otp a{color:var(--accent-2);text-decoration:none}
/* Zone de dépôt de fichiers — dropzone */
.v-dropz{position:relative;display:grid;justify-items:center;gap:6px;width:100%;max-width:420px;padding:32px 20px;border:2px dashed var(--border-2);border-radius:var(--radius);background:var(--surface);text-align:center;cursor:pointer;transition:border-color .15s,background .15s}
.v-dropz:hover,.v-dropz:focus-within{border-color:var(--accent);background:var(--accent-soft)}
.v-dropz input{position:absolute;inset:0;opacity:0;cursor:pointer}
.v-dropz__ic{width:48px;height:48px;display:grid;place-items:center;border-radius:14px;background:var(--grad);color:var(--accent-ink);font-size:22px;box-shadow:0 0 30px var(--accent-glow);margin-bottom:6px}
.v-dropz b{font:700 16px var(--font);color:var(--text)}
.v-dropz small{font:13px var(--font);color:var(--muted)}
.v-dropz u{color:var(--accent-2);text-decoration:none}
.v-dropz__file{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;width:100%;max-width:420px;margin-top:12px;padding:10px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);font:13px var(--mono);color:var(--text)}
.v-dropz__file i{height:4px;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--accent-2)) 0/var(--w) 100% no-repeat,var(--surface-2)}
.v-dropz__file small{color:var(--muted)}
/* Recherche avec suggestions — search-results */
.v-search{width:100%;max-width:440px;border:1px solid var(--border-2);border-radius:14px;background:var(--surface);overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.4)}
.v-search__box{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--border)}
.v-search__box span{color:var(--accent);font-size:18px}
.v-search__box input{flex:1;border:0;background:transparent;color:var(--text);font:15px var(--font);outline:none}
.v-search kbd{font:11px var(--mono);color:var(--dim);border:1px solid var(--border-2);border-radius:5px;padding:2px 6px}
.v-search__list{list-style:none;margin:0;padding:6px}
.v-search__list li{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:9px;cursor:pointer}
.v-search__list li:hover,.v-search__list li.is-on{background:var(--accent-soft)}
.v-search__list li>span{width:30px;height:30px;display:grid;place-items:center;border-radius:8px;background:var(--surface-2);font-size:14px}
.v-search__list div{flex:1;display:grid}
.v-search__list b{font:600 14px var(--font);color:var(--text)}
.v-search__list mark{background:none;color:var(--accent-2)}
.v-search__list small{font:12px var(--font);color:var(--muted)}
/* Note (étoiles) — rating */
.v-rate{display:inline-flex;flex-direction:row-reverse;gap:4px}
.v-rate input{position:absolute;opacity:0;pointer-events:none}
.v-rate label{font-size:30px;line-height:1;color:var(--border-2);cursor:pointer;transition:color .15s,transform .15s,text-shadow .15s}
.v-rate input:checked~label,.v-rate label:hover,.v-rate label:hover~label{color:var(--accent-2);text-shadow:0 0 12px var(--accent-glow)}
.v-rate label:hover{transform:scale(1.15)}
.v-rate input:focus-visible+label{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
/* Choix de couleur — swatches */
.v-swatch{display:flex;flex-wrap:wrap;gap:12px}
.v-swatch label{cursor:pointer}
.v-swatch input{position:absolute;opacity:0;pointer-events:none}
.v-swatch span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px var(--bg),0 0 0 4px transparent;transition:box-shadow .2s,transform .2s}
.v-swatch label:hover span{transform:scale(1.08)}
.v-swatch input:checked+span{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--c),0 0 18px var(--c)}
.v-swatch input:checked+span::after{content:"✓";font:800 15px var(--font);color:var(--bg)}
.v-swatch input:focus-visible+span{outline:2px solid var(--text);outline-offset:6px}
/* Panneau de réglages — settings */
.v-settings{width:100%;max-width:480px;padding:4px 20px 6px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);font-family:var(--font)}
.v-settings h4{margin:18px 0 2px;font:600 11px var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--dim)}
.v-settings__row{display:flex;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--border);cursor:pointer}
.v-settings__row:last-child{border-bottom:0}
.v-settings__row>div{flex:1}
.v-settings__row b{display:block;font:700 14px var(--font);color:var(--text)}
.v-settings__row small{display:block;margin-top:2px;font:13px var(--font);color:var(--muted)}
.v-settings__row input{position:absolute;opacity:0;pointer-events:none}
.v-settings__row span{position:relative;flex:none;width:40px;height:22px;border-radius:99px;background:var(--surface-2);border:1px solid var(--border-2);transition:background .2s,border-color .2s,box-shadow .2s}
.v-settings__row span::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--muted);transition:transform .2s,background .2s}
.v-settings__row input:checked+span{background:var(--accent);border-color:var(--accent);box-shadow:0 0 12px var(--accent-glow)}
.v-settings__row input:checked+span::after{transform:translateX(18px);background:var(--accent-ink)}
.v-settings__row input:focus-visible+span{outline:2px solid var(--accent-2);outline-offset:2px}
.v-settings__danger{cursor:default}
.v-settings__danger b{color:var(--red)}
.v-settings__danger button{padding:8px 14px;border:1px solid color-mix(in srgb,var(--red) 50%,transparent);border-radius:var(--radius-sm);background:color-mix(in srgb,var(--red) 12%,transparent);color:var(--red);font:700 13px var(--font);cursor:pointer;transition:background .15s,color .15s}
.v-settings__danger button:hover{background:var(--red);color:var(--bg)}
/* ═════ Navigation ═════ */
/* Barre de navigation — navbar */
.v-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:14px 20px;border-bottom:1px solid var(--border);background:rgba(7,6,15,.78);backdrop-filter:blur(12px)}
.v-nav a{color:inherit;text-decoration:none}
.v-nav__brand{display:flex;align-items:center;gap:10px;font:700 20px var(--font);letter-spacing:-.015em;color:var(--text)}
.v-nav__logo{width:32px;height:32px;display:grid;place-items:center;border-radius:8px;background:var(--grad);color:var(--accent-ink);font-size:14px}
.v-nav__dot{color:var(--accent)}
.v-nav__links{display:flex;gap:24px;color:var(--muted);font-size:14px}
.v-nav__links a:hover{color:var(--text)}
.v-nav__actions{display:flex;gap:10px}
.v-nav__aff{padding:8px 16px;border:1px solid rgba(154,108,255,.35);border-radius:999px;background:var(--accent-soft);color:var(--accent);font:600 14px var(--font)}
.v-nav__login{padding:8px 16px;border:1px solid var(--border-2);border-radius:999px;color:var(--text);font:600 14px var(--font)}
@media(max-width:720px){.v-nav__links{display:none}}
/* Sidebar — sidebar */
.v-side{display:flex;flex-direction:column;gap:2px;width:240px;padding:12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
.v-side__group{padding:12px 10px 6px;font:500 11px var(--mono);color:var(--dim);text-transform:uppercase;letter-spacing:.1em}
.v-side__item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;color:var(--muted);text-decoration:none;font-size:14px}
.v-side__item span{width:16px;text-align:center;color:var(--dim)}
.v-side__item em{margin-left:auto;font:normal 12px var(--mono);color:var(--dim)}
.v-side__item:hover{background:var(--surface-2);color:var(--text)}
.v-side__item.active{background:var(--accent-soft);color:var(--accent)}
.v-side__item.active span{color:var(--accent)}
/* Onglets — tabs */
.v-tabs{display:flex;flex-wrap:wrap;width:100%;max-width:480px;border-bottom:1px solid var(--border)}
.v-tabs input{position:absolute;opacity:0}
.v-tabs label{padding:10px 16px;color:var(--muted);font:500 14px var(--font);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.v-tabs label:hover{color:var(--text)}
.v-tabs input:checked+label{color:var(--text);border-color:var(--accent)}
.v-tabs__panel{display:none;order:1;width:100%;padding:18px 4px;color:var(--muted);font-size:15px}
#t1:checked~.v-tabs__panel:nth-of-type(1),#t2:checked~.v-tabs__panel:nth-of-type(2),#t3:checked~.v-tabs__panel:nth-of-type(3){display:block}
/* Fil d'Ariane — breadcrumb */
.v-crumb{display:flex;align-items:center;gap:8px;font:14px var(--mono)}
.v-crumb a{color:var(--muted);text-decoration:none}
.v-crumb a:hover{color:var(--accent)}
.v-crumb span{color:var(--dim)}
.v-crumb b{color:var(--text);font-weight:500}
/* Progression par étapes — stepper */
.v-steps{display:flex;align-items:center;gap:8px}
.v-steps span{width:32px;height:4px;border-radius:2px;background:var(--border-2);transition:background .3s}
.v-steps span.on{background:var(--grad);box-shadow:0 0 10px var(--accent-glow)}
.v-steps small{margin-left:8px;font:500 14px var(--font);color:var(--muted)}
/* Palette de commandes ⌘K — cmd-palette */
.v-cmdk{font-family:var(--font);color:var(--text);border:1px solid var(--border);border-radius:14px;background:var(--surface);width:100%;max-width:520px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.5),0 0 0 1px var(--accent-soft)}
.v-cmdk label{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border);color:var(--dim)}
.v-cmdk input{flex:1;min-width:0;border:0;background:none;color:var(--text);font:600 16px var(--font);outline:0}
.v-cmdk kbd{display:inline-grid;place-items:center;min-width:18px;height:20px;padding:0 5px;border:1px solid var(--border-2);border-bottom-width:2px;border-radius:5px;color:var(--muted);font:11px var(--mono);box-sizing:border-box}
.v-cmdk small{display:block;padding:10px 16px 4px;color:var(--dim);font:700 11px var(--font);text-transform:uppercase;letter-spacing:.08em}
.v-cmdk a{display:flex;align-items:center;gap:4px;margin:0 6px;padding:9px 10px;border-radius:9px;color:var(--muted);font:600 14px var(--font);cursor:pointer}
.v-cmdk a i{display:grid;place-items:center;width:26px;height:26px;margin-right:8px;border-radius:7px;background:var(--surface-2);font-style:normal}
.v-cmdk a span{flex:1}
.v-cmdk a:hover,.v-cmdk a.on{background:var(--accent-soft);color:var(--text)}
.v-cmdk a.on{box-shadow:inset 2px 0 var(--accent)}
.v-cmdk mark{background:none;color:var(--accent-2)}
.v-cmdk footer{display:flex;gap:16px;margin-top:6px;padding:10px 16px;border-top:1px solid var(--border);color:var(--dim);font:12px var(--font)}
.v-cmdk footer span{display:flex;align-items:center;gap:4px}
.v-cmdk footer span:last-child{margin-left:auto}
/* Palette de commandes — palette */
.v-palette{width:100%;max-width:460px;padding:8px;border:1px solid var(--border-2);border-radius:var(--radius);background:var(--surface);box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 0 1px rgba(154,108,255,.08)}
.v-palette__search{display:flex;align-items:center;gap:10px;padding:8px 10px 12px;border-bottom:1px solid var(--border);margin-bottom:6px}
.v-palette__search span{color:var(--accent);font:800 18px var(--mono)}
.v-palette__search input{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--text);font:600 15px var(--font)}
.v-palette kbd{margin-left:auto;padding:1px 6px;border:1px solid var(--border-2);border-radius:5px;color:var(--dim);font:11px var(--mono)}
.v-palette__group{margin:10px 10px 4px;color:var(--dim);font:800 11px var(--font);letter-spacing:1.5px;text-transform:uppercase}
.v-palette a{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:10px;color:var(--muted);font-size:14px;cursor:pointer}
.v-palette a i{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:var(--surface-2);font-style:normal;font-size:12px}
.v-palette a:hover{background:var(--surface-2);color:var(--text)}
.v-palette a.is-on{background:var(--accent-soft);color:var(--text)}
.v-palette a.is-on i{background:var(--grad);color:var(--accent-ink)}
/* Menu déroulant — dropdown */
.v-menu{position:relative;display:inline-block;font:600 14px var(--font)}
.v-menu summary{list-style:none;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid var(--border-2);border-radius:10px;background:var(--surface);color:var(--text);cursor:pointer}
.v-menu summary::-webkit-details-marker{display:none}
.v-menu summary span{color:var(--muted);transition:transform .2s}
.v-menu[open] summary{border-color:var(--accent)}
.v-menu[open] summary span{transform:rotate(180deg)}
.v-menu__list{position:absolute;top:calc(100% + 6px);left:0;z-index:5;min-width:220px;padding:6px;border:1px solid var(--border-2);border-radius:12px;background:var(--surface);box-shadow:0 20px 50px rgba(0,0,0,.5);animation:v-menu-in .15s ease-out}
.v-menu__list a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;color:var(--text);text-decoration:none;font-weight:500}
.v-menu__list a span{width:16px;color:var(--muted);text-align:center}
.v-menu__list a:hover{background:var(--accent-soft)}
.v-menu__list kbd{margin-left:auto;font:11px var(--mono);color:var(--dim)}
.v-menu__list hr{border:0;border-top:1px solid var(--border);margin:6px 0}
.v-menu__list .v-menu__danger,.v-menu__list .v-menu__danger span{color:var(--red)}
.v-menu__list .v-menu__danger:hover{background:rgba(239,68,68,.1)}
@keyframes v-menu-in{from{opacity:0;transform:translateY(-4px)}}
/* Pagination — pagination */
.v-pager{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font:600 14px var(--font)}
.v-pager a{min-width:36px;height:36px;display:grid;place-items:center;padding:0 8px;box-sizing:border-box;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--muted);text-decoration:none;transition:border-color .15s,color .15s}
.v-pager a:hover{border-color:var(--border-2);color:var(--text)}
.v-pager a[aria-current]{background:var(--grad);border-color:transparent;color:var(--accent-ink);box-shadow:0 0 20px var(--accent-glow)}
.v-pager span{color:var(--dim);padding:0 4px}
.v-pager small{margin-left:10px;font:12px var(--mono);color:var(--dim)}
/* ═════ Feedback ═════ */
/* Badges — badges */
.v-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--border-2);border-radius:999px;color:var(--muted);font:500 12px var(--mono)}
.v-badge i{width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
.v-badge--accent{color:var(--accent-ink);background:var(--grad);border-color:var(--accent)}
.v-badge--ok{color:var(--green);border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.08)}
.v-badge--warn{color:var(--orange);border-color:rgba(245,158,11,.35);background:rgba(245,158,11,.08)}
.v-badge--err{color:var(--red);border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.08)}
/* Alertes — alert */
.v-alerts{display:flex;flex-direction:column;gap:12px;width:100%;max-width:480px}
.v-alert{display:flex;gap:14px;padding:16px;border:1px solid rgba(154,108,255,.3);border-left:3px solid var(--accent);border-radius:10px;background:var(--accent-soft)}
.v-alert b{color:var(--accent);font-family:var(--mono)}
.v-alert strong{display:block;color:var(--text);font-size:15px}
.v-alert p{margin:4px 0 0;color:var(--muted);font-size:14px}
.v-alert--err{border-color:rgba(239,68,68,.3);border-left-color:var(--red);background:rgba(239,68,68,.06)}
.v-alert--err b{color:var(--red)}
/* Toast (notification) — toast */
.v-btn2{padding:10px 18px;border-radius:999px;font:600 14px var(--font);cursor:pointer}
.v-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);display:flex;gap:10px;align-items:center;padding:12px 18px;border:1px solid var(--border-2);border-radius:10px;background:var(--surface-2);color:var(--text);font:500 14px var(--font);box-shadow:0 10px 40px rgba(0,0,0,.6);z-index:1000;animation:v-toast 2.6s ease forwards}
.v-toast b{color:var(--green)}
@keyframes v-toast{0%{opacity:0;transform:translate(-50%,12px)}10%,85%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,12px)}}
/* Tooltip — tooltip */
.v-tip{position:relative;display:inline-block;padding:8px 14px;border:1px dashed var(--border-2);border-radius:8px;color:var(--text);cursor:help}
.v-tip::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 10px);left:50%;transform:translate(-50%,4px);padding:6px 10px;border:1px solid var(--border-2);border-radius:6px;background:var(--surface-2);color:var(--text);font:12px var(--mono);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s}
.v-tip:hover::after{opacity:1;transform:translate(-50%,0)}
/* Barre de progression — progress */
.v-progress{width:100%;max-width:420px}
.v-progress__head{display:flex;justify-content:space-between;margin-bottom:8px;font:500 13px var(--mono);color:var(--muted)}
.v-progress__track{height:6px;border-radius:999px;background:var(--border);overflow:hidden}
.v-progress__fill{height:100%;border-radius:inherit;background:var(--grad);box-shadow:0 0 12px var(--accent-glow);transition:width .4s}
/* Loaders — loaders */
.v-row--wide{gap:28px}
.v-spinner{width:24px;height:24px;border:2px solid var(--border-2);border-top-color:var(--accent);border-radius:50%;animation:v-spin .8s linear infinite}
@keyframes v-spin{to{transform:rotate(360deg)}}
.v-dots{display:flex;gap:6px}
.v-dots i{width:8px;height:8px;border-radius:50%;background:var(--grad);animation:v-bounce 1s infinite ease-in-out}
.v-dots i:nth-child(2){animation-delay:.15s}
.v-dots i:nth-child(3){animation-delay:.3s}
@keyframes v-bounce{0%,80%,100%{opacity:.25;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}
.v-ascii{font:14px var(--mono);color:var(--muted)}
.v-ascii__bar::after{content:'';color:var(--accent);animation:v-ascii 1.2s steps(1) infinite}
@keyframes v-ascii{0%{content:' [= ]'}25%{content:' [== ]'}50%{content:' [=== ]'}75%{content:' [====]'}}
/* Skeleton — skeleton */
.v-skel{display:flex;flex-direction:column;gap:14px;width:100%;max-width:380px;padding:20px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
.v-skel__row{display:flex;gap:12px;align-items:center}
.v-skel__b{display:block;height:12px;margin:6px 0;border-radius:6px;background:linear-gradient(90deg,var(--surface-2) 25%,var(--border-2) 50%,var(--surface-2) 75%);background-size:200% 100%;animation:v-shimmer 1.4s infinite}
.v-skel__avatar{width:44px;height:44px;margin:0;border-radius:50%;flex:none}
@keyframes v-shimmer{to{background-position:-200% 0}}
/* ═════ Cartes ═════ */
/* Carte glow — card-glow */
.v-card{position:relative;max-width:320px;padding:28px;border:1px solid var(--border);border-radius:var(--radius);background:linear-gradient(180deg,var(--surface-2),var(--surface));transition:border-color .2s,box-shadow .2s,transform .2s}
.v-card:hover{border-color:rgba(154,108,255,.4);box-shadow:0 0 50px -10px var(--accent-glow);transform:translateY(-2px)}
.v-card__icon{width:44px;height:44px;display:grid;place-items:center;border-radius:10px;background:var(--accent-soft);border:1px solid rgba(154,108,255,.25);font-size:20px}
.v-card h3{margin:18px 0 6px;font:700 19px var(--font);letter-spacing:-.02em;color:var(--text)}
.v-card p{margin:0;color:var(--muted);font-size:15px;line-height:1.55}
/* Carte spotlight (suit la souris) — card-spotlight */
.v-spot{position:relative;max-width:360px;padding:32px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);overflow:hidden;--x:50%;--y:50%}
.v-spot::before{content:'';position:absolute;inset:0;background:radial-gradient(300px circle at var(--x) var(--y),rgba(154,108,255,.12),transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none}
.v-spot:hover::before{opacity:1}
.v-spot h3{position:relative;margin:0 0 6px;font:700 20px var(--font);color:var(--text)}
.v-spot p{position:relative;margin:0;color:var(--muted)}
/* Tuiles de stats — stat */
.v-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;width:100%;max-width:620px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.v-stat{display:flex;flex-direction:column;gap:6px;padding:20px;background:var(--surface)}
.v-stat__label{font:500 12px var(--mono);color:var(--dim);text-transform:uppercase;letter-spacing:.08em}
.v-stat strong{font:700 28px var(--font);letter-spacing:-.015em;color:var(--text);font-variant-numeric:tabular-nums}
.v-stat__delta{font:500 13px var(--mono)}
.v-stat__delta.up{color:var(--green)}
.v-stat__delta.down{color:var(--red)}
/* Liste de features (bento) — feature-list */
.v-bento{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;width:100%;max-width:620px}
.v-bento__item{padding:22px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
.v-bento__item--big{grid-row:span 2;background:radial-gradient(circle at 0 0,rgba(154,108,255,.1),transparent 60%),var(--surface)}
.v-eyebrow2{font:800 12px var(--font);color:var(--accent-2);letter-spacing:2px}
.v-bento h4{margin:10px 0 6px;font:700 18px var(--font);color:var(--text)}
.v-bento p{margin:0;color:var(--muted);font-size:14px;line-height:1.5}
@media(max-width:520px){.v-bento{grid-template-columns:1fr}.v-bento__item--big{grid-row:auto}}
/* Aperçu de leçon — course-card */
.v-lesson{width:100%;max-width:440px;border:1px solid var(--border-2);border-radius:16px;background:var(--deep);box-shadow:0 30px 80px rgba(154,108,255,.16);overflow:hidden}
.v-lesson__bar{display:flex;align-items:center;gap:7px;padding:12px 16px;border-bottom:1px solid var(--border);color:var(--dim);font-size:13px}
.v-lesson__bar i{width:10px;height:10px;border-radius:50%;background:var(--border-2)}
.v-lesson__bar span{margin-left:10px}
.v-lesson__body{padding:24px}
.v-lesson__kicker{margin:0 0 4px;color:var(--accent-2);font:800 12px var(--font);letter-spacing:2px;text-transform:uppercase}
.v-lesson__title{margin:0;font:800 24px var(--font);color:var(--text)}
.v-lesson__progress{height:6px;margin:22px 0 10px;border-radius:3px;background:var(--border);overflow:hidden}
.v-lesson__progress span{display:block;width:23%;height:100%;background:var(--grad)}
.v-lesson__meta{margin:0;color:var(--muted);font-size:14px}
/* Témoignage — testimonial */
.v-quote{position:relative;margin:0;max-width:420px;padding:26px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);overflow:hidden}
.v-quote::before{content:"\201C";position:absolute;right:18px;top:-18px;font:800 120px/1 var(--font);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.25}
.v-quote__stars{color:var(--accent-2);letter-spacing:3px;font-size:15px}
.v-quote blockquote{margin:12px 0 20px;font:500 16px/1.6 var(--font);color:var(--text)}
.v-quote figcaption{display:flex;align-items:center;gap:12px}
.v-quote figcaption span{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:var(--grad);color:var(--accent-ink);font:800 14px var(--font)}
.v-quote b{display:block;font:700 14px var(--font);color:var(--text)}
.v-quote small{font:13px var(--font);color:var(--muted)}
/* Membres de l'équipe — team */
.v-team{width:100%;max-width:420px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);font-family:var(--font)}
.v-team header{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--border)}
.v-team header b{font:700 15px var(--font);color:var(--text)}
.v-team header button{padding:6px 12px;border:1px solid var(--border-2);border-radius:var(--radius-sm);background:var(--surface-2);color:var(--text);font:700 12px var(--font);cursor:pointer}
.v-team header button:hover{border-color:var(--accent)}
.v-team ul{list-style:none;margin:0;padding:4px 8px}
.v-team li{display:flex;align-items:center;gap:12px;padding:10px 8px;border-bottom:1px solid var(--border)}
.v-team li:last-child{border-bottom:0}
.v-team__av{position:relative;flex:none;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--c) 22%,var(--surface-2));color:var(--c);font:800 13px var(--font)}
.v-team__av i{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;background:var(--dim);border:2px solid var(--surface)}
.v-team__av i.on{background:var(--green)}
.v-team li>div{flex:1;min-width:0}
.v-team li b{display:block;font:700 14px var(--font);color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v-team li small{display:block;font:12px var(--mono);color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v-team em{padding:4px 10px;border-radius:99px;border:1px solid var(--border);color:var(--muted);font:600 12px var(--font);font-style:normal;white-space:nowrap}
.v-team em.own{border-color:transparent;background:var(--grad);color:var(--accent-ink)}
.v-team li.is-pending{opacity:.6}
.v-team li.is-pending em{border-style:dashed}
/* ═════ Overlays & données ═════ */
/* Modale — modal */
.v-modal{width:min(440px,calc(100% - 32px));padding:28px;border:1px solid var(--border-2);border-radius:var(--radius);background:var(--surface);color:var(--text);box-shadow:0 30px 100px rgba(0,0,0,.8)}
.v-modal::backdrop{background:rgba(0,0,0,.7);backdrop-filter:blur(4px)}
.v-modal h3{margin:0 0 8px;font:700 20px var(--font)}
.v-modal p{margin:0;color:var(--muted);font-size:15px;line-height:1.5}
.v-modal code{color:var(--accent);font-family:var(--mono)}
.v-modal__actions{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}
/* Accordéon / FAQ — accordion */
.v-faq{width:100%;max-width:520px;border-top:1px solid var(--border)}
.v-faq details{border-bottom:1px solid var(--border)}
.v-faq summary{display:flex;justify-content:space-between;padding:18px 4px;color:var(--text);font:500 16px var(--font);cursor:pointer;list-style:none}
.v-faq summary::-webkit-details-marker{display:none}
.v-faq summary::after{content:'+';font-family:var(--mono);color:var(--accent);transition:transform .2s}
.v-faq details[open] summary::after{transform:rotate(45deg)}
.v-faq p{margin:0;padding:0 4px 18px;color:var(--muted);font-size:15px}
/* Tableau — table */
.v-table-wrap{width:100%;max-width:620px;border:1px solid var(--border);border-radius:var(--radius);overflow-x:auto}
.v-table{width:100%;border-collapse:collapse;font-size:14px}
.v-table th{padding:12px 16px;text-align:left;background:var(--surface);color:var(--dim);font:500 12px var(--mono);text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid var(--border)}
.v-table td{padding:14px 16px;color:var(--text);border-bottom:1px solid var(--border)}
.v-table td:first-child{font-family:var(--mono)}
.v-table td:last-child{color:var(--muted)}
.v-table tbody tr:last-child td{border-bottom:0}
.v-table tbody tr:hover{background:var(--surface)}
.v-table .st{font:500 13px var(--mono)}
.v-table .ok{color:var(--green)}
.v-table .warn{color:var(--orange)}
.v-table .err{color:var(--red)}
/* Avatars groupés — avatars */
.v-avatars{display:flex;align-items:center}
.v-avatars span{width:36px;height:36px;margin-left:-10px;display:grid;place-items:center;border:2px solid var(--bg);border-radius:50%;color:#fff;font:600 13px var(--font)}
.v-avatars span:first-child{margin-left:0}
.v-avatars .more{background:var(--surface-2);color:var(--muted);font-family:var(--mono);font-size:12px}
.v-avatars small{margin-left:14px;color:var(--muted);font-size:14px}
/* Fil d'activité — activity-feed */
.v-feed{list-style:none;margin:0;padding:0;width:100%;max-width:440px}
.v-feed li{position:relative;display:flex;gap:14px;padding-bottom:20px}
.v-feed li:not(:last-child)::before{content:"";position:absolute;left:15px;top:34px;bottom:2px;width:2px;background:var(--border)}
.v-feed li>span{flex:none;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--c) 15%,transparent);border:1px solid color-mix(in srgb,var(--c) 45%,transparent);color:var(--c);font:700 14px var(--font)}
.v-feed p{margin:5px 0 0;font:14px/1.45 var(--font);color:var(--muted)}
.v-feed b{color:var(--text)}
.v-feed code{font:12px var(--mono);color:var(--accent-2);background:var(--surface-2);padding:1px 6px;border-radius:5px}
.v-feed small{display:block;margin-top:2px;font:12px var(--mono);color:var(--dim)}
/* Centre de notifications — notif-center */
.v-notifs{width:100%;max-width:380px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);overflow:hidden;font-family:var(--font)}
.v-notifs header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border)}
.v-notifs header b{display:flex;align-items:center;gap:8px;font:700 15px var(--font);color:var(--text)}
.v-notifs header em{padding:2px 7px;border-radius:99px;background:var(--accent);color:var(--accent-ink);font:700 11px var(--mono);font-style:normal}
.v-notifs header button{background:none;border:0;color:var(--accent-2);font:600 12px var(--font);cursor:pointer}
.v-notifs ul{list-style:none;margin:0;padding:6px}
.v-notifs li{position:relative;display:flex;gap:12px;padding:10px;border-radius:var(--radius-sm);transition:background .15s}
.v-notifs li:hover{background:var(--surface-2)}
.v-notifs li.is-new{padding-right:28px}
.v-notifs li.is-new::after{content:"";position:absolute;right:12px;top:16px;width:8px;height:8px;border-radius:50%;background:var(--accent-2);box-shadow:0 0 8px var(--accent-2)}
.v-notifs li i{flex:none;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;color:var(--c);background:color-mix(in srgb,var(--c) 15%,transparent);font:700 13px var(--mono);font-style:normal}
.v-notifs p{margin:0;font:14px/1.4 var(--font);color:var(--muted)}
.v-notifs p b{color:var(--text);font-weight:700}
.v-notifs small{font:12px var(--mono);color:var(--dim)}
.v-notifs footer{padding:12px 16px;border-top:1px solid var(--border);text-align:center}
.v-notifs footer a{color:var(--muted);font:600 13px var(--font);text-decoration:none}
.v-notifs footer a:hover{color:var(--text)}
/* Panneau latéral (drawer) — drawer */
.v-drawer{position:relative;width:100%;max-width:560px;height:340px;display:grid;place-items:center;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);overflow:hidden;font-family:var(--font)}
.v-drawer__t{position:absolute;opacity:0;pointer-events:none}
.v-drawer__open{padding:10px 18px;border-radius:var(--radius-sm);background:var(--grad);color:var(--accent-ink);font:700 14px var(--font);cursor:pointer}
.v-drawer__scrim{position:absolute;inset:0;background:rgba(7,6,15,.6);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .25s}
.v-drawer__panel{position:absolute;top:0;right:0;bottom:0;width:min(300px,85%);display:flex;flex-direction:column;background:var(--surface);border-left:1px solid var(--border-2);box-shadow:-20px 0 40px rgba(0,0,0,.4);transform:translateX(105%);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.v-drawer__t:checked~.v-drawer__scrim{opacity:1;pointer-events:auto}
.v-drawer__t:checked~.v-drawer__panel{transform:none}
.v-drawer__panel header{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid var(--border)}
.v-drawer__panel header b{font:700 15px var(--font);color:var(--text)}
.v-drawer__panel header label{cursor:pointer;color:var(--muted)}
.v-drawer__panel header label:hover{color:var(--text)}
.v-drawer__body{flex:1;overflow:auto;padding:16px;display:grid;gap:12px;align-content:start}
.v-drawer__body label{display:grid;gap:6px;font:600 12px var(--font);color:var(--muted)}
.v-drawer__body input{padding:9px 11px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);color:var(--text);font:14px var(--font);outline:none}
.v-drawer__body input:focus{border-color:var(--accent)}
.v-drawer__panel footer{display:flex;justify-content:flex-end;gap:8px;padding:14px 16px;border-top:1px solid var(--border)}
.v-drawer__panel footer label,.v-drawer__panel footer button{padding:8px 14px;border-radius:var(--radius-sm);font:700 13px var(--font);cursor:pointer}
.v-drawer__panel footer label{color:var(--muted);border:1px solid var(--border)}
.v-drawer__panel footer button{border:0;background:var(--grad);color:var(--accent-ink)}
/* ═════ Apps & outils ═════ */
/* Kanban — kanban */
.v-kan{display:grid;grid-template-columns:repeat(3,minmax(200px,1fr));gap:12px;width:100%;max-width:760px;overflow-x:auto;font-family:var(--font);color:var(--text)}
.v-kan section{display:flex;flex-direction:column;gap:8px;padding:10px;border:1px solid var(--border);border-radius:14px;background:var(--deep)}
.v-kan header{display:flex;align-items:center;gap:8px;padding:2px 4px 4px;font:700 13px var(--font)}
.v-kan header i{width:8px;height:8px;border-radius:50%}
.v-kan header em{margin-left:auto;color:var(--dim);font:12px var(--mono);font-style:normal}
.v-kan article{display:grid;gap:8px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface);cursor:grab;transition:transform .15s,box-shadow .15s,border-color .15s}
.v-kan article:hover{transform:translateY(-2px) rotate(-.6deg);border-color:var(--accent);box-shadow:0 10px 24px rgba(0,0,0,.35)}
.v-kan article:active{cursor:grabbing}
.v-kan article div{display:flex;flex-wrap:wrap;gap:4px}
.v-kan article span{padding:2px 7px;border-radius:5px;background:color-mix(in srgb,var(--c) 16%,transparent);color:var(--c);font:700 10px var(--font);text-transform:uppercase;letter-spacing:.04em}
.v-kan article b{font:600 14px var(--font)}
.v-kan article p{height:4px;margin:0;border-radius:2px;background:var(--surface-2);overflow:hidden}
.v-kan article p i{display:block;height:100%;background:var(--grad)}
.v-kan article footer{display:flex;align-items:center;justify-content:space-between}
.v-kan abbr{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--grad);color:var(--accent-ink);font:800 9px var(--font);text-decoration:none}
.v-kan article em{color:var(--dim);font:11px var(--font);font-style:normal}
.v-kan section>button{padding:8px;border:1px dashed var(--border-2);border-radius:10px;background:none;color:var(--dim);font:600 12px var(--font);cursor:pointer}
.v-kan section>button:hover{border-color:var(--accent);color:var(--text)}
/* Calendrier — calendar */
.v-cal{font-family:var(--font);color:var(--text);border:1px solid var(--border);border-radius:14px;background:var(--surface);width:100%;max-width:640px;padding:14px}
.v-cal input{display:none}
.v-cal header{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.v-cal header b{min-width:130px;font:800 16px var(--font);text-align:center}
.v-cal header button{width:28px;height:28px;border:1px solid var(--border-2);border-radius:8px;background:none;color:var(--muted);cursor:pointer}
.v-cal nav{display:flex;margin-left:auto;padding:2px;border-radius:8px;background:var(--deep)}
.v-cal label{padding:4px 10px;border-radius:6px;color:var(--muted);font:600 12px var(--font);cursor:pointer}
#v-cal-m:checked~header label[for=v-cal-m],#v-cal-w:checked~header label[for=v-cal-w]{background:var(--surface-2);color:var(--text)}
.v-cal__days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:4px}
.v-cal__days span{color:var(--dim);font:600 11px var(--font);text-align:center;text-transform:uppercase}
.v-cal__month{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.v-cal__month>div{display:flex;flex-direction:column;gap:2px;min-height:64px;padding:5px;border-radius:8px;background:var(--deep);font:600 12px var(--font);overflow:hidden}
.v-cal__month>div.out{background:none;color:var(--dim)}
.v-cal__month>div.now span{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--grad);color:var(--accent-ink)}
.v-cal em{padding:1px 5px;border-left:2px solid var(--c);border-radius:3px;background:color-mix(in srgb,var(--c) 15%,transparent);color:var(--text);font:600 10px var(--font);font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v-cal__week{display:none;grid-template-columns:repeat(7,1fr);gap:4px}
#v-cal-w:checked~.v-cal__month,#v-cal-w:checked~.v-cal__days{display:none}
#v-cal-w:checked~.v-cal__week{display:grid}
.v-cal__week>div{position:relative;height:250px;border-radius:8px;background:var(--deep) repeating-linear-gradient(transparent 0 21px,var(--border) 21px 22px) 0 26px/100% calc(100% - 26px) no-repeat}
.v-cal__week span{display:block;padding:5px;color:var(--muted);font:700 11px var(--font);text-align:center}
.v-cal__week em{position:absolute;left:3px;right:3px;display:flex;flex-direction:column;padding:3px 5px;white-space:normal}
.v-cal__week em small{color:var(--muted);font:10px var(--mono)}
/* Onboarding spotlight — onboarding */
.v-tour{position:relative;width:100%;max-width:560px;height:320px;overflow:hidden;border:1px solid var(--border);border-radius:14px;background:var(--deep);font-family:var(--font);color:var(--text)}
.v-tour__app nav{display:flex;align-items:center;gap:16px;padding:12px 16px;border-bottom:1px solid var(--border);color:var(--muted);font:600 13px var(--font)}
.v-tour__app nav b{color:var(--text)}
.v-tour__body{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:16px}
.v-tour__body span{height:90px;border-radius:10px;background:var(--surface)}
.v-tour__target{position:absolute;right:16px;top:58px;padding:8px 14px;border:0;border-radius:9px;background:var(--grad);color:var(--accent-ink);font:700 13px var(--font)}
.v-tour__mask{position:absolute;right:10px;top:52px;width:148px;height:46px;border-radius:12px;box-shadow:0 0 0 2px var(--accent-2),0 0 0 9999px rgba(4,3,10,.72);animation:v-tour-pulse 1.8s ease-in-out infinite;pointer-events:none}
.v-tour__pop{position:absolute;right:16px;top:116px;width:260px;padding:14px;border:1px solid var(--border-2);border-radius:12px;background:var(--surface);box-shadow:0 16px 40px rgba(0,0,0,.5)}
.v-tour__pop::before{content:'';position:absolute;right:56px;top:-7px;width:12px;height:12px;border:solid var(--border-2);border-width:1px 0 0 1px;background:var(--surface);transform:rotate(45deg)}
.v-tour__pop small{color:var(--accent);font:700 11px var(--font);text-transform:uppercase;letter-spacing:.06em}
.v-tour__pop b{display:block;margin:4px 0;font:800 15px var(--font)}
.v-tour__pop p{margin:0 0 12px;color:var(--muted);font:13px/1.5 var(--font)}
.v-tour__pop footer{display:flex;align-items:center;gap:6px}
.v-tour__pop footer span{display:flex;gap:4px;margin-right:auto}
.v-tour__pop footer i{width:6px;height:6px;border-radius:3px;background:var(--border-2)}
.v-tour__pop footer i.on{width:16px;background:var(--accent)}
.v-tour__pop button{padding:6px 12px;border:0;border-radius:8px;background:var(--accent);color:var(--accent-ink);font:700 12px var(--font);cursor:pointer}
.v-tour__pop button.ghost{background:none;color:var(--dim)}
@keyframes v-tour-pulse{50%{box-shadow:0 0 0 5px rgba(95,232,240,.35),0 0 0 9999px rgba(4,3,10,.72)}}
/* Facture — invoice */
.v-invoice{width:100%;max-width:440px;padding:22px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);font-family:var(--font);color:var(--text)}
.v-invoice header{display:flex;justify-content:space-between;align-items:flex-start}
.v-invoice small{display:block;margin-bottom:3px;font:600 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.v-invoice header b{font:800 18px var(--font)}
.v-invoice__st{padding:4px 10px;border-radius:99px;font:700 12px var(--font);color:var(--green);background:color-mix(in srgb,var(--green) 14%,transparent);border:1px solid color-mix(in srgb,var(--green) 35%,transparent)}
.v-invoice__meta{display:flex;gap:32px;margin:18px 0;font:14px var(--font)}
.v-invoice table{width:100%;border-collapse:collapse;font:14px var(--font)}
.v-invoice th{padding:8px 0;border-bottom:1px solid var(--border);text-align:left;font:600 11px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--dim)}
.v-invoice td{padding:10px 0;border-bottom:1px solid var(--border);color:var(--muted)}
.v-invoice td:first-child{color:var(--text)}
.v-invoice th:not(:first-child),.v-invoice td:not(:first-child){text-align:right}
.v-invoice dl{display:grid;gap:6px;margin:14px 0 0}
.v-invoice dl div{display:flex;justify-content:space-between;font:14px var(--font);color:var(--muted)}
.v-invoice dd{margin:0;font-family:var(--mono)}
.v-invoice .v-invoice__total{margin-top:6px;padding-top:12px;border-top:1px dashed var(--border-2);color:var(--text);font:800 17px var(--font)}
.v-invoice__total dd{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.v-invoice footer{margin-top:18px}
.v-invoice footer button{width:100%;padding:11px;border:1px solid var(--border-2);border-radius:var(--radius-sm);background:var(--surface-2);color:var(--text);font:700 14px var(--font);cursor:pointer;transition:border-color .15s}
.v-invoice footer button:hover{border-color:var(--accent)}
/* Messagerie — chat */
.v-chat{width:100%;max-width:380px;display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);overflow:hidden;font-family:var(--font)}
.v-chat header{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--border)}
.v-chat__av{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:var(--grad);color:var(--accent-ink);font:800 13px var(--font)}
.v-chat header b{display:block;font:700 14px var(--font);color:var(--text)}
.v-chat header small{display:flex;align-items:center;gap:6px;font:12px var(--font);color:var(--muted)}
.v-chat header small i{width:7px;height:7px;border-radius:50%;background:var(--green)}
.v-chat__log{display:flex;flex-direction:column;gap:8px;padding:14px;background:var(--bg)}
.v-chat__day{align-self:center;font:600 11px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--dim)}
.v-chat__log p{max-width:78%;margin:0;padding:9px 12px;border-radius:14px;font:14px/1.45 var(--font)}
.v-chat__log p.in{align-self:flex-start;background:var(--surface-2);color:var(--text);border-bottom-left-radius:4px}
.v-chat__log p.out{align-self:flex-end;background:var(--grad);color:var(--accent-ink);border-bottom-right-radius:4px}
.v-chat__log time{display:block;margin-top:3px;text-align:right;font:11px var(--mono);opacity:.65}
.v-chat__log code{padding:1px 5px;border-radius:4px;background:var(--bg);color:var(--accent-2);font:12px var(--mono)}
.v-chat__typing{align-self:flex-start;display:flex;gap:4px;padding:11px 13px;border-radius:14px;border-bottom-left-radius:4px;background:var(--surface-2)}
.v-chat__typing span{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:v-chat-dot 1.2s infinite}
.v-chat__typing span:nth-child(2){animation-delay:.15s}
.v-chat__typing span:nth-child(3){animation-delay:.3s}
@keyframes v-chat-dot{0%,60%,100%{transform:none;opacity:.4}30%{transform:translateY(-4px);opacity:1}}
.v-chat__in{display:flex;gap:8px;margin:0;padding:10px;border-top:1px solid var(--border)}
.v-chat__in input{flex:1;min-width:0;padding:10px 14px;border:1px solid var(--border);border-radius:99px;background:var(--bg);color:var(--text);font:14px var(--font);outline:none}
.v-chat__in input:focus{border-color:var(--accent)}
.v-chat__in button{flex:none;width:40px;height:40px;border:0;border-radius:50%;background:var(--grad);color:var(--accent-ink);font-size:15px;cursor:pointer}
/* ═════ Sections ═════ */
/* Section CTA — cta */
.v-cta{width:100%;padding:56px 24px;text-align:center;border:1px solid var(--border);border-radius:20px;background:radial-gradient(ellipse 70% 80% at 50% 0%,rgba(154,108,255,.12),transparent 70%),var(--surface)}
.v-cta__eyebrow{font:500 13px var(--mono);color:var(--accent-2)}
.v-cta h2{margin:12px 0 8px;font:800 clamp(28px,5vw,44px)/1.05 var(--font);letter-spacing:-.02em;color:var(--text)}
.v-cta p{margin:0 0 28px;color:var(--muted)}
.v-cta__actions{display:flex;justify-content:center;flex-wrap:wrap;gap:12px}
.v-cta a{padding:13px 24px;border-radius:12px;text-decoration:none;font:600 15px var(--font)}
.v-cta__main{background:var(--grad);color:var(--accent-ink);box-shadow:0 0 40px var(--accent-glow)}
.v-cta__alt{border:1px solid var(--border-2);color:var(--text)}
/* Carte de prix — pricing */
.v-price{position:relative;width:100%;max-width:320px;padding:28px;border:1px solid var(--accent);border-radius:var(--radius);background:var(--surface);box-shadow:0 0 60px -15px var(--accent-glow)}
.v-price__tag{position:absolute;top:-11px;left:24px;padding:3px 10px;border-radius:999px;background:var(--grad);color:var(--accent-ink);font:600 12px var(--font)}
.v-price h3{margin:0;font:600 16px var(--mono);color:var(--muted)}
.v-price__amount{margin:10px 0 20px;color:var(--muted)}
.v-price__amount strong{font:800 44px var(--font);letter-spacing:-.02em;color:var(--text)}
.v-price ul{margin:0 0 24px;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;color:var(--text);font-size:15px}
.v-price li::before{content:'→ ';color:var(--accent);font-family:var(--mono)}
.v-price button{width:100%;padding:13px;border:0;border-radius:10px;background:var(--grad);color:var(--accent-ink);font:600 15px var(--font);cursor:pointer}
/* Tableau de prix — pricing-table */
.v-ptable{width:100%;max-width:820px;font-family:var(--font);color:var(--text);text-align:center}
.v-ptable input{display:none}
.v-ptable__sw{display:inline-flex;align-items:center;gap:10px;margin-bottom:20px;color:var(--muted);font:600 14px var(--font);cursor:pointer}
.v-ptable__sw i{position:relative;width:40px;height:22px;border-radius:11px;background:var(--surface-2);transition:.2s}
.v-ptable__sw i::after{content:'';position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:var(--text);transition:.2s}
.v-ptable__sw em{padding:2px 6px;border-radius:6px;background:rgba(74,222,128,.15);color:var(--green);font:700 11px var(--font);font-style:normal}
#v-ptable-y:checked~.v-ptable__sw i{background:var(--accent)}
#v-ptable-y:checked~.v-ptable__sw i::after{left:21px}
.v-ptable__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;text-align:left}
.v-ptable article{position:relative;display:flex;flex-direction:column;padding:22px;border:1px solid var(--border);border-radius:16px;background:var(--surface)}
.v-ptable article.hot{border-color:transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--grad) border-box;box-shadow:0 0 40px var(--accent-glow)}
.v-ptable mark{position:absolute;right:16px;top:-11px;padding:3px 10px;border-radius:999px;background:var(--grad);color:var(--accent-ink);font:800 11px var(--font)}
.v-ptable article b{font:800 18px var(--font)}
.v-ptable article small{color:var(--dim);font:13px var(--font)}
.v-ptable p{display:flex;align-items:baseline;gap:6px;margin:16px 0}
.v-ptable p span{font:900 36px var(--font)}
.v-ptable p em{color:var(--dim);font:13px var(--font);font-style:normal}
.v-ptable .y,#v-ptable-y:checked~.v-ptable__grid .m{display:none}
#v-ptable-y:checked~.v-ptable__grid .y{display:inline}
.v-ptable ul{flex:1;margin:0 0 18px;padding:0;list-style:none}
.v-ptable li{padding:5px 0;color:var(--muted);font:14px var(--font)}
.v-ptable li::before{content:'✓';margin-right:8px;color:var(--accent-2);font-weight:800}
.v-ptable article button{padding:10px;border:1px solid var(--border-2);border-radius:10px;background:none;color:var(--text);font:700 14px var(--font);cursor:pointer}
.v-ptable article.hot button{border:0;background:var(--grad);color:var(--accent-ink)}
/* État vide — empty */
.v-empty{width:100%;max-width:400px;padding:40px 24px;text-align:center;border:1px dashed var(--border-2);border-radius:var(--radius)}
.v-empty pre{margin:0 0 12px;color:var(--dim);font:13px/1.3 var(--mono);display:inline-block;text-align:left}
.v-empty h4{margin:0 0 6px;font:700 18px var(--font);color:var(--text)}
.v-empty p{margin:0 0 20px;color:var(--muted);font-size:14px}
.v-empty button{padding:9px 16px;border:1px solid rgba(154,108,255,.35);border-radius:8px;background:var(--accent-soft);color:var(--accent);font:600 14px var(--font);cursor:pointer}
/* Footer — footer */
.v-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;width:100%;padding:24px 20px;border-top:1px solid var(--border)}
.v-foot__brand{display:flex;align-items:baseline;gap:12px}
.v-foot__brand b{font:700 18px var(--font);color:var(--text)}
.v-foot__brand span{color:var(--accent)}
.v-foot__brand small{color:var(--dim);font-size:13px}
.v-foot__links{display:flex;gap:20px}
.v-foot__links a{color:var(--muted);text-decoration:none;font-size:14px}
.v-foot__links a:hover{color:var(--text)}
.v-foot__status{display:flex;align-items:center;gap:8px;font:12px var(--mono);color:var(--muted)}
.v-foot__status i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}
/* Compte à rebours — countdown */
@property --v-cd-s{syntax:'';inherits:false;initial-value:0}
.v-countdown{width:100%;max-width:520px;padding:32px 24px;text-align:center;border:1px solid var(--border);border-radius:var(--radius);background:radial-gradient(120% 80% at 50% 0%,var(--accent-soft),transparent 70%),var(--surface);font-family:var(--font)}
.v-countdown__tag{display:inline-block;padding:4px 12px;border-radius:99px;border:1px solid var(--border-2);font:600 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent-2)}
.v-countdown h3{margin:14px 0 22px;font:800 24px var(--font);color:var(--text)}
.v-countdown__grid{display:flex;justify-content:center;gap:10px}
.v-countdown__grid div{width:76px;padding:12px 0 10px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg)}
.v-countdown__grid b{display:block;font:800 30px/1 var(--mono);font-variant-numeric:tabular-nums;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.v-countdown__grid small{display:block;margin-top:6px;font:600 11px var(--font);text-transform:uppercase;letter-spacing:.08em;color:var(--dim)}
.v-countdown__s{counter-reset:s var(--v-cd-s);animation:v-cd-tick 60s steps(60) infinite}
.v-countdown__s::after{content:counter(s,decimal-leading-zero)}
@keyframes v-cd-tick{from{--v-cd-s:59}to{--v-cd-s:-1}}
.v-countdown form{display:flex;gap:8px;max-width:360px;margin:24px auto 0}
.v-countdown input{flex:1;min-width:0;padding:11px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);color:var(--text);font:14px var(--font);outline:none}
.v-countdown input:focus{border-color:var(--accent)}
.v-countdown button{padding:0 16px;border:0;border-radius:var(--radius-sm);background:var(--grad);color:var(--accent-ink);font:700 14px var(--font);cursor:pointer}
/* ═════ Fonds & effets ═════ */
/* Fond grille + halo — bg-grid */
.v-gridbg{position:relative;width:100%;padding:80px 24px;text-align:center;border-radius:var(--radius);overflow:hidden;background:var(--bg);
background-image:radial-gradient(ellipse 50% 50% at 35% 0%,rgba(154,108,255,.2),transparent 70%),radial-gradient(ellipse 40% 40% at 70% 10%,rgba(95,232,240,.08),transparent 70%),linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
background-size:100% 100%,48px 48px,48px 48px}
.v-gridbg::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 40%,var(--bg) 90%);pointer-events:none}
.v-gridbg h2{position:relative;z-index:1;margin:0;font:800 36px var(--font);letter-spacing:-.02em;color:var(--text)}
.v-gridbg p{position:relative;z-index:1;margin:8px 0 0;color:var(--muted)}
/* Fond à points — bg-dots */
.v-dotbg{width:100%;padding:70px 24px;text-align:center;border-radius:var(--radius);background-color:var(--bg);background-image:radial-gradient(rgba(255,255,255,.12) 1px,transparent 1px);background-size:20px 20px;-webkit-mask-image:radial-gradient(ellipse at center,#000 40%,transparent 85%);mask-image:radial-gradient(ellipse at center,#000 40%,transparent 85%)}
.v-dotbg h2{margin:0;font:800 32px var(--font);letter-spacing:-.02em;color:var(--text)}
/* Fond nébuleuse étoilée — nebula */
.v-nebula{width:100%;padding:80px 24px;text-align:center;border-radius:var(--radius);background:
radial-gradient(1px 1px at 12% 30%,#fff8,transparent),radial-gradient(1px 1px at 78% 22%,#fff9,transparent),radial-gradient(1.5px 1.5px at 40% 80%,#b896ff,transparent),radial-gradient(1px 1px at 88% 70%,#82f0f8,transparent),radial-gradient(1px 1px at 25% 65%,#fff6,transparent),radial-gradient(1.5px 1.5px at 60% 15%,#82f0f8,transparent),
radial-gradient(ellipse 45% 60% at 30% 40%,rgba(154,108,255,.22),transparent 70%),radial-gradient(ellipse 40% 50% at 72% 60%,rgba(95,232,240,.1),transparent 70%),var(--bg)}
.v-nebula h2{margin:10px 0 0;font:800 38px var(--font);letter-spacing:-.02em;color:var(--text)}
/* Orbe (trou noir) — orb */
.v-orb-card{display:flex;align-items:center;gap:22px;width:100%;max-width:480px;padding:24px 26px;border:1px dashed var(--border-2);border-radius:var(--radius);color:var(--muted)}
.v-orb-card h4{margin:0 0 2px;font:800 19px var(--font);color:var(--text)}
.v-orb-card p{margin:0}
.v-orb{flex:none;width:54px;height:54px;border-radius:50%;background:radial-gradient(circle,var(--bg) 52%,var(--accent) 68%,transparent 72%);box-shadow:0 0 40px var(--accent-glow);animation:v-breathe 4s ease-in-out infinite}
@keyframes v-breathe{50%{transform:scale(1.08);box-shadow:0 0 60px rgba(95,232,240,.35)}}
/* Bordure animée — border-beam */
@property --v-angle{syntax:'';initial-value:0deg;inherits:false}
.v-beam{padding:1px;border-radius:var(--radius);background:conic-gradient(from var(--v-angle),transparent 70%,var(--accent) 85%,transparent 100%),var(--border);animation:v-rotate 3s linear infinite}
.v-beam__inner{padding:28px 40px;border-radius:calc(var(--radius) - 1px);background:var(--surface);color:var(--text);font:600 16px var(--font)}
@keyframes v-rotate{to{--v-angle:360deg}}
/* Bandeau défilant — marquee */
.v-marquee{width:100%;overflow:hidden;border-block:1px solid var(--border);padding:16px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}
.v-marquee__track{display:flex;gap:32px;width:max-content;animation:v-marquee 20s linear infinite;font:500 15px var(--mono);color:var(--muted);letter-spacing:.1em}
.v-marquee__track span:nth-child(even){color:var(--accent)}
@keyframes v-marquee{to{transform:translateX(-50%)}}
/* Séparateur — divider */
.v-divider{display:flex;align-items:center;gap:14px;width:100%;max-width:420px;color:var(--dim);font:13px var(--mono)}
.v-divider::before,.v-divider::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--border-2),transparent)}
/* ═════ Terminal & code ═════ */
/* Fenêtre terminal — terminal */
.v-term{width:100%;max-width:640px;background:var(--deep);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:0 20px 80px -20px var(--accent-glow);font-family:var(--mono);font-size:14px}
.v-term__bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--border)}
.v-term__dot{width:12px;height:12px;border-radius:50%}
.v-term__title{margin-left:10px;color:var(--dim);font-size:13px}
.v-term__body{padding:20px;line-height:1.9;color:var(--text)}
.v-term__cmd{color:var(--accent)}
.v-term__body .ok{color:var(--green);font-weight:500}
.v-term__caret{display:inline-block;width:8px;height:16px;margin-left:4px;vertical-align:-3px;background:var(--grad);animation:v-blink 1s steps(1) infinite}
@keyframes v-blink{50%{opacity:0}}
/* Bloc de code + copier — code-block */
.v-code{width:100%;max-width:560px;background:var(--deep);border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;font-family:var(--mono)}
.v-code__head{display:flex;justify-content:space-between;align-items:center;padding:8px 14px;border-bottom:1px solid var(--border);color:var(--dim);font-size:12px}
.v-code__copy{background:none;border:1px solid var(--border-2);color:var(--muted);border-radius:6px;padding:3px 10px;font:12px var(--mono);cursor:pointer}
.v-code__copy:hover{color:var(--accent);border-color:var(--accent)}
.v-code pre{margin:0;padding:16px;font-size:13.5px;line-height:1.7;color:var(--text);overflow-x:auto}
.v-code .c{color:var(--dim)}
.v-code .s{color:var(--accent)}
.v-code .f{color:var(--green)}
/* Flux de logs — log-stream */
.v-log{width:100%;max-width:560px;margin:0;padding:12px 0;list-style:none;background:var(--deep);border:1px solid var(--border);border-radius:var(--radius-sm);font:13px/1.9 var(--mono);color:var(--muted)}
.v-log li{display:flex;gap:12px;padding:0 16px}
.v-log li:hover{background:var(--surface)}
.v-log time{color:var(--dim)}
.v-log__lvl{width:40px;font-weight:500}
.v-log__lvl.info{color:var(--blue)}
.v-log__lvl.ok{color:var(--green)}
.v-log__lvl.warn{color:var(--orange)}
.v-log__lvl.err{color:var(--red)}
/* Raccourcis clavier — kbd */
.v-kbd-line{color:var(--muted);font-size:15px}
.v-kbd{display:inline-block;min-width:24px;padding:2px 7px;border:1px solid var(--border-2);border-bottom-width:2px;border-radius:6px;background:var(--surface-2);color:var(--text);font:500 12px var(--mono);text-align:center}
/* Diff de code — diff */
.v-diff{width:100%;max-width:560px;border:1px solid var(--border-2);border-radius:var(--radius-sm);background:var(--deep);overflow:hidden;font:13px/1.8 var(--mono)}
.v-diff__head{display:flex;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--border);color:var(--muted)}
.v-diff__head b{color:var(--green);font-weight:600}
.v-diff__head i{color:var(--red);font-style:normal}
.v-diff__l{display:grid;grid-template-columns:44px 1fr;color:var(--muted)}
.v-diff__l u{padding-right:10px;text-align:right;text-decoration:none;color:var(--dim);user-select:none}
.v-diff__l code{padding:0 12px;font:inherit;white-space:pre;overflow:hidden;text-overflow:ellipsis}
.v-diff__l.is-add{background:rgba(74,222,128,.08);color:var(--green)}
.v-diff__l.is-del{background:rgba(248,113,113,.08);color:var(--red)}
/* Diff unifié / côte à côte — diff-split */
.v-dv{font-family:var(--font);color:var(--text);border:1px solid var(--border);border-radius:14px;background:var(--surface);width:100%;max-width:720px;overflow:hidden}
.v-dv input{display:none}
.v-dv header{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--border);font:600 13px var(--mono)}
.v-dv header em{font:700 12px var(--mono);font-style:normal}
.v-dv header .a{color:var(--green)}
.v-dv header .d{color:var(--red)}
.v-dv nav{display:flex;margin-left:auto;padding:2px;border-radius:8px;background:var(--deep)}
.v-dv label{padding:4px 10px;border-radius:6px;color:var(--muted);font:600 12px var(--font);cursor:pointer}
#v-dv-u:checked~header label[for=v-dv-u],#v-dv-s:checked~header label[for=v-dv-s]{background:var(--surface-2);color:var(--text)}
.v-dv__split{display:none;grid-template-columns:1fr 1fr}
#v-dv-s:checked~.v-dv__uni{display:none}
#v-dv-s:checked~.v-dv__split{display:grid}
.v-dv__split>div+div{border-left:1px solid var(--border)}
.v-dv__uni,.v-dv__split>div{overflow-x:auto;font:12px/1.7 var(--mono)}
.v-dv__uni>div,.v-dv__split>div>div{display:flex;white-space:pre}
.v-dv i{flex:none;width:34px;padding-right:8px;color:var(--dim);font-style:normal;text-align:right;user-select:none}
.v-dv b{flex:none;width:16px;color:var(--dim);font-weight:400}
.v-dv code{padding-right:12px;font:inherit;color:var(--muted)}
.v-dv .add{background:rgba(74,222,128,.09)}
.v-dv .add code,.v-dv .add b{color:var(--green)}
.v-dv .del{background:rgba(248,113,113,.09)}
.v-dv .del code,.v-dv .del b{color:var(--red)}
.v-dv .nil{background:repeating-linear-gradient(-45deg,transparent 0 6px,rgba(255,255,255,.025) 6px 12px)}
/* Arborescence de fichiers — file-tree */
.v-tree{width:100%;max-width:280px;padding:10px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--deep);font:13px/1.9 var(--mono);color:var(--muted)}
.v-tree details>:not(summary){margin-left:14px;padding-left:8px;border-left:1px solid var(--border)}
.v-tree summary{padding:0 8px;border-radius:6px;color:var(--text);cursor:pointer;list-style:none}
.v-tree summary::-webkit-details-marker{display:none}
.v-tree summary::before{content:"▸ ";color:var(--accent)}
.v-tree details[open]>summary::before{content:"▾ "}
.v-tree a{display:flex;justify-content:space-between;padding:0 8px;border-radius:6px;cursor:pointer}
.v-tree a:hover,.v-tree summary:hover{background:var(--surface-2);color:var(--text)}
.v-tree a.is-on{background:var(--accent-soft);color:var(--accent)}
.v-tree em{font-style:normal;color:var(--orange)}
.v-tree em.is-new{color:var(--green)}
/* Explorateur JSON — json-tree */
.v-json{width:100%;max-width:340px;padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--deep);color:var(--muted);font:13px/1.9 var(--mono)}
.v-json p{margin:0}
.v-json details>:not(summary){margin-left:8px;padding-left:12px;border-left:1px dashed var(--border-2)}
.v-json summary{cursor:pointer;list-style:none}
.v-json summary::-webkit-details-marker{display:none}
.v-json summary::before{content:"▸ ";color:var(--dim)}
.v-json details[open]>summary::before{content:"▾ "}
.v-json summary i{color:var(--dim);font-style:normal}
.v-json .k{color:var(--accent)}
.v-json .s{color:var(--accent-2)}
.v-json .n{color:var(--orange)}
.v-json .b{color:var(--green)}
/* Erreur + stack trace — stack-trace */
.v-err{width:100%;max-width:500px;border:1px solid rgba(248,113,113,.3);border-radius:var(--radius);background:var(--surface);overflow:hidden}
.v-err__head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px 0}
.v-err__head b{color:var(--red);font:700 14px var(--mono)}
.v-err__head span{color:var(--dim);font:12px var(--mono)}
.v-err__msg{margin:6px 18px 14px;color:var(--text);font:800 16px/1.4 var(--font)}
.v-err__stack{margin:0;padding:0;list-style:none;background:var(--deep);border-block:1px solid var(--border);font:12px/1.5 var(--mono)}
.v-err__stack li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;padding:8px 18px;color:var(--dim)}
.v-err__stack li+li{border-top:1px solid var(--border)}
.v-err__stack li.is-app{color:var(--muted);box-shadow:inset 2px 0 var(--red)}
.v-err__stack li.is-app code{color:var(--text)}
.v-err__stack code{font:inherit}
.v-err__foot{display:flex;justify-content:space-between;padding:10px 18px;color:var(--dim);font-size:12px}
/* ═════ Dev & API ═════ */
/* Requête API — api-request */
.v-api{width:100%;max-width:520px;border:1px solid var(--border-2);border-radius:var(--radius-sm);background:var(--deep);overflow:hidden;font:13px/1.6 var(--mono)}
.v-api__line{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--border)}
.v-api__m{padding:2px 8px;border-radius:6px;background:rgba(74,222,128,.12);color:var(--green);font-weight:700}
.v-api__line code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);font:inherit}
.v-api__s{color:var(--green);white-space:nowrap}
.v-api__s::before{content:"";display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:currentColor}
.v-api__json{margin:0;padding:14px;color:var(--muted);font:inherit;white-space:pre;overflow:auto}
.v-api__json .k{color:var(--accent)}
.v-api__json .s{color:var(--accent-2)}
.v-api__json .n{color:var(--orange)}
.v-api__json .b{color:var(--green)}
/* Liste d'endpoints — routes */
.v-routes{width:100%;max-width:560px;margin:0;padding:0;list-style:none;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);overflow:hidden}
.v-routes li{display:grid;grid-template-columns:70px auto 1fr;align-items:center;gap:12px;padding:11px 14px;cursor:pointer}
.v-routes li+li{border-top:1px solid var(--border)}
.v-routes li:hover{background:var(--surface-2)}
.v-routes b{padding:3px 0;border-radius:6px;text-align:center;font:700 11px var(--mono);letter-spacing:.5px}
.v-routes code{color:var(--text);font:13px var(--mono)}
.v-routes span{justify-self:end;color:var(--dim);font-size:13px}
.v-routes .is-get{background:rgba(95,232,240,.12);color:var(--accent-2)}
.v-routes .is-post{background:rgba(74,222,128,.12);color:var(--green)}
.v-routes .is-patch{background:rgba(251,191,36,.12);color:var(--orange)}
.v-routes .is-del{background:rgba(248,113,113,.12);color:var(--red)}
@media (max-width:520px){.v-routes span{display:none}}
/* Clé API — api-key */
.v-key{width:100%;max-width:480px;padding:18px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
.v-key__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.v-key__top b{font:800 15px var(--font);color:var(--text)}
.v-key__live{display:flex;align-items:center;gap:6px;color:var(--green);font:12px var(--mono)}
.v-key__live::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.v-key__field{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 14px;border:1px solid var(--border-2);border-radius:10px;background:var(--deep)}
.v-key__field code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font:13px var(--mono)}
.v-key__field button{padding:6px 12px;border:0;border-radius:7px;background:var(--grad);color:var(--accent-ink);font:800 12px var(--font);cursor:pointer}
.v-key__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:12px}
.v-key__meta span{padding:2px 8px;border-radius:6px;background:var(--accent-soft);color:var(--accent);font:11px var(--mono)}
.v-key__meta em{margin-left:auto;color:var(--dim);font:normal 12px var(--font)}
/* Livraisons webhook — webhooks */
.v-hooks{width:100%;max-width:560px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);overflow:hidden;font:13px var(--mono)}
.v-hooks__head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px;padding:12px 14px;border-bottom:1px solid var(--border);color:var(--muted)}
.v-hooks__head code{min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--text);font:inherit}
.v-hooks__head span{color:var(--dim);font-size:12px}
.v-hooks__row{display:grid;grid-template-columns:48px 1fr auto auto;align-items:center;gap:12px;padding:10px 14px;cursor:pointer}
.v-hooks__row+.v-hooks__row{border-top:1px solid var(--border)}
.v-hooks__row:hover{background:var(--surface-2)}
.v-hooks__row b{padding:2px 0;border-radius:6px;text-align:center;font-weight:700;font-size:12px}
.v-hooks__row b.is-ok{background:rgba(74,222,128,.12);color:var(--green)}
.v-hooks__row b.is-ko{background:rgba(248,113,113,.12);color:var(--red)}
.v-hooks__row code{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);font:inherit}
.v-hooks__row span,.v-hooks__row em{color:var(--dim);font-size:12px;font-style:normal}
@media (max-width:520px){.v-hooks__row em{display:none}}
/* Schéma de table — db-schema */
.v-schema{width:100%;max-width:320px;border:1px solid var(--border-2);border-radius:var(--radius-sm);background:var(--deep);overflow:hidden;font:13px var(--mono)}
.v-schema__head{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:var(--accent-soft);border-bottom:1px solid var(--border-2)}
.v-schema__head b{color:var(--text);font-weight:700}
.v-schema__head span{color:var(--dim);font-size:11px}
.v-schema__col{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:8px;padding:8px 14px}
.v-schema__col+.v-schema__col{border-top:1px solid var(--border)}
.v-schema__col em{font:normal 700 10px var(--mono)}
.v-schema__col em.is-pk{color:var(--orange)}
.v-schema__col em.is-fk{color:var(--accent-2)}
.v-schema__col code{color:var(--text);font:inherit}
.v-schema__col span{color:var(--dim);font-size:12px}
/* Variables d'environnement — env */
.v-env{width:100%;max-width:480px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--deep);font:13px var(--mono);overflow:hidden}
.v-env__head{display:flex;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--border);color:var(--muted)}
.v-env__head em{font-style:normal;color:var(--dim)}
.v-env__row{display:flex;justify-content:space-between;gap:16px;padding:10px 14px}
.v-env__row+.v-env__row{border-top:1px solid var(--border)}
.v-env__row code{color:var(--accent-2);font:inherit}
.v-env__row span{min-width:0;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v-env__row .is-secret{color:var(--dim);letter-spacing:1px}
/* Éditeur .env masqué — env-reveal */
.v-envx{font-family:var(--font);color:var(--text);border:1px solid var(--border);border-radius:14px;background:var(--surface);width:100%;max-width:560px;overflow:hidden}
.v-envx header{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--border)}
.v-envx header b{font:700 13px var(--mono)}
.v-envx header span{color:var(--dim);font:12px var(--mono)}
.v-envx header button{margin-left:auto;padding:5px 10px;border:1px solid var(--border-2);border-radius:8px;background:none;color:var(--muted);font:600 12px var(--font);cursor:pointer}
.v-envx__row{display:flex;align-items:center;gap:10px;padding:9px 14px;border-top:1px solid var(--border);font:12px var(--mono)}
.v-envx__row:first-of-type{border-top:0}
.v-envx__row:hover{background:var(--surface-2)}
.v-envx__row code{flex:0 0 38%;overflow:hidden;color:var(--accent-2);text-overflow:ellipsis}
.v-envx__row input{display:none}
.v-envx__v{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--text)}
.v-envx__v em{display:none;font-style:normal}
.v-envx__v s{color:var(--dim);text-decoration:none;letter-spacing:1px}
.v-envx__row input:checked~.v-envx__v em{display:inline}
.v-envx__row input:checked~.v-envx__v s{display:none}
.v-envx__row label,.v-envx__row>button{display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:7px;background:none;color:var(--dim);cursor:pointer}
.v-envx__row label:hover,.v-envx__row>button:hover{background:var(--accent-soft);color:var(--text)}
.v-envx__row input:checked~label{color:var(--accent)}
/* Feature flags — feature-flags */
.v-flags{width:100%;max-width:460px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);overflow:hidden}
.v-flag{display:flex;align-items:center;gap:14px;padding:14px 18px;cursor:pointer}
.v-flag+.v-flag{border-top:1px solid var(--border)}
.v-flag div{flex:1;min-width:0}
.v-flag code{display:block;color:var(--text);font:13px var(--mono)}
.v-flag span{color:var(--dim);font-size:13px}
.v-flag em{color:var(--accent-2);font:normal 12px var(--mono)}
.v-flag input{position:absolute;opacity:0;pointer-events:none}
.v-flag i{position:relative;flex:none;width:38px;height:22px;border-radius:999px;background:var(--border-2);transition:background .2s}
.v-flag i::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--text);transition:transform .2s}
.v-flag input:checked+i{background:var(--grad)}
.v-flag input:checked+i::after{transform:translateX(16px);background:var(--accent-ink)}
.v-flag input:focus-visible+i{outline:2px solid var(--accent-2);outline-offset:2px}
/* Historique Git — git-log */
.v-git{width:100%;max-width:480px;margin:0;padding:0;list-style:none}
.v-git li{position:relative;display:flex;align-items:flex-start;gap:14px;padding-bottom:18px}
.v-git li::before{content:"";position:absolute;left:6px;top:16px;bottom:-2px;width:2px;background:var(--border-2)}
.v-git li:last-child{padding-bottom:0}
.v-git li:last-child::before{display:none}
.v-git i{position:relative;z-index:1;flex:none;width:14px;height:14px;margin-top:4px;border-radius:50%;border:2px solid var(--accent);background:var(--bg)}
.v-git li:first-child i{background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.v-git .is-merge i{border-color:var(--accent-2)}
.v-git div{flex:1;min-width:0}
.v-git b{display:block;color:var(--text);font:800 14px var(--font)}
.v-git span{color:var(--dim);font-size:12px}
.v-git code{color:var(--accent-2);font:12px var(--mono)}
.v-git em{flex:none;padding:2px 8px;border-radius:999px;border:1px solid var(--border-2);color:var(--accent);font:normal 11px var(--mono)}
/* Changelog — changelog */
.v-chlog{width:100%;max-width:480px;padding-left:20px;border-left:2px solid var(--border-2)}
.v-chlog__ver{position:relative;display:flex;align-items:baseline;gap:12px;margin-bottom:12px}
.v-chlog__ver::before{content:"";position:absolute;left:-27px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--grad);box-shadow:0 0 0 4px var(--bg)}
.v-chlog__ver b{font:800 20px var(--font);color:var(--text)}
.v-chlog__ver span{color:var(--dim);font:12px var(--mono)}
.v-chlog ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.v-chlog li{display:flex;align-items:baseline;gap:10px;color:var(--muted);font-size:15px}
.v-chlog em{flex:none;width:76px;padding:2px 0;border-radius:6px;text-align:center;font:normal 800 11px var(--font)}
.v-chlog .is-new{background:var(--accent-soft);color:var(--accent)}
.v-chlog .is-imp{background:rgba(95,232,240,.1);color:var(--accent-2)}
.v-chlog .is-fix{background:rgba(74,222,128,.1);color:var(--green)}
/* Réponse API — api-response */
.v-apires{width:100%;max-width:520px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);overflow:hidden;font-family:var(--font)}
.v-apires__bar{display:flex;align-items:center;gap:14px;padding:12px 14px;border-bottom:1px solid var(--border);font:12px var(--mono);color:var(--muted)}
.v-apires__code{padding:3px 9px;border-radius:6px;font-weight:700;color:var(--green);background:color-mix(in srgb,var(--green) 14%,transparent)}
.v-apires input{position:absolute;opacity:0;pointer-events:none}
.v-apires nav{display:flex;gap:4px;padding:8px 10px 0;border-bottom:1px solid var(--border)}
.v-apires nav label{padding:8px 12px;border-bottom:2px solid transparent;font:600 13px var(--font);color:var(--muted);cursor:pointer}
.v-apires nav em{margin-left:4px;padding:1px 6px;border-radius:99px;background:var(--surface-2);font:11px var(--mono);font-style:normal}
.v-apires__rb:checked~nav label[for="v-apires-b"],.v-apires__rh:checked~nav label[for="v-apires-h"]{color:var(--text);border-bottom-color:var(--accent)}
.v-apires__body{margin:0;padding:14px 16px;background:var(--bg);font:13px/1.65 var(--mono);color:var(--muted);overflow-x:auto}
.v-apires__body i{font-style:normal;color:var(--accent)}
.v-apires__body b{font-weight:400;color:var(--green)}
.v-apires__body u{text-decoration:none;color:var(--orange)}
.v-apires__body s{text-decoration:none;color:var(--dim)}
.v-apires__head{display:none;grid-template-columns:auto 1fr;gap:8px 18px;margin:0;padding:14px 16px;background:var(--bg);font:13px var(--mono)}
.v-apires__head dt{color:var(--accent-2)}
.v-apires__head dd{margin:0;color:var(--text);word-break:break-all}
.v-apires__rh:checked~.v-apires__body{display:none}
.v-apires__rh:checked~.v-apires__head{display:grid}
/* Exemples de code (SDK) — sdk-snippets */
.v-sdk{width:100%;max-width:560px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);overflow:hidden}
.v-sdk input{position:absolute;opacity:0;pointer-events:none}
.v-sdk header{display:flex;align-items:center;gap:2px;padding:6px 8px;border-bottom:1px solid var(--border);background:var(--surface)}
.v-sdk header label{padding:7px 12px;border-radius:var(--radius-sm);font:600 13px var(--font);color:var(--muted);cursor:pointer;transition:color .15s,background .15s}
.v-sdk header label:hover{color:var(--text)}
.v-sdk header button{margin-left:auto;padding:6px 12px;border:1px solid var(--border-2);border-radius:var(--radius-sm);background:none;color:var(--muted);font:600 12px var(--font);cursor:pointer}
.v-sdk header button:hover{color:var(--text);border-color:var(--accent)}
#v-sdk-1:checked~header label[for="v-sdk-1"],#v-sdk-2:checked~header label[for="v-sdk-2"],#v-sdk-3:checked~header label[for="v-sdk-3"]{background:var(--surface-2);color:var(--text)}
.v-sdk pre{display:none;margin:0;padding:16px;font:13px/1.7 var(--mono);color:var(--text);overflow-x:auto}
#v-sdk-1:checked~pre[data-l="1"],#v-sdk-2:checked~pre[data-l="2"],#v-sdk-3:checked~pre[data-l="3"]{display:block}
.v-sdk pre b{font-weight:400;color:var(--accent)}
.v-sdk pre s{text-decoration:none;color:var(--green)}
.v-sdk pre i{font-style:normal;color:var(--dim)}
/* Permissions d'un jeton — token-scopes */
.v-scopes{width:100%;max-width:480px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);font-family:var(--font)}
.v-scopes header{padding:16px 18px;border-bottom:1px solid var(--border)}
.v-scopes header b{display:block;font:700 15px var(--font);color:var(--text)}
.v-scopes header small{font:13px var(--font);color:var(--muted)}
.v-scopes__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:12px 18px;border-bottom:1px solid var(--border)}
.v-scopes__row b{display:block;font:700 14px var(--font);color:var(--text)}
.v-scopes__row code{font:12px var(--mono);color:var(--dim)}
.v-scopes__seg{display:inline-flex;padding:3px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg)}
.v-scopes__seg label{cursor:pointer}
.v-scopes__seg input{position:absolute;opacity:0;pointer-events:none}
.v-scopes__seg span{display:block;padding:5px 10px;border-radius:6px;font:600 12px var(--font);color:var(--muted);transition:background .15s,color .15s}
.v-scopes__seg label:hover span{color:var(--text)}
.v-scopes__seg input:checked+span{background:var(--surface-2);color:var(--text)}
.v-scopes__seg label:last-child input:checked+span{background:var(--accent-soft);color:var(--accent)}
.v-scopes__seg input:focus-visible+span{outline:2px solid var(--accent-2)}
.v-scopes footer{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px;font:13px var(--font);color:var(--muted)}
.v-scopes footer b{color:var(--text)}
.v-scopes footer button{padding:9px 16px;border:0;border-radius:var(--radius-sm);background:var(--grad);color:var(--accent-ink);font:700 13px var(--font);cursor:pointer}
/* Console SQL — sql-console */
.v-sql{width:100%;max-width:540px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);overflow:hidden;font-family:var(--font)}
.v-sql header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--border)}
.v-sql header span{display:flex;align-items:center;gap:8px;font:12px var(--mono);color:var(--muted)}
.v-sql header i{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}
.v-sql header button{display:flex;align-items:center;gap:8px;padding:7px 12px;border:0;border-radius:var(--radius-sm);background:var(--grad);color:var(--accent-ink);font:700 13px var(--font);cursor:pointer}
.v-sql header kbd{padding:1px 5px;border-radius:4px;background:rgba(0,0,0,.18);font:11px var(--mono)}
.v-sql__q{margin:0;padding:14px 16px;background:var(--bg);font:13px/1.7 var(--mono);color:var(--text);overflow-x:auto}
.v-sql__q b{font-weight:400;color:var(--accent)}
.v-sql__q s{text-decoration:none;color:var(--green)}
.v-sql__q u{text-decoration:none;color:var(--orange)}
.v-sql__meta{display:flex;justify-content:space-between;padding:8px 14px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);font:12px var(--mono);color:var(--muted)}
.v-sql__meta span:first-child{color:var(--green)}
.v-sql__res{overflow-x:auto}
.v-sql table{width:100%;border-collapse:collapse;font:13px var(--mono)}
.v-sql th{padding:8px 14px;text-align:left;font-weight:600;color:var(--accent-2);background:var(--surface-2);white-space:nowrap}
.v-sql td{padding:8px 14px;border-top:1px solid var(--border);color:var(--text);white-space:nowrap}
.v-sql tbody tr:hover td{background:var(--accent-soft)}
/* Journal d'audit — audit-log */
.v-audit{width:100%;max-width:520px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);font-family:var(--font)}
.v-audit header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border)}
.v-audit header b{font:700 15px var(--font);color:var(--text)}
.v-audit__f{display:flex;gap:4px}
.v-audit__f span{padding:4px 10px;border-radius:99px;border:1px solid var(--border);font:600 12px var(--font);color:var(--muted);cursor:pointer}
.v-audit__f span.on{border-color:var(--accent);color:var(--text);background:var(--accent-soft)}
.v-audit ol{list-style:none;margin:0;padding:8px 16px}
.v-audit li{position:relative;display:grid;grid-template-columns:44px 1fr;gap:12px;padding:10px 0 10px 4px}
.v-audit li::before{content:"";position:absolute;left:52px;top:16px;width:8px;height:8px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 20%,transparent)}
.v-audit li>div{padding-left:22px}
.v-audit time{padding-top:1px;font:12px var(--mono);color:var(--dim)}
.v-audit p{margin:0;font:14px/1.45 var(--font);color:var(--muted)}
.v-audit p b{color:var(--text)}
.v-audit code{padding:1px 6px;border-radius:5px;background:var(--surface-2);font:12px var(--mono);color:var(--accent-2)}
.v-audit small{display:block;margin-top:2px;font:12px var(--mono);color:var(--dim)}
/* ═════ Infra & déploiement ═════ */
/* Carte serveur — server */
.v-server{width:100%;max-width:400px;padding:20px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
.v-server__top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px}
.v-server__top b{display:block;font:800 17px var(--font);color:var(--text)}
.v-server__top span{color:var(--dim);font-size:13px}
.v-server__top em{display:flex;align-items:center;gap:6px;color:var(--green);font:normal 12px var(--mono)}
.v-server__top em::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;animation:v-server-blink 2s infinite}
.v-server__meter{display:grid;grid-template-columns:56px 1fr 84px;align-items:center;gap:12px;margin-bottom:10px;font-size:13px}
.v-server__meter span{color:var(--muted)}
.v-server__meter i{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--accent),var(--accent-2)) 0/calc(var(--v) * 1%) 100% no-repeat,var(--border)}
.v-server__meter.is-warn i{background:linear-gradient(90deg,var(--orange),var(--red)) 0/calc(var(--v) * 1%) 100% no-repeat,var(--border)}
.v-server__meter code{color:var(--text);font:12px var(--mono);text-align:right}
.v-server__foot{display:flex;justify-content:space-between;margin-top:16px;padding-top:14px;border-top:1px solid var(--border);color:var(--dim);font-size:12px}
.v-server__foot code{color:var(--accent-2);font:12px var(--mono)}
@keyframes v-server-blink{50%{opacity:.3}}
/* Conteneurs Docker — containers */
.v-ctr{width:100%;max-width:600px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);overflow:hidden}
.v-ctr__row{display:grid;grid-template-columns:10px 1fr auto 110px;align-items:center;gap:14px;padding:12px 18px}
.v-ctr__row+.v-ctr__row{border-top:1px solid var(--border)}
.v-ctr__row i{width:10px;height:10px;border-radius:50%;background:var(--dim)}
.v-ctr__row.is-up i{background:var(--green);box-shadow:0 0 8px rgba(74,222,128,.5)}
.v-ctr__row.is-restart i{background:var(--orange);animation:v-ctr-pulse 1s infinite}
.v-ctr__row div{min-width:0}
.v-ctr__row b{display:block;color:var(--text);font:800 14px var(--font)}
.v-ctr__row span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dim);font:12px var(--mono)}
.v-ctr__row code{color:var(--accent-2);font:12px var(--mono)}
.v-ctr__row em{color:var(--muted);font:normal 12px var(--mono);text-align:right}
.v-ctr__row.is-restart em{color:var(--orange)}
@keyframes v-ctr-pulse{50%{opacity:.3}}
@media (max-width:520px){.v-ctr__row{grid-template-columns:10px 1fr auto}.v-ctr__row code{display:none}}
/* Carte de déploiement — deploy-card */
.v-deploy{width:100%;max-width:420px;padding:20px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);position:relative;overflow:hidden}
.v-deploy::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:var(--grad)}
.v-deploy__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.v-deploy__state{display:flex;align-items:center;gap:7px;color:var(--green);font:800 13px var(--font)}
.v-deploy__state::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
.v-deploy__top em{color:var(--dim);font:normal 12px var(--font)}
.v-deploy__url{display:block;margin-bottom:16px;color:var(--text);font:800 20px var(--font);text-decoration:none;cursor:pointer}
.v-deploy__url:hover{color:var(--accent-2)}
.v-deploy__meta{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:12px 0;border-block:1px solid var(--border)}
.v-deploy__meta span{display:block;color:var(--dim);font-size:11px;text-transform:uppercase;letter-spacing:1px}
.v-deploy__meta code{color:var(--accent-2);font:12px var(--mono)}
.v-deploy__msg{margin:12px 0 0;color:var(--muted);font-size:14px}
/* Timeline de déploiement — deploy-timeline */
.v-dtl{font-family:var(--font);color:var(--text);border:1px solid var(--border);border-radius:14px;background:var(--surface);width:100%;max-width:460px;padding:16px 18px}
.v-dtl header{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:14px}
.v-dtl header b{font:800 15px var(--font)}
.v-dtl header .run{padding:3px 8px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font:700 11px var(--font)}
.v-dtl header button{margin-left:auto;padding:6px 10px;border:1px solid rgba(248,113,113,.35);border-radius:8px;background:none;color:var(--red);font:600 12px var(--font);cursor:pointer}
.v-dtl header button:hover{background:rgba(248,113,113,.1)}
.v-dtl ol{margin:0;padding:0;list-style:none}
.v-dtl li{position:relative;display:flex;align-items:flex-start;gap:12px;padding-bottom:16px}
.v-dtl li:last-child{padding-bottom:0}
.v-dtl li:not(:last-child)::after{content:'';position:absolute;left:8px;top:20px;bottom:0;width:2px;background:var(--border-2)}
.v-dtl li.done:not(:last-child)::after{background:var(--green)}
.v-dtl li.run::after{background:linear-gradient(var(--accent),var(--border-2))!important}
.v-dtl li>i{position:relative;z-index:1;flex:none;display:grid;place-items:center;width:18px;height:18px;border:2px solid var(--border-2);border-radius:50%;background:var(--surface);box-sizing:border-box}
.v-dtl li.done>i{border-color:var(--green);background:var(--green)}
.v-dtl li.done>i::after{content:'';width:5px;height:8px;margin-top:-2px;border:solid var(--surface);border-width:0 2px 2px 0;transform:rotate(45deg)}
.v-dtl li.run>i{border-color:var(--accent);border-top-color:transparent;animation:v-dtl-spin .8s linear infinite}
.v-dtl li div{display:grid;flex:1;gap:2px}
.v-dtl li b{font:700 14px var(--font)}
.v-dtl li.wait b{color:var(--dim)}
.v-dtl li span{color:var(--muted);font:12px var(--mono)}
.v-dtl li.wait span{color:var(--dim)}
.v-dtl li em{color:var(--dim);font:12px var(--mono);font-style:normal}
@keyframes v-dtl-spin{to{transform:rotate(360deg)}}
/* Pipeline CI/CD — pipeline */
.v-pipe{display:flex;width:100%;max-width:620px;padding:22px 12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);overflow-x:auto}
.v-pipe__step{position:relative;flex:1;min-width:92px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.v-pipe__step::before{content:"";position:absolute;top:14px;left:calc(-50% + 18px);right:calc(50% + 18px);height:2px;background:var(--border-2)}
.v-pipe__step:first-child::before{display:none}
.v-pipe__step.is-ok::before,.v-pipe__step.is-run::before{background:var(--grad)}
.v-pipe__step i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:2px solid var(--border-2);background:var(--deep);font-style:normal;font-size:13px;color:var(--dim)}
.v-pipe__step.is-ok i{border-color:var(--green);color:var(--green)}
.v-pipe__step.is-ok i::after{content:"✓"}
.v-pipe__step.is-run i{border-color:var(--accent);border-top-color:transparent;animation:v-pipe-spin .9s linear infinite}
.v-pipe__step b{font:800 14px var(--font);color:var(--text)}
.v-pipe__step span{font:12px var(--mono);color:var(--dim)}
.v-pipe__step.is-run span{color:var(--accent)}
@keyframes v-pipe-spin{to{transform:rotate(360deg)}}
/* Tâches planifiées — cron */
.v-cron{width:100%;max-width:560px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);overflow:hidden}
.v-cron__row{display:grid;grid-template-columns:108px 1fr auto;align-items:center;gap:14px;padding:13px 18px}
.v-cron__row+.v-cron__row{border-top:1px solid var(--border)}
.v-cron__row code{padding:4px 8px;border-radius:6px;background:var(--deep);border:1px solid var(--border);color:var(--accent-2);font:12px var(--mono);text-align:center}
.v-cron__row b{display:block;color:var(--text);font:800 14px var(--font)}
.v-cron__row span{color:var(--dim);font-size:12px}
.v-cron__row em{font:normal 12px var(--mono);white-space:nowrap}
.v-cron__row .is-ok{color:var(--green)}
.v-cron__row .is-ko{color:var(--red)}
/* Constructeur de cron — cron-next */
.v-cronx{font-family:var(--font);color:var(--text);border:1px solid var(--border);border-radius:14px;background:var(--surface);width:100%;max-width:440px;padding:18px}
.v-cronx__expr{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.v-cronx__expr label{display:grid;gap:5px;text-align:center}
.v-cronx__expr input{width:100%;min-width:0;box-sizing:border-box;padding:10px 0;border:1px solid var(--border-2);border-radius:10px;background:var(--deep);color:var(--text);font:700 18px var(--mono);text-align:center;outline:0}
.v-cronx__expr input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.v-cronx__expr span{color:var(--dim);font:11px var(--mono)}
.v-cronx__fr{margin:14px 0;padding:10px 12px;border-radius:10px;background:var(--accent-soft);color:var(--muted);font:600 14px var(--font)}
.v-cronx__fr b{color:var(--text)}
.v-cronx__pre{display:flex;flex-wrap:wrap;gap:6px}
.v-cronx__pre button{padding:5px 10px;border:1px solid var(--border-2);border-radius:999px;background:none;color:var(--muted);font:600 12px var(--font);cursor:pointer}
.v-cronx__pre button:hover{border-color:var(--accent);color:var(--text)}
.v-cronx__next{display:grid;gap:4px;margin-top:16px}
.v-cronx__next small{margin-bottom:4px;color:var(--dim);font:600 11px var(--font);text-transform:uppercase;letter-spacing:.08em}
.v-cronx__next div{display:flex;align-items:center;gap:10px;font:13px var(--mono)}
.v-cronx__next i{display:grid;place-items:center;width:20px;height:20px;border-radius:6px;background:var(--surface-2);color:var(--dim);font:11px var(--mono)}
.v-cronx__next em{margin-left:auto;color:var(--dim);font-style:normal;font-size:12px}
/* Gestionnaire de fichiers — file-manager */
.v-files{font-family:var(--font);color:var(--text);border:1px solid var(--border);border-radius:14px;background:var(--surface);display:grid;grid-template-columns:190px 1fr;width:100%;max-width:720px;min-height:300px;overflow:hidden}
.v-files aside{padding:10px 8px;border-right:1px solid var(--border);background:var(--deep);font:13px var(--font)}
.v-files details{padding-left:12px}
.v-files aside>details{padding-left:0}
.v-files summary{padding:4px 6px;border-radius:6px;color:var(--text);font-weight:600;cursor:pointer;list-style:none}
.v-files summary::-webkit-details-marker{display:none}
.v-files summary::before{content:'▸';display:inline-block;width:14px;color:var(--dim);transition:transform .15s}
.v-files details[open]>summary::before{transform:rotate(90deg)}
.v-files aside a{display:block;padding:4px 6px 4px 26px;border-radius:6px;color:var(--muted);cursor:pointer}
.v-files aside a:hover,.v-files summary:hover{background:var(--surface-2)}
.v-files aside a.on{background:var(--accent-soft);color:var(--text)}
.v-files main{display:flex;flex-direction:column;min-width:0;padding:12px}
.v-files nav{display:flex;align-items:center;gap:6px;margin-bottom:10px;color:var(--dim);font:13px var(--font)}
.v-files nav a{color:var(--muted);cursor:pointer}
.v-files nav a:hover{color:var(--accent)}
.v-files nav button{margin-left:auto;padding:6px 12px;border:0;border-radius:8px;background:var(--grad);color:var(--accent-ink);font:700 12px var(--font);cursor:pointer}
.v-files__list>div{display:grid;grid-template-columns:24px minmax(0,1fr) 64px 96px;align-items:center;gap:8px;padding:8px;border-radius:8px;font:13px var(--font);cursor:grab}
.v-files__list>div:hover{background:var(--surface-2)}
.v-files__list>div.on{background:var(--accent-soft)}
.v-files__list b{overflow:hidden;font-weight:600;white-space:nowrap;text-overflow:ellipsis}
.v-files__list em{overflow:hidden;color:var(--dim);font:12px var(--mono);font-style:normal;text-align:right;white-space:nowrap;text-overflow:ellipsis}
.v-files__drop{display:grid;place-items:center;flex:1;min-height:60px;margin-top:10px;border:1.5px dashed var(--border-2);border-radius:10px;color:var(--dim);font:12px var(--font);transition:.2s}
.v-files__drop:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--text)}
@media (max-width:560px){.v-files{grid-template-columns:1fr}.v-files aside{display:none}}
/* Enregistrements DNS — dns-records */
.v-dns{width:100%;max-width:560px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);overflow:hidden;font-family:var(--font)}
.v-dns header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border)}
.v-dns header b{font:700 15px var(--font);color:var(--text)}
.v-dns header span{font:600 12px var(--font);color:var(--green)}
.v-dns__scroll{overflow-x:auto}
.v-dns table{width:100%;border-collapse:collapse;font:13px var(--mono)}
.v-dns th{padding:9px 16px;text-align:left;font:600 11px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--dim)}
.v-dns td{padding:10px 16px;border-top:1px solid var(--border);color:var(--text);white-space:nowrap}
.v-dns td:nth-child(3){color:var(--muted)}
.v-dns em{display:inline-block;min-width:44px;padding:2px 6px;border-radius:5px;text-align:center;font:700 11px var(--mono);font-style:normal;color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent)}
.v-dns td i{display:block;width:8px;height:8px;border-radius:50%;background:var(--orange);animation:v-dns-wait 1.4s ease-in-out infinite}
.v-dns td i.ok{background:var(--green);animation:none}
@keyframes v-dns-wait{50%{opacity:.3}}
.v-dns footer{padding:10px 12px;border-top:1px solid var(--border)}
.v-dns footer button{padding:7px 12px;border:1px dashed var(--border-2);border-radius:var(--radius-sm);background:none;color:var(--muted);font:600 13px var(--font);cursor:pointer}
.v-dns footer button:hover{color:var(--text);border-color:var(--accent)}
/* Clés SSH — ssh-keys */
.v-sshkeys{width:100%;max-width:480px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);font-family:var(--font)}
.v-sshkeys header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border)}
.v-sshkeys header b{font:700 15px var(--font);color:var(--text)}
.v-sshkeys header button{padding:6px 12px;border:1px solid var(--border-2);border-radius:var(--radius-sm);background:var(--surface-2);color:var(--text);font:700 12px var(--font);cursor:pointer}
.v-sshkeys ul{list-style:none;margin:0;padding:4px 0}
.v-sshkeys li{display:flex;align-items:center;gap:14px;padding:12px 16px;border-bottom:1px solid var(--border)}
.v-sshkeys li:last-child{border-bottom:0}
.v-sshkeys li>span{flex:none;width:36px;height:36px;display:grid;place-items:center;border-radius:var(--radius-sm);background:var(--accent-soft);color:var(--accent);font-size:18px}
.v-sshkeys li>div{flex:1;min-width:0}
.v-sshkeys li b{display:block;font:700 14px var(--font);color:var(--text)}
.v-sshkeys li code{display:block;margin:2px 0;font:12px var(--mono);color:var(--accent-2)}
.v-sshkeys li small{display:block;font:12px var(--font);color:var(--dim)}
.v-sshkeys li>button{flex:none;width:30px;height:30px;border:1px solid transparent;border-radius:var(--radius-sm);background:none;color:var(--dim);cursor:pointer}
.v-sshkeys li>button:hover{border-color:color-mix(in srgb,var(--red) 40%,transparent);color:var(--red)}
.v-sshkeys li.is-idle>span{background:var(--surface-2);color:var(--dim)}
.v-sshkeys li.is-idle small{color:var(--orange)}
/* Console serveur de jeu — server-console */
.v-gcon{width:100%;max-width:560px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);overflow:hidden;font-family:var(--font)}
.v-gcon header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border)}
.v-gcon header b{display:block;font:700 15px var(--font);color:var(--text)}
.v-gcon header small{display:flex;align-items:center;gap:6px;font:12px var(--font);color:var(--muted)}
.v-gcon header small i{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}
.v-gcon__pw{display:flex;gap:6px}
.v-gcon__pw button{padding:7px 12px;border:1px solid var(--border-2);border-radius:var(--radius-sm);background:var(--surface-2);font:700 12px var(--font);cursor:pointer;transition:background .15s,color .15s}
.v-gcon__pw .start{color:var(--green)}
.v-gcon__pw .restart{color:var(--orange)}
.v-gcon__pw .stop{color:var(--red)}
.v-gcon__pw button:hover:not(:disabled){background:var(--border)}
.v-gcon__pw button:disabled{opacity:.35;cursor:not-allowed}
.v-gcon__res{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--border)}
.v-gcon__res>div{padding:12px 16px;border-right:1px solid var(--border)}
.v-gcon__res>div:last-child{border-right:0}
.v-gcon__res span{display:block;font:600 11px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--dim)}
.v-gcon__res b{display:block;margin:3px 0 8px;font:700 14px var(--font);color:var(--text);white-space:nowrap}
.v-gcon__res i{display:block;height:4px;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--accent-2)) 0/var(--p) 100% no-repeat,var(--surface-2)}
.v-gcon__log{height:150px;margin:0;padding:12px 16px;overflow:auto;background:var(--bg);font:12px/1.75 var(--mono);color:var(--text);white-space:pre-wrap}
.v-gcon__log span{color:var(--dim)}
.v-gcon__log span.w{color:var(--orange)}
.v-gcon__log span.c{color:var(--accent-2)}
.v-gcon form{display:flex;align-items:center;gap:8px;margin:0;padding:0 16px;border-top:1px solid var(--border);background:var(--bg)}
.v-gcon form span{font:700 13px var(--mono);color:var(--accent)}
.v-gcon form input{flex:1;min-width:0;padding:12px 0;border:0;background:none;color:var(--text);font:13px var(--mono);outline:none}
/* ═════ Monitoring ═════ */
/* Statut des services — status */
.v-status{width:100%;max-width:560px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);overflow:hidden}
.v-status__head{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--border)}
.v-status__head b{display:flex;align-items:center;gap:10px;font:800 15px var(--font);color:var(--text)}
.v-status__head i{width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(74,222,128,.15)}
.v-status__head span{color:var(--dim);font:12px var(--mono)}
.v-status__row{display:grid;grid-template-columns:120px 1fr 64px;align-items:center;gap:14px;padding:12px 18px}
.v-status__row span{color:var(--muted);font-size:14px}
.v-status__row em{font:normal 12px var(--mono);color:var(--green);text-align:right}
.v-status__row em.is-warn{color:var(--orange)}
.v-status__bars{position:relative;height:24px;border-radius:2px;background:repeating-linear-gradient(90deg,rgba(74,222,128,.75) 0 5px,transparent 5px 8px)}
.v-status__bars[style]::after{content:"";position:absolute;top:0;bottom:0;left:calc(var(--down) * 8px);width:5px;background:var(--c,var(--orange))}
@media (max-width:520px){.v-status__row{grid-template-columns:1fr 60px}.v-status__bars{grid-column:1/-1;order:3}}
/* Jauges de ressources — gauges */
.v-gauges{display:flex;flex-wrap:wrap;justify-content:center;gap:20px}
.v-gauge{position:relative;display:grid;place-content:center;width:120px;height:120px;border-radius:50%;background:conic-gradient(var(--accent) 0,var(--accent-2) calc(var(--v) * 1%),var(--border) 0);text-align:center}
.v-gauge::before{content:"";position:absolute;inset:10px;border-radius:50%;background:var(--surface)}
.v-gauge>*{position:relative}
.v-gauge b{font:800 28px/1 var(--font);color:var(--text)}
.v-gauge small{font-size:14px;color:var(--muted)}
.v-gauge span{margin-top:4px;color:var(--dim);font:11px var(--mono);letter-spacing:1px;text-transform:uppercase}
.v-gauge.is-warn{background:conic-gradient(var(--orange) 0,var(--red) calc(var(--v) * 1%),var(--border) 0)}
/* Graphique de requêtes — bar-chart */
.v-chart{width:100%;max-width:440px;padding:20px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
.v-chart__head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px}
.v-chart__head span{display:block;color:var(--muted);font-size:13px}
.v-chart__head b{font:800 30px/1.1 var(--font);color:var(--text)}
.v-chart__head em{font:normal 13px var(--mono);color:var(--green)}
.v-chart__bars{display:flex;align-items:flex-end;gap:4px;height:110px}
.v-chart__bars i{flex:1;height:calc(var(--h) * 1%);border-radius:3px 3px 0 0;background:linear-gradient(var(--accent-2),var(--accent));opacity:.45;transition:opacity .2s}
.v-chart__bars i:hover,.v-chart__bars i:last-child{opacity:1}
.v-chart__axis{display:flex;justify-content:space-between;margin-top:8px;color:var(--dim);font:11px var(--mono)}
/* Latence (percentiles) — latency */
.v-lat{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%;max-width:480px}
.v-lat__item{padding:16px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface)}
.v-lat__item span{color:var(--dim);font:800 11px var(--mono);letter-spacing:1px;text-transform:uppercase}
.v-lat__item b{display:block;margin:4px 0 12px;font:800 28px/1 var(--font);color:var(--text)}
.v-lat__item small{margin-left:3px;font-size:13px;color:var(--muted)}
.v-lat__item i{display:block;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--accent),var(--accent-2)) 0/calc(var(--v) * 1%) 100% no-repeat,var(--border)}
.v-lat__item.is-warn{border-color:rgba(251,191,36,.35)}
.v-lat__item.is-warn b{color:var(--orange)}
.v-lat__item.is-warn i{background:linear-gradient(90deg,var(--orange),var(--red)) 0/calc(var(--v) * 1%) 100% no-repeat,var(--border)}
.v-lat__slo{grid-column:1/-1;margin:0;color:var(--dim);font-size:13px}
.v-lat__slo em{color:var(--orange);font-style:normal}
/* Trace (waterfall) — trace */
.v-trace{width:100%;max-width:580px;padding:16px 18px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);font:12px var(--mono)}
.v-trace__head{display:flex;justify-content:space-between;margin-bottom:12px;color:var(--dim)}
.v-trace__head code{color:var(--text);font:inherit}
.v-trace__row{display:grid;grid-template-columns:130px 1fr 54px;align-items:center;gap:12px;padding:5px 0}
.v-trace__row span{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v-trace__row div{position:relative;height:14px;border-radius:3px;background:repeating-linear-gradient(90deg,var(--border) 0 1px,transparent 1px 25%)}
.v-trace__row i{position:absolute;top:0;bottom:0;left:calc(var(--s) * 1%);width:calc(var(--w) * 1%);border-radius:3px;background:var(--grad)}
.v-trace__row i.is-db{background:linear-gradient(90deg,var(--orange),#f59e0b)}
.v-trace__row em{color:var(--dim);font-style:normal;text-align:right}
/* Quota / rate limit — rate-limit */
.v-quota{width:100%;max-width:420px;padding:20px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
.v-quota__top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px;margin-bottom:12px}
.v-quota__top span{color:var(--muted);font-size:14px}
.v-quota__top b{font:800 20px var(--font);color:var(--text)}
.v-quota__top small{color:var(--dim);font-size:14px}
.v-quota__bar{height:10px;border-radius:5px;background:var(--border);overflow:hidden}
.v-quota__bar i{display:block;width:calc(var(--v) * 1%);height:100%;border-radius:5px;background:linear-gradient(90deg,var(--accent),var(--accent-2) 70%,var(--orange))}
.v-quota__foot{display:flex;justify-content:space-between;margin-top:8px;color:var(--dim);font-size:12px}
.v-quota__foot em{color:var(--orange);font:normal 12px var(--mono)}
.v-quota__headers{display:grid;gap:4px;margin-top:16px;padding:10px 12px;border-radius:8px;background:var(--deep);color:var(--muted);font:12px var(--mono)}
/* Heatmap de commits — heatmap */
.v-heat{max-width:100%;padding:18px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);overflow-x:auto}
.v-heat__grid{display:grid;grid-template-rows:repeat(7,12px);grid-auto-flow:column;grid-auto-columns:12px;gap:3px}
.v-heat i{display:inline-block;width:12px;height:12px;border-radius:3px;background:var(--border)}
.v-heat .l1{background:rgba(154,108,255,.3)}
.v-heat .l2{background:rgba(154,108,255,.6)}
.v-heat .l3{background:var(--accent)}
.v-heat .l4{background:var(--accent-2)}
.v-heat__foot{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;margin-top:12px;color:var(--dim);font-size:12px}
.v-heat__foot span{display:flex;align-items:center;gap:3px}
/* Métrique + sparkline — sparkline */
.v-spark{width:100%;max-width:300px;padding:18px 18px 14px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);font-family:var(--font)}
.v-spark__top{display:flex;justify-content:space-between;align-items:center;font:600 13px var(--font);color:var(--muted)}
.v-spark__top em{font:700 12px var(--mono);font-style:normal;color:var(--green)}
.v-spark__top em.down{color:var(--red)}
.v-spark>b{display:block;margin:6px 0 10px;font:800 30px var(--font);letter-spacing:-.02em;color:var(--text)}
.v-spark svg{display:block;width:100%;height:56px;overflow:visible}
.v-spark__area{fill:url(#v-spark-g);opacity:.35}
.v-spark__line{fill:none;stroke:var(--accent-2);stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 6px var(--accent-glow));stroke-dasharray:1;stroke-dashoffset:1;animation:v-spark-draw 1.6s ease-out forwards}
@keyframes v-spark-draw{to{stroke-dashoffset:0}}
.v-spark__foot{display:flex;justify-content:space-between;margin-top:12px;font:12px var(--mono);color:var(--dim)}
.v-spark__foot b{color:var(--text);font-weight:600}
/* Consommation du forfait — usage-quota */
.v-usage{width:100%;max-width:420px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);font-family:var(--font)}
.v-usage header{display:flex;align-items:flex-start;justify-content:space-between;padding:16px 18px 6px}
.v-usage header b{display:block;font:700 15px var(--font);color:var(--text)}
.v-usage header small{font:12px var(--font);color:var(--muted)}
.v-usage header>span{padding:4px 10px;border-radius:99px;background:var(--accent-soft);color:var(--accent);font:700 12px var(--font)}
.v-usage__row{padding:10px 18px}
.v-usage__row>div{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px}
.v-usage__row span{font:600 13px var(--font);color:var(--muted)}
.v-usage__row b{font:700 13px var(--mono);color:var(--text)}
.v-usage__row b small{font-weight:400;color:var(--dim)}
.v-usage__row i{display:block;height:6px;border-radius:99px;background:var(--grad) 0/var(--p) 100% no-repeat,var(--surface-2)}
.v-usage__row.is-warn i{background:linear-gradient(var(--orange),var(--orange)) 0/var(--p) 100% no-repeat,var(--surface-2)}
.v-usage__row.is-crit i{background:linear-gradient(var(--red),var(--red)) 0/var(--p) 100% no-repeat,var(--surface-2)}
.v-usage__row.is-crit b{color:var(--red)}
.v-usage footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;margin-top:6px;padding:12px 18px;border-top:1px solid var(--border);font:13px var(--font);color:var(--muted)}
.v-usage footer b{color:var(--text)}
.v-usage footer a{color:var(--accent-2);font-weight:600;text-decoration:none}
/* Liste des processus — process-list */
.v-procs{width:100%;max-width:540px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);overflow:hidden;font-family:var(--font)}
.v-procs header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:14px 16px;border-bottom:1px solid var(--border)}
.v-procs header b{font:700 15px var(--font);color:var(--text)}
.v-procs header span{font:12px var(--mono);color:var(--muted)}
.v-procs__scroll{overflow-x:auto}
.v-procs table{width:100%;border-collapse:collapse;font:13px var(--mono)}
.v-procs th{padding:9px 16px;text-align:left;font:600 11px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--dim)}
.v-procs td{padding:9px 16px;border-top:1px solid var(--border);color:var(--text);white-space:nowrap}
.v-procs td:first-child{color:var(--dim)}
.v-procs td:nth-child(3){min-width:90px;background:linear-gradient(90deg,var(--accent-soft) var(--p),transparent var(--p));color:var(--accent-2)}
.v-procs td:last-child{color:var(--muted)}
.v-procs tbody tr:hover td{background-color:var(--surface-2)}
/* ═════ Void Lab ═════ */
/* Progression horizon des événements — event-horizon */
.v-eh{display:flex;align-items:center;gap:22px;width:100%;max-width:440px;padding:20px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
.v-eh__well{position:relative;flex:none;width:120px;height:120px;display:grid;place-items:center}
.v-eh__well>*{position:absolute;border-radius:50%}
.v-eh__ring{inset:0;background:radial-gradient(circle,transparent 28%,rgba(154,108,255,calc(var(--v)*.006)) 40%,rgba(95,232,240,calc(var(--v)*.004)) 50%,transparent 68%);filter:blur(2px)}
.v-eh__orbit{width:calc(120px - var(--v)*.8px);height:calc(120px - var(--v)*.8px);border:1px dashed var(--border-2);animation:v-eh-spin calc(4s - var(--v)*.03s) linear infinite}
.v-eh__orbit b{position:absolute;top:-4px;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--accent-2);box-shadow:0 0 12px var(--accent-2),-10px 2px 10px -2px var(--accent)}
.v-eh__hole{width:34px;height:34px;background:#000;box-shadow:0 0 0 2px rgba(154,108,255,.5),0 0 24px 6px var(--accent-glow)}
.v-eh__meta strong{display:block;font:800 30px var(--font);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.v-eh__meta span{color:var(--muted);font-size:14px}
@keyframes v-eh-spin{to{transform:rotate(360deg)}}
/* Étapes en constellation — constellation */
.v-const{width:100%;max-width:480px;padding:16px 20px;border:1px solid var(--border);border-radius:var(--radius);background:radial-gradient(ellipse at 70% 0,rgba(154,108,255,.14),transparent 60%),var(--deep)}
.v-const svg{display:block;width:100%;overflow:visible}
.v-const__bg{fill:var(--dim);opacity:.6}
.v-const line{stroke:var(--border-2);stroke-width:1.2;stroke-dasharray:3 5}
.v-const line.on{stroke:var(--accent-2);stroke-dasharray:none;filter:drop-shadow(0 0 4px var(--accent-2))}
.v-const__star circle{fill:var(--surface-2);stroke:var(--border-2)}
.v-const__star.done circle{fill:var(--accent-2);stroke:none;filter:drop-shadow(0 0 6px var(--accent-2))}
.v-const__star.now circle{fill:var(--accent);stroke:none;transform-box:fill-box;transform-origin:center;animation:v-const-twinkle 1.6s ease-in-out infinite}
.v-const text{fill:var(--dim);font:11px var(--mono);text-anchor:middle}
.v-const__star.done text{fill:var(--muted)}
.v-const__star.now text{fill:var(--text);font-weight:700}
@keyframes v-const-twinkle{50%{transform:scale(1.6);filter:drop-shadow(0 0 10px var(--accent))}}
/* Latence en décalage vers le rouge — redshift */
.v-red{width:100%;max-width:480px;padding:18px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
.v-red__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px;margin-bottom:12px}
.v-red__head b{font-size:15px}
.v-red__head span{color:var(--dim);font:11px var(--mono)}
.v-red__row{--c:color-mix(in oklch,var(--accent-2),var(--red) calc(var(--v)*1%));display:grid;grid-template-columns:minmax(0,120px) 1fr 60px;align-items:center;gap:12px;padding:9px 0;font:13px var(--mono)}
.v-red__row span{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v-red__row i{position:relative;height:8px;border-radius:4px;background:linear-gradient(90deg,var(--accent-2),var(--accent) 50%,var(--red))}
.v-red__row i::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent calc(14% + var(--v)*.3%),var(--bg) 0 calc(15.5% + var(--v)*.3%),transparent 0 calc(33% + var(--v)*.3%),var(--bg) 0 calc(34% + var(--v)*.3%),transparent 0 calc(48% + var(--v)*.3%),var(--bg) 0 calc(50% + var(--v)*.3%),transparent 0)}
.v-red__row i::after{content:"";position:absolute;top:50%;left:calc(var(--v)*1%);width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--bg);border:2px solid var(--c);box-shadow:0 0 12px var(--c)}
.v-red__row code{text-align:right;color:var(--c);font:inherit}
/* Signal des services — signal */
.v-sig{width:100%;max-width:480px;border:1px solid var(--border);border-radius:var(--radius);background:var(--deep);overflow:hidden}
.v-sig__row{display:grid;grid-template-columns:130px 1fr;align-items:center;gap:12px;padding:10px 16px}
.v-sig__row+.v-sig__row{border-top:1px solid var(--border)}
.v-sig__row b{display:block;font:700 14px var(--font)}
.v-sig__row span{font:11px var(--mono);color:var(--dim)}
.v-sig__row svg{display:block;width:100%;height:40px}
.v-sig__row path{fill:none;stroke-width:1.6;vector-effect:non-scaling-stroke;animation:v-sig-flow 3s linear infinite}
.v-sig--ok path{stroke:var(--accent-2);filter:drop-shadow(0 0 4px var(--accent-2))}
.v-sig--warn path{stroke:var(--orange);animation-duration:1.6s}
.v-sig--down path{stroke:var(--red);opacity:.6;animation-duration:9s}
.v-sig--down span{color:var(--red)}
@keyframes v-sig-flow{to{transform:translateX(-200px)}}
/* Présence sonar — sonar */
.v-sonar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:24px}
.v-sonar__scope{position:relative;width:200px;height:200px;flex:none;border-radius:50%;overflow:hidden;border:1px solid rgba(95,232,240,.25);background:repeating-radial-gradient(circle,transparent 0 24px,rgba(95,232,240,.12) 24px 25px),radial-gradient(circle,var(--deep),var(--bg))}
.v-sonar__scope::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(95,232,240,.12),rgba(95,232,240,.12)) center/1px 100% no-repeat,linear-gradient(rgba(95,232,240,.12),rgba(95,232,240,.12)) center/100% 1px no-repeat}
.v-sonar__sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(transparent 0 280deg,rgba(95,232,240,.4) 360deg);animation:v-sonar-spin 4s linear infinite}
.v-sonar__scope span{position:absolute;left:var(--x);top:var(--y);width:26px;height:26px;margin:-13px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--accent-2);background:var(--surface-2);color:var(--accent-2);font:800 10px var(--font);opacity:.25;animation:v-sonar-ping 4s linear infinite}
.v-sonar__list{margin:0;padding:0;list-style:none;display:grid;gap:10px;color:var(--dim);font:12px var(--mono)}
.v-sonar__list b{display:block;color:var(--text);font:700 14px var(--font)}
@keyframes v-sonar-spin{to{transform:rotate(360deg)}}
@keyframes v-sonar-ping{0%{opacity:1;box-shadow:0 0 0 0 rgba(95,232,240,.7),0 0 16px var(--accent-2)}10%{box-shadow:0 0 0 12px rgba(95,232,240,0),0 0 16px var(--accent-2)}60%,100%{opacity:.25;box-shadow:none}}
/* Signatures génératives — void-id */
.v-vid{display:flex;flex-wrap:wrap;gap:18px;justify-content:center}
.v-vid__item{margin:0;text-align:center;font:12px var(--mono);color:var(--dim)}
.v-vid__sig{position:relative;width:64px;height:64px;margin-bottom:8px;display:grid;place-items:center;border-radius:50%;background:var(--deep);border:1px solid var(--border)}
.v-vid__sig i{position:absolute;border-radius:50%;-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.v-vid__sig i:nth-child(1){inset:4px;background:conic-gradient(from var(--r1),var(--accent) var(--a1),transparent 0)}
.v-vid__sig i:nth-child(2){inset:11px;background:conic-gradient(from var(--r2),var(--accent-2) var(--a2),transparent 0)}
.v-vid__sig i:nth-child(3){inset:18px;background:conic-gradient(from var(--r3),var(--text) var(--a3),transparent 0);opacity:.55}
.v-vid__sig b{font:800 12px var(--font);color:var(--text)}
.v-vid__item:hover i:nth-child(1){transform:rotate(180deg)}
.v-vid__item:hover i:nth-child(2){transform:rotate(-120deg)}
.v-vid__item:hover i:nth-child(3){transform:rotate(90deg)}
/* Dépôt dans le trou noir — void-drop */
.v-hole{position:relative;width:100%;max-width:440px;height:240px;border:1.5px dashed var(--border-2);border-radius:var(--radius);background:radial-gradient(circle at 50% 40%,rgba(154,108,255,.16),transparent 55%),var(--deep);overflow:hidden;cursor:pointer;transition:border-color .3s}
.v-hole:hover{border-color:var(--accent)}
.v-hole__core{position:absolute;left:50%;top:40%;width:46px;height:46px;margin:-23px;border-radius:50%;background:#000;box-shadow:0 0 0 2px rgba(154,108,255,.4),0 0 30px 8px var(--accent-glow);transition:transform .4s,box-shadow .4s}
.v-hole__core::before{content:"";position:absolute;inset:-20px;border-radius:50%;background:conic-gradient(transparent,rgba(95,232,240,.55),transparent 40%,rgba(154,108,255,.55),transparent 80%);-webkit-mask:radial-gradient(circle,transparent 48%,#000 52%,transparent 72%);mask:radial-gradient(circle,transparent 48%,#000 52%,transparent 72%);animation:v-hole-spin 3s linear infinite}
.v-hole:hover .v-hole__core{transform:scale(1.25);box-shadow:0 0 0 2px var(--accent-2),0 0 50px 14px var(--accent-glow)}
.v-hole__files span{position:absolute;left:50%;top:40%;padding:4px 10px;border:1px solid var(--border-2);border-radius:7px;background:var(--surface-2);color:var(--muted);font:12px var(--mono);white-space:nowrap;transform:translate(-50%,-50%) translate(var(--x),var(--y)) rotate(0) scale(1)}
.v-hole:hover .v-hole__files span{animation:v-hole-suck 1.8s cubic-bezier(.6,0,.9,.5) infinite;animation-delay:calc(var(--i)*.3s)}
.v-hole p{position:absolute;left:0;right:0;bottom:16px;margin:0;text-align:center}
.v-hole p b{display:block;font-size:15px}
.v-hole p span{color:var(--dim);font:12px var(--mono)}
@keyframes v-hole-spin{to{transform:rotate(360deg)}}
@keyframes v-hole-suck{80%,100%{transform:translate(-50%,-50%) translate(0,0) rotate(540deg) scale(0);opacity:0}}
/* Case quantique (3 états) — qubit */
.v-qbit{display:flex;flex-direction:column;gap:10px;width:100%;max-width:400px}
.v-qbit__row{display:flex;align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);cursor:pointer;user-select:none;transition:border-color .2s}
.v-qbit__row:hover{border-color:var(--border-2)}
.v-qbit__row i{position:relative;flex:none;width:22px;height:22px;border-radius:6px;border:1.5px solid var(--border-2);font-style:normal;transition:background .2s,border-color .2s}
.v-qbit__row i::before,.v-qbit__row i::after{position:absolute;inset:0;display:grid;place-items:center;font:700 13px var(--mono);opacity:0}
.v-qbit__row i::before{content:"✓";color:var(--accent-ink)}
.v-qbit__row i::after{content:"✕";color:var(--accent-2)}
.v-qbit__row b{display:block;font-size:14px}
.v-qbit__row em{font:normal 12px var(--mono);color:var(--dim)}
.v-qbit__row[data-s="0"] em::after{content:"|0⟩ · désactivé"}
.v-qbit__row[data-s="1"] i{background:var(--grad);border-color:transparent}
.v-qbit__row[data-s="1"] i::before{opacity:1}
.v-qbit__row[data-s="1"] em::after{content:"|1⟩ · activé";color:var(--green)}
.v-qbit__row[data-s="2"]{border-color:rgba(95,232,240,.3)}
.v-qbit__row[data-s="2"] i{border-color:var(--accent-2);animation:v-qbit-ghost .5s steps(2) infinite}
.v-qbit__row[data-s="2"] i::before{color:var(--accent);animation:v-qbit-flip 1s ease-in-out infinite}
.v-qbit__row[data-s="2"] i::after{animation:v-qbit-flip 1s ease-in-out infinite reverse}
.v-qbit__row[data-s="2"] em::after{content:"|0⟩ + |1⟩ · superposition, résolue au déploiement";color:var(--accent-2)}
.v-qbit__hint{margin:0;text-align:center;color:var(--dim);font:11px var(--mono)}
@keyframes v-qbit-flip{0%,100%{opacity:1;filter:blur(0)}50%{opacity:0;filter:blur(2px)}}
@keyframes v-qbit-ghost{0%{box-shadow:3px 0 0 -1px rgba(154,108,255,.6),-3px 0 0 -1px rgba(95,232,240,.6)}100%{box-shadow:-3px 0 0 -1px rgba(154,108,255,.6),3px 0 0 -1px rgba(95,232,240,.6)}}
/* Versions qui s’enfoncent — depth-stack */
.v-depth{position:relative;width:100%;max-width:400px;height:300px;perspective:800px;perspective-origin:50% -40%;background:radial-gradient(ellipse at 50% 0,rgba(154,108,255,.2),transparent 60%)}
.v-depth article{position:absolute;left:0;right:0;bottom:0;height:76px;display:grid;grid-template-columns:1fr auto;align-content:center;gap:2px 12px;padding:0 20px;border:1px solid var(--border-2);border-radius:var(--radius-sm);background:var(--surface-2);box-shadow:0 10px 30px rgba(0,0,0,.5);transform:translateY(calc(var(--d)*-26px)) translateZ(calc(var(--d)*-110px));opacity:calc(1 - var(--d)*.2);filter:blur(calc(var(--d)*.7px));z-index:calc(10 - var(--d));transition:transform .55s cubic-bezier(.2,.8,.2,1),filter .55s,opacity .55s;cursor:pointer}
.v-depth:hover article{transform:translateY(calc(var(--d)*-55px)) translateZ(calc(var(--d)*-14px));filter:none;opacity:calc(1 - var(--d)*.1)}
.v-depth article:first-child{border-color:rgba(154,108,255,.5)}
.v-depth article b{font-size:15px}
.v-depth article em{grid-row:span 2;align-self:center;font:normal 12px var(--mono);color:var(--accent-2)}
.v-depth article span{color:var(--dim);font:12px var(--mono)}
/* Tags en orbite (par poids) — gravity-tags */
.v-grav{position:relative;width:100%;max-width:380px;height:360px;overflow:hidden;border-radius:var(--radius);background:repeating-radial-gradient(circle,transparent 0 35px,rgba(160,140,255,.07) 35px 36px),radial-gradient(circle,rgba(154,108,255,.16),transparent 60%)}
.v-grav__core{position:absolute;left:50%;top:50%;z-index:1;width:52px;height:52px;margin:-26px;display:grid;place-items:center;border-radius:50%;background:#000;box-shadow:0 0 0 1px var(--accent),0 0 40px var(--accent-glow);color:var(--dim);font:11px var(--mono)}
.v-grav span{position:absolute;left:50%;top:50%;animation:v-grav-orbit var(--t) linear infinite}
.v-grav:hover span{animation-play-state:paused}
.v-grav em{display:block;padding:calc(2px + var(--w)*1px) calc(6px + var(--w)*2px);border:1px solid rgba(154,108,255,calc(.15 + var(--w)*.12));border-radius:999px;background:rgba(154,108,255,calc(var(--w)*.05));color:color-mix(in oklch,var(--dim),var(--text) calc(var(--w)*20%));font:normal calc(10px + var(--w)*1.4px) var(--mono);white-space:nowrap;cursor:default;transition:border-color .2s}
.v-grav em:hover{border-color:var(--accent-2);color:var(--accent-2)}
@keyframes v-grav-orbit{from{transform:rotate(var(--a)) translateX(var(--r)) rotate(calc(-1*var(--a))) translate(-50%,-50%)}to{transform:rotate(calc(var(--a) + 360deg)) translateX(var(--r)) rotate(calc(-1*var(--a) - 360deg)) translate(-50%,-50%)}}
/* Chronologie dilatée — time-dilation */
.v-dil{width:100%;max-width:580px;padding:18px 18px 12px;border:1px solid var(--border);border-radius:var(--radius);background:linear-gradient(90deg,#000,var(--deep) 35%)}
.v-dil__track{position:relative;height:170px;margin:0 6px}
.v-dil__track::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:linear-gradient(90deg,transparent,var(--accent) 40%,var(--accent-2))}
.v-dil__ev{position:absolute;left:var(--x);top:50%}
.v-dil__ev i{position:absolute;width:calc(4px + var(--k)*10px);height:calc(4px + var(--k)*10px);transform:translate(-50%,-50%);border-radius:50%;background:var(--accent-2);opacity:calc(.2 + var(--k)*.8);box-shadow:0 0 calc(var(--k)*14px) var(--accent-2)}
.v-dil__ev span{position:absolute;left:0;transform:translateX(calc(-1*var(--x)));white-space:nowrap;color:var(--dim);font:11px var(--mono);opacity:calc(var(--k)*1.6 - .4);transition:opacity .2s}
.v-dil__ev.l0 span{bottom:46px}
.v-dil__ev.l1 span{top:14px}
.v-dil__ev.l2 span{bottom:14px}
.v-dil__ev.l3 span{top:46px}
.v-dil__ev.l0::before,.v-dil__ev.l3::before{content:"";position:absolute;left:0;width:1px;height:38px;background:linear-gradient(var(--border-2),transparent);opacity:calc(var(--k)*1.4 - .3)}
.v-dil__ev.l0::before{bottom:6px;transform:scaleY(-1)}
.v-dil__ev.l3::before{top:6px}
.v-dil__ev span b{display:block;color:var(--text);font:700 12px var(--font)}
.v-dil__ev:hover span{opacity:1;z-index:2}
.v-dil__axis{display:flex;justify-content:space-between;color:var(--dim);font:11px var(--mono)}
.v-dil__axis span:last-child{color:var(--accent-2)}
/* Bouton vitesse lumière — warp-button */
.v-warp{position:relative;overflow:hidden;padding:15px 30px;border:1px solid var(--border-2);border-radius:999px;background:var(--deep);color:var(--text);font:800 15px var(--font);cursor:pointer;transition:border-color .3s,box-shadow .3s,transform .2s}
.v-warp b{position:relative}
.v-warp:hover{border-color:var(--accent-2);box-shadow:0 0 30px var(--accent-glow),inset 0 0 24px rgba(95,232,240,.15)}
.v-warp:active{transform:scale(.97)}
.v-warp__stars{position:absolute;inset:0}
.v-warp__stars i{position:absolute;top:var(--y);left:100%;width:2px;height:1px;border-radius:1px;background:var(--accent-2);opacity:.45;animation:v-warp-drift calc(var(--d)*4) linear infinite;animation-delay:calc(var(--d)*-2.3)}
.v-warp:hover .v-warp__stars i{width:var(--l);opacity:1;background:linear-gradient(90deg,#fff,var(--accent-2),transparent);animation-duration:calc(var(--d)*.45)}
@keyframes v-warp-drift{to{transform:translateX(-420px)}}
/* ═════ Animations ═════ */
/* Terminal auto (déploiement) — anim-autoterm */
.v-autoterm{width:100%;max-width:560px;border:1px solid var(--border);border-radius:var(--radius);background:var(--deep);overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.v-autoterm__bar{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--border);background:var(--surface)}
.v-autoterm__bar i{width:10px;height:10px;border-radius:50%;background:var(--border-2)}
.v-autoterm__bar i:first-child{background:var(--red)}
.v-autoterm__bar i:nth-child(2){background:var(--orange)}
.v-autoterm__bar i:nth-child(3){background:var(--green)}
.v-autoterm__bar span{margin-left:8px;color:var(--dim);font:12px var(--mono)}
.v-autoterm__body{padding:16px 18px;font:13px/1.75 var(--mono);color:var(--muted);white-space:pre;overflow-x:auto}
.v-autoterm__body>div{opacity:0}
.v-autoterm__body b{color:var(--accent);font-weight:400}
.v-autoterm__t{display:inline-block;overflow:hidden;vertical-align:top;border-right:2px solid transparent}
.v-autoterm__ok{color:var(--green)}
.v-autoterm__ac{color:var(--accent-2)}
.v-autoterm__hi{color:var(--text)}
.v-autoterm__er{color:var(--red)}
.v-autoterm__caret{display:inline-block;width:8px;height:15px;vertical-align:-2px;background:var(--accent);animation:v-autoterm-blink 1s steps(1) infinite}
@keyframes v-autoterm-blink{50%{opacity:0}}
.v-autoterm__l0{animation:v-autoterm-l0 11s linear infinite}
@keyframes v-autoterm-l0{0%,2.73%{opacity:0}2.74%,95%{opacity:1}98%,100%{opacity:0}}
.v-autoterm__t0{width:18ch;animation:v-autoterm-t0 11s steps(18) infinite}
@keyframes v-autoterm-t0{0%,2.73%{width:0;border-color:var(--accent)}15.45%{width:18ch;border-color:var(--accent)}15.75%,100%{width:18ch;border-color:transparent}}
.v-autoterm__l1{animation:v-autoterm-l1 11s linear infinite}
@keyframes v-autoterm-l1{0%,19.09%{opacity:0}19.1%,95%{opacity:1}98%,100%{opacity:0}}
.v-autoterm__l2{animation:v-autoterm-l2 11s linear infinite}
@keyframes v-autoterm-l2{0%,24.55%{opacity:0}24.56%,95%{opacity:1}98%,100%{opacity:0}}
.v-autoterm__l3{animation:v-autoterm-l3 11s linear infinite}
@keyframes v-autoterm-l3{0%,28.18%{opacity:0}28.19%,95%{opacity:1}98%,100%{opacity:0}}
.v-autoterm__t3{width:29ch;animation:v-autoterm-t3 11s steps(29) infinite}
@keyframes v-autoterm-t3{0%,28.18%{width:0;border-color:var(--accent)}42.73%{width:29ch;border-color:var(--accent)}43.03%,100%{width:29ch;border-color:transparent}}
.v-autoterm__l4{animation:v-autoterm-l4 11s linear infinite}
@keyframes v-autoterm-l4{0%,44.55%{opacity:0}44.56%,95%{opacity:1}98%,100%{opacity:0}}
.v-autoterm__l5{animation:v-autoterm-l5 11s linear infinite}
@keyframes v-autoterm-l5{0%,49.09%{opacity:0}49.1%,95%{opacity:1}98%,100%{opacity:0}}
.v-autoterm__l6{animation:v-autoterm-l6 11s linear infinite}
@keyframes v-autoterm-l6{0%,53.64%{opacity:0}53.65%,95%{opacity:1}98%,100%{opacity:0}}
.v-autoterm__l7{animation:v-autoterm-l7 11s linear infinite}
@keyframes v-autoterm-l7{0%,56.36%{opacity:0}56.37%,95%{opacity:1}98%,100%{opacity:0}}
.v-autoterm__l8{animation:v-autoterm-l8 11s linear infinite}
@keyframes v-autoterm-l8{0%,59.09%{opacity:0}59.1%,95%{opacity:1}98%,100%{opacity:0}}
.v-autoterm__l9{animation:v-autoterm-l9 11s linear infinite}
@keyframes v-autoterm-l9{0%,64.55%{opacity:0}64.56%,95%{opacity:1}98%,100%{opacity:0}}
.v-autoterm__l10{animation:v-autoterm-l10 11s linear infinite}
@keyframes v-autoterm-l10{0%,69.09%{opacity:0}69.1%,95%{opacity:1}98%,100%{opacity:0}}
/* Séquence de démarrage — anim-boot */
.v-boot{width:100%;max-width:560px;border:1px solid var(--border);border-radius:var(--radius);background:var(--deep);overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.v-boot__bar{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--border);background:var(--surface)}
.v-boot__bar i{width:10px;height:10px;border-radius:50%;background:var(--border-2)}
.v-boot__bar i:first-child{background:var(--red)}
.v-boot__bar i:nth-child(2){background:var(--orange)}
.v-boot__bar i:nth-child(3){background:var(--green)}
.v-boot__bar span{margin-left:8px;color:var(--dim);font:12px var(--mono)}
.v-boot__body{padding:16px 18px;font:13px/1.75 var(--mono);color:var(--muted);white-space:pre;overflow-x:auto}
.v-boot__body>div{opacity:0}
.v-boot__body b{color:var(--accent);font-weight:400}
.v-boot__t{display:inline-block;overflow:hidden;vertical-align:top;border-right:2px solid transparent}
.v-boot__ok{color:var(--green)}
.v-boot__ac{color:var(--accent-2)}
.v-boot__hi{color:var(--text)}
.v-boot__er{color:var(--red)}
.v-boot__caret{display:inline-block;width:8px;height:15px;vertical-align:-2px;background:var(--accent);animation:v-boot-blink 1s steps(1) infinite}
@keyframes v-boot-blink{50%{opacity:0}}
.v-boot__l0{animation:v-boot-l0 10s linear infinite}
@keyframes v-boot-l0{0%,2%{opacity:0}2.01%,95%{opacity:1}98%,100%{opacity:0}}
.v-boot__l1{animation:v-boot-l1 10s linear infinite}
@keyframes v-boot-l1{0%,8%{opacity:0}8.01%,95%{opacity:1}98%,100%{opacity:0}}
.v-boot__l2{animation:v-boot-l2 10s linear infinite}
@keyframes v-boot-l2{0%,12.5%{opacity:0}12.51%,95%{opacity:1}98%,100%{opacity:0}}
.v-boot__l3{animation:v-boot-l3 10s linear infinite}
@keyframes v-boot-l3{0%,17%{opacity:0}17.01%,95%{opacity:1}98%,100%{opacity:0}}
.v-boot__l4{animation:v-boot-l4 10s linear infinite}
@keyframes v-boot-l4{0%,21.5%{opacity:0}21.51%,95%{opacity:1}98%,100%{opacity:0}}
.v-boot__l5{animation:v-boot-l5 10s linear infinite}
@keyframes v-boot-l5{0%,26%{opacity:0}26.01%,95%{opacity:1}98%,100%{opacity:0}}
.v-boot__l6{animation:v-boot-l6 10s linear infinite}
@keyframes v-boot-l6{0%,30.5%{opacity:0}30.51%,95%{opacity:1}98%,100%{opacity:0}}
.v-boot__l7{animation:v-boot-l7 10s linear infinite}
@keyframes v-boot-l7{0%,35%{opacity:0}35.01%,95%{opacity:1}98%,100%{opacity:0}}
.v-boot__l8{animation:v-boot-l8 10s linear infinite}
@keyframes v-boot-l8{0%,39.5%{opacity:0}39.51%,95%{opacity:1}98%,100%{opacity:0}}
.v-boot__l9{animation:v-boot-l9 10s linear infinite}
@keyframes v-boot-l9{0%,46%{opacity:0}46.01%,95%{opacity:1}98%,100%{opacity:0}}
.v-boot__l10{animation:v-boot-l10 10s linear infinite}
@keyframes v-boot-l10{0%,54%{opacity:0}54.01%,95%{opacity:1}98%,100%{opacity:0}}
.v-boot__l11{animation:v-boot-l11 10s linear infinite}
@keyframes v-boot-l11{0%,61%{opacity:0}61.01%,95%{opacity:1}98%,100%{opacity:0}}
.v-boot__l12{animation:v-boot-l12 10s linear infinite}
@keyframes v-boot-l12{0%,64%{opacity:0}64.01%,95%{opacity:1}98%,100%{opacity:0}}
/* Installation de paquets — anim-install */
.v-install{width:100%;max-width:460px;padding:18px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);font:13px var(--mono)}
.v-install__head{margin-bottom:14px;color:var(--dim)}
.v-install__head b{color:var(--accent);font-weight:400}
.v-install__row{display:grid;grid-template-columns:18px 1fr 110px 56px;gap:10px;align-items:center;padding:6px 0;color:var(--muted)}
.v-install__n em{color:var(--dim);font-style:normal}
.v-install__s{text-align:right;color:var(--dim)}
.v-install__bar{height:4px;border-radius:2px;background:var(--surface-2);overflow:hidden}
.v-install__bar i{display:block;height:100%;width:0;background:var(--grad)}
.v-install__ck{width:14px;height:14px;border-radius:50%;border:2px solid var(--border-2);border-top-color:var(--accent);animation:v-install-spin .8s linear infinite}
.v-install__ck::after{content:'✓';display:block;margin:-3px 0 0 -1px;color:var(--accent-ink);font:800 10px var(--font);opacity:0}
.v-install__r0 .v-install__bar i{animation:v-install-b0 9s ease-in-out infinite}
@keyframes v-install-b0{0%,5.56%{width:0}17.78%,100%{width:100%}}
.v-install__r0 .v-install__ck{animation:v-install-spin .8s linear infinite,v-install-c0 9s steps(1) infinite}
.v-install__r0 .v-install__ck::after{animation:v-install-k0 9s steps(1) infinite}
@keyframes v-install-c0{0%{border-color:var(--border-2);border-top-color:var(--accent);background:none}17.78%,96%{border-color:var(--green);background:var(--green);transform:none}}
@keyframes v-install-k0{0%{opacity:0}17.78%,96%{opacity:1}}
.v-install__r1 .v-install__bar i{animation:v-install-b1 9s ease-in-out infinite}
@keyframes v-install-b1{0%,20%{width:0}32.22%,100%{width:100%}}
.v-install__r1 .v-install__ck{animation:v-install-spin .8s linear infinite,v-install-c1 9s steps(1) infinite}
.v-install__r1 .v-install__ck::after{animation:v-install-k1 9s steps(1) infinite}
@keyframes v-install-c1{0%{border-color:var(--border-2);border-top-color:var(--accent);background:none}32.22%,96%{border-color:var(--green);background:var(--green);transform:none}}
@keyframes v-install-k1{0%{opacity:0}32.22%,96%{opacity:1}}
.v-install__r2 .v-install__bar i{animation:v-install-b2 9s ease-in-out infinite}
@keyframes v-install-b2{0%,34.44%{width:0}46.67%,100%{width:100%}}
.v-install__r2 .v-install__ck{animation:v-install-spin .8s linear infinite,v-install-c2 9s steps(1) infinite}
.v-install__r2 .v-install__ck::after{animation:v-install-k2 9s steps(1) infinite}
@keyframes v-install-c2{0%{border-color:var(--border-2);border-top-color:var(--accent);background:none}46.67%,96%{border-color:var(--green);background:var(--green);transform:none}}
@keyframes v-install-k2{0%{opacity:0}46.67%,96%{opacity:1}}
.v-install__r3 .v-install__bar i{animation:v-install-b3 9s ease-in-out infinite}
@keyframes v-install-b3{0%,48.89%{width:0}61.11%,100%{width:100%}}
.v-install__r3 .v-install__ck{animation:v-install-spin .8s linear infinite,v-install-c3 9s steps(1) infinite}
.v-install__r3 .v-install__ck::after{animation:v-install-k3 9s steps(1) infinite}
@keyframes v-install-c3{0%{border-color:var(--border-2);border-top-color:var(--accent);background:none}61.11%,96%{border-color:var(--green);background:var(--green);transform:none}}
@keyframes v-install-k3{0%{opacity:0}61.11%,96%{opacity:1}}
.v-install__r4 .v-install__bar i{animation:v-install-b4 9s ease-in-out infinite}
@keyframes v-install-b4{0%,63.33%{width:0}75.56%,100%{width:100%}}
.v-install__r4 .v-install__ck{animation:v-install-spin .8s linear infinite,v-install-c4 9s steps(1) infinite}
.v-install__r4 .v-install__ck::after{animation:v-install-k4 9s steps(1) infinite}
@keyframes v-install-c4{0%{border-color:var(--border-2);border-top-color:var(--accent);background:none}75.56%,96%{border-color:var(--green);background:var(--green);transform:none}}
@keyframes v-install-k4{0%{opacity:0}75.56%,96%{opacity:1}}
@keyframes v-install-spin{to{transform:rotate(360deg)}}
/* Envoi avec compteur — anim-upload */
@property --v-up{syntax:'';initial-value:0;inherits:false}
.v-up{width:100%;max-width:420px;padding:18px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
.v-up__top{display:flex;align-items:center;gap:12px}
.v-up__top b{display:block;color:var(--text);font:700 14px var(--font)}
.v-up__top small{color:var(--dim);font:12px var(--mono)}
.v-up__ico{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:var(--accent-soft);color:var(--accent);animation:v-up-bob 1.2s ease-in-out infinite}
.v-up__pct{margin-left:auto;color:var(--accent-2);font:700 20px var(--mono);animation:v-up-n 6s cubic-bezier(.4,0,.2,1) infinite;counter-reset:p var(--v-up)}
.v-up__pct::after{content:counter(p) '%'}
.v-up__bar{position:relative;height:6px;margin:14px 0 8px;border-radius:3px;background:var(--surface-2);overflow:hidden}
.v-up__bar i{position:absolute;inset:0 auto 0 0;background:var(--grad);border-radius:3px;animation:v-up-w 6s cubic-bezier(.4,0,.2,1) infinite}
.v-up__bar i::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);animation:v-up-shine 1.2s linear infinite}
.v-up__meta{display:flex;justify-content:space-between;color:var(--dim);font:12px var(--mono)}
.v-up__state::after{content:'envoi…';animation:v-up-st 6s steps(1) infinite}
@keyframes v-up-n{0%{--v-up:0}80%,100%{--v-up:100}}
@keyframes v-up-w{0%{width:0}80%,100%{width:100%}}
@keyframes v-up-st{0%{content:'envoi…'}80%{content:'✓ terminé'}}
@keyframes v-up-shine{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@keyframes v-up-bob{50%{transform:translateY(-3px)}}
/* Titre machine à écrire — anim-typewriter */
.v-tw{margin:0;color:var(--text);font:800 clamp(28px,5vw,44px)/1.15 var(--font);letter-spacing:-.02em;text-align:center}
.v-tw__words{display:inline-grid;vertical-align:bottom;font-family:var(--mono);font-weight:700}
.v-tw__words span{grid-area:1/1;justify-self:start;width:0;overflow:hidden;white-space:nowrap;border-right:3px solid transparent;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;animation:v-tw-type 10s steps(var(--n)) infinite both;animation-delay:calc(var(--i) * 2.5s)}
@keyframes v-tw-type{0%{width:0;border-color:var(--accent-2)}8%,19%{width:calc(var(--n) * 1ch + 3px);border-color:var(--accent-2)}24.9%{width:0;border-color:var(--accent-2)}25%,100%{width:0;border-color:transparent}}
/* Texte glitch — anim-glitch */
.v-glitch{position:relative;margin:0;color:var(--text);font:900 clamp(24px,5vw,44px) var(--font);letter-spacing:.04em;white-space:nowrap}
.v-glitch::before,.v-glitch::after{content:attr(data-text);position:absolute;inset:0;opacity:0}
.v-glitch::before{color:var(--accent);animation:v-glitch-a 3s steps(1) infinite}
.v-glitch::after{color:var(--accent-2);animation:v-glitch-b 3s steps(1) infinite}
@keyframes v-glitch-a{0%,84%,100%{opacity:0;transform:none}85%{opacity:.9;clip-path:inset(10% 0 60% 0);transform:translate(-4px,-1px)}88%{opacity:.9;clip-path:inset(55% 0 20% 0);transform:translate(3px,1px)}91%{opacity:.9;clip-path:inset(30% 0 45% 0);transform:translate(-2px,0)}94%{opacity:0}}
@keyframes v-glitch-b{0%,84%,100%{opacity:0;transform:none}86%{opacity:.9;clip-path:inset(65% 0 5% 0);transform:translate(4px,1px)}89%{opacity:.9;clip-path:inset(5% 0 75% 0);transform:translate(-3px,-1px)}92%{opacity:.9;clip-path:inset(40% 0 35% 0);transform:translate(2px,0)}95%{opacity:0}}
/* Compteur rouleau — anim-odometer */
.v-odo{text-align:center}
.v-odo__num{display:inline-flex;padding:10px 16px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);font:800 44px/1 var(--mono)}
.v-odo__num span{height:1em;overflow:hidden}
.v-odo__num i{display:block;font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;animation:v-odo-roll 7s cubic-bezier(.7,0,.2,1) infinite;animation-delay:calc(var(--i) * .12s)}
.v-odo__num em{width:.3em}
.v-odo small{display:block;margin-top:10px;color:var(--dim);font:12px var(--mono)}
@keyframes v-odo-roll{0%,5%{transform:translateY(0)}35%,90%{transform:translateY(calc(var(--d) * -1em))}100%{transform:translateY(0)}}
/* Flux de paquets — anim-packets */
.v-pk{display:flex;align-items:center;width:100%;max-width:560px}
.v-pk__node{display:grid;justify-items:center;gap:6px;color:var(--muted);font:12px var(--mono);white-space:nowrap}
.v-pk__node span{display:grid;place-items:center;width:46px;height:46px;border:1px solid var(--border-2);border-radius:12px;background:var(--surface);color:var(--accent);font-size:18px;box-shadow:0 0 0 0 var(--accent-glow);animation:v-pk-hit 1.6s ease-out infinite}
.v-pk__track{position:relative;flex:1;height:2px;margin:0 10px 22px;background:linear-gradient(90deg,var(--border-2) 50%,transparent 0) 0 0/8px 2px}
.v-pk__track i{position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent);animation:v-pk-go 1.6s linear infinite;animation-delay:calc(var(--j) * -.53s)}
.v-pk__track i.back{top:3px;background:var(--accent-2);box-shadow:0 0 10px var(--accent-2);animation-direction:reverse;animation-delay:calc(var(--j) * -.8s - .3s)}
.v-pk__track small{position:absolute;top:10px;left:50%;transform:translateX(-50%);color:var(--dim);font:11px var(--mono)}
@keyframes v-pk-go{0%{left:0;opacity:0}10%,90%{opacity:1}100%{left:calc(100% - 8px);opacity:0}}
@keyframes v-pk-hit{0%{box-shadow:0 0 0 0 rgba(154,108,255,.5)}100%{box-shadow:0 0 0 12px rgba(154,108,255,0)}}
/* Pluie de glyphes — anim-rain */
.v-rain{position:relative;width:100%;max-width:460px;height:200px;overflow:hidden;border:1px solid var(--border);border-radius:var(--radius);background:var(--deep)}
.v-rain__cols{position:absolute;inset:0;display:flex;justify-content:space-around;-webkit-mask:linear-gradient(transparent,#000 30%,#000 70%,transparent);mask:linear-gradient(transparent,#000 30%,#000 70%,transparent)}
.v-rain__cols span{width:1ch;word-break:break-all;color:var(--accent-2);opacity:var(--a);font:14px/1.3 var(--mono);text-shadow:0 0 8px var(--accent-2);animation:v-rain-fall var(--d) linear infinite;animation-delay:var(--o)}
.v-rain__cols span:nth-child(3n){color:var(--accent);text-shadow:0 0 8px var(--accent)}
.v-rain__label{position:absolute;left:50%;top:50%;display:flex;align-items:center;gap:8px;padding:8px 14px;transform:translate(-50%,-50%);border:1px solid var(--border-2);border-radius:999px;background:rgba(7,6,15,.85);color:var(--text);font:600 13px var(--font);white-space:nowrap;backdrop-filter:blur(4px)}
.v-rain__label i{width:8px;height:8px;border-radius:50%;background:var(--accent-2);animation:v-rain-dot 1s ease-in-out infinite}
@keyframes v-rain-fall{from{transform:translateY(-50%)}to{transform:translateY(0)}}
@keyframes v-rain-dot{50%{opacity:.2}}
/* Carte du monde (régions) — anim-map */
.v-map{width:100%;max-width:680px;padding:14px;border:1px solid var(--border);border-radius:var(--radius);background:var(--deep)}
.v-map svg{display:block;width:100%}
.v-map__dots{fill:var(--border-2)}
.v-map__arc{fill:none;stroke:var(--accent-2);stroke-width:1.5;stroke-linecap:round;stroke-dasharray:18 100;stroke-dashoffset:118;filter:drop-shadow(0 0 3px var(--accent-2));animation:v-map-arc 3s ease-in-out infinite;animation-delay:calc(var(--i) * .6s)}
.v-map__pt{fill:var(--accent)}
.v-map__ping{fill:none;stroke:var(--accent);stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:v-map-ping 2.4s ease-out infinite;animation-delay:calc(var(--i) * .4s)}
.v-map text{fill:var(--muted);font:7px var(--mono)}
.v-map__legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:10px;color:var(--dim);font:11px var(--mono)}
.v-map__legend i{display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:var(--accent)}
.v-map__legend i.c{background:var(--accent-2)}
@keyframes v-map-arc{0%{stroke-dashoffset:118;opacity:1}80%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes v-map-ping{0%{transform:scale(.3);opacity:1}100%{transform:scale(1.6);opacity:0}}
/* Chargeurs — anim-loaders */
.v-ld{display:flex;flex-wrap:wrap;justify-content:center;gap:28px}
.v-ld>div{display:grid;justify-items:center;gap:12px;color:var(--dim);font:11px var(--mono)}
.v-ld>div>span{display:grid;place-items:center;width:40px;height:40px}
.v-ld__orbit{position:relative;animation:v-ld-spin 1.4s linear infinite}
.v-ld__orbit i{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--accent);top:0;left:15px;box-shadow:0 0 10px var(--accent)}
.v-ld__orbit i+i{top:auto;bottom:0;background:var(--accent-2);box-shadow:0 0 10px var(--accent-2)}
.v-ld__eq{display:flex!important;align-items:center;gap:4px}
.v-ld__eq i{width:4px;height:100%;border-radius:2px;background:var(--grad);animation:v-ld-eq 1s ease-in-out infinite}
.v-ld__eq i:nth-child(2){animation-delay:-.8s}
.v-ld__eq i:nth-child(3){animation-delay:-.6s}
.v-ld__eq i:nth-child(4){animation-delay:-.4s}
.v-ld__eq i:nth-child(5){animation-delay:-.2s}
.v-ld__ring{border-radius:50%;background:conic-gradient(transparent 10%,var(--accent),var(--accent-2));-webkit-mask:radial-gradient(closest-side,transparent 70%,#000 72%);mask:radial-gradient(closest-side,transparent 70%,#000 72%);animation:v-ld-spin .9s linear infinite}
.v-ld__dots{display:flex!important;gap:6px}
.v-ld__dots i{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:v-ld-dot 1.2s ease-in-out infinite}
.v-ld__dots i:nth-child(2){animation-delay:.15s}
.v-ld__dots i:nth-child(3){animation-delay:.3s}
.v-ld__grid{grid-template-columns:repeat(3,10px);gap:3px}
.v-ld__grid i{width:10px;height:10px;border-radius:2px;background:var(--accent-2);animation:v-ld-grid 1.3s ease-in-out infinite}
.v-ld__grid i:nth-child(3n+2){animation-delay:.1s}
.v-ld__grid i:nth-child(3n){animation-delay:.2s}
.v-ld__grid i:nth-child(n+4){animation-delay:.15s}
.v-ld__grid i:nth-child(n+7){animation-delay:.3s}
@keyframes v-ld-spin{to{transform:rotate(360deg)}}
@keyframes v-ld-eq{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
@keyframes v-ld-dot{0%,80%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-8px);opacity:1}}
@keyframes v-ld-grid{0%,70%,100%{transform:scale(1);opacity:1}35%{transform:scale(.2);opacity:.3}}
/* Squelette → contenu — anim-skeleton */
.v-sk{display:grid;width:100%;max-width:380px;padding:18px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
.v-sk>div{grid-area:1/1;display:grid;grid-template-columns:44px 1fr;gap:6px 12px;align-items:center}
.v-sk__ghost{animation:v-sk-a 6s ease-in-out infinite}
.v-sk__real{animation:v-sk-b 6s ease-in-out infinite}
.v-sk__ghost i{display:block;height:10px;margin:5px 0;border-radius:5px;background:linear-gradient(90deg,var(--surface-2) 30%,var(--border-2) 50%,var(--surface-2) 70%) 0 0/300% 100%;animation:v-sk-shim 1.3s linear infinite}
.v-sk__ghost .v-sk__av,.v-sk__real .v-sk__av{width:44px;height:44px;margin:0;border-radius:12px}
.v-sk__blk{grid-column:1/-1;height:28px!important;margin-top:10px!important}
.v-sk__real .v-sk__av{display:grid;place-items:center;background:var(--grad);color:var(--accent-ink);font:800 14px var(--font)}
.v-sk__real b{display:block;color:var(--text);font:700 15px var(--font)}
.v-sk__real small{color:var(--dim);font:12px var(--mono)}
.v-sk__real p{grid-column:1/-1;display:flex;gap:14px;margin:10px 0 0;padding-top:10px;border-top:1px solid var(--border);color:var(--muted);font:12px var(--mono)}
.v-sk__real .ok{margin-left:auto;color:var(--green)}
@keyframes v-sk-a{0%,40%{opacity:1}50%,92%{opacity:0}100%{opacity:1}}
@keyframes v-sk-b{0%,42%{opacity:0;transform:translateY(4px)}52%,90%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes v-sk-shim{from{background-position:100% 0}to{background-position:0 0}}
/* ═════ FiveM NUI ═════ */
/* HUD statuts — nui-hud */
.v-nui-hud{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid rgba(154,108,255,.25);border-radius:14px;background:rgba(7,6,15,.72);backdrop-filter:blur(6px)}
.v-nui-hud__st{position:relative;display:grid;place-items:center;width:40px;height:40px;color:var(--c)}
.v-nui-hud__st::before{content:'';position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--c) calc(var(--v) * 1%),rgba(255,255,255,.08) 0);-webkit-mask:radial-gradient(closest-side,transparent 78%,#000 80%);mask:radial-gradient(closest-side,transparent 78%,#000 80%)}
.v-nui-hud__st::after{content:'';position:absolute;inset:5px;border-radius:50%;background:rgba(255,255,255,.04)}
.v-nui-hud__st svg{position:relative;z-index:1;filter:drop-shadow(0 0 4px var(--c))}
.v-nui-hud__st.low{animation:v-nui-hud-low 1s ease-in-out infinite}
.v-nui-hud__voice{display:flex;align-items:center;gap:6px;height:40px;padding:0 10px 0 12px;margin-left:4px;border-left:1px solid var(--border-2);color:var(--muted);font:600 11px var(--font)}
.v-nui-hud__voice span{display:flex;align-items:flex-end;gap:2px;height:14px}
.v-nui-hud__voice span i{width:3px;height:30%;border-radius:2px;background:var(--dim)}
.v-nui-hud__voice.talk{color:var(--accent-2)}
.v-nui-hud__voice.talk span i{background:var(--accent-2);animation:v-nui-hud-eq .6s ease-in-out infinite alternate}
.v-nui-hud__voice.talk span i:nth-child(2){animation-delay:-.2s}
.v-nui-hud__voice.talk span i:nth-child(3){animation-delay:-.4s}
.v-nui-hud__voice em{font-style:normal}
@keyframes v-nui-hud-low{50%{transform:scale(1.1);filter:brightness(1.4)}}
@keyframes v-nui-hud-eq{to{height:100%}}
/* Compteur de vitesse — nui-speedo */
.v-nui-speedo{position:relative;width:200px;padding:10px 10px 12px;border:1px solid rgba(154,108,255,.25);border-radius:22px;background:rgba(7,6,15,.72);backdrop-filter:blur(6px)}
.v-nui-speedo svg{display:block;width:100%}
.v-nui-speedo circle{fill:none;stroke-width:9;stroke-linecap:round;transform:rotate(135deg);transform-origin:center}
.v-nui-speedo .trk{stroke:rgba(255,255,255,.07);stroke-dasharray:75 100}
.v-nui-speedo .val{stroke:url(#v-nui-sg);filter:drop-shadow(0 0 6px rgba(95,232,240,.6));animation:v-nui-speedo-w 2.4s ease-in-out infinite}
.v-nui-speedo line{stroke:var(--dim);stroke-width:2;stroke-linecap:round}
.v-nui-speedo__c{position:absolute;top:58px;left:0;right:0;display:grid;justify-items:center;line-height:1}
.v-nui-speedo__c b{font:900 46px var(--font);color:var(--text);font-variant-numeric:tabular-nums}
.v-nui-speedo__c small{margin-top:4px;color:var(--dim);font:11px var(--mono)}
.v-nui-speedo__gear{display:grid;place-items:center;width:24px;height:24px;margin-top:10px;border:1px solid var(--accent);border-radius:7px;color:var(--accent);font:800 13px var(--mono)}
.v-nui-speedo__rpm{height:4px;margin:-14px 22px 12px;border-radius:2px;background:rgba(255,255,255,.07);overflow:hidden}
.v-nui-speedo__rpm i{display:block;height:100%;background:linear-gradient(90deg,var(--green),var(--orange) 70%,var(--red));animation:v-nui-speedo-rpm 2.4s ease-in-out infinite}
.v-nui-speedo__row{display:flex;justify-content:space-between;align-items:center;padding:0 8px;color:var(--muted)}
.v-nui-speedo__row .off{color:var(--red);animation:v-nui-speedo-blink 1s steps(1) infinite}
.v-nui-speedo__row .fuel{display:flex;align-items:center;gap:6px;color:var(--orange)}
.v-nui-speedo__row em{width:46px;height:5px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden}
.v-nui-speedo__row em i{display:block;height:100%;background:var(--orange)}
@keyframes v-nui-speedo-w{50%{stroke-dasharray:29.4 100}}
@keyframes v-nui-speedo-rpm{0%,100%{width:58%}50%{width:72%}}
@keyframes v-nui-speedo-blink{50%{opacity:.3}}
/* Argent, métier, serveur — nui-money */
.v-nui-money{display:grid;justify-items:end;gap:6px;font-family:var(--font);color:var(--text)}
.v-nui-money__srv{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.v-nui-money__srv img{width:28px}
.v-nui-money__srv b{font:900 20px var(--font);letter-spacing:.06em;text-shadow:0 0 14px rgba(154,108,255,.6)}
.v-nui-money__srv b span{margin-left:3px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.v-nui-money__srv em{padding:3px 7px;border-radius:6px;background:rgba(7,6,15,.7);color:var(--muted);font:normal 11px var(--mono)}
.v-nui-money__row{display:flex;align-items:center;gap:10px;padding:6px 12px 6px 8px;border-radius:10px;background:linear-gradient(90deg,transparent,rgba(7,6,15,.8) 30%);font:800 19px var(--font);font-variant-numeric:tabular-nums;text-shadow:0 2px 6px rgba(0,0,0,.6)}
.v-nui-money__row i{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;font:800 13px var(--font);font-style:normal}
.v-nui-money__row.cash i{background:rgba(74,222,128,.15);color:var(--green)}
.v-nui-money__row.bank i{background:rgba(95,232,240,.15);color:var(--accent-2)}
.v-nui-money__row.job{font:600 13px var(--font);color:var(--muted)}
.v-nui-money__row.job i{background:var(--accent-soft);color:var(--accent)}
/* Notifications en jeu — nui-notify */
.v-nui-ntf{display:grid;gap:8px;width:300px}
.v-nui-ntf__it{--c:var(--accent);position:relative;display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:center;padding:10px 12px;overflow:hidden;border:1px solid rgba(255,255,255,.07);border-left:3px solid var(--c);border-radius:10px;background:rgba(7,6,15,.82);backdrop-filter:blur(6px);animation:v-nui-ntf-in 8s cubic-bezier(.2,.8,.2,1) infinite;animation-delay:calc(var(--n) * .35s)}
.v-nui-ntf__it.ok{--c:var(--green)}
.v-nui-ntf__it.in{--c:var(--accent-2)}
.v-nui-ntf__it.er{--c:var(--red)}
.v-nui-ntf__it>i{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:color-mix(in srgb,var(--c) 18%,transparent);color:var(--c);font:800 14px var(--font);font-style:normal}
.v-nui-ntf__it b{display:block;color:var(--text);font:700 13px var(--font)}
.v-nui-ntf__it p{margin:2px 0 0;color:var(--muted);font:12px/1.35 var(--font)}
.v-nui-ntf__it>span{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--c);transform-origin:left;animation:v-nui-ntf-t 8s linear infinite;animation-delay:calc(var(--n) * .35s)}
@keyframes v-nui-ntf-in{0%{opacity:0;transform:translateX(40px)}5%,88%{opacity:1;transform:none}94%,100%{opacity:0;transform:translateX(40px)}}
@keyframes v-nui-ntf-t{0%,5%{transform:scaleX(1)}88%,100%{transform:scaleX(0)}}
/* Interaction (touche + œil) — nui-prompt */
.v-nui-pr{display:flex;align-items:center;gap:40px;flex-wrap:wrap;justify-content:center}
.v-nui-pr__key{position:relative;display:flex;align-items:center;gap:12px;color:var(--text);text-shadow:0 2px 8px rgba(0,0,0,.8)}
.v-nui-pr__key svg{position:absolute;left:0;top:50%;width:44px;height:44px;transform:translateY(-50%) rotate(-90deg)}
.v-nui-pr__key circle{fill:none;stroke:var(--accent-2);stroke-width:3;stroke-linecap:round;stroke-dasharray:0 100;filter:drop-shadow(0 0 4px var(--accent-2));animation:v-nui-pr-hold 2.4s ease-in infinite}
.v-nui-pr__key kbd{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(7,6,15,.8);box-shadow:inset 0 0 0 2px rgba(255,255,255,.08);color:var(--accent-2);font:900 18px var(--font)}
.v-nui-pr__key b{display:block;font:800 15px var(--font)}
.v-nui-pr__key small{color:var(--dim);font:11px var(--mono)}
.v-nui-pr__eye{display:flex;align-items:center;gap:14px}
.v-nui-pr__eye .dot{width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(154,108,255,.25),0 0 14px var(--accent);animation:v-nui-pr-dot 1.6s ease-in-out infinite}
.v-nui-pr__eye ul{display:grid;gap:4px;margin:0;padding:0;list-style:none}
.v-nui-pr__eye li{display:flex;align-items:center;gap:8px;padding:7px 14px 7px 8px;border-radius:8px;background:rgba(7,6,15,.78);color:var(--muted);font:600 13px var(--font)}
.v-nui-pr__eye li i{font-style:normal;font-size:13px}
.v-nui-pr__eye li.on{background:linear-gradient(90deg,rgba(154,108,255,.35),rgba(7,6,15,.8));color:var(--text);box-shadow:inset 2px 0 0 var(--accent)}
@keyframes v-nui-pr-hold{0%{stroke-dasharray:0 100}80%,100%{stroke-dasharray:100 100}}
@keyframes v-nui-pr-dot{50%{box-shadow:0 0 0 8px rgba(154,108,255,0),0 0 14px var(--accent)}}
/* Barre d'action — nui-progress */
@property --v-nui-p{syntax:'';initial-value:0;inherits:false}
.v-nui-prog{width:340px;text-align:center}
.v-nui-prog__top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;color:var(--text);font:800 14px var(--font);text-transform:uppercase;letter-spacing:.06em;text-shadow:0 2px 8px rgba(0,0,0,.8)}
.v-nui-prog__pct{color:var(--accent-2);font:700 13px var(--mono);animation:v-nui-prog-n 4s linear infinite;counter-reset:p var(--v-nui-p)}
.v-nui-prog__pct::after{content:counter(p) '%'}
.v-nui-prog__bar{height:12px;padding:2px;border:1px solid rgba(154,108,255,.4);border-radius:4px;background:rgba(7,6,15,.75);transform:skewX(-14deg)}
.v-nui-prog__bar i{display:block;height:100%;border-radius:2px;background:repeating-linear-gradient(90deg,transparent 0 10px,rgba(7,6,15,.5) 10px 12px),var(--grad);box-shadow:0 0 14px rgba(95,232,240,.5);animation:v-nui-prog-w 4s linear infinite}
.v-nui-prog__hint{margin-top:10px;color:var(--muted);font:600 12px var(--font)}
.v-nui-prog__hint kbd{display:inline-grid;place-items:center;min-width:20px;height:20px;margin-right:4px;border:1px solid var(--border-2);border-bottom-width:3px;border-radius:5px;background:var(--surface);color:var(--text);font:700 11px var(--mono)}
@keyframes v-nui-prog-w{from{width:0}to{width:100%}}
@keyframes v-nui-prog-n{from{--v-nui-p:0}to{--v-nui-p:100}}
/* Menu radial — nui-radial */
.v-nui-rad{position:relative;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(7,6,15,.6) 30%,rgba(7,6,15,.85) 31%,rgba(7,6,15,.85) 69%,transparent 70%);box-shadow:inset 0 0 0 1px rgba(154,108,255,.25)}
.v-nui-rad__sel{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 22.5deg,rgba(154,108,255,.45) 0 45deg,transparent 0);-webkit-mask:radial-gradient(circle,transparent 31%,#000 31.5%,#000 69%,transparent 69.5%);mask:radial-gradient(circle,transparent 31%,#000 31.5%,#000 69%,transparent 69.5%)}
.v-nui-rad__it{position:absolute;inset:0;transform:rotate(calc(var(--i) * 45deg));pointer-events:none}
.v-nui-rad__it span{position:absolute;top:22px;left:50%;display:grid;justify-items:center;gap:2px;width:70px;margin-left:-35px;color:var(--muted);font:700 10px var(--font);transform:rotate(calc(var(--i) * -45deg))}
.v-nui-rad__it i{font-style:normal;font-size:20px}
.v-nui-rad__it.on span{color:var(--text)}
.v-nui-rad__c{position:absolute;inset:32%;display:grid;place-content:center;justify-items:center;gap:3px;border-radius:50%;background:rgba(7,6,15,.9);box-shadow:0 0 0 1px rgba(154,108,255,.35),0 0 30px rgba(154,108,255,.25);text-align:center}
.v-nui-rad__c small{color:var(--dim);font:9px var(--mono)}
.v-nui-rad__c b{color:var(--text);font:800 15px var(--font)}
.v-nui-rad__c kbd{color:var(--accent-2);font:10px var(--mono)}
@keyframes v-nui-rad-s{0%{transform:rotate(0)}25%{transform:rotate(45deg)}50%{transform:rotate(180deg)}75%{transform:rotate(270deg)}}
/* Liste des touches — nui-keys */
.v-nui-keys{font-family:var(--font);color:var(--text);border:1px solid rgba(154,108,255,.25);border-radius:18px;background:rgba(7,6,15,.86);backdrop-filter:blur(8px);box-shadow:0 24px 60px rgba(0,0,0,.5);width:560px;padding:18px 20px}
.v-nui-keys header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px}
.v-nui-keys header b{font:900 20px var(--font);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.v-nui-keys header span{color:var(--dim);font:600 12px var(--font)}
.v-nui-keys kbd{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 6px;box-sizing:border-box;border:1px solid rgba(255,255,255,.18);border-bottom-width:3px;border-radius:6px;background:rgba(255,255,255,.06);color:var(--text);font:700 11px var(--mono)}
.v-nui-keys__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.v-nui-keys section{display:grid;gap:8px;align-content:start}
.v-nui-keys small{padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.08);color:var(--accent);font:800 11px var(--font);text-transform:uppercase;letter-spacing:.08em}
.v-nui-keys section div{display:flex;align-items:center;gap:10px;font:600 13px var(--font);color:var(--muted)}
.v-nui-keys section div kbd{flex:none;min-width:30px}
/* Inventaire — nui-inventory */
.v-nui-inv{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}
.v-nui-inv__p{padding:14px;border:1px solid rgba(154,108,255,.25);border-radius:16px;background:rgba(7,6,15,.85);backdrop-filter:blur(8px)}
.v-nui-inv__h{display:flex;justify-content:space-between;align-items:baseline;gap:20px;color:var(--text);font:800 14px var(--font)}
.v-nui-inv__h span{color:var(--dim);font:12px var(--mono)}
.v-nui-inv__w{height:3px;margin:8px 0 12px;border-radius:2px;background:var(--surface-2);overflow:hidden}
.v-nui-inv__w i{display:block;height:100%;background:var(--grad)}
.v-nui-inv__grid{display:grid;grid-template-columns:repeat(5,64px);gap:6px}
.v-nui-inv__slot{--r:rgba(255,255,255,.06);position:relative;display:grid;place-items:center;height:72px;border:1px solid var(--r);border-radius:10px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));cursor:grab;transition:transform .15s,border-color .15s}
.v-nui-inv__slot:hover{transform:translateY(-2px);border-color:var(--accent)}
.v-nui-inv__slot.rare{--r:rgba(95,232,240,.4);background:linear-gradient(180deg,rgba(95,232,240,.10),transparent)}
.v-nui-inv__slot.epic{--r:rgba(154,108,255,.55);background:linear-gradient(180deg,rgba(154,108,255,.16),transparent)}
.v-nui-inv__slot.sel{box-shadow:0 0 0 2px var(--accent),0 0 18px var(--accent-glow)}
.v-nui-inv__slot.empty{background:rgba(255,255,255,.015);cursor:default}
.v-nui-inv__slot i{font-style:normal;font-size:26px;margin-top:-8px}
.v-nui-inv__slot small{position:absolute;bottom:4px;left:4px;right:4px;overflow:hidden;color:var(--muted);font:600 9px var(--font);text-align:center;white-space:nowrap;text-overflow:ellipsis}
.v-nui-inv__slot .q{position:absolute;top:4px;right:6px;color:var(--text);font:700 10px var(--mono)}
.v-nui-inv__slot kbd{position:absolute;top:4px;left:5px;color:var(--accent);font:700 10px var(--mono)}
/* Supérette — nui-shop */
.v-nui-shop{font-family:var(--font);color:var(--text);border:1px solid rgba(154,108,255,.25);border-radius:18px;background:rgba(7,6,15,.86);backdrop-filter:blur(8px);box-shadow:0 24px 60px rgba(0,0,0,.5);width:640px;overflow:hidden}
.v-nui-shop header{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.07)}
.v-nui-shop header>i{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--accent-soft);font-size:20px;font-style:normal}
.v-nui-shop header div{display:grid;flex:1}
.v-nui-shop header b{font:800 16px var(--font)}
.v-nui-shop header span{color:var(--green);font:600 12px var(--font)}
.v-nui-shop header button{width:30px;height:30px;border:0;border-radius:8px;background:rgba(255,255,255,.06);color:var(--muted);cursor:pointer}
.v-nui-shop__body{display:grid;grid-template-columns:1fr 230px}
.v-nui-shop__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:14px}
.v-nui-shop article{position:relative;display:grid;justify-items:center;gap:2px;padding:12px 6px;border:1px solid rgba(255,255,255,.07);border-radius:12px;background:rgba(255,255,255,.03);cursor:pointer;transition:.15s}
.v-nui-shop article:hover{border-color:var(--accent);background:var(--accent-soft);transform:translateY(-2px)}
.v-nui-shop article.in{border-color:rgba(154,108,255,.5)}
.v-nui-shop article i{font-size:26px;font-style:normal}
.v-nui-shop article b{font:700 11px var(--font);text-align:center}
.v-nui-shop article span{color:var(--accent-2);font:700 12px var(--mono)}
.v-nui-shop article em{position:absolute;right:6px;top:6px;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font:800 10px var(--font);font-style:normal}
.v-nui-shop aside{display:flex;flex-direction:column;gap:8px;padding:14px;border-left:1px solid rgba(255,255,255,.07);background:rgba(0,0,0,.2)}
.v-nui-shop aside small{color:var(--dim);font:700 11px var(--font);text-transform:uppercase;letter-spacing:.06em}
.v-nui-shop__line{display:flex;align-items:center;gap:8px}
.v-nui-shop__line>i{font-size:18px;font-style:normal}
.v-nui-shop__line div{display:grid;flex:1}
.v-nui-shop__line b{font:700 12px var(--font)}
.v-nui-shop__line span{color:var(--dim);font:11px var(--font)}
.v-nui-shop__qty{display:flex;align-items:center;gap:6px;font:700 12px var(--mono)}
.v-nui-shop__qty button{width:20px;height:20px;padding:0;border:0;border-radius:6px;background:rgba(255,255,255,.08);color:var(--text);cursor:pointer}
.v-nui-shop__tot{display:flex;justify-content:space-between;align-items:baseline;margin-top:auto;padding-top:10px;border-top:1px dashed rgba(255,255,255,.12)}
.v-nui-shop__tot span{color:var(--muted);font:600 13px var(--font)}
.v-nui-shop__tot b{font:900 22px var(--font)}
.v-nui-shop__pay{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.v-nui-shop__pay input{display:none}
.v-nui-shop__pay span{display:grid;gap:2px;padding:8px;border:1px solid rgba(255,255,255,.1);border-radius:10px;font:700 12px var(--font);text-align:center;cursor:pointer}
.v-nui-shop__pay em{color:var(--dim);font:10px var(--mono);font-style:normal}
.v-nui-shop__pay input:checked+span{border-color:var(--accent);background:var(--accent-soft)}
.v-nui-shop__go{padding:11px;border:0;border-radius:10px;background:var(--grad);color:var(--accent-ink);font:800 14px var(--font);cursor:pointer}
/* Garage — nui-garage */
.v-nui-gar{display:grid;grid-template-columns:230px 260px;gap:12px;font-family:var(--font);color:var(--text)}
.v-nui-gar>div{padding:14px;border:1px solid rgba(154,108,255,.25);border-radius:16px;background:rgba(7,6,15,.88);backdrop-filter:blur(8px)}
.v-nui-gar__h{margin-bottom:10px}
.v-nui-gar__h b{display:block;font:800 14px var(--font)}
.v-nui-gar__h small{color:var(--dim);font:11px var(--mono)}
.v-nui-gar__car{position:relative;padding:10px 12px;margin-bottom:6px;border-radius:10px;background:rgba(255,255,255,.03);cursor:pointer}
.v-nui-gar__car b{display:block;font:700 13px var(--font)}
.v-nui-gar__car small{color:var(--dim);font:11px var(--mono)}
.v-nui-gar__car em{position:absolute;top:10px;right:10px;color:var(--green);font:normal 10px var(--mono)}
.v-nui-gar__car.out{opacity:.5}
.v-nui-gar__car.out em{color:var(--orange)}
.v-nui-gar__car.sel{background:linear-gradient(90deg,rgba(154,108,255,.3),rgba(154,108,255,.05));box-shadow:inset 2px 0 0 var(--accent)}
.v-nui-gar__det small{color:var(--accent-2);font:11px var(--mono);text-transform:uppercase;letter-spacing:.1em}
.v-nui-gar__det h4{margin:2px 0 10px;font:900 22px var(--font)}
.v-nui-gar__plate{display:inline-block;margin-bottom:14px;padding:4px 10px;border:2px solid #d8d4ea;border-radius:6px;background:#f3f1fa;color:#17122e;font:800 14px var(--mono);letter-spacing:.15em}
.v-nui-gar__st{display:grid;grid-template-columns:88px 1fr;align-items:center;gap:8px;margin-bottom:8px;color:var(--muted);font:600 11px var(--font)}
.v-nui-gar__st i{height:6px;border-radius:3px;background:rgba(255,255,255,.06);overflow:hidden}
.v-nui-gar__st b{display:block;height:100%;border-radius:3px;background:var(--grad)}
.v-nui-gar__meta{display:flex;justify-content:space-between;margin:14px 0;color:var(--muted);font:11px var(--mono)}
.v-nui-gar__btns{display:grid;grid-template-columns:1fr auto;gap:6px}
.v-nui-gar__btns button{padding:10px 12px;border:1px solid var(--border-2);border-radius:10px;background:transparent;color:var(--text);font:700 12px var(--font);cursor:pointer}
.v-nui-gar__btns .p{border:0;background:var(--grad);color:var(--accent-ink)}
/* Téléphone — nui-phone */
.v-nui-ph{font-family:var(--font);color:var(--text);width:270px;padding:10px;border-radius:44px;background:linear-gradient(145deg,#2a2440,#0d0b18);box-shadow:0 30px 70px rgba(0,0,0,.6),inset 0 0 0 2px rgba(154,108,255,.25)}
.v-nui-ph>input{display:none}
.v-nui-ph__scr{position:relative;height:520px;overflow:hidden;border-radius:34px;background:radial-gradient(circle at 20% 0%,rgba(154,108,255,.55),transparent 55%),radial-gradient(circle at 100% 100%,rgba(95,232,240,.35),transparent 50%),#0a0816}
.v-nui-ph__bar{position:absolute;z-index:3;left:0;right:0;top:0;display:flex;justify-content:space-between;padding:12px 22px 0;font:700 12px var(--font)}
.v-nui-ph__bar::after{content:'';position:absolute;left:50%;top:8px;width:80px;height:22px;margin-left:-40px;border-radius:12px;background:#000}
.v-nui-ph__bar span{font-size:10px}
.v-nui-ph__home{padding:56px 16px 0}
.v-nui-ph__clock{display:grid;justify-items:center;margin-bottom:26px}
.v-nui-ph__clock b{font:200 54px var(--font);letter-spacing:-.02em}
.v-nui-ph__clock span{color:rgba(255,255,255,.7);font:600 12px var(--font)}
.v-nui-ph__apps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px 6px}
.v-nui-ph__apps label{display:grid;justify-items:center;gap:5px;color:rgba(255,255,255,.85);font:600 10px var(--font);cursor:pointer}
.v-nui-ph__apps i{position:relative;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:linear-gradient(145deg,var(--c),color-mix(in srgb,var(--c) 50%,#000));font-size:21px;font-style:normal;box-shadow:0 6px 14px rgba(0,0,0,.35);transition:transform .15s}
.v-nui-ph__apps label:hover i{transform:scale(1.08)}
.v-nui-ph__apps em{position:absolute;right:-4px;top:-4px;display:grid;place-items:center;min-width:18px;height:18px;border-radius:9px;background:var(--red);font:800 10px var(--font);font-style:normal}
.v-nui-ph__app{position:absolute;inset:0;z-index:2;padding:44px 14px 0;background:#0d0b18;transform:translateX(100%);transition:transform .25s ease;overflow:hidden}
#v-nui-ph-sms:checked~.v-nui-ph__scr [data-s=sms],#v-nui-ph-ct:checked~.v-nui-ph__scr [data-s=ct],#v-nui-ph-bk:checked~.v-nui-ph__scr [data-s=bk],#v-nui-ph-gps:checked~.v-nui-ph__scr [data-s=gps]{transform:none}
.v-nui-ph__app header{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.v-nui-ph__app header label{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.08);font:700 20px var(--font);cursor:pointer}
.v-nui-ph__app header b{font:800 20px var(--font)}
.v-nui-ph__row{display:flex;align-items:center;gap:10px;padding:8px 2px;border-bottom:1px solid rgba(255,255,255,.06)}
.v-nui-ph__row>i{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--grad);color:var(--accent-ink);font:800 13px var(--font);font-style:normal}
.v-nui-ph__row div{flex:1;min-width:0;display:grid}
.v-nui-ph__row b{font:700 13px var(--font)}
.v-nui-ph__row div span{overflow:hidden;color:var(--muted);font:12px var(--font);white-space:nowrap;text-overflow:ellipsis}
.v-nui-ph__row small{display:grid;justify-items:end;gap:3px;color:var(--dim);font:10px var(--font)}
.v-nui-ph__row small em{display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font:800 9px var(--font);font-style:normal}
.v-nui-ph__row button{width:30px;height:30px;border:0;border-radius:50%;background:rgba(74,222,128,.15);cursor:pointer}
.v-nui-ph__q{width:100%;box-sizing:border-box;padding:8px 12px;border:0;border-radius:10px;background:rgba(255,255,255,.07);color:var(--text);font:13px var(--font);outline:0}
.v-nui-ph__sec{display:block;margin:12px 0 2px;color:var(--dim);font:700 10px var(--font);text-transform:uppercase;letter-spacing:.08em}
.v-nui-ph__card{display:grid;gap:4px;padding:16px;border-radius:16px;background:linear-gradient(135deg,#1f6f5c,#0d3a44);box-shadow:0 10px 24px rgba(0,0,0,.4)}
.v-nui-ph__card small{color:rgba(255,255,255,.7);font:600 11px var(--font)}
.v-nui-ph__card b{font:900 26px var(--font)}
.v-nui-ph__card span{color:rgba(255,255,255,.6);font:11px var(--mono)}
.v-nui-ph__btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.v-nui-ph__btns button{padding:9px;border:0;border-radius:10px;background:rgba(255,255,255,.08);color:var(--text);font:700 12px var(--font);cursor:pointer}
.v-nui-ph__tx{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.06);font:13px var(--font)}
.v-nui-ph__tx b{color:var(--muted)}
.v-nui-ph__tx b.p{color:var(--green)}
.v-nui-ph__map{position:relative;height:190px;overflow:hidden;border-radius:14px;background:linear-gradient(28deg,transparent 47%,#3a3550 47% 52%,transparent 52%),linear-gradient(90deg,transparent 60%,#2c2840 60% 64%,transparent 64%),linear-gradient(0deg,transparent 45%,#2c2840 45% 49%,transparent 49%),radial-gradient(circle at 80% 80%,#133b3f 0 20%,transparent 21%),#171a24}
.v-nui-ph__map svg{position:absolute;inset:0;width:100%;height:100%}
.v-nui-ph__map path{fill:none;stroke:var(--accent-2);stroke-width:2.5;stroke-dasharray:4 3;vector-effect:non-scaling-stroke;animation:v-nui-ph-dash 1s linear infinite}
.v-nui-ph__map i{position:absolute;z-index:1;width:12px;height:12px;margin:-6px;border-radius:50%}
.v-nui-ph__map .me{left:30%;top:78%;background:var(--accent);box-shadow:0 0 0 5px rgba(154,108,255,.3)}
.v-nui-ph__map .to{left:62%;top:24%;background:var(--red);box-shadow:0 0 0 5px rgba(248,113,113,.3)}
.v-nui-ph__route{display:flex;justify-content:space-between;align-items:center;margin:10px 0 4px;padding:10px 12px;border-radius:12px;background:var(--accent-soft);font:12px var(--font)}
.v-nui-ph__route b{font:800 13px var(--font)}
.v-nui-ph__route span{color:var(--accent-2);font:700 12px var(--mono)}
.v-nui-ph__home-bar{position:absolute;z-index:4;left:50%;bottom:8px;width:100px;height:4px;margin-left:-50px;border-radius:2px;background:rgba(255,255,255,.6)}
@keyframes v-nui-ph-dash{to{stroke-dashoffset:-7}}
/* Radio talkie — nui-radio */
.v-nui-radio{font-family:var(--font);color:var(--text);position:relative;width:200px;padding-top:40px}
.v-nui-radio__ant{position:absolute;right:34px;top:0;width:12px;height:52px;border-radius:6px 6px 0 0;background:linear-gradient(90deg,#1a1726,#2e2840)}
.v-nui-radio__body{position:relative;display:grid;gap:12px;padding:16px 14px;border:1px solid rgba(154,108,255,.3);border-radius:26px;background:linear-gradient(160deg,#211c33,#0d0b18);box-shadow:0 24px 50px rgba(0,0,0,.55),inset 0 1px rgba(255,255,255,.08)}
.v-nui-radio__lcd{display:grid;gap:2px;padding:10px 12px;border-radius:12px;background:#0b1f20;box-shadow:inset 0 0 0 1px rgba(95,232,240,.25),inset 0 0 22px rgba(95,232,240,.12);color:var(--accent-2)}
.v-nui-radio__lcd span{display:flex;align-items:center;gap:5px;font:700 9px var(--mono);letter-spacing:.08em;opacity:.8}
.v-nui-radio__lcd span i{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--green)}
.v-nui-radio__lcd b{font:700 32px var(--mono);letter-spacing:-.02em;text-shadow:0 0 10px rgba(95,232,240,.6)}
.v-nui-radio__lcd small{margin-left:4px;font-size:11px;opacity:.7}
.v-nui-radio__wave{display:flex;align-items:center;gap:2px;height:18px}
.v-nui-radio__wave i{flex:1;height:30%;border-radius:1px;background:var(--accent-2);animation:v-nui-radio-w .9s ease-in-out infinite alternate}
.v-nui-radio__ctl{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.v-nui-radio__ctl button{height:32px;border:0;border-radius:10px;background:rgba(255,255,255,.07);color:var(--muted);font:700 13px var(--font);cursor:pointer}
.v-nui-radio__ctl .on{background:rgba(74,222,128,.18);color:var(--green)}
.v-nui-radio__vol{display:grid;gap:6px}
.v-nui-radio__vol span{display:flex;justify-content:space-between;color:var(--muted);font:600 11px var(--font)}
.v-nui-radio__vol em{color:var(--accent-2);font:11px var(--mono);font-style:normal}
.v-nui-radio__vol input{width:100%;margin:0;accent-color:var(--accent)}
.v-nui-radio__list{display:grid;gap:4px}
.v-nui-radio__list small{color:var(--dim);font:700 10px var(--font);text-transform:uppercase;letter-spacing:.06em}
.v-nui-radio__list div{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:8px;color:var(--muted);font:600 12px var(--font)}
.v-nui-radio__list div i{width:7px;height:7px;border-radius:50%;background:var(--dim)}
.v-nui-radio__list .talk{background:rgba(95,232,240,.1);color:var(--text)}
.v-nui-radio__list .talk i{background:var(--accent-2);box-shadow:0 0 8px var(--accent-2);animation:v-nui-radio-p .8s ease-in-out infinite}
.v-nui-radio__list em{margin-left:auto;color:var(--accent-2);font:10px var(--font);font-style:normal}
.v-nui-radio footer{color:var(--dim);font:600 11px var(--font);text-align:center}
.v-nui-radio kbd{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 6px;box-sizing:border-box;border:1px solid rgba(255,255,255,.18);border-bottom-width:3px;border-radius:6px;background:rgba(255,255,255,.06);color:var(--text);font:700 11px var(--mono);min-width:20px;height:20px}
@keyframes v-nui-radio-w{to{height:100%}}
@keyframes v-nui-radio-p{50%{transform:scale(1.5)}}
/* Menu métier — nui-job */
.v-nui-job{font-family:var(--font);color:var(--text);border:1px solid rgba(154,108,255,.25);border-radius:18px;background:rgba(7,6,15,.86);backdrop-filter:blur(8px);box-shadow:0 24px 60px rgba(0,0,0,.5);display:grid;gap:10px;width:340px;padding:16px}
.v-nui-job header{display:flex;align-items:center;gap:12px}
.v-nui-job header>i{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,#1d4ed8,#0b1f5c);font-size:20px;font-style:normal}
.v-nui-job header div{display:grid}
.v-nui-job header b{font:900 18px var(--font);letter-spacing:.04em}
.v-nui-job header span{color:var(--muted);font:12px var(--font)}
.v-nui-job__duty{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.04);cursor:pointer}
.v-nui-job__duty input{display:none}
.v-nui-job__duty span{display:grid;flex:1}
.v-nui-job__duty b{font:800 13px var(--font);color:var(--muted)}
.v-nui-job__duty em{color:var(--dim);font:11px var(--mono);font-style:normal}
.v-nui-job__duty i{position:relative;width:40px;height:22px;border-radius:11px;background:rgba(255,255,255,.12);transition:.2s}
.v-nui-job__duty i::after{content:'';position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.2s}
.v-nui-job__duty input:checked~i{background:var(--green)}
.v-nui-job__duty input:checked~i::after{left:21px}
.v-nui-job__duty input:checked+span b{color:var(--green)}
.v-nui-job small{color:var(--dim);font:700 11px var(--font);text-transform:uppercase;letter-spacing:.05em}
.v-nui-job small em{color:var(--accent-2);font-style:normal;text-transform:none}
.v-nui-job__acts{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.v-nui-job__acts button{display:flex;align-items:center;gap:8px;padding:9px 10px;border:1px solid rgba(255,255,255,.07);border-radius:10px;background:rgba(255,255,255,.03);color:var(--text);font:600 12px var(--font);text-align:left;cursor:pointer;transition:.15s}
.v-nui-job__acts button:hover{border-color:var(--accent);background:var(--accent-soft)}
.v-nui-job__acts i{font-style:normal}
.v-nui-job__acts kbd{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 6px;box-sizing:border-box;border:1px solid rgba(255,255,255,.18);border-bottom-width:3px;border-radius:6px;background:rgba(255,255,255,.06);color:var(--text);font:700 11px var(--mono);min-width:20px;height:20px;margin-left:auto;font-size:10px}
.v-nui-job__mate{display:flex;align-items:center;gap:10px}
.v-nui-job__mate>i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(96,165,250,.2);color:var(--blue);font:800 10px var(--font);font-style:normal}
.v-nui-job__mate div{display:grid;flex:1}
.v-nui-job__mate b{font:700 13px var(--font)}
.v-nui-job__mate span{color:var(--dim);font:11px var(--font)}
.v-nui-job__mate em{padding:2px 8px;border-radius:999px;background:rgba(74,222,128,.12);color:var(--green);font:700 10px var(--font);font-style:normal}
.v-nui-job__mate em.p{background:rgba(251,146,60,.12);color:var(--orange)}
.v-nui-job footer{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:4px}
.v-nui-job footer button{padding:10px;border:0;border-radius:10px;background:rgba(255,255,255,.07);color:var(--text);font:700 12px var(--font);cursor:pointer}
.v-nui-job footer .sos{background:rgba(248,113,113,.18);color:var(--red);animation:v-nui-job-sos 1.4s ease-in-out infinite}
@keyframes v-nui-job-sos{50%{box-shadow:0 0 0 4px rgba(248,113,113,.2)}}
/* Facture — nui-bill */
.v-nui-bill{font-family:var(--font);color:var(--text);border:1px solid rgba(154,108,255,.25);border-radius:18px;background:rgba(7,6,15,.86);backdrop-filter:blur(8px);box-shadow:0 24px 60px rgba(0,0,0,.5);width:320px;padding:18px}
.v-nui-bill header{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px dashed rgba(255,255,255,.15)}
.v-nui-bill header>i{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:rgba(251,146,60,.15);font-size:19px;font-style:normal}
.v-nui-bill header div{display:grid;flex:1}
.v-nui-bill header small{color:var(--dim);font:600 11px var(--font)}
.v-nui-bill header b{font:800 15px var(--font)}
.v-nui-bill header em{color:var(--dim);font:11px var(--mono);font-style:normal}
.v-nui-bill dl{display:grid;gap:8px;margin:14px 0}
.v-nui-bill dl div{display:flex;justify-content:space-between;gap:12px;font:13px var(--font)}
.v-nui-bill dt{color:var(--dim)}
.v-nui-bill dd{margin:0;font-weight:600;text-align:right}
.v-nui-bill__amt{display:flex;justify-content:space-between;align-items:baseline;padding:12px 14px;border-radius:12px;background:var(--accent-soft)}
.v-nui-bill__amt span{color:var(--muted);font:600 13px var(--font)}
.v-nui-bill__amt b{font:900 26px var(--font);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.v-nui-bill__timer{display:grid;gap:5px;margin:12px 0 14px}
.v-nui-bill__timer i{height:3px;border-radius:2px;background:linear-gradient(90deg,var(--orange) 80%,rgba(255,255,255,.08) 0);background-size:100% 100%;animation:v-nui-bill-t 60s linear infinite}
.v-nui-bill__timer span{color:var(--dim);font:11px var(--mono)}
.v-nui-bill footer{display:grid;grid-template-columns:1fr 1.4fr;gap:8px}
.v-nui-bill footer button{padding:11px;border:0;border-radius:10px;background:var(--grad);color:var(--accent-ink);font:800 13px var(--font);cursor:pointer}
.v-nui-bill footer .no{border:1px solid rgba(248,113,113,.35);background:none;color:var(--red)}
.v-nui-bill footer .no:hover{background:rgba(248,113,113,.1)}
@keyframes v-nui-bill-t{from{width:100%}to{width:0}}
/* Carte d'identité RP — nui-idcard */
.v-nui-id{width:380px;overflow:hidden;border:1px solid rgba(154,108,255,.35);border-radius:16px;background:linear-gradient(135deg,#171230,#0d0b1c 60%,#0e1a24);box-shadow:0 24px 50px rgba(0,0,0,.5);font-family:var(--font);color:var(--text)}
.v-nui-id__h{display:flex;align-items:center;gap:10px;padding:12px 16px;background:linear-gradient(90deg,rgba(154,108,255,.3),rgba(95,232,240,.15))}
.v-nui-id__h img{width:30px}
.v-nui-id__h b{display:block;font:900 15px var(--font);letter-spacing:.12em}
.v-nui-id__h small{color:var(--muted);font:600 9px var(--mono);letter-spacing:.08em}
.v-nui-id__b{display:grid;grid-template-columns:86px 1fr 60px;gap:14px;align-items:start;padding:16px}
.v-nui-id__ph{display:grid;place-items:center;height:104px;border-radius:10px;background:var(--grad);color:var(--accent-ink);font:900 26px var(--font)}
.v-nui-id dl{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;margin:0;font-size:12px}
.v-nui-id dt{color:var(--dim);font:10px var(--mono);text-transform:uppercase;padding-top:2px}
.v-nui-id dd{margin:0;font:700 13px var(--font)}
.v-nui-id__code{width:60px;fill:none;stroke:var(--accent-2);stroke-width:3;stroke-linecap:round}
.v-nui-id__code circle{fill:var(--accent);stroke:none}
.v-nui-id__mrz{padding:8px 16px 12px;color:var(--dim);font:11px var(--mono);letter-spacing:.14em;white-space:nowrap;overflow:hidden}
/* Liste des joueurs — nui-scoreboard */
.v-nui-sb{width:440px;padding:16px;border:1px solid rgba(154,108,255,.25);border-radius:16px;background:rgba(7,6,15,.88);backdrop-filter:blur(8px);font-family:var(--font);color:var(--text)}
.v-nui-sb__h{display:flex;justify-content:space-between;align-items:baseline}
.v-nui-sb__h b{font:900 20px var(--font);letter-spacing:.06em}
.v-nui-sb__h b span{margin-left:3px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.v-nui-sb__h em{color:var(--muted);font:normal 12px var(--mono)}
.v-nui-sb__svc{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:12px 0}
.v-nui-sb__svc span{--c:var(--accent);padding:8px;border-radius:8px;background:color-mix(in srgb,var(--c) 12%,transparent);color:var(--muted);font:600 11px var(--font);text-align:center}
.v-nui-sb__svc b{display:block;color:var(--c);font:900 18px var(--font)}
.v-nui-sb .bl{--c:var(--blue)}
.v-nui-sb .re{--c:var(--red)}
.v-nui-sb .or{--c:var(--orange)}
.v-nui-sb .ac{--c:var(--accent)}
.v-nui-sb ul{margin:0;padding:0;list-style:none}
.v-nui-sb li{display:grid;grid-template-columns:34px 1fr 84px 72px;align-items:center;gap:8px;padding:7px 8px;border-radius:8px;font-size:13px}
.v-nui-sb li:nth-child(odd){background:rgba(255,255,255,.025)}
.v-nui-sb li em{color:var(--dim);font:normal 11px var(--mono)}
.v-nui-sb li b{font:700 13px var(--font)}
.v-nui-sb li>span{--c:var(--dim);justify-self:start;padding:2px 8px;border-radius:999px;background:color-mix(in srgb,var(--c) 15%,transparent);color:var(--c);font:700 10px var(--font)}
.v-nui-sb li>span:not([class]){--c:var(--muted)}
.v-nui-sb li i{display:flex;align-items:flex-end;gap:2px;height:12px;color:var(--green)}
.v-nui-sb li i.mid{color:var(--orange)}
.v-nui-sb li i.bad{color:var(--red)}
.v-nui-sb li s{width:3px;background:currentColor;border-radius:1px}
.v-nui-sb li s:nth-child(1){height:30%}
.v-nui-sb li s:nth-child(2){height:55%}
.v-nui-sb li s:nth-child(3){height:80%}
.v-nui-sb li s:nth-child(4){height:100%}
.v-nui-sb li i.mid s:nth-child(4),.v-nui-sb li i.bad s:nth-child(n+3){opacity:.2}
.v-nui-sb li small{margin-left:6px;color:var(--dim);font:10px var(--mono)}
/* Création de personnage — nui-creator */
.v-nui-cc{font-family:var(--font);color:var(--text);display:flex;gap:24px;align-items:center}
.v-nui-cc__panel{font-family:var(--font);color:var(--text);border:1px solid rgba(154,108,255,.25);border-radius:18px;background:rgba(7,6,15,.86);backdrop-filter:blur(8px);box-shadow:0 24px 60px rgba(0,0,0,.5);width:330px;padding:18px}
.v-nui-cc__panel>input{display:none}
.v-nui-cc h3{margin:0 0 12px;font:900 20px var(--font)}
.v-nui-cc h3 span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.v-nui-cc nav{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-bottom:14px;padding:3px;border-radius:10px;background:rgba(255,255,255,.05)}
.v-nui-cc nav label{padding:7px 0;border-radius:8px;color:var(--muted);font:700 12px var(--font);text-align:center;cursor:pointer}
#v-nui-cc-her:checked~nav [for=v-nui-cc-her],#v-nui-cc-face:checked~nav [for=v-nui-cc-face],#v-nui-cc-cloth:checked~nav [for=v-nui-cc-cloth]{background:var(--accent);color:var(--accent-ink)}
.v-nui-cc__tab{display:none;gap:12px;min-height:250px;align-content:start}
#v-nui-cc-her:checked~[data-t=her],#v-nui-cc-face:checked~[data-t=face],#v-nui-cc-cloth:checked~[data-t=cloth]{display:grid}
.v-nui-cc__par{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.v-nui-cc__par div{display:grid;justify-items:center;gap:4px;padding:10px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.03)}
.v-nui-cc__par i{font-size:30px;font-style:normal}
.v-nui-cc__par span{color:var(--muted);font:700 12px var(--font)}
.v-nui-cc__rg{display:grid;gap:6px}
.v-nui-cc__rg span{display:flex;justify-content:space-between;color:var(--muted);font:600 12px var(--font)}
.v-nui-cc__rg em{color:var(--accent-2);font:12px var(--mono);font-style:normal}
.v-nui-cc__rg input{width:100%;height:4px;margin:0;border-radius:2px;background:rgba(255,255,255,.1);-webkit-appearance:none;appearance:none;accent-color:var(--accent)}
.v-nui-cc__rg input::-webkit-slider-thumb{width:16px;height:16px;border:3px solid var(--accent);border-radius:50%;background:#fff;-webkit-appearance:none;cursor:pointer}
.v-nui-cc footer{display:flex;gap:8px;margin-top:16px}
.v-nui-cc footer button{flex:1;padding:10px;border:0;border-radius:10px;background:var(--grad);color:var(--accent-ink);font:800 13px var(--font);cursor:pointer}
.v-nui-cc footer .ghost{flex:0 0 auto;padding:10px 12px;border:1px solid rgba(255,255,255,.15);background:none;color:var(--muted)}
.v-nui-cc__view{position:relative;display:grid;justify-items:center;gap:10px}
.v-nui-cc__view svg{width:150px;filter:drop-shadow(0 0 16px rgba(154,108,255,.5));animation:v-nui-cc-turn 6s ease-in-out infinite}
.v-nui-cc__rot{color:var(--muted);font:600 11px var(--font);text-shadow:0 1px 3px #000}
.v-nui-cc__cam{display:flex;gap:4px;padding:3px;border-radius:9px;background:rgba(7,6,15,.75)}
.v-nui-cc__cam button{padding:5px 10px;border:0;border-radius:7px;background:none;color:var(--muted);font:700 11px var(--font);cursor:pointer}
.v-nui-cc__cam .on{background:var(--accent-soft);color:var(--text)}
@keyframes v-nui-cc-turn{50%{transform:scaleX(.82) skewY(-2deg)}}
/* Écran inconscient — nui-death */
.v-nui-dead{display:grid;justify-items:center;gap:10px;width:100%;max-width:560px;padding:40px 20px;border-radius:18px;background:radial-gradient(ellipse at center,rgba(40,6,30,.4),rgba(7,6,15,.92) 75%);box-shadow:inset 0 0 120px rgba(255,80,110,.25);text-align:center;font-family:var(--font);color:var(--text)}
.v-nui-dead__ecg{width:260px;fill:none;stroke:var(--red);stroke-width:2;stroke-linejoin:round;filter:drop-shadow(0 0 6px var(--red))}
.v-nui-dead__ecg path{stroke-dasharray:30 100;animation:v-nui-dead-ecg 2s linear infinite}
.v-nui-dead h3{margin:0;font:900 40px var(--font);letter-spacing:.2em;background:linear-gradient(90deg,#ff5d7a,var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent;animation:v-nui-dead-b 2s ease-in-out infinite}
.v-nui-dead p{margin:0;color:var(--muted);font:600 13px var(--font)}
.v-nui-dead__t{position:relative;display:grid;place-items:center;width:84px;height:84px;margin:10px 0}
.v-nui-dead__t svg{position:absolute;inset:0;transform:rotate(-90deg)}
.v-nui-dead__t circle{fill:none;stroke:var(--red);stroke-width:3;stroke-linecap:round;stroke-dasharray:62 100;opacity:.8}
.v-nui-dead__t b{font:800 18px var(--mono)}
.v-nui-dead__k{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.v-nui-dead__k span{display:flex;align-items:center;gap:8px;padding:8px 14px 8px 8px;border-radius:10px;background:rgba(255,255,255,.06);font:700 13px var(--font)}
.v-nui-dead__k span.off{opacity:.4}
.v-nui-dead__k kbd{display:grid;place-items:center;width:24px;height:24px;border-radius:6px;background:var(--red);color:#fff;font:800 12px var(--mono)}
@keyframes v-nui-dead-ecg{from{stroke-dashoffset:130}to{stroke-dashoffset:0}}
@keyframes v-nui-dead-b{50%{opacity:.6}}
/* Écran de chargement — nui-loading */
.v-nui-load{position:relative;width:100%;max-width:640px;aspect-ratio:16/9;overflow:hidden;border-radius:16px;background:#07060f;font-family:var(--font);color:var(--text)}
.v-nui-load__bg{position:absolute;inset:-20%;background:radial-gradient(circle at 30% 40%,rgba(154,108,255,.45),transparent 40%),radial-gradient(circle at 70% 65%,rgba(95,232,240,.3),transparent 40%);animation:v-nui-load-drift 12s ease-in-out infinite alternate}
.v-nui-load__in{position:relative;display:grid;justify-items:center;align-content:center;height:100%;padding:0 12%;text-align:center}
.v-nui-load img{width:64px;filter:drop-shadow(0 0 20px rgba(154,108,255,.6))}
.v-nui-load h3{margin:10px 0 0;font:900 38px var(--font);letter-spacing:.1em}
.v-nui-load h3 span{margin-left:6px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.v-nui-load p{margin:4px 0 22px;color:var(--muted);font:600 13px var(--font)}
.v-nui-load__tips{display:grid;height:20px;width:100%}
.v-nui-load__tips span{grid-area:1/1;opacity:0;color:var(--text);font:600 13px var(--font);animation:v-nui-load-tip 12s infinite;animation-delay:calc(var(--i) * 4s)}
.v-nui-load__tips kbd{padding:0 5px;border:1px solid var(--border-2);border-radius:4px;color:var(--accent-2);font:11px var(--mono)}
.v-nui-load__bar{width:100%;height:4px;margin-top:18px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden}
.v-nui-load__bar i{display:block;height:100%;background:var(--grad);box-shadow:0 0 12px var(--accent-2);animation:v-nui-load-w 12s cubic-bezier(.3,0,.2,1) infinite}
.v-nui-load__meta{display:flex;justify-content:space-between;width:100%;margin-top:8px;color:var(--dim);font:11px var(--mono)}
.v-nui-load__step::after{content:'Connexion au serveur…';animation:v-nui-load-st 12s steps(1) infinite}
@keyframes v-nui-load-drift{to{transform:translate(6%,-4%) rotate(8deg)}}
@keyframes v-nui-load-tip{0%{opacity:0;transform:translateY(6px)}4%,30%{opacity:1;transform:none}34%,100%{opacity:0}}
@keyframes v-nui-load-w{0%{width:0}30%{width:35%}70%{width:78%}95%,100%{width:100%}}
@keyframes v-nui-load-st{0%{content:'Connexion au serveur…'}30%{content:'Chargement des ressources (184/212)'}70%{content:'Chargement de la carte…'}95%{content:'Prêt ✓'}}