/* ══════════════════════════════════════════════════════════════
   VITRINE.CSS — SecurGame · Style OxygenServ
   ══════════════════════════════════════════════════════════════ */

:root {
  --v-bg:          #ffffff;
  --v-bg2:         #f3f4f8;
  --v-bg3:         #e8eaf0;
  --v-text:        #111827;
  --v-text-2:      #1f2937;
  --v-muted:       #6b7280;
  --v-muted2:      #9ca3af;
  --v-border:      #e5e7eb;
  --v-border-2:    #d1d5db;
  --v-primary:     #3146ff;
  --v-primary-d:   #2336e0;
  --v-primary-bg:  #eef0ff;
  --v-primary-rgb: 49,70,255;
  --v-green:       #10b981;
  --v-green-bg:    #ecfdf5;
  --v-success:     #10b981;
  --v-success-bg:  #ecfdf5;
  --v-shadow-sm:   0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --v-shadow:      0 4px 16px rgba(0,0,0,.09), 0 1px 4px rgba(0,0,0,.06);
  --v-shadow-lg:   0 12px 32px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
  --v-shadow-xl:   0 24px 48px rgba(0,0,0,.14), 0 8px 16px rgba(0,0,0,.07);
  --v-radius-sm:   8px;
  --v-radius:      12px;
  --v-radius-lg:   16px;
  --v-radius-xl:   24px;
  --v-font:        'Inter', system-ui, -apple-system, sans-serif;
  --v-nav-h:       68px;
  --v-ease:        cubic-bezier(.4,0,.2,1);
  --v-t:           .18s;
}

/* ── Dark mode ─────────────────────────────────────────── */
:root.dark {
  --v-bg:          #0d1117;
  --v-bg2:         #161b22;
  --v-bg3:         #1c2128;
  --v-text:        #e6edf3;
  --v-text-2:      #b1bac4;
  --v-muted:       #7d8590;
  --v-muted2:      #484f58;
  --v-border:      #30363d;
  --v-border-2:    #484f58;
  --v-primary:     #38bdf8;
  --v-primary-d:   #0ea5e9;
  --v-primary-bg:  rgba(56,189,248,.12);
  --v-primary-rgb: 56,189,248;
  --v-green:       #3fb950;
  --v-green-bg:    rgba(63,185,80,.12);
  --v-success:     #3fb950;
  --v-success-bg:  rgba(63,185,80,.12);
  --v-shadow-sm:   0 1px 3px rgba(0,0,0,.5);
  --v-shadow:      0 4px 16px rgba(0,0,0,.6);
  --v-shadow-lg:   0 12px 32px rgba(0,0,0,.7);
  --v-shadow-xl:   0 24px 48px rgba(0,0,0,.8);
  color-scheme: dark;
}

/* Overrides dark mode pour composants avec couleurs hardcodées */
:root.dark .vnav { background: rgba(13,17,23,.97); }
:root.dark .vnav-mega-wrapper { background: var(--v-bg2); }
:root.dark .vnav-mega-left { background: var(--v-bg3); }
:root.dark .vnav-mega-footer { background: linear-gradient(to right, var(--v-bg3), var(--v-bg2)); }
:root.dark .vnav-dropdown-menu { background: var(--v-bg2); }
:root.dark .vnav-feat-item:hover { background: var(--v-bg3); }
:root.dark .vnav-mobile { background: var(--v-bg2); }
:root.dark .vnav-lang { background: var(--v-bg2); }

html, body { margin:0; padding:0; overflow-x:hidden; }
.vitrine   { overflow-x:hidden; }

/* SVG icons sizing */
.vnav-feat-icon,.vnav-game-icon,.v-cat-icon,.v-related-icon,
.v-plan-row-icon,.v-jeu-game-icon,.v-jeu-related-item-icon {
  overflow:hidden !important; flex-shrink:0 !important;
  min-width:0; min-height:0; position:relative;
}
.vnav-feat-icon > svg,.vnav-game-icon > svg,.v-cat-icon > svg,
.v-related-icon > svg,.v-plan-row-icon > svg,.v-jeu-game-icon > svg,
.v-jeu-related-item-icon > svg {
  position:absolute; top:0; left:0;
  width:100% !important; height:100% !important; display:block !important;
}
.vnav-feat-icon,.vnav-game-icon,.v-cat-icon,.v-plan-row-icon,
.v-jeu-game-icon,.v-jeu-related-item-icon { display:flex; align-items:center; justify-content:center; }
.vn-mob-icon { display:inline-flex; width:26px; height:26px; border-radius:6px; overflow:hidden; flex-shrink:0; vertical-align:middle; position:relative; }
.vn-mob-icon svg { position:absolute; top:0; left:0; width:100% !important; height:100% !important; }

/* ── Reset ─────────────────────────────────────────────────── */
.vitrine *, .vitrine *::before, .vitrine *::after { box-sizing:border-box; }
.vitrine { font-family:var(--v-font); background:var(--v-bg); color:var(--v-text); line-height:1.6; -webkit-font-smoothing:antialiased; }
.vitrine a { text-decoration:none; color:inherit; }

/* ── Fix spécificité : .vitrine a (0,1,1) écrase les classes bouton (0,1,0)
      Solution : forcer la couleur via a.classe (0,1,1) ou !important ──────── */
a.v-btn-primary,
.v-btn-primary:not(span) { color:#fff !important; }
a.v-btn-outline  { color:var(--v-primary) !important; }
a.vnav-login-btn { color:#fff !important; }
a.vnav-all-btn   { color:#fff !important; }
a.vnav-user-icon { color:var(--v-muted) !important; }
a.v-catalog-card-btn { color:#fff !important; }
a.v-catalog-filter.active { color:#fff !important; }
a.v-featured-cta { color:#fff !important; }
a.v-cat-btn      { color:#fff !important; }
a.v-jeu-cta-btn  { color:#fff !important; }
a.v-highlight-btn { color:var(--v-primary) !important; }
a.v-blog-read    { color:var(--v-primary) !important; }
a.v-server-game-chip { color:var(--v-text) !important; }
a.v-server-game-chip:hover { color:var(--v-primary) !important; }
.v-cta a.v-btn-primary { color:var(--v-primary) !important; }
.v-cta a.v-btn-ghost   { color:#fff !important; }
a.v-period-tab.active  { color:#fff !important; }
a.vnav-all-btn svg { color:#fff; }
.vitrine img { display:block; max-width:100%; }
.vitrine button { cursor:pointer; border:none; background:none; font:inherit; }
.vitrine ul,.vitrine ol { list-style:none; margin:0; padding:0; }
.vitrine p { margin:0; }
.vitrine h1,.vitrine h2,.vitrine h3,.vitrine h4 { margin:0; line-height:1.15; }

/* ── Layout ─────────────────────────────────────────────────── */
.v-container  { max-width:1180px; margin:0 auto; padding:0 24px; }
.v-section    { padding:96px 0; }
.v-section-sm { padding:56px 0; }
.v-section-alt  { background:var(--v-bg2); }
.v-section-dark { background:var(--v-bg2); }

.v-section-header { text-align:center; margin-bottom:64px; }

/* ── Eyebrow label ─────────────────────────────────────────── */
.v-section-label {
  display:inline-flex; align-items:center; gap:6px;
  font-size:.68rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--v-primary); margin-bottom:14px;
}

/* ── Section title ─────────────────────────────────────────── */
.v-section-title {
  font-size:clamp(1.9rem,3.5vw,2.9rem); font-weight:300;
  color:var(--v-text); margin-bottom:16px; letter-spacing:-.025em; line-height:1.12;
}
.v-section-title strong, .v-section-title .v-accent { font-weight:700; color:var(--v-primary); }
.v-section-title-white { color:#fff; }
.v-section-title-white strong { color:#fff; }
.v-section-sub { font-size:1rem; color:var(--v-muted); max-width:540px; margin:0 auto; line-height:1.7; }

/* ════════════════════════════════════════════════════════════
   NAVBAR
   ════════════════════════════════════════════════════════════ */
.vnav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  height:var(--v-nav-h); background:rgba(255,255,255,.97);
  backdrop-filter:blur(20px); border-bottom:1px solid transparent;
  transition:border-color var(--v-t),box-shadow var(--v-t);
}
.vnav.scrolled { border-bottom-color:var(--v-border); box-shadow:0 1px 20px rgba(0,0,0,.07); }
.vnav-inner { max-width:1280px; margin:0 auto; height:100%; display:flex; align-items:center; gap:4px; padding:0 24px; }
.vnav-logo { display:flex; align-items:center; gap:9px; font-size:1.15rem; font-weight:700; color:var(--v-text); letter-spacing:-.03em; flex-shrink:0; margin-right:12px; }
.vnav-logo-icon { width:34px; height:34px; border-radius:10px; background:var(--v-primary); display:flex; align-items:center; justify-content:center; color:#fff; }
/* Logo image vitrine */
.vnav-logo-img { max-height:36px; max-width:160px; object-fit:contain; display:block; }
.vnav-logo-light { display:none; }
.vnav-logo-dark  { display:block; }
:root:not(.dark) .vnav-logo-light { display:block; }
:root:not(.dark) .vnav-logo-dark  { display:none; }
/* Quand un logo image est présent, cacher le nom texte */
.vnav-logo:has(.vnav-logo-img) .vnav-logo-text { display:none; }
/* Fallback si :has() non supporté : le nom reste visible */
.vnav-links { display:flex; align-items:center; gap:0; flex:1; }
.vnav-item  { position:relative; }
.vnav-link  { display:flex; align-items:center; gap:5px; padding:8px 14px; border-radius:var(--v-radius-sm); font-size:.875rem; font-weight:600; color:var(--v-text-2); transition:color var(--v-t),background var(--v-t); white-space:nowrap; letter-spacing:-.015em; }
button.vnav-link { font-weight:600; color:var(--v-text-2); font-size:.875rem; letter-spacing:-.015em; }
.vnav-nav-icon { display:inline-flex; align-items:center; opacity:.55; flex-shrink:0; }
.vnav-link:hover,.vnav-item.open .vnav-link { color:var(--v-text); background:var(--v-bg2); }
.vnav-caret { font-size:.55rem; opacity:.4; transition:transform .2s; margin-left:1px; }
.vnav-item.open .vnav-caret { transform:rotate(180deg); }
.vnav-actions { display:flex; align-items:center; gap:8px; margin-left:auto; flex-shrink:0; }
.vnav-user-icon { width:36px; height:36px; border-radius:50%; border:1.5px solid var(--v-border); display:flex; align-items:center; justify-content:center; color:var(--v-muted); transition:border-color var(--v-t),color var(--v-t); }
.vnav-user-icon:hover { border-color:var(--v-primary); color:var(--v-primary); }
.vnav-login-btn { display:flex; align-items:center; gap:7px; background:var(--v-primary); color:#fff; padding:9px 20px; border-radius:9px; font-size:.82rem; font-weight:600; transition:background var(--v-t),transform var(--v-t),box-shadow var(--v-t); }
.vnav-login-btn:hover { background:var(--v-primary-d); transform:translateY(-1px); box-shadow:0 4px 16px rgba(var(--v-primary-rgb),.35); }
/* Bouton thème */
.vnav-theme-btn {
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:8px;
  border:1.5px solid var(--v-border);
  color:var(--v-muted); background:transparent;
  cursor:pointer; transition:border-color var(--v-t),color var(--v-t),background var(--v-t);
  flex-shrink:0;
}
.vnav-theme-btn:hover { border-color:var(--v-primary); color:var(--v-primary); background:var(--v-primary-bg); }
.vnav-theme-icon-light { display:flex; }
.vnav-theme-icon-dark  { display:none; }
:root.dark .vnav-theme-icon-light { display:none; }
:root.dark .vnav-theme-icon-dark  { display:flex; }
/* Icône drapeau */
.vnav-flag-icon { display:flex; align-items:center; }
.vnav-lang {
  display:flex; align-items:center; gap:6px;
  padding:7px 11px; border-radius:8px;
  border:1.5px solid var(--v-border);
  font-size:.82rem; color:var(--v-text); font-weight:600;
  cursor:pointer; transition:border-color var(--v-t),background var(--v-t);
  background:transparent;
}
.vnav-lang:hover { border-color:var(--v-primary); background:var(--v-primary-bg); }
.vnav-lang-label { font-size:.75rem; font-weight:700; letter-spacing:.04em; }
.vnav-lang-menu a { font-size:.86rem !important; display:flex !important; align-items:center; gap:8px; }
.vnav-lang-active { color:var(--v-primary) !important; font-weight:700; background:var(--v-primary-bg); border-radius:6px; }
.vnav-burger { display:none; align-items:center; justify-content:center; width:38px; height:38px; border-radius:8px; border:1.5px solid var(--v-border); margin-left:auto; color:var(--v-text); }
/* ── Mega dropdown ── */
.vnav-mega-wrapper {
  position:absolute; top:calc(100% + 10px); left:-20px;
  width:880px; max-width:calc(100vw - 32px);
  background:#fff; border:1px solid var(--v-border);
  border-radius:var(--v-radius-xl); box-shadow:0 24px 60px rgba(0,0,0,.12),0 4px 16px rgba(0,0,0,.06);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .2s var(--v-ease),visibility .2s,transform .2s var(--v-ease);
  pointer-events:none; overflow:hidden;
}
.vnav-item.open .vnav-mega-wrapper { opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; }
.vnav-mega-body { display:grid; grid-template-columns:290px 1fr; }

/* ── Panneau gauche — À la une ── */
.vnav-mega-left { background:var(--v-bg2); padding:24px 20px; border-right:1px solid var(--v-border); }

/* Labels section */
.vnav-mega-label {
  display:flex; align-items:center; gap:8px;
  font-size:.63rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
  color:var(--v-text-2); margin-bottom:16px; padding-bottom:12px;
  border-bottom:2px solid var(--v-border);
}
.vnav-mega-label-dot { width:7px; height:7px; border-radius:50%; background:var(--v-primary); flex-shrink:0; }

/* Featured items */
.vnav-feat-item {
  display:flex; align-items:center; gap:13px;
  padding:11px 12px; border-radius:var(--v-radius);
  transition:background .15s, box-shadow .15s; margin-bottom:5px;
  border:1px solid transparent;
}
.vnav-feat-item:hover { background:#fff; border-color:var(--v-border); box-shadow:0 2px 8px rgba(0,0,0,.06); }
.vnav-feat-icon {
  width:48px; height:48px; border-radius:13px; flex-shrink:0;
  overflow:hidden; position:relative;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.12);
}
.vnav-feat-info { min-width:0; flex:1; }
.vnav-feat-name { font-size:.9rem; font-weight:700; color:var(--v-text); margin-bottom:2px; display:block; }
.vnav-feat-desc { font-size:.73rem; color:var(--v-muted); line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.vnav-feat-arrow { color:var(--v-primary); flex-shrink:0; opacity:0; transition:opacity .15s,transform .15s; font-size:1rem; }
.vnav-feat-item:hover .vnav-feat-arrow { opacity:1; transform:translateX(3px); }

/* ── Panneau droit — Toutes nos offres ── */
.vnav-mega-right { padding:24px 20px; }
.vnav-games-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:3px; }
.vnav-game-item {
  display:flex; align-items:center; gap:11px;
  padding:10px 11px; border-radius:var(--v-radius); border:1px solid transparent;
  transition:background .15s, border-color .15s;
}
.vnav-game-item:hover { background:var(--v-bg2); border-color:var(--v-border); }
.vnav-game-icon {
  width:40px; height:40px; border-radius:11px; flex-shrink:0;
  overflow:hidden; display:flex; align-items:center; justify-content:center;
  box-shadow:0 1px 4px rgba(0,0,0,.1);
}
.vnav-game-name { font-size:.87rem; font-weight:700; color:var(--v-text); display:block; }
.vnav-game-desc { font-size:.7rem; color:var(--v-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:140px; display:block; margin-top:1px; }

/* ── Footer du mega ── */
.vnav-mega-footer {
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 20px; border-top:1px solid var(--v-border);
  background:linear-gradient(to right, var(--v-bg2) 0%, #fff 100%);
}
.vnav-all-btn {
  background:var(--v-primary); color:#fff; border-radius:9px;
  font-size:.8rem; font-weight:700; padding:10px 20px;
  transition:background var(--v-t),transform var(--v-t),box-shadow var(--v-t);
  display:flex; align-items:center; gap:7px;
  box-shadow:0 2px 10px rgba(var(--v-primary-rgb),.3);
  letter-spacing:.02em;
}
.vnav-all-btn:hover { background:var(--v-primary-d); transform:translateY(-1px); box-shadow:0 4px 16px rgba(var(--v-primary-rgb),.4); }
.vnav-discover { font-size:.82rem; color:var(--v-muted); font-weight:500; display:flex; align-items:center; gap:5px; transition:color .15s; }
.vnav-discover:hover { color:var(--v-primary); }
.vnav-discover span { transition:text-decoration .15s; }
.vnav-discover:hover span { text-decoration:underline; }
.vnav-dropdown-menu { position:absolute; top:calc(100% + 8px); left:0; min-width:200px; background:#fff; border:1px solid var(--v-border); border-radius:var(--v-radius); box-shadow:var(--v-shadow-lg); opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .18s,visibility .18s,transform .18s; padding:6px; }
.vnav-item.open .vnav-dropdown-menu { opacity:1; visibility:visible; transform:none; }
.vnav-dropdown-menu a { display:block; padding:8px 13px; border-radius:var(--v-radius-sm); font-size:.84rem; color:var(--v-muted); transition:background var(--v-t),color var(--v-t); }
.vnav-dropdown-menu a:hover { background:var(--v-bg2); color:var(--v-text); }
.vnav-mobile { display:none; position:fixed; top:var(--v-nav-h); left:0; right:0; background:#fff; border-bottom:1px solid var(--v-border); padding:12px; box-shadow:var(--v-shadow-lg); z-index:999; max-height:calc(100vh - var(--v-nav-h)); overflow-y:auto; flex-direction:column; gap:3px; }
.vnav-mobile.open { display:flex; }
.vnav-mobile a,.vnav-mobile button { display:flex; align-items:center; gap:8px; padding:11px 14px; border-radius:var(--v-radius-sm); font-size:.88rem; color:var(--v-text); font-weight:500; transition:background var(--v-t); }
.vnav-mobile a:hover,.vnav-mobile button:hover { background:var(--v-bg2); }
.vnav-mobile .vnav-mobile-divider { height:1px; background:var(--v-border); margin:6px 0; }
.vnav-mobile .vnav-mobile-cta { background:var(--v-primary); color:#fff; justify-content:center; border-radius:10px; margin-top:6px; font-weight:600; }
.vnav-mobile-group { display:none; padding-left:14px; flex-direction:column; gap:2px; }
.vnav-mobile-group.open { display:flex; }
.vnav-mobile-group a { font-size:.84rem; color:var(--v-muted); }

/* ════════════════════════════════════════════════════════════
   HERO
   ════════════════════════════════════════════════════════════ */
.v-hero {
  padding:calc(var(--v-nav-h) + 80px) 0 96px;
  background:var(--v-bg2); position:relative; overflow:hidden;
}
.v-hero::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 50% at 65% 40%, rgba(49,70,255,.07), transparent 70%);
  pointer-events:none;
}
.v-hero-orbs { display:none; }
.v-hero-orb  { display:none; }
.v-hero-inner { position:relative; z-index:1; max-width:800px; margin:0 auto; padding:0 24px; text-align:center; }

.v-hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:#fff; border:1px solid var(--v-border); border-radius:20px;
  padding:6px 16px; font-size:.74rem; font-weight:500; color:var(--v-muted);
  margin-bottom:28px; box-shadow:var(--v-shadow-sm);
}
.v-hero-badge-dot { width:6px; height:6px; background:var(--v-green); border-radius:50%; animation:vPulse 2s infinite; }
@keyframes vPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(1.5)} }

.v-hero h1 {
  font-size:clamp(2.4rem,5.5vw,4rem); font-weight:300; line-height:1.1;
  color:var(--v-text); margin-bottom:22px; letter-spacing:-.04em;
}
.v-hero h1 strong, .v-hero h1 .gradient {
  font-weight:700; color:var(--v-primary);
  background:none; -webkit-text-fill-color:var(--v-primary);
}
.v-hero-sub { font-size:1.05rem; color:var(--v-muted); max-width:520px; margin:0 auto 40px; line-height:1.75; }
.v-hero-btns { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-bottom:56px; }

/* ── Buttons ─────────────────────────────────────────────── */
.v-btn-primary {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--v-primary); color:#fff; border-radius:10px;
  padding:14px 28px; font-size:.9rem; font-weight:600;
  transition:background var(--v-t),transform var(--v-t),box-shadow var(--v-t);
  box-shadow:0 4px 14px rgba(var(--v-primary-rgb),.3);
}
.v-btn-primary:hover { background:var(--v-primary-d); transform:translateY(-2px); box-shadow:0 8px 24px rgba(var(--v-primary-rgb),.4); }
.v-btn-ghost {
  display:inline-flex; align-items:center; gap:8px;
  background:#fff; color:var(--v-text-2); border-radius:10px;
  padding:14px 28px; font-size:.9rem; font-weight:500;
  border:1.5px solid var(--v-border);
  transition:border-color var(--v-t),box-shadow var(--v-t);
}
.v-btn-ghost:hover { border-color:var(--v-border-2); box-shadow:var(--v-shadow-sm); }
.v-btn-outline {
  display:inline-flex; align-items:center; gap:8px;
  background:transparent; color:var(--v-primary); border-radius:10px;
  padding:12px 24px; font-size:.88rem; font-weight:600;
  border:1.5px solid var(--v-primary);
  transition:background var(--v-t),color var(--v-t);
}
.v-btn-outline:hover { background:var(--v-primary); color:#fff; }

/* Hero stats */
.v-hero-stats {
  display:flex; flex-wrap:nowrap; justify-content:center; gap:0;
  background:linear-gradient(#fff,#fff) padding-box,
             linear-gradient(90deg,#3146ff,#10b981,#f59e0b,#a855f7) border-box;
  border:1.5px solid transparent;
  border-radius:var(--v-radius-lg);
  width:fit-content; margin:0 auto; overflow:hidden;
  box-shadow:var(--v-shadow);
}
.v-stat {
  text-align:center; padding:22px 32px; flex:1; min-width:0;
  display:flex; flex-direction:column; align-items:center; gap:9px;
}
.v-stat + .v-stat { border-left:1px solid var(--v-border); }
.v-stat-icon {
  width:38px; height:38px; border-radius:11px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.v-stat-value {
  font-size:1.35rem; font-weight:700;
  color:var(--v-text); /* fallback si gradient text non supporté */
  letter-spacing:-.03em; white-space:nowrap; line-height:1;
}
/* Gradient text uniquement quand background-clip est supporté */
.v-stat-blue, .v-stat-green, .v-stat-orange, .v-stat-purple {
  background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.v-stat-blue   { color:#3146ff; background-image:linear-gradient(135deg,#3146ff,#6366f1); }
.v-stat-green  { color:#10b981; background-image:linear-gradient(135deg,#10b981,#34d399); }
.v-stat-orange { color:#f59e0b; background-image:linear-gradient(135deg,#f59e0b,#fb923c); }
.v-stat-purple { color:#a855f7; background-image:linear-gradient(135deg,#a855f7,#ec4899); }
.v-stat-label { font-size:.68rem; color:var(--v-muted); white-space:nowrap; }

/* ── Trust band ─────────────────────────────────────────── */
.v-trust { background:#fff; border-top:1px solid var(--v-border); border-bottom:1px solid var(--v-border); padding:16px 0; }
.v-trust-inner { max-width:1100px; margin:0 auto; padding:0 24px; display:flex; align-items:center; gap:24px; flex-wrap:wrap; justify-content:center; }
.v-trust-label { font-size:.6rem; text-transform:uppercase; letter-spacing:.2em; color:var(--v-muted); font-weight:700; flex-shrink:0; }
.v-trust-items { display:flex; gap:36px; flex-wrap:wrap; justify-content:center; }
.v-trust-item { display:flex; align-items:center; gap:7px; font-size:.78rem; font-weight:500; color:var(--v-muted); }
.v-trust-item svg { color:var(--v-muted2); flex-shrink:0; }

/* ════════════════════════════════════════════════════════════
   CATALOGUE — Image-card style comme OxygenServ
   ════════════════════════════════════════════════════════════ */
.v-catalog-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-bottom:32px; }
.v-catalog-filters { display:flex; gap:8px; flex-wrap:wrap; }
.v-catalog-filter {
  padding:8px 20px; border-radius:20px; font-size:.8rem; font-weight:500;
  border:1.5px solid var(--v-border); color:var(--v-muted); background:#fff;
  cursor:pointer; transition:all var(--v-t);
}
.v-catalog-filter.active { background:var(--v-primary); border-color:var(--v-primary); color:#fff; box-shadow:0 4px 12px rgba(var(--v-primary-rgb),.25); }
.v-catalog-filter:hover:not(.active) { border-color:var(--v-border-2); color:var(--v-text); }

.v-catalog-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  gap:16px;
}

/* ── La carte jeu : image-card OxygenServ ── */
.v-catalog-card {
  background:#fff;
  border-radius:var(--v-radius-lg);
  overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:var(--v-shadow-sm);
  border:1px solid var(--v-border);
  transition:transform .25s var(--v-ease), box-shadow .25s var(--v-ease);
}
.v-catalog-card:hover { transform:translateY(-5px); box-shadow:var(--v-shadow-xl); border-color:transparent; }

/* Zone couleur en haut = remplace l'image */
.v-catalog-card-cover {
  background:linear-gradient(140deg, var(--card-color, var(--v-primary)) 0%, color-mix(in srgb, var(--card-color, var(--v-primary)) 75%, #000) 100%);
  padding:28px 20px 22px;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  position:relative; overflow:hidden;
}
.v-catalog-card-cover::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 80% 20%, rgba(255,255,255,.15), transparent 55%);
}
.v-catalog-card-icon {
  width:56px; height:56px; border-radius:14px;
  background:rgba(255,255,255,.18); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  position:relative; z-index:1; flex-shrink:0; overflow:hidden;
}
.v-catalog-card-icon svg { position:absolute; inset:0; width:100% !important; height:100% !important; display:block; }
.v-catalog-card-name {
  font-size:.95rem; font-weight:700; color:#fff;
  letter-spacing:-.01em; position:relative; z-index:1;
  text-shadow:0 1px 4px rgba(0,0,0,.2);
}
/* Partie blanche en bas */
.v-catalog-card-body { padding:16px; flex:1; display:flex; flex-direction:column; gap:10px; }
.v-catalog-card-desc { font-size:.78rem; color:var(--v-muted); line-height:1.55; flex:1; }
.v-catalog-card-footer { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.v-catalog-card-price { font-size:.8rem; color:var(--v-text); }
.v-catalog-card-price strong { font-weight:700; font-size:.95rem; color:var(--v-text); }
.v-catalog-card-price small { font-size:.68rem; color:var(--v-muted); }
.v-catalog-card-btn {
  padding:7px 14px; border-radius:8px; font-size:.74rem; font-weight:600;
  background:var(--card-color, var(--v-primary)); color:#fff; white-space:nowrap;
  transition:opacity var(--v-t), transform var(--v-t);
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.v-catalog-card-btn:hover { opacity:.88; transform:translateX(2px); }

/* Rétrocompat avec anciens spans sans .v-catalog-card-body wrapper */
.v-catalog-card-top {
  background:linear-gradient(140deg, var(--card-color, var(--v-primary)) 0%, color-mix(in srgb, var(--card-color, var(--v-primary)) 75%, #000) 100%);
  padding:24px 18px 20px; display:flex; align-items:center; gap:12px; position:relative; overflow:hidden;
}
.v-catalog-card-top::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 80% 20%, rgba(255,255,255,.12), transparent 55%); }
.v-catalog-card-top .v-catalog-card-icon { width:44px; height:44px; border-radius:11px; }
.v-catalog-card-top .v-catalog-card-name { color:#fff; font-weight:700; font-size:.92rem; position:relative; z-index:1; }

/* ════════════════════════════════════════════════════════════
   À LA UNE — Featured (image-card style)
   ════════════════════════════════════════════════════════════ */
.v-featured-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-bottom:48px; }

.v-featured-card {
  background:#fff; border:1px solid var(--v-border); border-radius:var(--v-radius-lg);
  overflow:hidden; display:flex; flex-direction:column;
  box-shadow:var(--v-shadow-sm);
  transition:transform .25s var(--v-ease), box-shadow .25s var(--v-ease), border-color .25s;
}
.v-featured-card:hover { transform:translateY(-6px); box-shadow:var(--v-shadow-xl); border-color:transparent; }

/* Zone colorée en haut = image de remplacement */
.v-featured-cover {
  background:linear-gradient(145deg, var(--card-color,var(--v-primary)) 0%, color-mix(in srgb, var(--card-color,var(--v-primary)) 70%, #000) 100%);
  padding:36px 20px 28px;
  display:flex; flex-direction:column; align-items:center; gap:16px;
  position:relative; overflow:hidden;
}
.v-featured-cover::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 75% 25%, rgba(255,255,255,.18), transparent 55%);
}
.v-featured-icon {
  width:72px; height:72px; border-radius:18px; flex-shrink:0; overflow:hidden;
  background:rgba(255,255,255,.2); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  position:relative; z-index:1;
}
.v-featured-icon svg { position:absolute; inset:0; width:100% !important; height:100% !important; display:block; }
.v-featured-name {
  font-size:1.15rem; font-weight:700; color:#fff;
  text-shadow:0 1px 6px rgba(0,0,0,.2); position:relative; z-index:1;
  letter-spacing:-.01em;
}
.v-featured-badge {
  position:absolute; top:14px; right:14px; z-index:2;
  font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em;
  padding:4px 10px; border-radius:6px;
}
.v-badge-new  { background:rgba(255,255,255,.9); color:#15803d; }
.v-badge-maj  { background:rgba(255,255,255,.9); color:var(--v-primary); }
.v-badge-hot  { background:rgba(255,255,255,.9); color:#b91c1c; }

/* Corps blanc en bas */
.v-featured-body {
  padding:20px; flex:1; display:flex; flex-direction:column; gap:14px;
}
.v-featured-desc { font-size:.84rem; color:var(--v-muted); line-height:1.6; flex:1; }
.v-featured-price-row {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-top:auto;
}
.v-featured-price { font-size:.84rem; color:var(--v-text); }
.v-featured-price strong { font-size:1rem; font-weight:700; color:var(--v-text); }
.v-featured-price small  { font-size:.7rem; color:var(--v-muted); }
.v-featured-cta {
  background:var(--card-color,var(--v-primary)); color:#fff;
  font-size:.76rem; font-weight:600; padding:8px 16px; border-radius:8px;
  white-space:nowrap; flex-shrink:0;
  transition:opacity var(--v-t), transform var(--v-t);
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.v-featured-card:hover .v-featured-cta { opacity:.88; transform:translateX(2px); }

/* ════════════════════════════════════════════════════════════
   HOW IT WORKS — Steps avec cartes
   ════════════════════════════════════════════════════════════ */
.v-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; position:relative; }
.v-steps::before {
  content:''; position:absolute; top:28px; left:calc(100%/6); right:calc(100%/6);
  height:1px; background:linear-gradient(90deg,transparent,var(--v-border) 30%,var(--v-border) 70%,transparent); z-index:0;
}
.v-step {
  background:#fff; border:1px solid var(--v-border); border-radius:var(--v-radius-lg);
  padding:32px 24px 28px; text-align:center;
  box-shadow:var(--v-shadow-sm);
  transition:box-shadow .25s, transform .25s;
}
.v-step:hover { box-shadow:var(--v-shadow-lg); transform:translateY(-3px); }
.v-step-num {
  width:52px; height:52px; border-radius:50%;
  background:var(--v-primary-bg); color:var(--v-primary);
  font-size:1.1rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 20px; position:relative; z-index:1;
  border:2px solid rgba(var(--v-primary-rgb),.2);
}
.v-step-title { font-size:1rem; font-weight:700; margin-bottom:10px; color:var(--v-text); }
.v-step-text  { font-size:.85rem; color:var(--v-muted); line-height:1.7; }

/* ════════════════════════════════════════════════════════════
   FAQ
   ════════════════════════════════════════════════════════════ */
.v-faq { max-width:700px; margin:0 auto; }
.v-faq-item {
  background:#fff; border:1px solid var(--v-border);
  border-radius:var(--v-radius-lg); margin-bottom:10px; overflow:hidden;
  box-shadow:var(--v-shadow-sm);
  transition:border-color var(--v-t), box-shadow var(--v-t);
}
.v-faq-item:hover { border-color:var(--v-border-2); box-shadow:var(--v-shadow); }
.v-faq-item.open  { border-color:var(--v-primary); box-shadow:0 0 0 3px rgba(var(--v-primary-rgb),.08); }
.v-faq-q {
  width:100%; display:flex; justify-content:space-between; align-items:center;
  padding:20px 24px; font-size:.9rem; font-weight:600; color:var(--v-text);
  text-align:left; gap:12px; transition:background var(--v-t);
}
.v-faq-item.open .v-faq-q { color:var(--v-primary); }
.v-faq-chevron { flex-shrink:0; color:var(--v-muted2); transition:transform .2s; font-style:normal; }
.v-faq-item.open .v-faq-chevron { transform:rotate(180deg); color:var(--v-primary); }
.v-faq-a { max-height:0; overflow:hidden; transition:max-height .3s ease; }
.v-faq-item.open .v-faq-a { max-height:220px; }
.v-faq-a-inner { padding:0 24px 20px; font-size:.87rem; color:var(--v-muted); line-height:1.75; }

/* ════════════════════════════════════════════════════════════
   TESTIMONIALS
   ════════════════════════════════════════════════════════════ */
.v-testi-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.v-testi-card {
  background:#fff; border:1px solid var(--v-border); border-radius:var(--v-radius-lg);
  padding:28px; display:flex; flex-direction:column; gap:16px;
  box-shadow:var(--v-shadow-sm);
  transition:box-shadow .25s, transform .25s;
}
.v-testi-card:hover { box-shadow:var(--v-shadow-lg); transform:translateY(-4px); border-color:transparent; }
.v-testi-card.dark { background:#fff; border-color:var(--v-border); }
.v-testi-top    { display:flex; align-items:center; gap:12px; }
.v-testi-avatar { width:44px; height:44px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:.88rem; font-weight:700; color:#fff; }
.v-testi-name   { font-size:.9rem; font-weight:700; color:var(--v-text); }
.v-testi-card.dark .v-testi-name { color:var(--v-text); }
.v-testi-game   { font-size:.73rem; color:var(--v-muted); }
.v-testi-card.dark .v-testi-game { color:var(--v-muted); }
.v-testi-stars  { display:flex; gap:2px; color:#f59e0b; font-size:.95rem; }
.v-testi-text   { font-size:.85rem; color:var(--v-muted); line-height:1.75; flex:1; }
.v-testi-card.dark .v-testi-text { color:var(--v-muted); }
.v-testi-tag    { display:inline-flex; align-items:center; gap:5px; font-size:.72rem; font-weight:600; padding:4px 12px; border-radius:20px; background:var(--v-bg2); color:var(--v-muted); }

/* ════════════════════════════════════════════════════════════
   CTA — Fond bleu plein
   ════════════════════════════════════════════════════════════ */
.v-cta {
  background:var(--v-primary); padding:96px 24px; text-align:center; position:relative; overflow:hidden;
}
.v-cta::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 60% at 20% 50%, rgba(255,255,255,.07), transparent),
             radial-gradient(ellipse 60% 60% at 80% 50%, rgba(255,255,255,.05), transparent);
  pointer-events:none;
}
.v-cta-inner { position:relative; z-index:1; max-width:580px; margin:0 auto; }
.v-cta h2    { font-size:clamp(1.9rem,4vw,3rem); font-weight:300; color:#fff; margin-bottom:16px; letter-spacing:-.03em; }
.v-cta h2 strong { font-weight:700; }
.v-cta p     { color:rgba(255,255,255,.75); margin-bottom:40px; font-size:1rem; line-height:1.7; }
.v-cta .v-btn-primary { background:#fff; color:var(--v-primary); font-weight:700; box-shadow:0 4px 20px rgba(0,0,0,.15); }
.v-cta .v-btn-primary:hover { background:rgba(255,255,255,.93); transform:translateY(-2px); box-shadow:0 8px 28px rgba(0,0,0,.2); }
.v-cta .v-btn-ghost   { background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.3); }
.v-cta .v-btn-ghost:hover { background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.5); }
.v-cta-badges { display:flex; justify-content:center; gap:24px; flex-wrap:wrap; margin-top:32px; }
.v-cta-badge  { font-size:.75rem; color:rgba(255,255,255,.85); display:flex; align-items:center; gap:6px; }
.v-cta-badge svg { color:rgba(255,255,255,.65); }

/* ════════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════════ */
.v-footer { background:#15172b; color:#9ca3af; padding:72px 0 36px; }
.v-footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:32px; margin-bottom:56px; }
.v-footer-grid > * { min-width:0; }
.v-footer-logo { font-size:1.1rem; font-weight:700; color:#fff; margin-bottom:14px; display:flex; align-items:center; gap:8px; }
.v-footer-logo-icon { width:30px; height:30px; border-radius:8px; flex-shrink:0; background:var(--v-primary); display:flex; align-items:center; justify-content:center; color:#fff; }
.v-footer-tagline { font-size:.82rem; color:rgba(255,255,255,.55); line-height:1.7; margin-bottom:20px; }
.v-footer-social  { display:flex; gap:8px; flex-wrap:wrap; }
.v-footer-social a { display:flex; align-items:center; gap:6px; padding:7px 12px; background:rgba(255,255,255,.08); border-radius:8px; font-size:.75rem; color:rgba(255,255,255,.65); transition:background var(--v-t),color var(--v-t); border:1px solid rgba(255,255,255,.1); }
.v-footer-social a:hover { background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.2); }
.v-footer-col h4 { font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.18em; color:rgba(255,255,255,.5); margin-bottom:16px; }
.v-footer-col a  { display:flex; align-items:center; gap:7px; font-size:.83rem; color:rgba(255,255,255,.6); margin-bottom:10px; transition:color var(--v-t); }
.v-footer-col a svg { flex-shrink:0; color:rgba(255,255,255,.4); }
.v-footer-col a:hover { color:#fff; }
.v-footer-bottom { border-top:1px solid rgba(255,255,255,.1); padding-top:24px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; font-size:.74rem; color:rgba(255,255,255,.45); }
.v-footer-bottom > div { display:flex; gap:16px; flex-wrap:wrap; align-items:center; }

/* ════════════════════════════════════════════════════════════
   ENGAGEMENT / FEATURES
   ════════════════════════════════════════════════════════════ */
.v-engage-grid { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.v-engage-stats { display:flex; gap:36px; flex-wrap:wrap; margin-bottom:32px; }
.v-engage-stat { text-align:center; }
.v-engage-stat-val   { font-size:2rem; font-weight:700; color:var(--v-text); letter-spacing:-.04em; }
.v-engage-stat-val span { font-size:1rem; font-weight:400; color:var(--v-muted); }
.v-engage-stat-label { font-size:.73rem; color:var(--v-muted); margin-top:2px; }
.v-engage-features { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.v-engage-feat {
  background:#fff; border:1px solid var(--v-border);
  border-radius:var(--v-radius); padding:18px;
  box-shadow:var(--v-shadow-sm);
  transition:box-shadow .2s, transform .2s;
}
.v-engage-feat:hover { box-shadow:var(--v-shadow); transform:translateY(-2px); }
.v-engage-feat-icon { color:var(--v-primary); margin-bottom:10px; font-size:1.3rem; }
.v-engage-feat-title { font-size:.88rem; font-weight:700; color:var(--v-text); margin-bottom:4px; }
.v-engage-feat-text  { font-size:.78rem; color:var(--v-muted); line-height:1.55; }
.v-engage-visual {
  aspect-ratio:1; max-width:440px; width:100%;
  background:linear-gradient(140deg, var(--v-primary) 0%, #6366f1 100%);
  border-radius:var(--v-radius-xl); overflow:hidden;
  display:flex; align-items:center; justify-content:center; position:relative;
  box-shadow:0 20px 60px rgba(var(--v-primary-rgb),.25);
}
.v-engage-visual::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), transparent 55%); }
.v-engage-visual-inner { text-align:center; position:relative; z-index:1; }
.v-engage-map-pin { font-size:3rem; margin-bottom:12px; }
.v-engage-location { font-size:1.1rem; font-weight:700; color:#fff; }
.v-engage-location-sub { font-size:.8rem; color:rgba(255,255,255,.6); margin-top:4px; }
.v-engage-status { display:inline-flex; align-items:center; gap:6px; margin-top:16px; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.25); border-radius:20px; padding:5px 14px; font-size:.76rem; font-weight:600; color:#fff; }
.v-engage-status-dot { width:6px; height:6px; background:#34d399; border-radius:50%; animation:vPulse 2s infinite; }

/* ════════════════════════════════════════════════════════════
   PANEL FEATURES
   ════════════════════════════════════════════════════════════ */
.v-panel-grid { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.v-panel-features { display:flex; flex-direction:column; gap:12px; }
.v-panel-feat {
  display:flex; align-items:flex-start; gap:14px; padding:18px;
  background:#fff; border:1px solid var(--v-border); border-radius:var(--v-radius);
  box-shadow:var(--v-shadow-sm); transition:box-shadow .2s, transform .2s;
}
.v-panel-feat:hover { box-shadow:var(--v-shadow); transform:translateY(-2px); border-color:transparent; }
.v-panel-feat-icon { width:40px; height:40px; border-radius:10px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.v-panel-feat-title { font-size:.9rem; font-weight:700; margin-bottom:3px; color:var(--v-text); }
.v-panel-feat-text  { font-size:.78rem; color:var(--v-muted); line-height:1.55; }
.v-panel-table { background:#fff; border:1px solid var(--v-border); border-radius:var(--v-radius-lg); overflow:hidden; box-shadow:var(--v-shadow-sm); }
.v-panel-table-row { display:flex; align-items:center; padding:13px 18px; border-bottom:1px solid var(--v-border); font-size:.85rem; }
.v-panel-table-row:last-child { border-bottom:none; }
.v-panel-table-label { flex:1; font-weight:500; color:var(--v-text); }
.v-panel-table-check { color:var(--v-success); display:flex; align-items:center; }

/* ════════════════════════════════════════════════════════════
   BLOG
   ════════════════════════════════════════════════════════════ */
.v-blog-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.v-blog-card {
  background:#fff; border:1px solid var(--v-border); border-radius:var(--v-radius-lg);
  overflow:hidden; box-shadow:var(--v-shadow-sm);
  transition:box-shadow .25s, transform .25s; display:flex; flex-direction:column;
}
.v-blog-card:hover { box-shadow:var(--v-shadow-lg); transform:translateY(-4px); border-color:transparent; }
.v-blog-thumb { aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.v-blog-body { padding:22px; flex:1; display:flex; flex-direction:column; gap:8px; }
.v-blog-cat  { font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.18em; color:var(--v-primary); }
.v-blog-title   { font-size:.94rem; font-weight:700; color:var(--v-text); line-height:1.4; }
.v-blog-excerpt { font-size:.81rem; color:var(--v-muted); line-height:1.65; flex:1; }
.v-blog-meta { display:flex; align-items:center; justify-content:space-between; font-size:.72rem; color:var(--v-muted2); margin-top:8px; }
.v-blog-read { font-size:.77rem; font-weight:600; color:var(--v-primary); display:flex; align-items:center; gap:4px; }
.v-blog-read:hover { text-decoration:underline; }

/* ════════════════════════════════════════════════════════════
   LOCALISATION
   ════════════════════════════════════════════════════════════ */
.v-server-layout { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.v-server-info { display:flex; flex-direction:column; gap:0; }
.v-server-stats { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:28px; }
.v-server-stat-card {
  background:#fff; border:1px solid var(--v-border); border-radius:var(--v-radius-lg); padding:20px;
  box-shadow:var(--v-shadow-sm); transition:box-shadow .2s;
}
.v-server-stat-card:hover { box-shadow:var(--v-shadow); }
.v-server-stat-icon { color:var(--v-primary); margin-bottom:10px; font-size:1.2rem; }
.v-server-stat-val   { font-size:1.3rem; font-weight:700; color:var(--v-text); letter-spacing:-.03em; }
.v-server-stat-label { font-size:.73rem; color:var(--v-muted); margin-top:2px; }
.v-server-online { display:inline-flex; align-items:center; gap:7px; background:var(--v-green-bg); border:1px solid rgba(16,185,129,.25); border-radius:20px; padding:6px 14px; font-size:.78rem; font-weight:600; color:#047857; margin-bottom:24px; }
.v-server-online-dot { width:7px; height:7px; background:var(--v-green); border-radius:50%; animation:vPulse 2s infinite; }
.v-server-games-title { font-size:.62rem; font-weight:600; text-transform:uppercase; letter-spacing:.18em; color:var(--v-muted2); margin-bottom:12px; }
.v-server-games { display:flex; flex-wrap:wrap; gap:8px; }
.v-server-game-chip { padding:6px 14px; background:#fff; border:1px solid var(--v-border); border-radius:20px; font-size:.75rem; font-weight:500; color:var(--v-text); transition:all var(--v-t); box-shadow:var(--v-shadow-sm); }
.v-server-game-chip:hover { border-color:var(--v-primary); background:var(--v-primary-bg); color:var(--v-primary); }
.v-server-map {
  aspect-ratio:1; max-width:440px; width:100%;
  background:linear-gradient(140deg, var(--v-primary) 0%, #6366f1 100%);
  border-radius:var(--v-radius-xl);
  display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;
  box-shadow:0 20px 60px rgba(var(--v-primary-rgb),.25);
}
.v-server-map::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), transparent 55%); }
.v-server-map-inner { position:relative; z-index:1; text-align:center; }
.v-server-map-flag  { font-size:3.5rem; margin-bottom:12px; line-height:1; }
.v-server-map-city  { font-size:1.2rem; font-weight:700; color:#fff; }
.v-server-map-dept  { font-size:.8rem; color:rgba(255,255,255,.6); margin-top:4px; }
.v-server-map-ping  { display:inline-block; margin-top:16px; background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.25); border-radius:8px; padding:6px 16px; font-size:.78rem; font-weight:600; color:#fff; }

/* ════════════════════════════════════════════════════════════
   NUMBERS
   ════════════════════════════════════════════════════════════ */
.v-numbers { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; background:#fff; border:1px solid var(--v-border); border-radius:var(--v-radius-lg); overflow:hidden; box-shadow:var(--v-shadow-sm); }
.v-number-item { text-align:center; padding:40px 24px; border-right:1px solid var(--v-border); }
.v-number-item:last-child { border-right:none; }
.v-number-icon { color:var(--v-muted2); margin-bottom:12px; display:flex; justify-content:center; }
.v-number-val  { font-size:2.2rem; font-weight:700; color:var(--v-text); letter-spacing:-.04em; margin-bottom:6px; }
.v-number-val span { font-size:1rem; }
.v-number-label { font-size:.78rem; color:var(--v-muted); line-height:1.5; }

/* ════════════════════════════════════════════════════════════
   INFRA CARDS
   ════════════════════════════════════════════════════════════ */
.v-infra-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.v-infra-card {
  background:#fff; padding:32px; border:1px solid var(--v-border);
  border-radius:var(--v-radius-lg); box-shadow:var(--v-shadow-sm);
  transition:box-shadow .25s, transform .25s;
}
.v-infra-card:hover { box-shadow:var(--v-shadow-lg); transform:translateY(-3px); }
.v-infra-icon { width:48px; height:48px; border-radius:12px; margin-bottom:20px; display:flex; align-items:center; justify-content:center; background:var(--v-primary-bg); color:var(--v-primary); }
.v-infra-card:nth-child(2) .v-infra-icon { background:var(--v-green-bg); color:var(--v-green); }
.v-infra-card:nth-child(3) .v-infra-icon { background:#fff7ed; color:#ea580c; }
.v-infra-title { font-size:1rem; font-weight:700; color:var(--v-text); margin-bottom:10px; }
.v-infra-text  { font-size:.85rem; color:var(--v-muted); line-height:1.7; margin-bottom:20px; }
.v-infra-specs { display:flex; flex-direction:column; gap:8px; }
.v-infra-spec  { display:flex; align-items:center; gap:8px; font-size:.79rem; color:var(--v-muted); }
.v-infra-spec svg { flex-shrink:0; color:var(--v-muted2); }
.v-infra-spec strong { color:var(--v-text); font-weight:600; }

/* ════════════════════════════════════════════════════════════
   FEATURES GRID
   ════════════════════════════════════════════════════════════ */
.v-feat-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
.v-feat-card {
  background:#fff; border:1px solid var(--v-border); border-radius:var(--v-radius-lg);
  padding:28px; box-shadow:var(--v-shadow-sm);
  transition:box-shadow .25s, transform .25s;
}
.v-feat-card:hover { box-shadow:var(--v-shadow-lg); transform:translateY(-4px); border-color:transparent; }
.v-feat-icon { width:48px; height:48px; border-radius:12px; margin-bottom:18px; display:flex; align-items:center; justify-content:center; background:var(--v-primary-bg); color:var(--v-primary); }
.v-feat-title { font-size:.95rem; font-weight:700; margin-bottom:8px; color:var(--v-text); }
.v-feat-text  { font-size:.84rem; color:var(--v-muted); line-height:1.65; }

/* ════════════════════════════════════════════════════════════
   CAT GRID (jeux.php)
   ════════════════════════════════════════════════════════════ */
.v-cat-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
.v-cat-card {
  display:flex; flex-direction:column; background:#fff; border:1px solid var(--v-border);
  border-radius:var(--v-radius-lg); padding:24px; box-shadow:var(--v-shadow-sm);
  position:relative; overflow:hidden;
  transition:box-shadow .25s, transform .25s;
}
.v-cat-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--card-color,var(--v-primary)); }
.v-cat-card:hover { box-shadow:var(--v-shadow-lg); transform:translateY(-4px); border-color:transparent; }
.v-cat-icon { width:52px; height:52px; border-radius:14px; margin-bottom:16px; display:flex; align-items:center; justify-content:center; overflow:hidden; background:color-mix(in srgb, var(--card-color,var(--v-primary)) 10%, white); }
.v-cat-name  { font-size:.96rem; font-weight:700; margin-bottom:6px; color:var(--v-text); }
.v-cat-desc  { font-size:.83rem; color:var(--v-muted); line-height:1.55; flex:1; margin-bottom:18px; }
.v-cat-footer { display:flex; align-items:center; justify-content:space-between; }
.v-cat-count { font-size:.72rem; color:var(--v-muted2); font-weight:500; }
.v-cat-btn { display:inline-flex; align-items:center; gap:5px; background:var(--card-color,var(--v-primary)); color:#fff; border-radius:7px; padding:7px 14px; font-size:.76rem; font-weight:600; transition:opacity var(--v-t),transform var(--v-t); }
.v-cat-btn:hover { opacity:.88; transform:translateX(2px); }

/* ════════════════════════════════════════════════════════════
   JEU.PHP — Two-column layout
   ════════════════════════════════════════════════════════════ */
.v-jeu-page { padding-top:var(--v-nav-h); background:var(--v-bg2); min-height:100vh; }
.v-jeu-breadcrumb-bar { background:#fff; border-bottom:1px solid var(--v-border); padding:0 24px; }
.v-jeu-breadcrumb-bar .v-breadcrumb { max-width:1180px; margin:0 auto; }
.v-jeu-layout { max-width:1180px; margin:0 auto; padding:28px 24px 64px; display:grid; grid-template-columns:1fr 460px; gap:24px; align-items:start; }
.v-jeu-left { display:flex; flex-direction:column; gap:16px; }
.v-jeu-header { background:#fff; border-radius:var(--v-radius-lg); border:1px solid var(--v-border); padding:32px; box-shadow:var(--v-shadow-sm); }
.v-jeu-header-top { display:flex; align-items:flex-start; gap:20px; margin-bottom:18px; }
.v-jeu-game-icon { width:84px; height:84px; border-radius:20px; flex-shrink:0; overflow:hidden; display:flex; align-items:center; justify-content:center; background:var(--v-bg2); }
.v-jeu-game-title { font-size:clamp(1.3rem,2.5vw,1.9rem); font-weight:700; line-height:1.15; letter-spacing:-.03em; }
.v-jeu-game-title span { color:var(--cat-color,var(--v-primary)); }
.v-jeu-game-desc { font-size:.88rem; color:var(--v-muted); line-height:1.72; }
.v-jeu-game-badge { display:inline-flex; align-items:center; gap:7px; font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.1em; color:var(--cat-color,var(--v-primary)); margin-top:16px; margin-bottom:22px; }
.v-jeu-mini-feats { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.v-jeu-mini-feat { border:1px solid var(--v-border); border-radius:var(--v-radius); padding:16px; background:#fff; }
.v-jeu-mini-feat-icon { color:var(--cat-color,var(--v-primary)); margin-bottom:8px; }
.v-jeu-mini-feat-title { font-size:.84rem; font-weight:700; color:var(--v-text); margin-bottom:3px; }
.v-jeu-mini-feat-text  { font-size:.74rem; color:var(--v-muted); line-height:1.45; }
.v-jeu-included { background:#fff; border-radius:var(--v-radius-lg); border:1px solid var(--v-border); padding:24px 28px; box-shadow:var(--v-shadow-sm); }
.v-jeu-included-label { display:flex; align-items:center; gap:8px; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.14em; color:var(--v-success); margin-bottom:16px; }
.v-jeu-perks { display:grid; grid-template-columns:1fr 1fr; gap:10px 20px; }
.v-jeu-perk { display:flex; align-items:center; gap:9px; font-size:.82rem; color:var(--v-text); font-weight:500; }
.v-jeu-perk-icon { width:20px; height:20px; border-radius:50%; flex-shrink:0; background:var(--v-success-bg); color:var(--v-success); display:flex; align-items:center; justify-content:center; }
.v-jeu-related { background:#fff; border-radius:var(--v-radius-lg); border:1px solid var(--v-border); padding:22px 24px; box-shadow:var(--v-shadow-sm); }
.v-jeu-related h3 { font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.16em; color:var(--v-muted2); margin-bottom:12px; }
.v-jeu-related-list  { display:flex; flex-direction:column; gap:2px; }
.v-jeu-related-item  { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:var(--v-radius-sm); font-size:.84rem; font-weight:500; color:var(--v-text); transition:background var(--v-t); }
.v-jeu-related-item:hover { background:var(--v-bg2); }
.v-jeu-related-item-icon { width:30px; height:30px; border-radius:8px; flex-shrink:0; overflow:hidden; display:flex; align-items:center; justify-content:center; background:var(--v-bg2); }
.v-jeu-related-item-count { margin-left:auto; font-size:.72rem; color:var(--v-muted); }
.v-jeu-right { position:sticky; top:calc(var(--v-nav-h) + 14px); background:#fff; border-radius:var(--v-radius-lg); border:1px solid var(--v-border); overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--v-shadow); }
.v-jeu-right-header { padding:22px 20px 16px; border-bottom:1px solid var(--v-border); }
.v-jeu-right-header h2 { font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.16em; color:var(--v-muted2); margin-bottom:14px; }
.v-period-tabs { display:flex; gap:6px; }
.v-period-tab { flex:1; padding:9px 6px; border-radius:8px; font-size:.76rem; font-weight:600; text-align:center; border:1.5px solid var(--v-border); color:var(--v-muted); cursor:pointer; transition:all var(--v-t); background:#fff; display:flex; align-items:center; justify-content:center; gap:3px; flex-direction:column; line-height:1.25; }
.v-period-tab .v-period-badge { font-size:.63rem; background:var(--v-success-bg); color:var(--v-success); border-radius:4px; padding:1px 5px; font-weight:600; }
.v-period-tab.hot .v-period-badge { background:#fff7ed; color:#ea580c; }
.v-period-tab.active { background:var(--v-primary); border-color:var(--v-primary); color:#fff; }
.v-period-tab.active .v-period-badge { background:rgba(255,255,255,.22); color:#fff; }
.v-plans-list { padding:12px 14px; display:flex; flex-direction:column; gap:7px; }
.v-plan-row { display:flex; align-items:center; gap:12px; border:1.5px solid var(--v-border); border-radius:var(--v-radius); padding:13px 14px; cursor:pointer; position:relative; transition:border-color var(--v-t),background var(--v-t); background:#fff; }
.v-plan-row:hover { border-color:var(--v-border-2); }
.v-plan-row.selected { border-color:var(--v-primary); background:var(--v-primary-bg); }
.v-plan-recommended-badge { position:absolute; top:-1px; right:12px; background:var(--v-primary); color:#fff; font-size:.58rem; font-weight:700; letter-spacing:.08em; padding:3px 10px; border-radius:0 0 6px 6px; text-transform:uppercase; }
.v-plan-radio { width:20px; height:20px; border-radius:50%; border:2px solid var(--v-border); flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:all var(--v-t); }
.v-plan-row.selected .v-plan-radio { border-color:var(--v-primary); background:var(--v-primary); }
.v-plan-radio::after { content:''; width:7px; height:7px; border-radius:50%; background:#fff; opacity:0; transition:opacity var(--v-t); }
.v-plan-row.selected .v-plan-radio::after { opacity:1; }
.v-plan-row-icon { width:36px; height:36px; border-radius:9px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:var(--v-bg2); overflow:hidden; }
.v-plan-row-info   { flex:1; min-width:0; }
.v-plan-row-name   { font-size:.86rem; font-weight:700; color:var(--v-text); text-transform:uppercase; letter-spacing:.04em; }
.v-plan-row-specs  { display:flex; gap:10px; flex-wrap:wrap; margin-top:4px; }
.v-plan-row-spec   { display:flex; align-items:center; gap:4px; font-size:.7rem; color:var(--v-muted); }
.v-plan-row-spec svg { flex-shrink:0; color:var(--v-muted2); }
.v-plan-row-price  { text-align:right; flex-shrink:0; }
.v-plan-row-amount { font-size:1.25rem; font-weight:700; color:var(--v-text); }
.v-plan-row-currency { font-size:.8rem; font-weight:600; vertical-align:super; }
.v-plan-row-period { font-size:.68rem; color:var(--v-muted); display:block; }
.v-jeu-right-cta { padding:14px 14px 18px; border-top:1px solid var(--v-border); }
.v-jeu-cta-btn { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:15px; border-radius:10px; background:var(--cat-color,var(--v-primary)); color:#fff; font-size:.88rem; font-weight:700; letter-spacing:.03em; transition:opacity var(--v-t),transform var(--v-t),box-shadow var(--v-t); text-transform:uppercase; }
.v-jeu-cta-btn:hover { opacity:.92; transform:translateY(-1px); box-shadow:0 6px 20px rgba(0,0,0,.15); }
.v-jeu-cta-note { text-align:center; font-size:.7rem; color:var(--v-muted2); margin-top:8px; display:flex; align-items:center; justify-content:center; gap:6px; }

/* ════════════════════════════════════════════════════════════
   MISC
   ════════════════════════════════════════════════════════════ */
.v-breadcrumb { display:flex; align-items:center; gap:8px; padding:13px 0; font-size:.78rem; color:var(--v-muted); }
.v-breadcrumb a { color:var(--v-muted); } .v-breadcrumb a:hover { color:var(--v-primary); }
.v-breadcrumb-sep { opacity:.35; } .v-breadcrumb-current { color:var(--v-text); font-weight:600; }
.v-empty { text-align:center; padding:80px 20px; color:var(--v-muted); }
.v-empty-icon { margin-bottom:16px; display:flex; justify-content:center; color:var(--v-muted2); }
.v-empty h3 { font-size:1.15rem; margin-bottom:8px; color:var(--v-text); }
.v-highlight-band { background:var(--v-primary); padding:28px 0; color:#fff; }
.v-highlight-inner { max-width:1180px; margin:0 auto; padding:0 24px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.v-highlight-text { font-size:1.05rem; font-weight:600; } .v-highlight-sub { font-size:.82rem; color:rgba(255,255,255,.6); margin-top:3px; }
.v-highlight-btn { background:#fff; color:var(--v-primary); border-radius:9px; padding:11px 24px; font-size:.86rem; font-weight:700; flex-shrink:0; transition:transform var(--v-t),box-shadow var(--v-t); }
.v-highlight-btn:hover { transform:translateY(-1px); box-shadow:0 6px 20px rgba(0,0,0,.15); }
.v-optim-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; }
.v-optim-card { display:flex; gap:16px; padding:24px; background:#fff; border:1px solid var(--v-border); border-radius:var(--v-radius-lg); box-shadow:var(--v-shadow-sm); transition:box-shadow .2s,transform .2s; }
.v-optim-card:hover { box-shadow:var(--v-shadow); transform:translateY(-2px); }
.v-optim-icon { width:44px; height:44px; border-radius:12px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:var(--v-primary-bg); color:var(--v-primary); }
.v-optim-title { font-size:.9rem; font-weight:700; margin-bottom:5px; } .v-optim-text { font-size:.8rem; color:var(--v-muted); line-height:1.6; }
.v-perf-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.v-perf-label { display:flex; justify-content:space-between; margin-bottom:6px; font-size:.78rem; font-weight:500; } .v-perf-val { color:var(--v-primary); }
.v-perf-bar { height:6px; background:var(--v-bg3); border-radius:10px; overflow:hidden; }
.v-perf-fill { height:100%; border-radius:10px; background:var(--v-primary); transition:width .8s var(--v-ease); }
.v-compare-wrap { background:#fff; border:1px solid var(--v-border); border-radius:var(--v-radius-xl); overflow:hidden; box-shadow:var(--v-shadow); }
.v-compare-head { display:grid; grid-template-columns:1fr 220px 220px; background:var(--v-bg2); border-bottom:1px solid var(--v-border); }
.v-compare-head-cell { padding:18px 24px; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--v-muted2); }
.v-compare-head-cell.us { background:var(--v-primary); color:#fff; text-align:center; }
.v-compare-head-cell.them { text-align:center; }
.v-compare-row { display:grid; grid-template-columns:1fr 220px 220px; border-bottom:1px solid var(--v-border); transition:background var(--v-t); }
.v-compare-row:last-child { border-bottom:none; } .v-compare-row:hover { background:var(--v-bg2); }
.v-compare-cell { padding:16px 24px; font-size:.86rem; display:flex; align-items:center; gap:8px; }
.v-compare-cell-us { justify-content:center; background:rgba(var(--v-primary-rgb),.03); } .v-compare-cell-them { justify-content:center; }
.v-compare-feat { font-weight:600; color:var(--v-text); } .v-compare-feat-sub { font-size:.74rem; color:var(--v-muted); }
.v-check-yes { display:inline-flex; align-items:center; gap:6px; color:var(--v-success); font-size:.82rem; font-weight:600; }
.v-check-no  { display:inline-flex; align-items:center; gap:6px; color:var(--v-muted2); font-size:.82rem; }
.v-check-partial { display:inline-flex; align-items:center; gap:6px; color:#f59e0b; font-size:.82rem; font-weight:600; }
.v-guarantee-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.v-guarantee-card { background:#fff; border:1px solid var(--v-border); border-radius:var(--v-radius-lg); padding:32px 28px; text-align:center; box-shadow:var(--v-shadow-sm); transition:box-shadow .25s,transform .25s; }
.v-guarantee-card:hover { box-shadow:var(--v-shadow-lg); transform:translateY(-4px); border-color:transparent; }
.v-guarantee-icon { width:60px; height:60px; border-radius:16px; margin:0 auto 20px; display:flex; align-items:center; justify-content:center; background:var(--v-primary-bg); color:var(--v-primary); }
.v-guarantee-title { font-size:1rem; font-weight:700; margin-bottom:10px; color:var(--v-text); }
.v-guarantee-text  { font-size:.83rem; color:var(--v-muted); line-height:1.7; }

/* ════════════════════════════════════════════════════════════
   SCROLL REVEAL
   ════════════════════════════════════════════════════════════ */
.v-reveal { opacity:0; transform:translateY(16px); transition:opacity .5s var(--v-ease),transform .5s var(--v-ease); }
.v-reveal.visible { opacity:1; transform:none; }

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */
@media (max-width:960px) {
  .v-featured-grid  { grid-template-columns:1fr; }
  .v-engage-grid    { grid-template-columns:1fr; }
  .v-panel-grid     { grid-template-columns:1fr; }
  .v-server-layout  { grid-template-columns:1fr; }
  .v-blog-grid      { grid-template-columns:1fr 1fr; }
  .v-server-map,.v-engage-visual { max-width:100%; }
  .v-testi-grid     { grid-template-columns:1fr; }
  .v-guarantee-grid { grid-template-columns:1fr; }
  .v-jeu-layout { grid-template-columns:1fr; }
  .v-jeu-right  { position:static; box-shadow:none; }
  .v-infra-grid { grid-template-columns:1fr; }
  .v-numbers    { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .v-number-item { border-bottom:1px solid var(--v-border); border-right:none; }
  .v-number-item:nth-child(odd) { border-right:1px solid var(--v-border); }
  .v-steps { grid-template-columns:1fr; gap:16px; }
  .v-steps::before { display:none; }
  .v-compare-head,.v-compare-row { grid-template-columns:1fr 140px 140px; }
  .v-compare-cell { padding:13px 14px; font-size:.8rem; }
}
@media (max-width:768px) {
  .vnav-links,.vnav-actions { display:none; }
  .vnav-burger { display:flex; }
  .v-section { padding:72px 0; }
  .v-hero h1 { font-size:2.2rem; }
  .v-hero-stats { flex-direction:row; flex-wrap:wrap; padding:16px 20px; width:100%; max-width:100%; }
  .v-stat { padding:8px 12px; min-width:0; flex:1; }
  .v-footer-grid { grid-template-columns:1fr 1fr; gap:28px; }
  .v-footer-grid > div:first-child { grid-column:1/-1; }
  .v-jeu-mini-feats,.v-jeu-perks { grid-template-columns:1fr; }
  .v-blog-grid { grid-template-columns:1fr; }
  .v-engage-features { grid-template-columns:1fr; }
  .v-server-stats { grid-template-columns:1fr; }
  .v-catalog-grid { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); }
  .v-highlight-inner { flex-direction:column; text-align:center; }
  .v-compare-head,.v-compare-row { grid-template-columns:1fr 100px 100px; }
  .v-compare-head-cell,.v-compare-cell { padding:10px; font-size:.74rem; }
}
@media (max-width:480px) {
  .v-footer-grid { grid-template-columns:1fr; }
  .v-hero-btns { flex-direction:column; align-items:stretch; }
  .v-btn-primary,.v-btn-ghost { justify-content:center; }
  .v-feat-grid,.v-cat-grid { grid-template-columns:1fr; }
  .v-catalog-grid { grid-template-columns:1fr 1fr; }
  .v-section-title { font-size:1.8rem; }
  .v-hero-stats { flex-wrap:wrap; }
  .v-stat { min-width:45%; }
}

/* ════════════════════════════════════════════════════════════
   PAGE ASSISTANCE
   ════════════════════════════════════════════════════════════ */

/* Hero */
.v-assist-hero { padding: 100px 0 64px; background: var(--v-bg); text-align: center; }
.v-assist-hero-inner { max-width: 640px; margin: 0 auto; }
.v-assist-hero-title { font-size: clamp(2rem,4vw,3.2rem); font-weight: 800; color: var(--v-text); line-height: 1.1; letter-spacing: -.04em; margin: 14px 0 18px; }
.v-assist-hero-sub { font-size: 1.05rem; color: var(--v-muted); line-height: 1.75; }

/* Cards support */
.v-assist-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.v-assist-card {
  background: var(--v-bg); border: 1.5px solid var(--v-border);
  border-radius: var(--v-radius-lg); padding: 32px 28px;
  display: flex; flex-direction: column; gap: 12px;
  position: relative; transition: border-color var(--v-t), box-shadow var(--v-t), transform var(--v-t);
}
.v-assist-card:hover { border-color: var(--v-primary); box-shadow: var(--v-shadow); transform: translateY(-3px); }
.v-assist-card-featured { border-color: var(--v-primary); box-shadow: 0 0 0 4px rgba(var(--v-primary-rgb),.08); }
.v-assist-card-icon { width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; }
.v-assist-card-badge { position: absolute; top: 20px; right: 20px; background: var(--v-primary); color: #fff; font-size: .65rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 10px; border-radius: 20px; }
.v-assist-card h3 { font-size: 1.05rem; font-weight: 700; color: var(--v-text); margin: 4px 0 0; }
.v-assist-card p { font-size: .875rem; color: var(--v-muted); line-height: 1.65; flex: 1; }
.v-assist-card-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 9px; font-size: .84rem; font-weight: 600; transition: all var(--v-t); margin-top: 6px; }
.v-assist-card-btn-primary { background: var(--v-primary); color: #fff !important; }
.v-assist-card-btn-primary:hover { background: var(--v-primary-d); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(var(--v-primary-rgb),.3); }
.v-assist-card-btn-discord { background: #5865f2; color: #fff !important; }
.v-assist-card-btn-discord:hover { background: #4752c4; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(88,101,242,.3); }
.v-assist-card-btn-outline { background: transparent; color: var(--v-text) !important; border: 1.5px solid var(--v-border); }
.v-assist-card-btn-outline:hover { border-color: var(--v-primary); color: var(--v-primary) !important; background: var(--v-primary-bg); }

/* FAQ Tabs */
.v-faq-tabs { display: flex; gap: 8px; margin-bottom: 32px; flex-wrap: wrap; }
.v-faq-tab {
  display: flex; align-items: center; gap: 7px;
  padding: 10px 20px; border-radius: 30px;
  border: 1.5px solid var(--v-border);
  font-size: .84rem; font-weight: 600; color: var(--v-muted);
  background: var(--v-bg); cursor: pointer;
  transition: all var(--v-t);
}
.v-faq-tab:hover { border-color: var(--v-primary); color: var(--v-primary); background: var(--v-primary-bg); }
.v-faq-tab.active { background: var(--v-primary); border-color: var(--v-primary); color: #fff; }

/* FAQ Panel & Items */
.v-faq-panel { display: none; }
.v-faq-panel.active { display: block; }
.v-faq-item { border: 1.5px solid var(--v-border); border-radius: var(--v-radius); margin-bottom: 10px; overflow: hidden; transition: border-color var(--v-t); }
.v-faq-item:hover,.v-faq-item.open { border-color: var(--v-primary); }
.v-faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 24px; background: none; border: none; cursor: pointer;
  font-size: .95rem; font-weight: 600; color: var(--v-text); text-align: left;
  transition: background var(--v-t);
}
.v-faq-q:hover { background: var(--v-bg2); }
.v-faq-chevron { flex-shrink: 0; color: var(--v-muted); transition: transform .25s var(--v-ease); }
.v-faq-item.open .v-faq-chevron { transform: rotate(180deg); color: var(--v-primary); }
.v-faq-a { max-height: 0; overflow: hidden; transition: max-height .35s var(--v-ease); }
.v-faq-item.open .v-faq-a { max-height: 300px; }
.v-faq-a p { padding: 0 24px 22px; font-size: .9rem; color: var(--v-muted); line-height: 1.75; margin: 0; }

/* Contact section */
.v-assist-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.v-assist-contact-methods { display: flex; flex-direction: column; gap: 20px; margin-top: 32px; }
.v-assist-method { display: flex; align-items: center; gap: 16px; }
.v-assist-method-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--v-bg); border: 1.5px solid var(--v-border); display: flex; align-items: center; justify-content: center; color: var(--v-primary); flex-shrink: 0; }
.v-assist-method-label { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--v-muted2); }
.v-assist-method-value { font-size: .9rem; font-weight: 600; color: var(--v-text); text-decoration: none; }
a.v-assist-method-value:hover { color: var(--v-primary); }

/* Formulaire contact */
.v-assist-form { background: var(--v-bg); border: 1.5px solid var(--v-border); border-radius: var(--v-radius-lg); padding: 36px; display: flex; flex-direction: column; gap: 18px; }
.v-assist-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.v-assist-form-group { display: flex; flex-direction: column; gap: 7px; position: relative; }
.v-assist-form-group label { font-size: .8rem; font-weight: 600; color: var(--v-text-2); }
.v-assist-form-group input,
.v-assist-form-group select,
.v-assist-form-group textarea {
  padding: 11px 14px; border-radius: 9px;
  border: 1.5px solid var(--v-border); background: var(--v-bg2);
  font-family: var(--v-font); font-size: .875rem; color: var(--v-text);
  outline: none; transition: border-color var(--v-t), box-shadow var(--v-t);
  width: 100%;
}
.v-assist-form-group input:focus,
.v-assist-form-group select:focus,
.v-assist-form-group textarea:focus { border-color: var(--v-primary); box-shadow: 0 0 0 3px rgba(var(--v-primary-rgb),.12); background: var(--v-bg); }
.v-assist-form-group textarea { resize: vertical; min-height: 130px; }
.v-assist-char-count { font-size: .72rem; color: var(--v-muted2); text-align: right; }
/* Spécificité renforcée pour contrer .vitrine button { background:none } */
.v-assist-submit, button.v-assist-submit { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 28px; background: var(--v-primary) !important; color: #fff !important; border: none; border-radius: 10px; font-size: .9rem; font-weight: 700 !important; cursor: pointer; transition: all var(--v-t); width: 100%; }
.v-assist-submit:hover, button.v-assist-submit:hover { background: var(--v-primary-d) !important; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(var(--v-primary-rgb),.35); }
.v-assist-form-success { display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: var(--v-success-bg); border: 1.5px solid var(--v-green); border-radius: 9px; color: var(--v-green); font-size: .875rem; font-weight: 600; }
.v-assist-form-error   { display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: rgba(239,68,68,.08); border: 1.5px solid #ef4444; border-radius: 9px; color: #ef4444; font-size: .875rem; font-weight: 600; }

/* Dark mode overrides */
:root.dark .v-assist-card { background: var(--v-bg2); }
:root.dark .v-assist-form { background: var(--v-bg2); }
:root.dark .v-assist-form-group input,
:root.dark .v-assist-form-group select,
:root.dark .v-assist-form-group textarea { background: var(--v-bg3); }
:root.dark .v-assist-form-group input:focus,
:root.dark .v-assist-form-group select:focus,
:root.dark .v-assist-form-group textarea:focus { background: var(--v-bg2); }
:root.dark .v-faq-tab { background: var(--v-bg2); }
:root.dark .v-assist-method-icon { background: var(--v-bg2); }

/* Responsive */
@media (max-width: 900px) {
  .v-assist-cards { grid-template-columns: 1fr; }
  .v-assist-contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .v-assist-form-row { grid-template-columns: 1fr; }
  .v-assist-form { padding: 24px; }
}
@media (max-width: 600px) {
  .v-assist-hero { padding: 80px 0 48px; }
  .v-faq-tabs { gap: 6px; }
  .v-faq-tab { padding: 8px 14px; font-size: .8rem; }
}

/* ════════════════════════════════════════════════════════════
   PAGE À PROPOS
   ════════════════════════════════════════════════════════════ */
.v-about-hero { padding:100px 0 72px; text-align:center; background:var(--v-bg); }
.v-about-hero-inner { max-width:680px; margin:0 auto; }
.v-about-hero-title { font-size:clamp(2rem,4.5vw,3.4rem); font-weight:800; color:var(--v-text); line-height:1.1; letter-spacing:-.04em; margin:14px 0 18px; }
.v-about-hero-sub { font-size:1.05rem; color:var(--v-muted); line-height:1.75; }
.v-about-hero-sub strong { color:var(--v-text); }

.v-about-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.v-about-stat { text-align:center; padding:24px 16px; background:var(--v-bg); border:1.5px solid var(--v-border); border-radius:var(--v-radius-lg); }
.v-about-stat-num { display:block; font-size:2.6rem; font-weight:900; color:var(--v-primary); letter-spacing:-.04em; line-height:1; }
.v-about-stat-label { display:block; font-size:.78rem; color:var(--v-muted); font-weight:600; text-transform:uppercase; letter-spacing:.08em; margin-top:8px; }

.v-about-content-grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
.v-about-text p { color:var(--v-muted); line-height:1.8; margin-bottom:16px; font-size:.95rem; }
.v-about-text strong { color:var(--v-text); }
.v-about-text .v-section-title { margin-bottom:24px; }

.v-about-values { display:flex; flex-direction:column; gap:20px; }
.v-about-value-card { display:flex; gap:16px; padding:22px; background:var(--v-bg2); border:1.5px solid var(--v-border); border-radius:var(--v-radius); transition:border-color var(--v-t); }
.v-about-value-card:hover { border-color:var(--v-primary); }
.v-about-value-icon { width:44px; height:44px; border-radius:11px; background:var(--v-primary-bg); color:var(--v-primary); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.v-about-value-card h4 { font-size:.9rem; font-weight:700; color:var(--v-text); margin:0 0 5px; }
.v-about-value-card p { font-size:.82rem; color:var(--v-muted); line-height:1.6; margin:0; }

.v-about-infra-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.v-about-infra-card { padding:28px; background:var(--v-bg); border:1.5px solid var(--v-border); border-radius:var(--v-radius-lg); transition:border-color var(--v-t),transform var(--v-t),box-shadow var(--v-t); }
.v-about-infra-card:hover { border-color:var(--v-primary); transform:translateY(-3px); box-shadow:var(--v-shadow); }
.v-about-infra-icon { width:48px; height:48px; border-radius:12px; background:var(--v-primary-bg); color:var(--v-primary); display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.v-about-infra-card h3 { font-size:.95rem; font-weight:700; color:var(--v-text); margin:0 0 10px; }
.v-about-infra-card p { font-size:.83rem; color:var(--v-muted); line-height:1.65; margin:0; }

.v-about-cta { max-width:600px; margin:0 auto; }

@media (max-width:960px) {
  .v-about-stats { grid-template-columns:repeat(2,1fr); }
  .v-about-content-grid { grid-template-columns:1fr; gap:40px; }
  .v-about-infra-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px) {
  .v-about-stats { grid-template-columns:repeat(2,1fr); gap:12px; }
  .v-about-infra-grid { grid-template-columns:1fr; }
  .v-about-value-card { flex-direction:column; }
}

/* ════════════════════════════════════════════════════════════
   PAGE MENTIONS LÉGALES
   ════════════════════════════════════════════════════════════ */
.v-legal-hero { padding:100px 0 48px; background:var(--v-bg); }
.v-legal-title { font-size:clamp(1.8rem,3.5vw,2.8rem); font-weight:800; color:var(--v-text); letter-spacing:-.04em; margin:12px 0 8px; }
.v-legal-updated { font-size:.82rem; color:var(--v-muted); }

.v-legal-layout { display:grid; grid-template-columns:240px 1fr; gap:48px; align-items:start; }

.v-legal-nav { position:sticky; top:90px; background:var(--v-bg2); border:1.5px solid var(--v-border); border-radius:var(--v-radius); padding:20px; }
.v-legal-nav-title { font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.12em; color:var(--v-muted2); margin:0 0 12px; }
.v-legal-nav a { display:block; padding:8px 12px; border-radius:8px; font-size:.82rem; color:var(--v-muted); font-weight:500; text-decoration:none; transition:all var(--v-t); margin-bottom:2px; }
.v-legal-nav a:hover { background:var(--v-bg3); color:var(--v-text); }
.v-legal-nav a.active { background:var(--v-primary-bg); color:var(--v-primary); font-weight:600; }

.v-legal-content { min-width:0; }
.v-legal-section { padding-bottom:48px; margin-bottom:48px; border-bottom:1.5px solid var(--v-border); }
.v-legal-section:last-child { border-bottom:none; margin-bottom:0; padding-bottom:0; }
.v-legal-section h2 { display:flex; align-items:center; gap:10px; font-size:1.25rem; font-weight:800; color:var(--v-text); margin:0 0 20px; padding-top:8px; }
.v-legal-section h3 { font-size:.95rem; font-weight:700; color:var(--v-text); margin:24px 0 10px; }
.v-legal-section p { font-size:.9rem; color:var(--v-muted); line-height:1.8; margin-bottom:14px; }
.v-legal-section a { color:var(--v-primary); }
.v-legal-section a:hover { text-decoration:underline; }

.v-legal-list { margin:10px 0 16px 20px; }
.v-legal-list li { font-size:.9rem; color:var(--v-muted); line-height:1.7; margin-bottom:6px; }
.v-legal-list li strong { color:var(--v-text); }

.v-legal-info-box { background:var(--v-bg2); border:1.5px solid var(--v-border); border-radius:var(--v-radius); overflow:hidden; margin:16px 0; }
.v-legal-table { width:100%; border-collapse:collapse; font-size:.875rem; }
.v-legal-table tr { border-bottom:1px solid var(--v-border); }
.v-legal-table tr:last-child { border-bottom:none; }
.v-legal-table th { text-align:left; padding:12px 16px; color:var(--v-muted); font-weight:600; width:200px; white-space:nowrap; }
.v-legal-table td { padding:12px 16px; color:var(--v-text); }
.v-legal-table td a { color:var(--v-primary); }
.v-legal-section code { background:var(--v-bg2); border:1px solid var(--v-border); border-radius:5px; padding:2px 7px; font-size:.82rem; color:var(--v-primary); }

@media (max-width:860px) {
  .v-legal-layout { grid-template-columns:1fr; }
  .v-legal-nav { position:relative; top:0; }
  .v-legal-nav a { display:inline-block; margin-right:6px; }
}