/* ============================================================
   VLR MODERN — Forum Vive les Rondes UX Refresh 2026
   Layered on top of existing CSS (fofo.css, topic.css, etc.)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');

:root {
  --vlr-primary: #7c3aed;
  --vlr-primary-light: #a78bfa;
  --vlr-primary-dark: #5b21b6;
  --vlr-accent: #e84393;
  --vlr-accent-light: #fd79a8;
  --vlr-bg: #faf8ff;
  --vlr-card: #ffffff;
  --vlr-border: #e8e0f0;
  --vlr-text: #2d2640;
  --vlr-text-muted: #8b7fa3;
  --vlr-text-light: #b0a3c4;
  --vlr-success: #10b981;
  --vlr-radius: 12px;
  --vlr-radius-sm: 8px;
  --vlr-shadow: 0 1px 3px rgba(124,58,237,0.06), 0 4px 12px rgba(124,58,237,0.04);
  --vlr-shadow-hover: 0 4px 16px rgba(124,58,237,0.12);
  --vlr-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --vlr-font-display: 'Playfair Display', Georgia, serif;
  --vlr-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

body {
  font-family: var(--vlr-font) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: var(--vlr-text) !important;
  background: var(--vlr-bg) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#page { background-color: transparent !important; }

a { color: var(--vlr-primary) !important; text-decoration: none; transition: color var(--vlr-transition); }
a:hover { color: var(--vlr-accent) !important; opacity: 1 !important; }

h1 {
  font-family: var(--vlr-font-display) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--vlr-text) !important;
  line-height: 1.3 !important;
}

.btn {
  font-family: var(--vlr-font) !important;
  font-size: 14px !important;
  font-weight: 500;
  border-radius: var(--vlr-radius-sm) !important;
  border: 1px solid var(--vlr-border) !important;
  padding: 8px 16px !important;
  transition: all var(--vlr-transition) !important;
  cursor: pointer;
}
.btn:hover { border-color: var(--vlr-primary-light) !important; box-shadow: 0 2px 8px rgba(124,58,237,0.1); opacity: 1 !important; }

input[type='text'], input[type='password'], textarea, select {
  font-family: var(--vlr-font) !important;
  border: 1.5px solid var(--vlr-border) !important;
  border-radius: var(--vlr-radius-sm) !important;
  transition: all var(--vlr-transition);
  background: var(--vlr-card);
}
input[type='text']:focus, input[type='password']:focus, textarea:focus, select:focus {
  border-color: var(--vlr-primary-light) !important;
  box-shadow: 0 0 0 3px rgba(124,58,237,0.15) !important;
}

#topmenu {
  background: linear-gradient(135deg, var(--vlr-primary-dark) 0%, var(--vlr-primary) 50%, var(--vlr-accent) 100%) !important;
  height: 56px !important;
  box-shadow: 0 2px 12px rgba(124,58,237,0.2);
  padding: 0 16px !important;
  backdrop-filter: blur(10px);
}
#page { margin-top: 56px !important; }
body { margin-top: 0 !important; }

#backhomebtn {
  border: 1.5px solid rgba(255,255,255,0.4) !important;
  border-radius: var(--vlr-radius-sm) !important;
  color: white !important;
  margin-top: 10px !important;
  transition: all var(--vlr-transition);
}
#backhomebtn:hover { background: rgba(255,255,255,0.15) !important; border-color: rgba(255,255,255,0.7) !important; }
#backhomebtn .txt-menu { color: white !important; font-weight: 500; font-size: 11px !important; letter-spacing: 0.5px; text-transform: uppercase; }

#logoforum { filter: brightness(10); margin-top: -2px !important; padding: 18px 0 !important; }

#topmenu .topsearch input[type='text'], .searchbar .searchinput input {
  background: rgba(255,255,255,0.15) !important;
  border: 1.5px solid rgba(255,255,255,0.25) !important;
  color: white !important;
  border-radius: 24px !important;
  padding-left: 16px !important;
  height: 36px !important;
}
#topmenu .topsearch input::placeholder, .searchbar .searchinput input::placeholder { color: rgba(255,255,255,0.6) !important; }
#topmenu .topsearch input:focus { background: rgba(255,255,255,0.25) !important; border-color: rgba(255,255,255,0.5) !important; box-shadow: 0 0 0 3px rgba(255,255,255,0.1) !important; }

#top_connect {
  background: rgba(255,255,255,0.2) !important;
  border-radius: var(--vlr-radius-sm) !important;
  height: 40px !important;
  margin-top: 8px !important;
  padding: 0 16px !important;
  transition: all var(--vlr-transition);
  display: flex; align-items: center; gap: 6px;
}
#top_connect:hover { background: rgba(255,255,255,0.3) !important; }
#top_connect i { font-size: 22px !important; }

#hero {
  background: linear-gradient(135deg, var(--vlr-primary-dark) 0%, var(--vlr-primary) 40%, var(--vlr-accent) 100%) !important;
  border-radius: 0 0 var(--vlr-radius) var(--vlr-radius);
  overflow: hidden;
}
#hero .desc span { background-color: rgba(255,255,255,0.95) !important; border-radius: var(--vlr-radius-sm); padding: 12px 20px !important; font-weight: 500; }

#forum_header {
  padding: 24px 16px !important;
  text-align: left !important;
  margin-bottom: 0 !important;
  background: var(--vlr-card);
  border-radius: var(--vlr-radius) var(--vlr-radius) 0 0;
  margin: 0 12px; margin-top: 12px;
  box-shadow: var(--vlr-shadow);
}
#forum_header .bc a {
  color: var(--vlr-primary) !important; font-weight: 600; font-size: 13px !important;
  padding: 4px 10px !important; border-radius: 20px !important; background: rgba(124,58,237,0.06);
  transition: all var(--vlr-transition);
}
#forum_header .bc a:hover { background: rgba(124,58,237,0.12) !important; text-decoration: none !important; }

#bodywrap { padding: 0 12px !important; margin-bottom: 120px !important; }

#topic_list {
  background: var(--vlr-card);
  border-radius: 0 0 var(--vlr-radius) var(--vlr-radius);
  box-shadow: var(--vlr-shadow);
  overflow: hidden;
}
#topic_list li {
  padding: 16px 20px !important;
  border-bottom: 1px solid var(--vlr-border) !important;
  transition: background var(--vlr-transition);
}
#topic_list li:last-child { border-bottom: none !important; }
#topic_list li:hover { background: rgba(124,58,237,0.03) !important; border-radius: 0 !important; }
#topic_list li a { color: var(--vlr-text) !important; }
#topic_list li a.tt { font-size: 15px !important; font-weight: 500 !important; line-height: 1.4 !important; margin-bottom: 4px; }
#topic_list li.unread a.tt { color: var(--vlr-primary-dark) !important; font-weight: 700 !important; }
#topic_list li.read { opacity: 0.65 !important; }

#topic_list .av, #topic_list .pseudo-avatar { width: 44px !important; height: 44px !important; border-radius: 12px !important; background-color: var(--vlr-primary-light) !important; }
#topic_list .pseudo-avatar div { font-size: 22px !important; padding-top: 10px !important; color: white !important; opacity: 0.9 !important; }

#topic_list .flist a, .pending_posts .flist a { font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.3px; border-radius: 20px !important; padding: 3px 10px !important; text-transform: uppercase; }
#topic_list .fnr, .pending_posts .fnr { color: var(--vlr-text-muted) !important; font-size: 13px; font-weight: 500; }
#topic_list .lpl { color: var(--vlr-text-muted) !important; font-size: 13px !important; text-decoration: none !important; border-radius: 6px !important; }
#topic_list .lpl:hover { background-color: rgba(124,58,237,0.06) !important; color: var(--vlr-primary) !important; }

body.topic .topic {
  background: var(--vlr-card);
  border-radius: var(--vlr-radius);
  box-shadow: var(--vlr-shadow);
  margin: 0 12px;
  padding: 0 20px 20px !important;
  overflow: hidden;
}
body.topic h1 { font-size: 20px !important; padding: 20px 0 16px !important; border-bottom: 2px solid var(--vlr-border); margin-bottom: 0; }

body.topic .post { padding: 24px 0 !important; border-bottom: 1px solid var(--vlr-border) !important; }
body.topic .post:last-child { border-bottom: none !important; }
body.topic .postbody { line-height: 1.7 !important; font-size: 15px !important; color: var(--vlr-text) !important; }
body.topic .post .topic_profile { color: var(--vlr-text-muted) !important; }
body.topic .post .username { font-size: 15px !important; font-weight: 600 !important; color: var(--vlr-primary-dark) !important; }
body.topic .post-tools a.postdate { color: var(--vlr-text-light) !important; font-size: 13px !important; }

.pseudo-avatar, .av { border-radius: 14px !important; background-color: var(--vlr-primary-light) !important; }
.pseudo-avatar div { color: white !important; opacity: 0.9 !important; }

body.topic .quote {
  background: linear-gradient(135deg, #f8f5ff 0%, #fdf2f8 100%) !important;
  border: 1px solid var(--vlr-border) !important;
  border-left: 4px solid var(--vlr-primary-light) !important;
  border-radius: var(--vlr-radius-sm) !important;
  padding: 16px 20px !important;
  font-size: 13px !important;
  color: var(--vlr-text-muted) !important;
  margin: 12px 0 !important;
}
body.topic .code { background: #1e1b2e !important; color: #a5f3c4 !important; border: none !important; border-radius: var(--vlr-radius-sm) !important; padding: 16px 20px !important; }
body.topic .post .usig { font-size: 12px !important; color: var(--vlr-text-light) !important; border-top: 1px dashed var(--vlr-border); margin-top: 16px; padding-top: 12px; }

#bottom-pagetools {
  background: var(--vlr-card) !important;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.06);
  border-top: 1px solid var(--vlr-border);
  height: 54px !important;
}
#bottom-pagetools .btn { border: none !important; color: var(--vlr-primary) !important; font-weight: 600; height: 54px !important; }
#bottom-pagetools .btn:hover { background: rgba(124,58,237,0.06) !important; }

#sidebar { padding: 12px !important; }
#sidebar .content-block { background: var(--vlr-card); border-radius: var(--vlr-radius); box-shadow: var(--vlr-shadow); padding: 20px; margin-bottom: 16px !important; }

#footer {
  background: linear-gradient(135deg, var(--vlr-primary-dark) 0%, #3b1474 100%) !important;
  border-radius: var(--vlr-radius) var(--vlr-radius) 0 0;
  margin: 0 12px; margin-top: 40px;
}
#footer .content { color: rgba(255,255,255,0.8) !important; }
#footer .nl { border-radius: var(--vlr-radius) !important; box-shadow: 0 4px 16px rgba(0,0,0,0.1); }
#footerslogan { color: var(--vlr-accent-light) !important; font-family: var(--vlr-font-display) !important; }
#liens-guides a { border-radius: 24px !important; font-weight: 500; font-size: 14px; padding: 10px 20px !important; transition: all var(--vlr-transition); }
#liens-guides a:hover { background: var(--vlr-accent) !important; transform: translateY(-1px); }

.dropdown-content .content { border-radius: var(--vlr-radius) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important; border: 1px solid var(--vlr-border); }
.dropdown-content a { padding: 10px 20px !important; font-size: 14px; transition: background var(--vlr-transition); }
.dropdown-content a:hover { background: rgba(124,58,237,0.06) !important; }

#menu-forums a { color: var(--vlr-text-muted) !important; font-weight: 500; padding: 6px 10px !important; border-radius: var(--vlr-radius-sm); transition: all var(--vlr-transition); }
#menu-forums a:hover { color: var(--vlr-primary) !important; background: rgba(124,58,237,0.06); }
#menu-forums ul#cats li.cat.active a.cat-link { color: var(--vlr-primary) !important; }
#menu-forums .ficon { border-radius: 6px !important; }

#sysmsg { border-radius: var(--vlr-radius) !important; border: 1.5px solid var(--vlr-border) !important; box-shadow: var(--vlr-shadow); padding: 24px !important; max-width: 500px; }
.error { border-radius: var(--vlr-radius-sm) !important; border-width: 1.5px !important; }
.notice { border-radius: var(--vlr-radius-sm) !important; border-width: 1.5px !important; }
.success { border-radius: var(--vlr-radius-sm) !important; border-width: 1.5px !important; }

.notif-bubble { background: var(--vlr-accent) !important; font-size: 11px; font-weight: 700; border-radius: 10px; padding: 2px 7px !important; }

#bbcodebuttons .btn { border-radius: 6px !important; font-weight: 600; background: var(--vlr-bg) !important; border: 1px solid var(--vlr-border) !important; }
#bbcodebuttons .btn:hover { background: rgba(124,58,237,0.08) !important; border-color: var(--vlr-primary-light) !important; }
#message { border-radius: var(--vlr-radius-sm) !important; border: 1.5px solid var(--vlr-border) !important; font-family: var(--vlr-font) !important; font-size: 15px !important; line-height: 1.6 !important; }
#message:focus { border-color: var(--vlr-primary-light) !important; box-shadow: 0 0 0 3px rgba(124,58,237,0.1) !important; }

ul.nav { border-bottom: 2px solid var(--vlr-border) !important; }
ul.nav li a { font-weight: 500; border-radius: var(--vlr-radius-sm) var(--vlr-radius-sm) 0 0; transition: all var(--vlr-transition); }
ul.nav li.active a, ul.nav li a:hover { background: rgba(124,58,237,0.06) !important; color: var(--vlr-primary) !important; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--vlr-bg); }
::-webkit-scrollbar-thumb { background: var(--vlr-primary-light); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--vlr-primary); }
::selection { background: rgba(124,58,237,0.2); color: var(--vlr-text); }

body.topic .post .ad { border-radius: var(--vlr-radius-sm); overflow: hidden; margin: 24px 0 !important; }
.fa-venus { color: var(--vlr-accent) !important; }
.fa-mars { color: #60a5fa !important; }

@media (max-width: 768px) {
  body { font-size: 14px !important; }
  #topmenu { height: 52px !important; padding: 0 10px !important; }
  #page { margin-top: 52px !important; }
  #bodywrap { padding: 0 6px !important; }
  #topic_list li { padding: 14px 12px !important; }
  #topic_list li a.tt { font-size: 14px !important; }
  body.topic .topic { margin: 0 6px; padding: 0 12px 12px !important; border-radius: var(--vlr-radius-sm); }
  body.topic .post { padding: 16px 0 !important; }
  body.topic .postbody { font-size: 14px !important; line-height: 1.65 !important; }
  #forum_header { margin: 0 6px; margin-top: 8px; padding: 16px 12px !important; }
  #topic_list { border-radius: 0 0 var(--vlr-radius-sm) var(--vlr-radius-sm); }
  #footer { margin: 0 6px; margin-top: 30px; border-radius: var(--vlr-radius-sm) var(--vlr-radius-sm) 0 0; }
  .pseudo-avatar, .av { border-radius: 10px !important; }
  body.topic .quote { padding: 12px 14px !important; }
  #bottom-pagetools { height: 50px !important; }
}

@media (min-width: 769px) {
  #topic_list li a.tt { font-size: 16px !important; }
  h1 { font-size: 24px !important; }
  body.topic .postbody { margin-left: 85px; font-size: 15px !important; }
}

@media (min-width: 1024px) {
  #bodywrap { padding: 0 20px !important; }
  body.topic .topic { margin: 0 20px; }
  #forum_header { margin: 12px 20px 0; }
  #footer { margin: 40px 20px 0; }
}

@media print {
  #topmenu, #bottom-pagetools, #sidebar, #footer, .post-tools, .ad { display: none !important; }
  body { background: white !important; font-size: 12pt !important; }
  #page { margin-top: 0 !important; }
  body.topic .topic { box-shadow: none !important; border-radius: 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--vlr-primary) !important;
  outline-offset: 2px;
}