/* ════════════════════════════════════════════════
   YBN FRANCE — DESIGN SYSTÈME v6
   Chicago Gang — Futuriste — Sombre — Premium
   Police: Teko (titres Chicago street) + Inter (corps)
════════════════════════════════════════════════ */

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

/* ── RESET & BASE ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', sans-serif;
  background: #07070d;
  color: #f0f0f0;
  overflow-x: hidden;
  min-height: 100vh;
}
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-thumb { background: #950703; }
::selection { background: rgba(149,7,3,.4); color: #fff; }

/* ── VARIABLES ── */
:root {
  --red:     #950703;
  --red2:    #c0100c;
  --red3:    #ff1a0e;
  --dark:    #07070d;
  --dark2:   #0d0d18;
  --dark3:   #111120;
  --glass:   rgba(255,255,255,.04);
  --glass2:  rgba(255,255,255,.07);
  --border:  rgba(255,255,255,.08);
  --borderacc: rgba(149,7,3,.35);
  --muted:   rgba(240,240,240,.45);
  --muted2:  rgba(240,240,240,.22);
  --success: #22c55e;
  --danger:  #ef4444;
  --warn:    #f59e0b;
  --info:    #3b82f6;
  /* Police titres Chicago */
  --font-title: 'Teko', sans-serif;
  --font-ui:    'Rajdhani', sans-serif;
  --font-body:  'Inter', sans-serif;
}

/* ── ANIMATIONS GLOBALES ── */
@keyframes fadeUp   { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn   { from { opacity:0; } to { opacity:1; } }
@keyframes slideR   { from { opacity:0; transform:translateX(40px); } to { opacity:1; transform:translateX(0); } }
@keyframes scan     { 0%{top:-2px;opacity:0}8%{opacity:1}92%{opacity:.7}100%{top:100%;opacity:0} }
@keyframes rpl      { to { width:320px; height:320px; opacity:0; } }
@keyframes notifIn  { from { opacity:0; transform:translateX(60px) scale(.9); } to { opacity:1; transform:translateX(0) scale(1); } }
@keyframes shimmer  { 0%{background-position:-200% center} 100%{background-position:200% center} }
@keyframes flicker  { 0%,19%,21%,23%,25%,54%,56%,100%{opacity:1}20%,24%,55%{opacity:.35} }
@keyframes glow     { 0%,100%{text-shadow:0 0 20px rgba(149,7,3,.4)} 50%{text-shadow:0 0 40px rgba(149,7,3,.9),0 0 80px rgba(149,7,3,.3)} }
@keyframes borderPulse { 0%,100%{border-color:rgba(149,7,3,.15)} 50%{border-color:rgba(149,7,3,.5)} }
@keyframes dropIn   { from{opacity:0;transform:translateY(-10px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes confFall { to { transform:translateY(110vh) rotate(720deg); opacity:0; } }

/* ── NAV ── */
#ybn-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  height: 68px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 3rem;
  background: rgba(7,7,13,.92);
  backdrop-filter: blur(28px) saturate(1.8);
  border-bottom: 1px solid rgba(149,7,3,.2);
  animation: borderPulse 5s ease-in-out infinite;
}
#ybn-nav::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(149,7,3,.7), rgba(200,50,0,.4), transparent);
}

.nav-brand {
  display: flex; align-items: center; gap: 11px;
  text-decoration: none; cursor: pointer;
}
.nav-logo {
  height: 36px; width: 36px; object-fit: contain;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 10px rgba(149,7,3,.6));
  transition: filter .3s;
}
.nav-brand:hover .nav-logo { filter: drop-shadow(0 0 18px rgba(149,7,3,.9)); }
.nav-brand-text {
  font-family: var(--font-title);
  font-size: 22px; font-weight: 700;
  letter-spacing: 4px; color: #fff;
  text-transform: uppercase;
}
.nav-brand-text em { color: var(--red); font-style: normal; }

.nav-links { display: flex; gap: 2rem; list-style: none; }
.nav-links a {
  font-family: var(--font-ui);
  font-size: 13px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  color: rgba(240,240,240,.4);
  text-decoration: none; cursor: pointer;
  position: relative; padding: 4px 0;
  transition: color .25s;
}
.nav-links a::after {
  content: '';
  position: absolute; bottom: 0; left: 0; width: 0; height: 1px;
  background: var(--red);
  transition: width .3s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 0 10px rgba(149,7,3,.8);
}
.nav-links a:hover, .nav-links a.active { color: #fff; }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }

.nav-right { display: flex; align-items: center; gap: 10px; position: relative; }

.btn-connect {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(149,7,3,.12);
  border: 1px solid rgba(149,7,3,.4);
  color: rgba(240,240,240,.8);
  padding: 0 20px; height: 38px;
  font-family: var(--font-ui);
  font-size: 12px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  cursor: pointer;
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
  transition: all .3s;
  backdrop-filter: blur(10px);
  position: relative; overflow: hidden;
}
.btn-connect::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(149,7,3,.15), transparent);
  background-size: 200%; animation: shimmer 3s infinite;
}
.btn-connect:hover {
  background: rgba(149,7,3,.28);
  border-color: rgba(149,7,3,.8);
  color: #fff;
  box-shadow: 0 0 25px rgba(149,7,3,.4);
}
.btn-connect i { color: #7289da; }

/* User dropdown nav */
.nav-user-wrap { position: relative; }
.nav-user-btn {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 5px 14px 5px 6px;
  border: 1px solid rgba(149,7,3,.3);
  background: rgba(149,7,3,.08);
  backdrop-filter: blur(12px);
  clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
  transition: all .25s;
}
.nav-user-btn:hover { border-color: rgba(149,7,3,.6); background: rgba(149,7,3,.15); }
.nav-user-avatar {
  width: 28px; height: 28px; object-fit: cover;
  clip-path: polygon(4px 0%, 100% 0%, calc(100% - 4px) 100%, 0% 100%);
  border: 1px solid rgba(149,7,3,.5);
}
.nav-user-name { font-family: var(--font-title); font-size: 14px; font-weight: 600; letter-spacing: 1px; color: #fff; }
.nav-staff-pill { background: var(--red); color: #fff; font-size: 8px; font-weight: 700; padding: 1px 7px; letter-spacing: 1.5px; text-transform: uppercase; clip-path: polygon(4px 0%,100% 0%,calc(100% - 4px) 100%,0% 100%); }
.nav-chev { font-size: 9px; color: rgba(255,255,255,.4); transition: transform .25s; }

.nav-dropdown {
  position: absolute; top: calc(100% + 10px); right: 0; min-width: 210px;
  background: rgba(8,8,18,.97);
  backdrop-filter: blur(28px);
  border: 1px solid rgba(149,7,3,.3);
  border-top: 2px solid var(--red);
  box-shadow: 0 20px 60px rgba(0,0,0,.8), 0 0 0 1px rgba(149,7,3,.1);
  display: none;
  animation: dropIn .22s ease;
  z-index: 999;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
.nav-dropdown.open { display: block; }
.nav-dd-head { padding: .9rem 1rem; border-bottom: 1px solid rgba(149,7,3,.12); background: rgba(149,7,3,.05); }
.nav-dd-label { font-family: var(--font-ui); font-size: 9px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.3); margin-bottom: 3px; }
.nav-dd-name  { font-family: var(--font-title); font-size: 17px; font-weight: 600; letter-spacing: 1px; }
.nav-dd-item {
  display: flex; align-items: center; gap: 10px;
  padding: .7rem 1rem;
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,.6);
  cursor: pointer; text-decoration: none;
  transition: all .18s;
  background: none; border: none; width: 100%; text-align: left;
}
.nav-dd-item:hover { background: rgba(149,7,3,.1); color: #fff; padding-left: 1.3rem; }
.nav-dd-item i { width: 14px; text-align: center; color: var(--red); }
.nav-dd-sep { height: 1px; background: rgba(255,255,255,.05); margin: 3px 0; }
.nav-dd-logout { color: rgba(239,68,68,.65) !important; }
.nav-dd-logout:hover { background: rgba(239,68,68,.08) !important; color: #f87171 !important; }
.nav-burger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 4px; }
.nav-burger span { display: block; width: 22px; height: 2px; background: rgba(255,255,255,.7); transition: all .3s; }

/* ── PAGE WRAPPER ── */
.page-wrap { padding-top: 68px; min-height: 100vh; position: relative; z-index: 1; }

/* ── PAGE HERO (petites pages) ── */
.page-hero {
  position: relative; padding: 4rem 3rem 3rem;
  overflow: hidden;
  border-bottom: 1px solid rgba(149,7,3,.15);
}
.page-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 80% at 30% 50%, rgba(149,7,3,.08) 0%, transparent 70%);
}
.page-hero-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(149,7,3,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(149,7,3,.025) 1px, transparent 1px);
  background-size: 70px 70px;
  mask-image: radial-gradient(ellipse 80% 100% at 30% 50%, black 0%, transparent 80%);
}
.page-hero-label {
  font-family: var(--font-ui);
  font-size: 10px; font-weight: 600; letter-spacing: 5px;
  text-transform: uppercase; color: rgba(149,7,3,.8);
  margin-bottom: .6rem;
  display: flex; align-items: center; gap: 10px;
}
.page-hero-label::before { content: ''; width: 22px; height: 1px; background: var(--red); opacity: .7; }
.page-hero-title {
  font-family: var(--font-title);
  font-size: clamp(42px, 7.5vw, 88px);
  font-weight: 600;
  letter-spacing: 6px; line-height: .88;
  text-transform: uppercase;
  margin-bottom: .4rem;
  position: relative; z-index: 1;
}
.page-hero-title .accent { color: var(--red); }
.page-hero-sub {
  font-size: 14px; color: var(--muted); font-weight: 300;
  letter-spacing: 1px; line-height: 1.6;
  max-width: 500px; position: relative; z-index: 1;
}

/* ── RÈGLEMENT ── */
.rules-wrap { max-width: 900px; margin: 0 auto; padding: 3rem 2.5rem 6rem; }

.toc-block {
  background: rgba(149,7,3,.05);
  border: 1px solid rgba(149,7,3,.2);
  border-left: 3px solid var(--red);
  padding: 1.5rem;
  margin-bottom: 3rem;
  backdrop-filter: blur(10px);
}
.toc-head {
  font-family: var(--font-title);
  font-size: 16px; font-weight: 600; letter-spacing: 2px;
  text-transform: uppercase; color: var(--red);
  margin-bottom: 1rem;
  display: flex; align-items: center; gap: 8px;
}
.toc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.toc-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  font-size: 13px; font-weight: 500; color: var(--muted);
  text-decoration: none; cursor: pointer;
  transition: all .2s;
  border-left: 2px solid transparent;
}
.toc-item:hover { color: #fff; border-left-color: var(--red); background: rgba(149,7,3,.05); padding-left: 18px; }
.toc-num { font-family: var(--font-title); font-size: 18px; font-weight: 700; color: rgba(149,7,3,.5); min-width: 26px; }

.rule-section { margin-bottom: 3.5rem; }
.rule-section-head {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(149,7,3,.2);
  position: relative;
}
.rule-section-head::after {
  content: '';
  position: absolute; bottom: -1px; left: 0; width: 60px; height: 1px;
  background: var(--red);
}
.rule-num {
  font-family: var(--font-title);
  font-size: 42px; font-weight: 700; line-height: 1;
  color: rgba(149,7,3,.25);
  min-width: 48px;
}
.rule-section-title {
  font-family: var(--font-title);
  font-size: 22px; font-weight: 600; letter-spacing: 2px;
  text-transform: uppercase;
}

.rule-item {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 1.1rem 1.25rem;
  background: var(--glass);
  border: 1px solid var(--border);
  border-left: 2px solid transparent;
  margin-bottom: 8px;
  transition: all .25s;
  backdrop-filter: blur(8px);
}
.rule-item:hover { border-left-color: var(--red); background: rgba(149,7,3,.05); }
.rule-icon {
  width: 38px; height: 38px; flex-shrink: 0;
  background: rgba(149,7,3,.1); border: 1px solid rgba(149,7,3,.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: var(--red);
  clip-path: polygon(5px 0%, 100% 0%, calc(100% - 5px) 100%, 0% 100%);
}
.rule-t { font-family: var(--font-title); font-size: 16px; font-weight: 600; letter-spacing: 1px; margin-bottom: 5px; text-transform: uppercase; }
.rule-d { font-size: 13px; color: var(--muted); line-height: 1.7; }

.sanction-table { width: 100%; border-collapse: collapse; }
.sanction-table th {
  text-align: left; padding: .6rem 1rem;
  font-family: var(--font-ui); font-size: 10px; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase; color: var(--muted2);
  border-bottom: 1px solid rgba(149,7,3,.2);
}
.sanction-table td { padding: .75rem 1rem; font-size: 13px; border-bottom: 1px solid rgba(255,255,255,.04); }
.sanction-table tbody tr:hover { background: rgba(149,7,3,.04); }

/* ── GUIDE ── */
.guide-layout { display: grid; grid-template-columns: 280px 1fr; min-height: calc(100vh - 68px); }
.guide-sidebar {
  background: rgba(7,7,13,.88);
  backdrop-filter: blur(20px);
  border-right: 1px solid rgba(149,7,3,.15);
  padding: 2rem 1.25rem;
  position: sticky; top: 68px;
  height: calc(100vh - 68px); overflow-y: auto;
}
.guide-sidebar::-webkit-scrollbar { width: 2px; }
.guide-sidebar::-webkit-scrollbar-thumb { background: rgba(149,7,3,.4); }
.sidebar-section-label {
  font-family: var(--font-ui);
  font-size: 9px; font-weight: 700; letter-spacing: 3px;
  text-transform: uppercase; color: var(--muted2);
  margin: 1.25rem 0 .6rem;
  display: flex; align-items: center; gap: 8px;
}
.sidebar-section-label::after { content: ''; flex: 1; height: 1px; background: rgba(149,7,3,.2); }
.guide-progress-wrap { margin-bottom: 1.5rem; }
.guide-progress-label { font-size: 11px; color: var(--muted2); margin-bottom: .4rem; display: flex; justify-content: space-between; }
.guide-progress-bar { height: 3px; background: rgba(255,255,255,.06); overflow: hidden; }
.guide-progress-fill { height: 100%; background: linear-gradient(90deg, var(--red), var(--red2)); transition: width .5s; }
.chap-btn {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 10px 12px;
  background: none; border: none; border-left: 2px solid transparent;
  color: var(--muted); cursor: pointer; text-align: left;
  font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 500;
  transition: all .2s; margin-bottom: 2px;
}
.chap-btn:hover { background: rgba(149,7,3,.06); color: #fff; border-left-color: rgba(149,7,3,.3); }
.chap-btn.active { background: rgba(149,7,3,.1); border-left-color: var(--red); color: #fff; }
.chap-btn.done .chap-dot { background: var(--success); }
.chap-dot {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700;
  transition: all .25s;
}
.chap-btn.active .chap-dot { background: var(--red); border-color: var(--red); color: #fff; }
.guide-main { padding: 3rem; overflow-y: auto; position: relative; z-index: 1; }
.chap-section { display: none; animation: fadeUp .4s ease both; }
.chap-section.active { display: block; }
.chap-h2 {
  font-family: var(--font-title);
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 700; letter-spacing: 3px;
  text-transform: uppercase; line-height: .95;
  margin-bottom: .5rem;
}
.chap-intro {
  color: var(--muted); font-size: 14px; line-height: 1.75;
  margin-bottom: 2rem; font-weight: 300;
  border-left: 3px solid var(--red);
  padding: .85rem 1.25rem;
  background: rgba(149,7,3,.04);
  backdrop-filter: blur(8px);
}
.scenario-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 1.5rem 0; }
.scenario-card {
  padding: 1rem 1.1rem;
  font-size: 13px; line-height: 1.6;
  backdrop-filter: blur(8px);
}
.scenario-card.bad { background: rgba(239,68,68,.06); border: 1px solid rgba(239,68,68,.15); border-left: 3px solid #ef4444; }
.scenario-card.good { background: rgba(34,197,94,.06); border: 1px solid rgba(34,197,94,.15); border-left: 3px solid #22c55e; }
.scenario-label { font-family: var(--font-ui); font-size: 9px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; margin-bottom: .5rem; }
.scenario-card.bad .scenario-label { color: #f87171; }
.scenario-card.good .scenario-label { color: #4ade80; }
.chap-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(149,7,3,.15); }
.read-btn { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12px; color: var(--muted2); background: none; border: none; transition: color .2s; font-family: 'Inter', sans-serif; }
.read-box { width: 18px; height: 18px; border: 1px solid rgba(255,255,255,.15); display: flex; align-items: center; justify-content: center; font-size: 9px; transition: all .2s; }
.read-box.checked { background: var(--success); border-color: var(--success); }
.key-point { background: rgba(149,7,3,.05); border: 1px solid rgba(149,7,3,.2); border-left: 3px solid var(--red); padding: 1rem 1.25rem; margin: 1rem 0; font-size: 13.5px; display: flex; align-items: flex-start; gap: 10px; backdrop-filter: blur(8px); }
.key-point i { color: var(--red); flex-shrink: 0; margin-top: 2px; }

/* ── WHITELIST ── */
.wl-screen { display: none; min-height: calc(100vh - 68px); }
.wl-screen.active { display: block; }
.login-center { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 68px); padding: 2rem; }
.login-card {
  background: rgba(8,8,16,.94);
  border: 1px solid rgba(149,7,3,.3);
  border-top: 3px solid var(--red);
  padding: 3rem 2.5rem;
  text-align: center;
  max-width: 480px; width: 100%;
  backdrop-filter: blur(24px);
  position: relative;
}
.login-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(149,7,3,.08) 0%, transparent 60%);
  pointer-events: none;
}
.login-logo-text {
  font-family: var(--font-title);
  font-size: 56px; font-weight: 700; letter-spacing: 6px;
  color: var(--red);
  text-shadow: 0 0 30px rgba(149,7,3,.5);
  animation: glow 3s ease-in-out infinite;
  margin-bottom: .3rem;
}
.login-sub { font-size: 13.5px; color: var(--muted); line-height: 1.65; margin-bottom: 1.75rem; font-weight: 300; }
.login-perms-box { background: rgba(149,7,3,.04); border: 1px solid rgba(149,7,3,.15); padding: 1rem 1.25rem; margin-bottom: 1.75rem; text-align: left; }
.login-perms-title { font-family: var(--font-ui); font-size: 9px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; color: var(--muted2); margin-bottom: .75rem; }
.login-perm-row { display: flex; align-items: center; gap: 9px; font-size: 13px; padding: 4px 0; }
.pcheck { color: var(--success); font-size: 11px; flex-shrink: 0; }

.qcm-wrap { max-width: 780px; margin: 0 auto; padding: 2.5rem 2rem; }
.qcm-hero { text-align: center; margin-bottom: 2.5rem; }
.qcm-title { font-family: var(--font-title); font-size: clamp(36px,6vw,64px); font-weight: 700; letter-spacing: 4px; text-transform: uppercase; line-height: .95; }
.qcm-meta { display: flex; gap: 2rem; justify-content: center; flex-wrap: wrap; margin-top: 1rem; }
.qmeta-item { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }

.timer-ring { position: relative; width: 80px; height: 80px; margin: 0 auto 2rem; }
.timer-ring svg { transform: rotate(-90deg); }
.timer-bg { fill: none; stroke: rgba(255,255,255,.05); stroke-width: 5; }
.timer-fill { fill: none; stroke-width: 5; stroke-linecap: round; stroke: var(--red); stroke-dasharray: 220; stroke-dashoffset: 0; transition: stroke-dashoffset .5s linear, stroke .3s; }
.timer-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-title); font-size: 26px; font-weight: 700; }

.qprog-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 2rem; }
.qprog-track { flex: 1; height: 3px; background: rgba(255,255,255,.06); overflow: hidden; }
.qprog-fill { height: 100%; background: linear-gradient(90deg, var(--red), var(--red2)); transition: width .4s; }
.qprog-label { font-family: var(--font-ui); font-size: 11px; font-weight: 600; color: var(--muted2); white-space: nowrap; }

.q-card {
  background: rgba(8,8,16,.9);
  border: 1px solid rgba(149,7,3,.2);
  border-top: 2px solid var(--red);
  padding: 2rem;
  backdrop-filter: blur(18px);
  animation: fadeUp .35s ease both;
  position: relative;
}
.q-cat-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(149,7,3,.1); border: 1px solid rgba(149,7,3,.3);
  padding: 4px 14px;
  font-family: var(--font-ui); font-size: 10px; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase; color: var(--red);
  margin-bottom: 1rem;
  clip-path: polygon(5px 0%, 100% 0%, calc(100% - 5px) 100%, 0% 100%);
}
.q-text { font-family: var(--font-title); font-size: 20px; font-weight: 600; letter-spacing: .5px; line-height: 1.4; margin-bottom: 1.75rem; }
.opts { display: flex; flex-direction: column; gap: 10px; }
.opt {
  background: var(--glass);
  border: 1px solid var(--border);
  border-left: 2px solid transparent;
  padding: .9rem 1.2rem;
  display: flex; align-items: center; gap: 12px;
  cursor: pointer; transition: all .2s;
  color: #f0f0f0; text-align: left;
  font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500;
  width: 100%; backdrop-filter: blur(8px);
}
.opt:hover:not(:disabled) { border-left-color: var(--red); background: rgba(149,7,3,.07); transform: translateX(5px); }
.opt:disabled { cursor: default; }
.opt.correct { border-left-color: var(--success) !important; background: rgba(34,197,94,.08) !important; }
.opt.wrong   { border-left-color: var(--danger) !important; background: rgba(239,68,68,.08) !important; }
.opt.reveal  { border-left-color: var(--success) !important; background: rgba(34,197,94,.04) !important; }
.opt-letter {
  width: 28px; height: 28px; flex-shrink: 0;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-title); font-size: 13px; font-weight: 700;
  transition: all .2s;
  clip-path: polygon(3px 0%, 100% 0%, calc(100% - 3px) 100%, 0% 100%);
}
.opt.correct .opt-letter, .opt.reveal .opt-letter { background: var(--success); border-color: var(--success); color: #fff; }
.opt.wrong .opt-letter { background: var(--danger); border-color: var(--danger); color: #fff; }
.expl { margin-top: 1rem; padding: .85rem 1.1rem; background: rgba(149,7,3,.05); border-left: 3px solid var(--red); font-size: 13px; color: var(--muted); line-height: 1.65; display: none; }
.expl.show { display: block; animation: fadeUp .3s ease; }
.q-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 1.5rem; }

.result-ring { width: 170px; height: 170px; margin: 0 auto 2rem; position: relative; }
.result-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.result-ring-inner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.result-score-num { font-family: var(--font-title); font-size: 58px; font-weight: 700; line-height: 1; }
.result-score-den { font-size: 16px; color: var(--muted); }
.result-wrap { max-width: 640px; margin: 0 auto; padding: 3rem 2rem; text-align: center; }
.result-title { font-family: var(--font-title); font-size: clamp(38px,6vw,64px); font-weight: 700; letter-spacing: 4px; text-transform: uppercase; line-height: .95; margin-bottom: .5rem; }
.result-sub { font-size: 15px; color: var(--muted); line-height: 1.7; margin-bottom: 2rem; }

/* Écrans statut candidature */
.status-wrap { max-width: 640px; margin: 0 auto; padding: 4rem 2rem; text-align: center; }
.status-icon { font-size: 64px; margin-bottom: 1.5rem; }
.status-title { font-family: var(--font-title); font-size: clamp(38px,6vw,64px); font-weight: 700; letter-spacing: 4px; text-transform: uppercase; line-height: .95; margin-bottom: .5rem; }
.status-sub { font-size: 14px; color: var(--muted); line-height: 1.7; margin-bottom: 2rem; }

/* Form candidature */
.form-wrap { max-width: 780px; margin: 0 auto; padding: 2.5rem 2rem 6rem; }
.form-block {
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(149,7,3,.15);
  border-left: 3px solid rgba(149,7,3,.4);
  padding: 1.75rem;
  margin-bottom: 16px;
  backdrop-filter: blur(8px);
}
.form-block-title {
  font-family: var(--font-title);
  font-size: 16px; font-weight: 600; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--red);
  margin-bottom: 1.25rem;
  display: flex; align-items: center; gap: 10px;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid.full { grid-template-columns: 1fr; }
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-label { font-family: var(--font-ui); font-size: 9px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--muted2); }
.form-input, .form-select, .form-textarea {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(149,7,3,.25);
  padding: .75rem 1rem;
  color: #f0f0f0;
  font-family: 'Inter', sans-serif; font-size: 13.5px; font-weight: 400;
  transition: all .2s; outline: none; width: 100%;
  backdrop-filter: blur(8px);
}
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: rgba(149,7,3,.6); background: rgba(149,7,3,.04); }
.form-input::placeholder, .form-textarea::placeholder { color: rgba(255,255,255,.18); }
.form-textarea { resize: vertical; min-height: 110px; line-height: 1.65; }
.form-select option { background: #0d0d18; }
.char-count { font-size: 10px; color: var(--muted2); text-align: right; margin-top: 3px; }
.form-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 13px; line-height: 1.6; margin-bottom: 10px; }
.form-check input[type=checkbox] { margin-top: 3px; accent-color: var(--red); width: 14px; height: 14px; }

/* Ready screen */
.ready-wrap { max-width: 620px; margin: 0 auto; padding: 4rem 2rem; text-align: center; }
.ready-icon { font-size: 60px; margin-bottom: 1.5rem; }
.ready-rules { background: rgba(149,7,3,.05); border: 1px solid rgba(149,7,3,.2); border-left: 3px solid var(--red); padding: 1.25rem 1.5rem; text-align: left; margin: 1.75rem auto; max-width: 460px; }
.ready-rule-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 13px; color: var(--muted); border-bottom: 1px solid rgba(255,255,255,.04); }
.ready-rule-row:last-child { border-bottom: none; }
.ready-rule-row i { font-size: 11px; flex-shrink: 0; }

/* ── ADMIN ── */
.admin-wrap { display: grid; grid-template-columns: 260px 1fr; min-height: calc(100vh - 68px); }
.admin-sidebar {
  background: rgba(7,7,13,.9); backdrop-filter: blur(20px);
  border-right: 1px solid rgba(149,7,3,.15);
  padding: 1.75rem 1rem;
  position: sticky; top: 68px; height: calc(100vh - 68px); overflow-y: auto;
  display: flex; flex-direction: column;
}
.admin-sidebar::-webkit-scrollbar { width: 2px; }
.adm-label { font-family: var(--font-ui); font-size: 9px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--muted2); margin: 1rem 0 .6rem; display: flex; align-items: center; gap: 8px; }
.adm-label::after { content: ''; flex: 1; height: 1px; background: rgba(149,7,3,.2); }
.adm-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-left: 2px solid transparent;
  cursor: pointer; margin-bottom: 3px;
  transition: all .2s;
  color: var(--muted); font-size: 13px; font-weight: 500;
  background: none; border-top: none; border-right: none; border-bottom: none;
  width: 100%; text-align: left;
  font-family: 'Inter', sans-serif;
}
.adm-nav-item:hover { background: rgba(149,7,3,.06); color: #fff; border-left-color: rgba(149,7,3,.3); }
.adm-nav-item.active { background: rgba(149,7,3,.1); border-left-color: var(--red); color: #fff; }
.adm-nav-item i { width: 14px; text-align: center; font-size: 13px; color: var(--red); }
.adm-count { margin-left: auto; background: var(--red); color: #fff; font-size: 10px; font-weight: 700; padding: 2px 8px; clip-path: polygon(3px 0%,100% 0%,calc(100% - 3px) 100%,0% 100%); }
.adm-count.zero { background: rgba(255,255,255,.08); color: var(--muted2); }
.admin-content { padding: 2.5rem 3rem; position: relative; z-index: 1; }
.admin-panel { display: none; }
.admin-panel.active { display: block; }
.admin-panel-title { font-family: var(--font-title); font-size: 28px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 1.75rem; display: flex; align-items: center; gap: 12px; }
.admin-panel-title i { color: var(--red); }
.adm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 12px; margin-bottom: 2rem; }
.adm-stat { background: rgba(255,255,255,.03); border: 1px solid rgba(149,7,3,.15); border-left: 3px solid var(--red); padding: 1.1rem 1.25rem; backdrop-filter: blur(8px); }
.adm-stat-n { font-family: var(--font-title); font-size: 40px; font-weight: 700; line-height: 1; color: var(--red); text-shadow: 0 0 15px rgba(149,7,3,.4); }
.adm-stat-l { font-family: var(--font-ui); font-size: 9px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--muted2); margin-top: 4px; }

.filter-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 1.25rem; }
.filter-btn { background: transparent; border: 1px solid var(--border); padding: 6px 16px; font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--muted2); cursor: pointer; transition: all .2s; clip-path: polygon(4px 0%,100% 0%,calc(100% - 4px) 100%,0% 100%); }
.filter-btn.active, .filter-btn:hover { background: rgba(149,7,3,.12); border-color: rgba(149,7,3,.5); color: #fff; }
.search-input { background: rgba(255,255,255,.04); border: 1px solid rgba(149,7,3,.2); padding: 6px 14px; font-size: 13px; color: #f0f0f0; font-family: 'Inter', sans-serif; outline: none; transition: border-color .2s; margin-left: auto; backdrop-filter: blur(8px); }
.search-input:focus { border-color: rgba(149,7,3,.5); }
.search-input::placeholder { color: var(--muted2); }

.cand-card { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); border-left: 2px solid transparent; overflow: hidden; margin-bottom: 10px; transition: all .2s; backdrop-filter: blur(6px); }
.cand-card:hover { border-left-color: var(--red); background: rgba(149,7,3,.04); }
.cand-header { display: flex; align-items: center; gap: 14px; padding: 1.1rem 1.25rem; cursor: pointer; user-select: none; border-bottom: 1px solid rgba(255,255,255,.04); }
.cand-avatar { width: 40px; height: 40px; background: var(--red); display: flex; align-items: center; justify-content: center; font-family: var(--font-title); font-size: 18px; font-weight: 700; flex-shrink: 0; clip-path: polygon(5px 0%,100% 0%,calc(100% - 5px) 100%,0% 100%); overflow: hidden; }
.cand-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cand-name { font-family: var(--font-title); font-size: 16px; font-weight: 600; letter-spacing: .5px; }
.cand-meta { font-size: 11px; color: var(--muted2); margin-top: 2px; }
.cand-right { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-shrink: 0; }
.score-chip { font-family: var(--font-ui); font-size: 11px; font-weight: 700; padding: 3px 10px; clip-path: polygon(3px 0%,100% 0%,calc(100% - 3px) 100%,0% 100%); }
.sp { background: rgba(34,197,94,.12); color: #4ade80; border: 1px solid rgba(34,197,94,.3); }
.sf { background: rgba(239,68,68,.12); color: #f87171; border: 1px solid rgba(239,68,68,.3); }
.cand-body { display: none; padding: 1.25rem; border-top: 1px solid rgba(149,7,3,.1); }
.cand-body.open { display: block; animation: fadeUp .25s ease; }
.cand-fields { display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 8px; margin-bottom: 1rem; }
.cf { background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.05); padding: .55rem .75rem; }
.cfl { font-family: var(--font-ui); font-size: 9px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--muted2); margin-bottom: 3px; }
.cfv { font-size: 13px; font-weight: 500; }
.ctf { background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.05); border-left: 2px solid rgba(149,7,3,.35); padding: .7rem .9rem; margin-bottom: 8px; }
.ctf-label { font-family: var(--font-ui); font-size: 9px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: rgba(149,7,3,.7); margin-bottom: 5px; }
.ctf-val { font-size: 12.5px; color: var(--muted); line-height: 1.65; }
.cand-actions { display: flex; gap: 8px; flex-wrap: wrap; padding-top: .75rem; border-top: 1px solid rgba(255,255,255,.05); margin-top: .5rem; }
.adm-loading { display: none; padding: 1rem; font-size: 13px; color: var(--muted2); text-align: center; }

/* ── MODAL ── */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.88); z-index: 800; display: none; align-items: center; justify-content: center; padding: 1.5rem; backdrop-filter: blur(6px); }
.modal-overlay.open { display: flex; }
.modal-box {
  background: rgba(8,8,18,.98);
  border: 1px solid rgba(149,7,3,.3);
  border-top: 2px solid var(--red);
  padding: 2.25rem;
  max-width: 500px; width: 100%;
  animation: fadeUp .3s ease;
  backdrop-filter: blur(28px);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}
.modal-box h3 { font-family: var(--font-title); font-size: 22px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; margin-bottom: .5rem; }
.modal-box p { font-size: 13px; color: var(--muted); line-height: 1.65; margin-bottom: 1.25rem; }
.modal-footer { display: flex; gap: 8px; justify-content: flex-end; margin-top: .5rem; }
.modal-textarea { background: rgba(255,255,255,.04); border: 1px solid rgba(149,7,3,.25); padding: .75rem .9rem; color: #f0f0f0; font-family: 'Inter', sans-serif; font-size: 13px; outline: none; width: 100%; resize: vertical; min-height: 95px; margin-bottom: 1rem; backdrop-filter: blur(8px); transition: border-color .2s; }
.modal-textarea:focus { border-color: rgba(149,7,3,.6); }
.modal-label { font-family: var(--font-ui); font-size: 9px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--muted2); margin-bottom: .5rem; display: block; }

/* ── BOUTONS GLOBAUX ── */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 0 18px; height: 40px;
  font-family: var(--font-ui); font-size: 12px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  border: none; cursor: pointer;
  position: relative; overflow: hidden;
  transition: all .25s;
  text-decoration: none; white-space: nowrap;
  clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
}
.btn:active { transform: scale(.96); }
.btn-acc { background: var(--red); color: #fff; }
.btn-acc:hover { box-shadow: 0 0 25px rgba(149,7,3,.6); transform: translateY(-1px); }
.btn-success { background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.35); color: #4ade80; }
.btn-success:hover { background: rgba(34,197,94,.25); }
.btn-danger { background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.35); color: #f87171; }
.btn-danger:hover { background: rgba(239,68,68,.22); }
.btn-ghost { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); color: rgba(240,240,240,.7); backdrop-filter: blur(10px); }
.btn-ghost:hover { border-color: rgba(149,7,3,.45); background: rgba(149,7,3,.08); color: #fff; }
.btn-disc { background: rgba(88,101,242,.15); border: 1px solid rgba(88,101,242,.4); color: #fff; }
.btn-disc:hover { background: rgba(88,101,242,.3); box-shadow: 0 0 20px rgba(88,101,242,.35); }
.btn-lg { height: 50px; font-size: 13px; padding: 0 28px; }
.btn-xl { height: 58px; font-size: 14px; padding: 0 40px; }
.btn-block { width: 100%; justify-content: center; }

/* ── BADGES ── */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; font-family: var(--font-ui); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; clip-path: polygon(4px 0%,100% 0%,calc(100% - 4px) 100%,0% 100%); }
.badge-pending  { background: rgba(245,158,11,.12); color: #fbbf24; border: 1px solid rgba(245,158,11,.3); }
.badge-accepted { background: rgba(34,197,94,.12); color: #4ade80; border: 1px solid rgba(34,197,94,.3); }
.badge-refused  { background: rgba(239,68,68,.12); color: #f87171; border: 1px solid rgba(239,68,68,.3); }
.badge-staff    { background: var(--red); color: #fff; }
.badge-warn     { background: rgba(245,158,11,.12); color: #fbbf24; border: 1px solid rgba(245,158,11,.25); }

/* ── ALERTS ── */
.alert { display: flex; gap: 10px; align-items: flex-start; padding: .9rem 1.1rem; margin: 1rem 0; font-size: 13px; line-height: 1.6; }
.alert i { flex-shrink: 0; margin-top: 1px; }
.alert.danger { background: rgba(239,68,68,.07); border: 1px solid rgba(239,68,68,.2); border-left: 3px solid #ef4444; color: #fca5a5; }
.alert.warn   { background: rgba(245,158,11,.06); border: 1px solid rgba(245,158,11,.18); border-left: 3px solid #f59e0b; color: #fde68a; }
.alert.info   { background: rgba(59,130,246,.06); border: 1px solid rgba(59,130,246,.18); border-left: 3px solid #3b82f6; color: #93c5fd; }
.alert.ok     { background: rgba(34,197,94,.06); border: 1px solid rgba(34,197,94,.18); border-left: 3px solid #22c55e; color: #86efac; }

/* ── NOTIFS ── */
#notif-wrap { position: fixed; bottom: 24px; right: 24px; z-index: 99999; display: flex; flex-direction: column; gap: 8px; max-width: 380px; pointer-events: none; }
.notif { pointer-events: auto; background: rgba(8,8,18,.97); backdrop-filter: blur(28px); border: 1px solid rgba(255,255,255,.07); padding: .9rem 1.15rem; display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; animation: notifIn .35s cubic-bezier(.34,1.56,.64,1) both; box-shadow: 0 8px 35px rgba(0,0,0,.7); clip-path: polygon(5px 0%,100% 0%,calc(100% - 5px) 100%,0% 100%); transition: opacity .4s, transform .4s; }
.notif.ok   { border-left: 3px solid var(--success); } .notif.ok i   { color: var(--success); }
.notif.err  { border-left: 3px solid var(--danger); }  .notif.err i  { color: var(--danger); }
.notif.inf  { border-left: 3px solid var(--info); }    .notif.inf i  { color: var(--info); }
.notif.warn { border-left: 3px solid var(--warn); }    .notif.warn i { color: var(--warn); }

/* ── RIPPLE ── */
.rip { position: absolute; border-radius: 50%; background: rgba(255,255,255,.18); width: 0; height: 0; transform: translate(-50%,-50%); animation: rpl .6s ease-out forwards; pointer-events: none; }

/* ── CONFETTI ── */
.confetti-layer { position: fixed; inset: 0; pointer-events: none; z-index: 999; overflow: hidden; }
.conf-piece { position: absolute; top: -10px; animation: confFall linear forwards; }

/* ── FOOTER ── */
.ybn-footer { padding: 2.5rem 3rem; background: rgba(0,0,0,.6); backdrop-filter: blur(20px); border-top: 1px solid rgba(149,7,3,.12); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; position: relative; }
.ybn-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg,transparent,rgba(149,7,3,.35),transparent); }
.foot-brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-title); font-size: 20px; font-weight: 700; letter-spacing: 3px; }
.foot-logo { height: 26px; width: 26px; object-fit: contain; mix-blend-mode: screen; }
.foot-copy { font-size: 10px; color: var(--muted2); margin-top: 3px; }
.foot-links { display: flex; gap: 1.5rem; list-style: none; }
.foot-links a { color: var(--muted2); font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: color .2s; }
.foot-links a:hover { color: var(--red); }
.foot-soc { display: flex; gap: 8px; }
.soc-btn { width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.03); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; color: var(--muted2); font-size: 13px; transition: all .3s; cursor: pointer; text-decoration: none; clip-path: polygon(4px 0%,100% 0%,calc(100% - 4px) 100%,0% 100%); }
.soc-btn:hover { border-color: rgba(149,7,3,.6); color: var(--red); background: rgba(149,7,3,.1); transform: translateY(-2px); }

/* ── UTILS ── */
.hidden { display: none !important; }
.no-access { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 68px); }
.empty-state { text-align: center; padding: 4rem 2rem; color: var(--muted2); }
.empty-state .icon { font-size: 44px; margin-bottom: 1rem; opacity: .3; }
.log-item { display: flex; gap: 12px; align-items: flex-start; padding: .75rem 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.log-item:last-child { border-bottom: none; }
.log-dot { width: 7px; height: 7px; flex-shrink: 0; margin-top: 5px; clip-path: polygon(2px 0%,100% 0%,calc(100% - 2px) 100%,0% 100%); }
.log-dot.accept { background: var(--success); } .log-dot.refuse { background: var(--red); } .log-dot.submit { background: var(--info); }
.log-txt { font-size: 12.5px; line-height: 1.5; }
.log-time { font-size: 10px; color: var(--muted2); margin-top: 1px; }

/* ════════════════════════════════════════════════
   ── DESIGN SYSTEM v4 — STYLE YBNFRANCE.FR ──
   Inspiré du site officiel : pur noir, accent
   amber/orange, boutons pills, layouts centrés,
   typo sans-serif épurée, dot pattern subtil.
   ════════════════════════════════════════════════ */

:root {
  --v4-bg:         #000000;
  --v4-bg-2:       #0a0a0b;
  --v4-bg-3:       #111113;
  --v4-card:       #0c0c0e;
  --v4-card-hov:   #141417;
  --v4-text:       #ffffff;
  --v4-text-2:     #c9c9cd;
  --v4-text-3:     #8a8a90;
  --v4-text-4:     #5a5a60;
  --v4-line:       rgba(255,255,255,.07);
  --v4-line-2:     rgba(255,255,255,.14);

  /* Accent rouge YBN (anciennement amber) */
  --v4-amber:      #e02020;
  --v4-amber-2:    #b8160f;
  --v4-amber-soft: rgba(224,32,32,.12);
  --v4-amber-glow: rgba(224,32,32,.35);

  /* Aliases sémantiques rouges */
  --v4-red:        #e02020;
  --v4-red-2:      #b8160f;
  --v4-red-deep:   #7a0a08;
}

/* ── Base/reset patch ── */
html, body.v4-page {
  background: var(--v4-bg) !important;
  color: var(--v4-text);
  font-family: 'Inter', sans-serif;
}
body.v4-page::before { display: none !important; }
body.v4-page #ybn-bg-wrap .ybn-grain,
body.v4-page #ybn-bg-wrap .ybn-scan { display: none !important; }
body.v4-page #ybn-bg-wrap canvas { opacity: .35 !important; }
body.v4-page #ybn-bg-wrap > svg,
body.v4-page #ybn-bg-wrap > div:first-of-type svg { opacity: .25 !important; }

/* Dot pattern subtil (utilisé sur les sections) */
.v4-dots {
  position: relative;
}
.v4-dots::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(ellipse 60% 80% at 50% 50%, black 30%, transparent 80%);
}
.v4-dots > * { position: relative; z-index: 1; }

/* ── Nav v4 ── */
.v4-nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 900;
  height: 72px;
  display: flex; align-items: center;
  padding: 0 2.5rem;
  background: rgba(0,0,0,.78);
  backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid var(--v4-line);
}
.v4-nav-brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; cursor: pointer;
  margin-right: auto;
}
.v4-nav-brand img {
  height: 36px; width: 36px;
  object-fit: contain;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 10px rgba(224,32,32,.4));
}
.v4-nav-links {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; gap: 2.5rem; list-style: none;
}
.v4-nav-links a {
  font-family: 'Inter', sans-serif;
  font-size: 14px; font-weight: 500;
  color: var(--v4-text-2);
  text-decoration: none; cursor: pointer;
  transition: color .2s;
  letter-spacing: .2px;
}
.v4-nav-links a:hover,
.v4-nav-links a.active { color: var(--v4-text); }
.v4-nav-right {
  display: flex; gap: 8px; align-items: center;
  margin-left: auto;
}

/* ── Pills (boutons arrondis) ── */
.v4-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 22px;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px; font-weight: 500;
  letter-spacing: .3px;
  text-decoration: none; cursor: pointer;
  border-radius: 999px;
  border: 1px solid var(--v4-line-2);
  transition: all .25s cubic-bezier(.4,0,.2,1);
  line-height: 1;
  white-space: nowrap;
  background: rgba(255,255,255,.02);
  color: var(--v4-text);
}
.v4-pill:hover {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.25);
  transform: translateY(-1px);
}
.v4-pill-light {
  background: #fff;
  color: #000;
  border-color: #fff;
}
.v4-pill-light:hover {
  background: var(--v4-amber);
  color: #fff;
  border-color: var(--v4-amber);
  box-shadow: 0 8px 24px rgba(224,32,32,.4);
}
.v4-pill-dark {
  background: rgba(255,255,255,.04);
  border-color: var(--v4-line-2);
  color: var(--v4-text);
}
.v4-pill-amber {
  background: var(--v4-amber);
  color: #fff;
  border-color: var(--v4-amber);
}
.v4-pill-amber:hover {
  background: var(--v4-amber-2);
  border-color: var(--v4-amber-2);
  box-shadow: 0 8px 24px rgba(224,32,32,.4);
  color: #fff;
}
.v4-pill-lg {
  padding: 14px 28px;
  font-size: 14.5px;
}

/* — Bouton SE CONNECTER (style original restauré) — */
.v4-btn-connect {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 22px;
  height: 40px;
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--v4-text);
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  transition: all .25s ease;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}
.v4-btn-connect::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(224,32,32,.12), transparent);
  background-size: 200%;
  animation: v4ConnectShine 4s infinite;
  pointer-events: none;
}
@keyframes v4ConnectShine {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.v4-btn-connect:hover {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.3);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0,0,0,.4);
}
.v4-btn-connect i {
  color: #5865f2;
  font-size: 14px;
}

/* ── Welcome badge (petit pill au-dessus du titre hero) ── */
.v4-welcome {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 18px;
  background: var(--v4-amber-soft);
  border: 1px solid rgba(224,32,32,.3);
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--v4-amber);
}
.v4-welcome i { font-size: 11px; }

/* ── Typo v4 ── */
.v4-display {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: clamp(48px, 7.5vw, 96px);
  line-height: 1.05;
  letter-spacing: -2.5px;
  color: var(--v4-text);
}
.v4-display .muted { color: var(--v4-text-3); }
.v4-display .amber { color: var(--v4-amber); }

.v4-title-section {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 4.5vw, 48px);
  line-height: 1.15;
  letter-spacing: -1px;
  color: var(--v4-text);
}
.v4-title-section .amber { color: var(--v4-amber); }
.v4-title-section .muted { color: var(--v4-text-3); }

.v4-sub {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  color: var(--v4-text-3);
  max-width: 56ch;
}

/* ── Hero v4 (centré) ── */
.v4-hero {
  position: relative;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 8rem 2rem 4rem;
  text-align: center;
  background: var(--v4-bg);
  overflow: hidden;
}
.v4-hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse 60% 70% at 50% 60%, black 20%, transparent 75%);
  pointer-events: none;
}
.v4-hero::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 50% 40% at 50% 50%, rgba(224,32,32,.05) 0%, transparent 70%);
  pointer-events: none;
}
.v4-hero-content {
  position: relative; z-index: 2;
  max-width: 900px;
}
.v4-hero-actions {
  display: flex; gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2.5rem;
}

/* ── Section v4 ── */
.v4-section {
  position: relative;
  padding: 7rem 2.5rem;
  background: var(--v4-bg);
}
.v4-section.tight { padding: 5rem 2.5rem; }
.v4-wrap {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.v4-wrap.narrow { max-width: 900px; }

/* ── Split section (texte gauche / cartes droite) ── */
.v4-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
}
.v4-split-left h2 { margin-bottom: 1.25rem; }
.v4-split-left p { font-size: 15px; color: var(--v4-text-3); line-height: 1.7; }

/* ── Q&A / Accordéon-like cards ── */
.v4-qa { display: flex; flex-direction: column; gap: 1.5rem; }
.v4-qa-card {
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--v4-line);
}
.v4-qa-card:last-child { border-bottom: none; }
.v4-qa-q {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--v4-text);
  margin-bottom: .6rem;
}
.v4-qa-a {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.7;
  color: var(--v4-text-3);
}
.v4-qa-a strong { color: var(--v4-amber); font-weight: 500; }
.v4-qa-a ul { margin: .5rem 0 0 1rem; padding: 0; }
.v4-qa-a li { padding: 3px 0; }

/* ── Stats row v4 ── */
.v4-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  text-align: center;
  padding: 4rem 0;
}
.v4-stat-num {
  font-family: 'Inter', sans-serif;
  font-size: clamp(48px, 7vw, 80px);
  font-weight: 700;
  line-height: 1;
  color: var(--v4-amber);
  letter-spacing: -2px;
  margin-bottom: .5rem;
}
.v4-stat-label {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--v4-text-3);
  letter-spacing: .5px;
}

/* ── Cards grille (features/products) ── */
.v4-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 3rem;
}
.v4-card {
  background: var(--v4-card);
  border: 1px solid var(--v4-line);
  border-radius: 18px;
  padding: 1.75rem 1.5rem;
  transition: all .25s ease;
  position: relative;
  overflow: hidden;
}
.v4-card:hover {
  background: var(--v4-card-hov);
  border-color: var(--v4-line-2);
  transform: translateY(-3px);
}
.v4-card-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--v4-amber-soft);
  color: var(--v4-amber);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px;
  margin-bottom: 1.25rem;
}
.v4-card-title {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--v4-text);
  margin-bottom: .5rem;
}
.v4-card-text {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--v4-text-3);
}

/* ── Big graffiti image block ── */
.v4-graffiti {
  margin: 4rem auto;
  max-width: 900px;
  aspect-ratio: 16 / 9;
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(ellipse at center, rgba(224,32,32,.4) 0%, rgba(0,0,0,1) 75%),
    linear-gradient(180deg, #1a0a05 0%, #000 100%);
  display: flex; align-items: center; justify-content: center;
}
.v4-graffiti-skyline {
  position: absolute; bottom: 0; left: 0; right: 0; height: 40%;
  opacity: .6;
}
.v4-graffiti-title {
  position: relative; z-index: 2;
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-style: italic;
  font-size: clamp(60px, 10vw, 140px);
  color: #fff;
  text-shadow:
    0 4px 24px rgba(224,32,32,.55),
    0 0 80px rgba(224,32,32,.3);
  letter-spacing: -2px;
  text-align: center;
}
.v4-graffiti-overhead {
  position: absolute; top: 28%;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 8px;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
  z-index: 2;
}

/* ── Boutique mini card v4 (style ybnfrance) ── */
.v4-shop-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 3rem;
}
.v4-shop-card {
  background: var(--v4-card);
  border: 1px solid var(--v4-line);
  border-radius: 16px;
  padding: 1.5rem;
  transition: all .25s ease;
  position: relative;
}
.v4-shop-card:hover {
  background: var(--v4-card-hov);
  border-color: rgba(224,32,32,.3);
  transform: translateY(-3px);
}
.v4-shop-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: var(--v4-amber-soft);
  color: var(--v4-amber);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 26px;
  margin-bottom: 1rem;
}
.v4-shop-card h4 {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--v4-text);
  margin-bottom: .35rem;
}
.v4-shop-card p {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--v4-text-3);
}
.v4-shop-tag {
  position: absolute; top: 1rem; right: 1rem;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: var(--v4-text-3);
}
.v4-shop-tag.hot { background: var(--v4-amber-soft); color: var(--v4-amber); }

/* ── Footer v4 ── */
.v4-footer {
  background: var(--v4-bg);
  border-top: 1px solid var(--v4-line);
  padding: 4rem 2.5rem 2rem;
}
.v4-footer-wrap {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
}
.v4-footer h5 {
  font-family: 'Inter', sans-serif;
  font-size: 13px; font-weight: 600;
  color: var(--v4-text);
  margin-bottom: 1.25rem;
  letter-spacing: .3px;
}
.v4-footer a {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  color: var(--v4-text-3);
  text-decoration: none;
  padding: 5px 0;
  transition: color .2s;
}
.v4-footer a:hover { color: var(--v4-amber); }
.v4-footer-bottom {
  max-width: 1200px; margin: 3rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--v4-line);
  display: flex; justify-content: space-between; align-items: center;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--v4-text-4);
}
.v4-footer-socials { display: flex; gap: 8px; }
.v4-footer-socials a {
  width: 36px; height: 36px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--v4-line);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--v4-text-3);
  font-size: 14px;
  padding: 0;
  transition: all .25s;
}
.v4-footer-socials a:hover {
  background: var(--v4-amber-soft);
  border-color: rgba(224,32,32,.3);
  color: var(--v4-amber);
}

/* ════════════════════════════════════════════════
   ── OVERRIDES v4 pour reglement.html & guide.html
   Applique le look v4 (pure black, pills, rouge,
   coins arrondis) aux pages avec sidebar.
   ════════════════════════════════════════════════ */

body.v4-page .regl-sidebar,
body.v4-page .guide-sidebar {
  background: var(--v4-bg-2) !important;
  border-right: 1px solid var(--v4-line) !important;
  backdrop-filter: blur(20px);
}
body.v4-page .regl-content,
body.v4-page .guide-main {
  background: transparent !important;
}
body.v4-page .regl-layout,
body.v4-page .guide-layout { background: var(--v4-bg); }

body.v4-page .menu-section-btn {
  color: var(--v4-text-2) !important;
  font-family: 'Inter', sans-serif !important;
  text-transform: none !important;
  letter-spacing: .3px !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  border-radius: 8px;
  margin: 2px 0;
}
body.v4-page .menu-section-btn i.icon { color: var(--v4-amber) !important; }
body.v4-page .menu-section-btn:hover {
  background: rgba(224,32,32,.06) !important;
  border-left-color: var(--v4-amber) !important;
  color: var(--v4-text) !important;
}
body.v4-page .menu-section-btn.open {
  background: rgba(224,32,32,.08) !important;
  border-left-color: var(--v4-amber) !important;
  color: var(--v4-text) !important;
}
body.v4-page .menu-sub {
  border-left-color: rgba(224,32,32,.18) !important;
}
body.v4-page .menu-sub-item {
  color: var(--v4-text-3) !important;
  font-size: 13px !important;
  border-radius: 6px;
  margin: 2px 4px;
  padding: 7px 12px;
}
body.v4-page .menu-sub-item:hover {
  background: rgba(255,255,255,.04) !important;
  color: var(--v4-text) !important;
  border-left-color: var(--v4-amber) !important;
}
body.v4-page .menu-sub-item.active {
  background: rgba(224,32,32,.08) !important;
  border-left-color: var(--v4-amber) !important;
  color: var(--v4-text) !important;
}
body.v4-page .menu-sub-item i { color: var(--v4-amber) !important; opacity: .8; }

body.v4-page .section-hero-label,
body.v4-page .eyebrow-guide {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 7px 16px !important;
  background: var(--v4-amber-soft) !important;
  border: 1px solid rgba(224,32,32,.3) !important;
  border-radius: 999px !important;
  color: var(--v4-amber) !important;
  font-family: 'Inter', sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 600;
  font-size: 11px;
  margin-bottom: 1rem !important;
}
body.v4-page .section-hero-label::before,
body.v4-page .eyebrow-guide::before { display: none !important; }
body.v4-page .section-hero-title,
body.v4-page .chap-h2 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -1px !important;
  text-transform: none !important;
  color: var(--v4-text) !important;
}
body.v4-page .section-hero-title .accent,
body.v4-page .chap-h2 span[style*="color"] {
  color: var(--v4-amber) !important;
}
body.v4-page .section-hero-sub,
body.v4-page .chap-intro {
  font-family: 'Inter', sans-serif !important;
  color: var(--v4-text-3) !important;
  font-weight: 400 !important;
}
body.v4-page .chap-intro {
  background: rgba(224,32,32,.04) !important;
  border-left-color: var(--v4-amber) !important;
  border-radius: 0 12px 12px 0;
}

body.v4-page .rule-item {
  background: var(--v4-card) !important;
  border: 1px solid var(--v4-line) !important;
  border-radius: 12px !important;
  backdrop-filter: blur(6px);
  transition: all .25s ease;
}
body.v4-page .rule-item:hover {
  background: var(--v4-card-hov) !important;
  border-color: rgba(224,32,32,.3) !important;
  transform: translateY(-2px);
}
body.v4-page .rule-icon {
  background: var(--v4-amber-soft) !important;
  border: 1px solid rgba(224,32,32,.3) !important;
  color: var(--v4-amber) !important;
  border-radius: 10px !important;
  clip-path: none !important;
}
body.v4-page .rule-t {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: .2px !important;
  color: var(--v4-text) !important;
}
body.v4-page .rule-d {
  font-family: 'Inter', sans-serif !important;
  color: var(--v4-text-3) !important;
}
body.v4-page .rule-d strong { color: var(--v4-amber) !important; }

body.v4-page .tier-card {
  background: var(--v4-card) !important;
  border: 1px solid var(--v4-line) !important;
  border-top: 2px solid var(--v4-amber) !important;
  border-radius: 14px !important;
}
body.v4-page .tier-name {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  color: var(--v4-amber) !important;
}

body.v4-page .info-box {
  background: rgba(224,32,32,.05) !important;
  border: 1px solid var(--v4-line) !important;
  border-left: 3px solid var(--v4-amber) !important;
  border-radius: 12px !important;
  color: var(--v4-text-2) !important;
}
body.v4-page .info-box strong { color: var(--v4-text) !important; }

body.v4-page .sanction-table {
  border-radius: 12px;
  overflow: hidden;
}
body.v4-page .sanction-table th {
  color: var(--v4-text-3) !important;
  font-family: 'Inter', sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
  border-bottom: 1px solid var(--v4-line) !important;
}
body.v4-page .sanction-table tbody tr:hover { background: var(--v4-card) !important; }

body.v4-page .scale-row {
  background: var(--v4-card) !important;
  border: 1px solid var(--v4-line) !important;
  border-radius: 10px !important;
}

body.v4-page .alert {
  border-radius: 12px !important;
  font-family: 'Inter', sans-serif !important;
}
body.v4-page .alert.danger { background: rgba(239,68,68,.06) !important; border: 1px solid rgba(239,68,68,.2) !important; border-left: 3px solid #ef4444 !important; }
body.v4-page .alert.warn   { background: rgba(245,158,11,.06) !important; border: 1px solid rgba(245,158,11,.2) !important; border-left: 3px solid #f59e0b !important; }
body.v4-page .alert.ok     { background: rgba(34,197,94,.06) !important; border: 1px solid rgba(34,197,94,.2) !important; border-left: 3px solid #22c55e !important; }

body.v4-page .badge {
  border-radius: 999px !important;
  font-family: 'Inter', sans-serif !important;
  text-transform: none !important;
  letter-spacing: .3px !important;
  padding: 4px 11px !important;
  font-weight: 500 !important;
}

body.v4-page .street-quote {
  border-left-color: var(--v4-amber) !important;
  font-family: 'Inter', sans-serif !important;
  font-style: normal !important;
  font-weight: 400 !important;
  color: var(--v4-text-2);
}
body.v4-page .street-quote::before,
body.v4-page .street-quote::after {
  color: var(--v4-amber) !important;
  font-family: 'Playfair Display', serif;
}
body.v4-page .street-quote .quote-src { color: var(--v4-text-4) !important; }

body.v4-page .chap-btn {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  border-radius: 8px;
  margin: 2px 4px;
}
body.v4-page .chap-btn:hover {
  background: rgba(255,255,255,.04) !important;
  border-left-color: var(--v4-amber) !important;
  color: var(--v4-text) !important;
}
body.v4-page .chap-btn.active {
  background: rgba(224,32,32,.08) !important;
  border-left-color: var(--v4-amber) !important;
  color: var(--v4-text) !important;
}
body.v4-page .chap-dot {
  border-radius: 999px !important;
}
body.v4-page .chap-btn.active .chap-dot {
  background: var(--v4-amber) !important;
  border-color: var(--v4-amber) !important;
}
body.v4-page .key-point {
  background: rgba(224,32,32,.05) !important;
  border-left-color: var(--v4-amber) !important;
  border-radius: 0 12px 12px 0;
}
body.v4-page .key-point i { color: var(--v4-amber) !important; }

body.v4-page .scenario-card {
  border-radius: 12px !important;
  font-family: 'Inter', sans-serif;
}
body.v4-page .ex-card { border-radius: 12px !important; }

body.v4-page .guide-progress-bar {
  border-radius: 999px;
  overflow: hidden;
}
body.v4-page .guide-progress-fill {
  background: linear-gradient(90deg, var(--v4-amber-2), var(--v4-amber)) !important;
}

body.v4-page .crime-tape {
  background: var(--v4-bg-2) !important;
  border-top: 1px solid var(--v4-line) !important;
  border-bottom: 1px solid var(--v4-line) !important;
  animation: none !important;
  padding: 13px 18px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 2.5px !important;
  color: var(--v4-text-3) !important;
}
body.v4-page .crime-tape > span {
  background: none !important;
  color: var(--v4-text-3) !important;
  padding: 0 !important;
}
body.v4-page .crime-tape > span::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--v4-amber);
  margin-right: 10px;
  vertical-align: middle;
}

body.v4-page .ybn-footer {
  background: var(--v4-bg) !important;
  border-top: 1px solid var(--v4-line) !important;
}
body.v4-page .foot-brand { font-family: 'Inter', sans-serif !important; letter-spacing: 1px; }
body.v4-page .foot-links a {
  font-family: 'Inter', sans-serif !important;
  text-transform: none !important;
  letter-spacing: .3px !important;
  font-weight: 500 !important;
  color: var(--v4-text-3) !important;
}
body.v4-page .foot-links a:hover { color: var(--v4-amber) !important; }
body.v4-page .soc-btn {
  border-radius: 999px !important;
  clip-path: none !important;
}
body.v4-page .soc-btn:hover {
  background: var(--v4-amber-soft) !important;
  border-color: rgba(224,32,32,.3) !important;
  color: var(--v4-amber) !important;
}

body.v4-page code {
  background: rgba(224,32,32,.12) !important;
  color: var(--v4-amber) !important;
}

/* ════════════════════════════════════════════════
   ── OVERRIDES v4 pour whitelist.html ──
   QCM, formulaire candidature, résultats, screens
   ════════════════════════════════════════════════ */

/* — Login card (écran initial WL) — */
body.v4-page .login-card {
  background: var(--v4-bg-2) !important;
  border: 1px solid var(--v4-line) !important;
  border-top: 2px solid var(--v4-amber) !important;
  border-radius: 18px !important;
  backdrop-filter: blur(20px);
}
body.v4-page .login-logo-text {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 48px !important;
  letter-spacing: -1px !important;
  color: var(--v4-text) !important;
  text-shadow: 0 0 30px rgba(224,32,32,.4) !important;
  animation: none !important;
}
body.v4-page .login-sub {
  font-family: 'Inter', sans-serif !important;
  color: var(--v4-text-3) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}
body.v4-page .login-perms-box {
  background: rgba(255,255,255,.025) !important;
  border: 1px solid var(--v4-line) !important;
  border-radius: 12px !important;
  padding: 1.25rem !important;
}
body.v4-page .login-perms-title {
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  color: var(--v4-text-3) !important;
  letter-spacing: 2px !important;
  font-weight: 600 !important;
}
body.v4-page .login-perm-row {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  color: var(--v4-text-2) !important;
}
body.v4-page .pcheck { color: var(--v4-amber) !important; }

/* — Boutons généraux (btn-*) — */
body.v4-page .btn {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: .3px !important;
  text-transform: none !important;
  font-size: 13.5px !important;
  border-radius: 999px !important;
  clip-path: none !important;
  padding: 12px 22px !important;
  transition: all .25s ease !important;
}
body.v4-page .btn-acc {
  background: var(--v4-text) !important;
  color: var(--v4-bg) !important;
  border: 1px solid var(--v4-text) !important;
}
body.v4-page .btn-acc:hover {
  background: var(--v4-amber) !important;
  color: var(--v4-text) !important;
  border-color: var(--v4-amber) !important;
  box-shadow: 0 8px 24px rgba(224,32,32,.35) !important;
}
body.v4-page .btn-ghost {
  background: rgba(255,255,255,.02) !important;
  border: 1px solid var(--v4-line-2) !important;
  color: var(--v4-text) !important;
}
body.v4-page .btn-ghost:hover {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.3) !important;
}
body.v4-page .btn-disc {
  background: #5865f2 !important;
  color: #fff !important;
  border: 1px solid #5865f2 !important;
}
body.v4-page .btn-disc:hover {
  background: #4752c4 !important;
  box-shadow: 0 8px 24px rgba(88,101,242,.4) !important;
}
body.v4-page .btn-success {
  background: #22c55e !important;
  color: #fff !important;
  border: 1px solid #22c55e !important;
}
body.v4-page .btn-success:hover {
  background: #16a34a !important;
  box-shadow: 0 8px 24px rgba(34,197,94,.35) !important;
}
body.v4-page .btn-danger {
  background: rgba(239,68,68,.15) !important;
  color: #f87171 !important;
  border: 1px solid rgba(239,68,68,.4) !important;
}
body.v4-page .btn-danger:hover {
  background: #ef4444 !important;
  color: #fff !important;
}
body.v4-page .btn-lg { padding: 14px 26px !important; font-size: 14px !important; height: auto !important; }
body.v4-page .btn-xl { padding: 17px 32px !important; font-size: 15px !important; height: auto !important; }
body.v4-page .btn-block { width: 100% !important; justify-content: center !important; }

/* — Eyebrow / grad-text — */
body.v4-page .eyebrow {
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: var(--v4-amber) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 1rem !important;
}
body.v4-page .eyebrow::before {
  content: '' !important;
  width: 16px !important;
  height: 1px !important;
  background: var(--v4-amber) !important;
}
body.v4-page .grad-text {
  background: linear-gradient(135deg, var(--v4-text), var(--v4-amber)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

/* — QCM card — */
body.v4-page .qcm-head h1,
body.v4-page .result-title,
body.v4-page .form-head h1 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -1px !important;
  text-transform: none !important;
  color: var(--v4-text) !important;
}
body.v4-page .qmeta {
  font-family: 'Inter', sans-serif !important;
  color: var(--v4-text-3) !important;
  font-size: 13px !important;
}
body.v4-page .qmeta i { color: var(--v4-amber) !important; }
body.v4-page .timer-wrap { margin: 0 auto 1.5rem !important; }
body.v4-page .t-num {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  color: var(--v4-text) !important;
}
body.v4-page .t-fill { stroke: var(--v4-amber) !important; }
body.v4-page .qprog .qpbar {
  background: rgba(255,255,255,.06) !important;
  border-radius: 999px !important;
}
body.v4-page .qpfill {
  background: linear-gradient(90deg, var(--v4-amber-2), var(--v4-amber)) !important;
}
body.v4-page .qlabel {
  font-family: 'Inter', sans-serif !important;
  color: var(--v4-text-3) !important;
  font-size: 12px !important;
}
body.v4-page .q-card {
  background: var(--v4-card) !important;
  border: 1px solid var(--v4-line) !important;
  border-radius: 16px !important;
  padding: 2rem !important;
}
body.v4-page .q-badge {
  background: var(--v4-amber-soft) !important;
  border: 1px solid rgba(224,32,32,.3) !important;
  border-radius: 999px !important;
  color: var(--v4-amber) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 1.5px !important;
}
body.v4-page .q-text {
  font-family: 'Inter', sans-serif !important;
  color: var(--v4-text) !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
}
body.v4-page .opt {
  background: rgba(255,255,255,.025) !important;
  border: 1px solid var(--v4-line) !important;
  border-radius: 12px !important;
  font-family: 'Inter', sans-serif !important;
  color: var(--v4-text-2) !important;
  font-weight: 500 !important;
  padding: 14px 18px !important;
}
body.v4-page .opt:hover:not(:disabled) {
  background: rgba(255,255,255,.05) !important;
  border-color: var(--v4-line-2) !important;
  transform: translateX(4px) !important;
}
body.v4-page .opt.correct {
  background: rgba(34,197,94,.1) !important;
  border-color: #22c55e !important;
  color: var(--v4-text) !important;
}
body.v4-page .opt.wrong {
  background: rgba(239,68,68,.1) !important;
  border-color: #ef4444 !important;
  color: var(--v4-text) !important;
}
body.v4-page .opt.reveal {
  background: rgba(34,197,94,.06) !important;
  border-color: #22c55e !important;
  color: var(--v4-text) !important;
}
body.v4-page .opt-letter {
  background: rgba(255,255,255,.08) !important;
  border-radius: 8px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
}
body.v4-page .expl {
  background: var(--v4-amber-soft) !important;
  border-left-color: var(--v4-amber) !important;
  color: var(--v4-text-2) !important;
  font-family: 'Inter', sans-serif !important;
  border-radius: 0 12px 12px 0 !important;
}

/* — Result ring + boxes — */
body.v4-page .result-ring-wrap { margin: 0 auto 1.5rem; position: relative; width: 160px; height: 160px; }
body.v4-page .result-ring-wrap svg { position: absolute; inset: 0; }
body.v4-page .result-inner {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
body.v4-page .result-score {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 56px !important;
  color: var(--v4-text) !important;
  line-height: 1;
}
body.v4-page .result-denom {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  color: var(--v4-text-3) !important;
}
body.v4-page .result-sub {
  font-family: 'Inter', sans-serif !important;
  color: var(--v4-text-3) !important;
  font-weight: 400 !important;
}
body.v4-page .result-box {
  background: var(--v4-card) !important;
  border: 1px solid var(--v4-line) !important;
  border-radius: 14px !important;
  padding: 1.5rem !important;
}
body.v4-page .result-box h3 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  color: var(--v4-text) !important;
}
body.v4-page .step-row {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 8px 0;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  color: var(--v4-text-2);
  line-height: 1.6;
}
body.v4-page .step-n {
  width: 24px; height: 24px;
  border-radius: 999px;
  background: var(--v4-amber-soft);
  color: var(--v4-amber);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 11px;
  flex-shrink: 0;
}

/* — Form (candidature) — */
body.v4-page .form-section {
  background: var(--v4-card) !important;
  border: 1px solid var(--v4-line) !important;
  border-radius: 14px !important;
  padding: 1.75rem !important;
  margin-bottom: 1rem !important;
}
body.v4-page .form-section-title {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  color: var(--v4-text) !important;
  text-transform: none !important;
  letter-spacing: .3px !important;
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 1.25rem !important;
  padding-bottom: 1rem !important;
  border-bottom: 1px solid var(--v4-line) !important;
}
body.v4-page .form-section-title i {
  color: var(--v4-amber) !important;
  width: 18px;
}
body.v4-page .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}
body.v4-page .form-row.full { grid-template-columns: 1fr; }
body.v4-page .form-group { display: flex; flex-direction: column; gap: 6px; }
body.v4-page .form-label {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--v4-text-2) !important;
  letter-spacing: .3px !important;
  text-transform: none !important;
}
body.v4-page .form-label span { color: var(--v4-text-4) !important; }
body.v4-page .form-input,
body.v4-page .form-select,
body.v4-page .form-textarea {
  background: rgba(255,255,255,.025) !important;
  border: 1px solid var(--v4-line) !important;
  border-radius: 10px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  color: var(--v4-text) !important;
  padding: 11px 14px !important;
  transition: all .2s ease !important;
}
body.v4-page .form-input:focus,
body.v4-page .form-select:focus,
body.v4-page .form-textarea:focus {
  border-color: var(--v4-amber) !important;
  background: rgba(255,255,255,.04) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(224,32,32,.12) !important;
}
body.v4-page .form-input::placeholder,
body.v4-page .form-textarea::placeholder { color: var(--v4-text-4) !important; }
body.v4-page .form-select option { background: var(--v4-bg-2); color: var(--v4-text); }
body.v4-page .form-textarea { min-height: 110px; line-height: 1.6 !important; resize: vertical; }
body.v4-page .char-count {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  color: var(--v4-text-4) !important;
  text-align: right;
  margin-top: 4px;
}
body.v4-page .form-check {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 0;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  color: var(--v4-text-2) !important;
  cursor: pointer;
  line-height: 1.55;
}
body.v4-page .form-check input[type=checkbox] {
  margin-top: 3px;
  accent-color: var(--v4-amber);
  width: 15px; height: 15px;
  flex-shrink: 0;
}

/* — Page wrap (whitelist conserve sa structure) — */
body.v4-page .page-wrap {
  padding-top: 72px;
  min-height: 100vh;
  background: var(--v4-bg);
}

/* ════════════════════════════════════════════════
   ── OVERRIDES v4 pour admin.html ──
   ════════════════════════════════════════════════ */

body.v4-page .admin-shell,
body.v4-page .admin-wrap {
  background: var(--v4-bg) !important;
}
body.v4-page .admin-sidebar {
  background: var(--v4-bg-2) !important;
  border-right: 1px solid var(--v4-line) !important;
  padding: 1.5rem 1rem !important;
}
body.v4-page .admin-content {
  padding: 2rem 2.5rem !important;
  background: var(--v4-bg);
}
body.v4-page .adm-section-label,
body.v4-page .adm-label {
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--v4-text-3) !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
}
body.v4-page .adm-nav-item {
  font-family: 'Inter', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--v4-text-2) !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  margin: 2px 0 !important;
  border: 1px solid transparent !important;
  background: none !important;
}
body.v4-page .adm-nav-item:hover {
  background: rgba(255,255,255,.04) !important;
  color: var(--v4-text) !important;
  border-color: var(--v4-line) !important;
}
body.v4-page .adm-nav-item.active {
  background: var(--v4-amber-soft) !important;
  color: var(--v4-amber) !important;
  border-color: rgba(224,32,32,.3) !important;
}
body.v4-page .adm-nav-item i {
  width: 16px !important;
  color: var(--v4-amber) !important;
}
body.v4-page .adm-count {
  background: var(--v4-amber) !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  padding: 2px 8px !important;
  font-weight: 600 !important;
  clip-path: none !important;
}
body.v4-page .adm-count.zero {
  background: rgba(255,255,255,.08) !important;
  color: var(--v4-text-3) !important;
}
body.v4-page .admin-panel-title {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 26px !important;
  letter-spacing: -.5px !important;
  text-transform: none !important;
  color: var(--v4-text) !important;
  margin-bottom: 1.5rem !important;
}
body.v4-page .admin-panel-title i { color: var(--v4-amber) !important; }

/* Stats dashboard */
body.v4-page .adm-stats {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
  gap: 12px !important;
  margin-bottom: 2rem !important;
}
body.v4-page .adm-stat {
  background: var(--v4-card) !important;
  border: 1px solid var(--v4-line) !important;
  border-left: 3px solid var(--v4-amber) !important;
  border-radius: 12px !important;
  padding: 1.25rem 1.5rem !important;
  position: relative;
  transition: all .25s ease !important;
}
body.v4-page .adm-stat:hover {
  background: var(--v4-card-hov) !important;
  transform: translateY(-2px);
}
body.v4-page .adm-stat::before { display: none !important; }
body.v4-page .adm-stat-n {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 36px !important;
  color: var(--v4-text) !important;
  -webkit-text-fill-color: var(--v4-text) !important;
  background: none !important;
  letter-spacing: -1px !important;
}
body.v4-page .adm-stat-l {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  color: var(--v4-text-3) !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}
body.v4-page .adm-stat-icon { color: var(--v4-amber) !important; opacity: .15 !important; }

/* Cand cards admin */
body.v4-page .cand-card {
  background: var(--v4-card) !important;
  border: 1px solid var(--v4-line) !important;
  border-left: 2px solid transparent !important;
  border-radius: 12px !important;
  margin-bottom: 10px !important;
  overflow: hidden !important;
  transition: all .25s ease !important;
}
body.v4-page .cand-card:hover {
  border-left-color: var(--v4-amber) !important;
  background: var(--v4-card-hov) !important;
}
body.v4-page .cand-header {
  padding: 1rem 1.25rem !important;
  border-bottom: 1px solid var(--v4-line) !important;
}
body.v4-page .cand-avatar {
  background: var(--v4-amber-soft) !important;
  color: var(--v4-amber) !important;
  border-radius: 999px !important;
  clip-path: none !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
}
body.v4-page .cand-name {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  letter-spacing: 0 !important;
  color: var(--v4-text) !important;
}
body.v4-page .cand-meta {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  color: var(--v4-text-3) !important;
}
body.v4-page .score-chip {
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  border-radius: 999px !important;
  clip-path: none !important;
  padding: 4px 12px !important;
}
body.v4-page .sp { background: rgba(34,197,94,.12) !important; color: #4ade80 !important; border: 1px solid rgba(34,197,94,.3) !important; }
body.v4-page .sf { background: rgba(239,68,68,.12) !important; color: #f87171 !important; border: 1px solid rgba(239,68,68,.3) !important; }

body.v4-page .filter-bar {
  background: var(--v4-card) !important;
  border: 1px solid var(--v4-line) !important;
  border-radius: 999px !important;
  padding: 4px !important;
  display: inline-flex !important;
  width: auto !important;
  margin-right: 12px !important;
}
body.v4-page .filter-btn {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border-radius: 999px !important;
  clip-path: none !important;
  padding: 6px 14px !important;
  border: none !important;
  background: none !important;
  color: var(--v4-text-3) !important;
}
body.v4-page .filter-btn:hover {
  background: rgba(255,255,255,.04) !important;
  color: var(--v4-text) !important;
}
body.v4-page .filter-btn.active {
  background: var(--v4-amber) !important;
  color: #fff !important;
}
body.v4-page .search-input {
  background: var(--v4-card) !important;
  border: 1px solid var(--v4-line) !important;
  border-radius: 999px !important;
  font-family: 'Inter', sans-serif !important;
  padding: 8px 16px !important;
  color: var(--v4-text) !important;
  font-size: 13px !important;
}
body.v4-page .search-input:focus {
  border-color: var(--v4-amber) !important;
  box-shadow: 0 0 0 3px rgba(224,32,32,.12) !important;
}

body.v4-page .cf,
body.v4-page .ctf {
  background: rgba(255,255,255,.025) !important;
  border: 1px solid var(--v4-line) !important;
  border-radius: 10px !important;
  padding: .75rem 1rem !important;
}
body.v4-page .ctf { border-left: 2px solid var(--v4-amber) !important; }
body.v4-page .cfl,
body.v4-page .ctf-label {
  font-family: 'Inter', sans-serif !important;
  font-size: 10px !important;
  color: var(--v4-text-3) !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  margin-bottom: 4px !important;
}
body.v4-page .ctf-label { color: var(--v4-amber) !important; }
body.v4-page .cfv {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  color: var(--v4-text) !important;
  font-weight: 500 !important;
}
body.v4-page .ctf-val {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  color: var(--v4-text-2) !important;
  line-height: 1.6 !important;
}

body.v4-page .cand-actions {
  padding-top: 1rem !important;
  border-top: 1px solid var(--v4-line) !important;
  margin-top: 1rem !important;
}

body.v4-page .empty-state {
  background: var(--v4-card) !important;
  border: 1px dashed var(--v4-line) !important;
  border-radius: 14px !important;
  padding: 3.5rem 2rem !important;
  color: var(--v4-text-3) !important;
  text-align: center;
}
body.v4-page .empty-state .icon { font-size: 40px; opacity: .35; margin-bottom: .75rem; }

/* — Modal — */
body.v4-page .modal-overlay {
  background: rgba(0,0,0,.85) !important;
  backdrop-filter: blur(8px) !important;
}
body.v4-page .modal,
body.v4-page .modal-box {
  background: var(--v4-bg-2) !important;
  border: 1px solid var(--v4-line) !important;
  border-top: 3px solid var(--v4-amber) !important;
  border-radius: 18px !important;
  padding: 2rem !important;
  clip-path: none !important;
  max-width: 500px !important;
}
body.v4-page .modal-box h3,
body.v4-page #modal-title {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -.3px !important;
  text-transform: none !important;
  font-size: 20px !important;
  color: var(--v4-text) !important;
}
body.v4-page .modal-textarea {
  background: rgba(255,255,255,.03) !important;
  border: 1px solid var(--v4-line) !important;
  border-radius: 10px !important;
  font-family: 'Inter', sans-serif !important;
  color: var(--v4-text) !important;
  padding: 12px 14px !important;
}
body.v4-page .modal-textarea:focus {
  border-color: var(--v4-amber) !important;
  box-shadow: 0 0 0 3px rgba(224,32,32,.12) !important;
}
body.v4-page .modal-label {
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  font-weight: 600 !important;
  color: var(--v4-text-3) !important;
}

/* — No access / Not logged screens — */
body.v4-page .no-access {
  background: var(--v4-bg);
}
body.v4-page .login-box {
  background: var(--v4-bg-2);
  border: 1px solid var(--v4-line);
  border-top: 2px solid var(--v4-amber);
  border-radius: 18px;
  padding: 2.5rem;
  max-width: 460px;
}
body.v4-page .login-logo {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 44px !important;
  letter-spacing: -1px !important;
  margin-bottom: 1.5rem;
}

/* ════════════════════════════════════════════════
   ── OVERRIDES v4 pour WHITELIST & ADMIN ──
   ════════════════════════════════════════════════ */

/* === LOGIN SCREEN === */
body.v4-page .login-center {
  display: flex; align-items: center; justify-content: center;
  min-height: calc(100vh - 72px);
  padding: 2rem;
}
body.v4-page .login-card,
body.v4-page .login-box {
  background: var(--v4-card) !important;
  border: 1px solid var(--v4-line) !important;
  border-top: none !important;
  border-radius: 18px !important;
  padding: 3rem 2.5rem !important;
  max-width: 480px;
  width: 100%;
  position: relative;
  overflow: hidden;
}
body.v4-page .login-card::before,
body.v4-page .login-box::before {
  content: '';
  position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  width: 60%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--v4-amber), transparent);
}
body.v4-page .login-card::after,
body.v4-page .login-box::after {
  display: none !important;
}
body.v4-page .login-logo-text,
body.v4-page .login-logo {
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
  font-size: 48px !important;
  letter-spacing: 2px !important;
  color: var(--v4-amber) !important;
  text-shadow: 0 0 30px rgba(224,32,32,.4) !important;
  animation: none !important;
  margin-bottom: .25rem !important;
}
body.v4-page .grad-text {
  background: linear-gradient(135deg, var(--v4-amber), var(--v4-amber-2)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
body.v4-page .login-sub {
  font-family: 'Inter', sans-serif !important;
  font-size: 13.5px !important;
  color: var(--v4-text-3) !important;
  font-weight: 400 !important;
  line-height: 1.65;
  margin-bottom: 1.75rem;
}
body.v4-page .login-perms-box {
  background: rgba(255,255,255,.03) !important;
  border: 1px solid var(--v4-line) !important;
  border-radius: 12px !important;
  padding: 1.1rem 1.25rem !important;
  text-align: left;
  margin-bottom: 1.75rem;
}
body.v4-page .login-perms-title {
  font-family: 'Inter', sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 2px !important;
  color: var(--v4-text-3) !important;
  margin-bottom: .75rem;
}
body.v4-page .login-perm-row {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  color: var(--v4-text-2);
  padding: 4px 0;
  display: flex; align-items: center; gap: 9px;
}
body.v4-page .pcheck { color: #22c55e !important; }

/* === BUTTONS LEGACY === */
body.v4-page .btn {
  border-radius: 999px !important;
  clip-path: none !important;
  font-family: 'Inter', sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  padding: 10px 22px !important;
  height: auto !important;
  border: 1px solid transparent;
  transition: all .25s ease;
}
body.v4-page .btn-acc {
  background: var(--v4-amber) !important;
  color: #fff !important;
  border-color: var(--v4-amber) !important;
}
body.v4-page .btn-acc:hover {
  background: var(--v4-amber-2) !important;
  border-color: var(--v4-amber-2) !important;
  box-shadow: 0 8px 24px rgba(224,32,32,.4);
  transform: translateY(-1px);
}
body.v4-page .btn-success {
  background: rgba(34,197,94,.12) !important;
  border: 1px solid rgba(34,197,94,.35) !important;
  color: #4ade80 !important;
}
body.v4-page .btn-success:hover {
  background: rgba(34,197,94,.25) !important;
}
body.v4-page .btn-danger {
  background: rgba(239,68,68,.1) !important;
  border: 1px solid rgba(239,68,68,.35) !important;
  color: #f87171 !important;
}
body.v4-page .btn-danger:hover { background: rgba(239,68,68,.22) !important; }
body.v4-page .btn-ghost {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid var(--v4-line-2) !important;
  color: var(--v4-text-2) !important;
}
body.v4-page .btn-ghost:hover {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.25) !important;
  color: var(--v4-text) !important;
}
body.v4-page .btn-disc {
  background: #5865f2 !important;
  color: #fff !important;
  border: 1px solid #5865f2 !important;
}
body.v4-page .btn-disc:hover {
  background: #4752c4 !important;
  border-color: #4752c4 !important;
  box-shadow: 0 8px 24px rgba(88,101,242,.4);
}
body.v4-page .btn-lg { padding: 13px 28px !important; font-size: 13px !important; }
body.v4-page .btn-block { width: 100%; justify-content: center; }

/* === MODAL === */
body.v4-page .modal-overlay {
  background: rgba(0,0,0,.85) !important;
  backdrop-filter: blur(8px);
}
body.v4-page .modal,
body.v4-page .modal-box {
  background: var(--v4-card) !important;
  border: 1px solid var(--v4-line) !important;
  border-top: none !important;
  border-radius: 18px !important;
  padding: 2rem !important;
  max-width: 480px; width: 100%;
  clip-path: none !important;
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
}
body.v4-page .modal::before,
body.v4-page .modal-box::before {
  content: '';
  position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  width: 50%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--v4-amber), transparent);
}
body.v4-page .modal h3,
body.v4-page .modal-box h3 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: -.3px !important;
  font-size: 20px !important;
  margin-bottom: .5rem;
  color: var(--v4-text) !important;
}
body.v4-page .modal p,
body.v4-page .modal-box p {
  font-family: 'Inter', sans-serif !important;
  color: var(--v4-text-3) !important;
  font-size: 13.5px !important;
  line-height: 1.65;
}
body.v4-page .modal p strong,
body.v4-page .modal-box p strong { color: var(--v4-text) !important; }
body.v4-page .modal-textarea {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid var(--v4-line) !important;
  border-radius: 10px !important;
  padding: .85rem 1rem !important;
  color: var(--v4-text) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  margin-bottom: 1rem;
}
body.v4-page .modal-textarea:focus {
  border-color: rgba(224,32,32,.4) !important;
  outline: none;
}
body.v4-page .modal-label {
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 1.5px !important;
  color: var(--v4-text-3) !important;
}

/* === QCM === */
body.v4-page .qcm-head h1 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -1.5px !important;
  text-transform: none !important;
}
body.v4-page .qcm-meta .qmeta {
  font-family: 'Inter', sans-serif !important;
  color: var(--v4-text-3) !important;
  font-size: 12.5px !important;
}
body.v4-page .timer-wrap .t-fill { stroke: var(--v4-amber) !important; }
body.v4-page .timer-wrap .t-num,
body.v4-page .timer-num {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
}
body.v4-page .qprog .qpbar,
body.v4-page .qprog-track {
  background: rgba(255,255,255,.05) !important;
  border-radius: 999px !important;
  overflow: hidden;
  height: 4px;
}
body.v4-page .qpfill,
body.v4-page .qprog-fill {
  background: linear-gradient(90deg, var(--v4-amber-2), var(--v4-amber)) !important;
}
body.v4-page .qlabel,
body.v4-page .qprog-label {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  color: var(--v4-text-3) !important;
  letter-spacing: .3px !important;
  text-transform: none !important;
  font-weight: 500 !important;
}
body.v4-page .q-card {
  background: var(--v4-card) !important;
  border: 1px solid var(--v4-line) !important;
  border-top: none !important;
  border-radius: 18px !important;
  padding: 2rem !important;
}
body.v4-page .q-badge,
body.v4-page .q-cat-badge {
  background: var(--v4-amber-soft) !important;
  border: 1px solid rgba(224,32,32,.3) !important;
  color: var(--v4-amber) !important;
  border-radius: 999px !important;
  clip-path: none !important;
  font-family: 'Inter', sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 10px !important;
  padding: 4px 12px !important;
}
body.v4-page .q-text {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -.2px !important;
  text-transform: none !important;
  color: var(--v4-text) !important;
}
body.v4-page .opt {
  background: rgba(255,255,255,.03) !important;
  border: 1px solid var(--v4-line) !important;
  border-left: 2px solid transparent !important;
  border-radius: 12px !important;
  padding: 1rem 1.25rem !important;
  font-family: 'Inter', sans-serif !important;
  color: var(--v4-text-2) !important;
  font-weight: 500 !important;
  transition: all .2s ease;
}
body.v4-page .opt:hover:not(:disabled) {
  background: rgba(255,255,255,.06) !important;
  border-color: var(--v4-line-2) !important;
  transform: translateX(4px);
}
body.v4-page .opt-letter {
  background: rgba(255,255,255,.07) !important;
  border-radius: 8px !important;
  clip-path: none !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  border: 1px solid var(--v4-line) !important;
}
body.v4-page .opt.correct,
body.v4-page .opt.reveal {
  background: rgba(34,197,94,.08) !important;
  border-color: rgba(34,197,94,.3) !important;
  border-left-color: #22c55e !important;
}
body.v4-page .opt.wrong {
  background: rgba(239,68,68,.08) !important;
  border-color: rgba(239,68,68,.3) !important;
  border-left-color: #ef4444 !important;
}
body.v4-page .expl {
  background: rgba(224,32,32,.05) !important;
  border-left: 3px solid var(--v4-amber) !important;
  border-radius: 0 10px 10px 0 !important;
  font-family: 'Inter', sans-serif !important;
  color: var(--v4-text-2) !important;
}

/* === RESULT === */
body.v4-page .result-title {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -1.5px !important;
  text-transform: none !important;
  color: var(--v4-text) !important;
}
body.v4-page .result-sub {
  font-family: 'Inter', sans-serif !important;
  color: var(--v4-text-3) !important;
}
body.v4-page .result-box {
  background: var(--v4-card) !important;
  border: 1px solid var(--v4-line) !important;
  border-radius: 14px !important;
}
body.v4-page .result-score,
body.v4-page .result-score-num {
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
  color: var(--v4-text) !important;
}
body.v4-page .result-denom,
body.v4-page .result-score-den {
  color: var(--v4-text-3) !important;
}

/* === FORM === */
body.v4-page .form-wrap { padding-bottom: 6rem; }
body.v4-page .form-head h1 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -1px !important;
  text-transform: none !important;
}
body.v4-page .form-head p {
  font-family: 'Inter', sans-serif !important;
  color: var(--v4-text-3) !important;
}
body.v4-page .form-section,
body.v4-page .form-block {
  background: var(--v4-card) !important;
  border: 1px solid var(--v4-line) !important;
  border-left: none !important;
  border-radius: 16px !important;
  padding: 1.75rem !important;
  margin-bottom: 16px;
}
body.v4-page .form-section-title,
body.v4-page .form-block-title {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: -.2px !important;
  text-transform: none !important;
  color: var(--v4-amber) !important;
  margin-bottom: 1.25rem;
  display: flex; align-items: center; gap: 10px;
}
body.v4-page .form-row,
body.v4-page .form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
body.v4-page .form-grid.full,
body.v4-page .form-row.full { grid-template-columns: 1fr; }
body.v4-page .form-label {
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .5px !important;
  text-transform: uppercase !important;
  color: var(--v4-text-3) !important;
  margin-bottom: 6px;
}
body.v4-page .form-input,
body.v4-page .form-textarea,
body.v4-page .form-select {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid var(--v4-line) !important;
  border-radius: 10px !important;
  padding: .85rem 1rem !important;
  color: var(--v4-text) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13.5px !important;
  outline: none;
  width: 100%;
  transition: all .2s ease;
}
body.v4-page .form-input:focus,
body.v4-page .form-textarea:focus,
body.v4-page .form-select:focus {
  border-color: rgba(224,32,32,.4) !important;
  background: rgba(224,32,32,.03) !important;
}
body.v4-page .form-input::placeholder,
body.v4-page .form-textarea::placeholder {
  color: var(--v4-text-4) !important;
}
body.v4-page .form-textarea { min-height: 110px; resize: vertical; line-height: 1.65; }
body.v4-page .form-check {
  display: flex; align-items: flex-start; gap: 10px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  color: var(--v4-text-2);
  line-height: 1.55;
  margin-bottom: 10px;
}
body.v4-page .form-check input[type=checkbox] {
  accent-color: var(--v4-amber);
  width: 16px; height: 16px;
  margin-top: 2px;
}
body.v4-page .char-count {
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  color: var(--v4-text-4) !important;
  text-align: right;
  margin-top: 4px;
}

/* === STATUS / READY === */
body.v4-page .status-wrap,
body.v4-page .ready-wrap {
  max-width: 640px;
  margin: 0 auto;
  padding: 4rem 2rem;
  text-align: center;
}
body.v4-page .status-icon,
body.v4-page .ready-icon { font-size: 56px; margin-bottom: 1.25rem; }
body.v4-page .status-title {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -1.5px !important;
  text-transform: none !important;
  font-size: clamp(32px, 5vw, 48px) !important;
}
body.v4-page .status-sub {
  font-family: 'Inter', sans-serif !important;
  color: var(--v4-text-3) !important;
}
body.v4-page .ready-rules {
  background: var(--v4-card) !important;
  border: 1px solid var(--v4-line) !important;
  border-left: 3px solid var(--v4-amber) !important;
  border-radius: 0 14px 14px 0 !important;
  padding: 1.25rem 1.5rem !important;
  max-width: 480px;
  margin: 1.75rem auto;
  text-align: left;
}
body.v4-page .ready-rule-row {
  font-family: 'Inter', sans-serif !important;
  color: var(--v4-text-2) !important;
  font-size: 13.5px;
  padding: 7px 0;
  border-bottom: 1px solid var(--v4-line);
}
body.v4-page .ready-rule-row:last-child { border-bottom: none; }

/* === ADMIN SIDEBAR === */
body.v4-page .admin-shell,
body.v4-page .admin-wrap { background: var(--v4-bg); }
body.v4-page .admin-sidebar {
  background: var(--v4-bg-2) !important;
  border-right: 1px solid var(--v4-line) !important;
  padding: 1.75rem 1rem !important;
}
body.v4-page .adm-section-label,
body.v4-page .adm-label {
  font-family: 'Inter', sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  color: var(--v4-text-3) !important;
}
body.v4-page .adm-nav-item {
  font-family: 'Inter', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  border-radius: 8px !important;
  margin: 2px 0 !important;
  padding: 10px 12px !important;
  color: var(--v4-text-2) !important;
  border-left: 2px solid transparent !important;
  transition: all .2s ease;
}
body.v4-page .adm-nav-item:hover {
  background: rgba(255,255,255,.04) !important;
  color: var(--v4-text) !important;
  border-left-color: var(--v4-amber) !important;
}
body.v4-page .adm-nav-item.active {
  background: rgba(224,32,32,.08) !important;
  border-left-color: var(--v4-amber) !important;
  color: var(--v4-text) !important;
}
body.v4-page .adm-nav-item i { color: var(--v4-amber) !important; }
body.v4-page .adm-count {
  background: var(--v4-amber) !important;
  color: #fff !important;
  border-radius: 999px !important;
  clip-path: none !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  padding: 2px 9px !important;
  font-size: 10px !important;
}
body.v4-page .adm-count.zero {
  background: rgba(255,255,255,.06) !important;
  color: var(--v4-text-3) !important;
}

/* === ADMIN DASHBOARD === */
body.v4-page .admin-content { padding: 2.5rem 3rem !important; background: var(--v4-bg); }
body.v4-page .admin-panel-title {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 26px !important;
  letter-spacing: -.8px !important;
  text-transform: none !important;
  color: var(--v4-text) !important;
}
body.v4-page .admin-panel-title i { color: var(--v4-amber) !important; }

body.v4-page .adm-stat {
  background: var(--v4-card) !important;
  border: 1px solid var(--v4-line) !important;
  border-left: none !important;
  border-radius: 14px !important;
  padding: 1.25rem 1.5rem !important;
  position: relative;
  overflow: hidden;
  transition: all .25s ease;
}
body.v4-page .adm-stat:hover {
  background: var(--v4-card-hov) !important;
  border-color: var(--v4-line-2) !important;
}
body.v4-page .adm-stat::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--v4-amber);
}
body.v4-page .adm-stat-n {
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -2px !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  color: var(--v4-amber) !important;
  text-shadow: none !important;
  font-size: 38px !important;
}
body.v4-page .adm-stat-l {
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  color: var(--v4-text-3) !important;
}
body.v4-page .adm-stat-icon { display: none !important; }

/* Step rows (guide d'utilisation) */
body.v4-page .step-row {
  display: flex; align-items: flex-start; gap: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  color: var(--v4-text-2);
  padding: 7px 0;
  line-height: 1.6;
}
body.v4-page .step-n {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--v4-amber-soft);
  color: var(--v4-amber);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 12px;
  flex-shrink: 0;
}

/* === ADMIN FILTER BAR === */
body.v4-page .filter-bar { margin-bottom: 1.5rem; }
body.v4-page .filter-btn {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid var(--v4-line) !important;
  border-radius: 999px !important;
  clip-path: none !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: .3px !important;
  text-transform: none !important;
  color: var(--v4-text-3) !important;
  padding: 7px 16px !important;
  transition: all .2s ease;
}
body.v4-page .filter-btn:hover,
body.v4-page .filter-btn.active {
  background: rgba(224,32,32,.1) !important;
  border-color: rgba(224,32,32,.3) !important;
  color: var(--v4-text) !important;
}
body.v4-page .search-input {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid var(--v4-line) !important;
  border-radius: 999px !important;
  padding: 7px 16px !important;
  color: var(--v4-text) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
}
body.v4-page .search-input:focus {
  border-color: rgba(224,32,32,.4) !important;
  outline: none;
}
body.v4-page .search-input::placeholder { color: var(--v4-text-4) !important; }

/* === ADMIN CANDIDATE CARDS === */
body.v4-page .cand-card {
  background: var(--v4-card) !important;
  border: 1px solid var(--v4-line) !important;
  border-left: 2px solid transparent !important;
  border-radius: 14px !important;
  margin-bottom: 10px !important;
  overflow: hidden;
  transition: all .2s ease;
}
body.v4-page .cand-card:hover {
  background: var(--v4-card-hov) !important;
  border-left-color: var(--v4-amber) !important;
}
body.v4-page .cand-header {
  padding: 1.1rem 1.25rem !important;
  border-bottom: none !important;
}
body.v4-page .cand-avatar {
  background: var(--v4-amber-soft) !important;
  color: var(--v4-amber) !important;
  border-radius: 50% !important;
  clip-path: none !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  border: 1px solid rgba(224,32,32,.3);
}
body.v4-page .cand-name {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14.5px !important;
  letter-spacing: -.2px !important;
  color: var(--v4-text) !important;
}
body.v4-page .cand-meta {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  color: var(--v4-text-3) !important;
}
body.v4-page .cand-body {
  padding: 1.25rem !important;
  border-top: 1px solid var(--v4-line) !important;
}
body.v4-page .cand-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  margin-bottom: 1rem;
}
body.v4-page .cand-field,
body.v4-page .cf {
  background: rgba(255,255,255,.025) !important;
  border: 1px solid var(--v4-line) !important;
  border-radius: 10px !important;
  padding: .65rem .85rem !important;
}
body.v4-page .cf-label,
body.v4-page .cfl {
  font-family: 'Inter', sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: var(--v4-text-3) !important;
  margin-bottom: 3px;
}
body.v4-page .cf-val,
body.v4-page .cfv {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--v4-text) !important;
}
body.v4-page .cand-text-field,
body.v4-page .ctf {
  background: rgba(255,255,255,.025) !important;
  border: 1px solid var(--v4-line) !important;
  border-left: 2px solid rgba(224,32,32,.4) !important;
  border-radius: 0 10px 10px 0 !important;
  padding: .85rem 1rem !important;
  margin-bottom: 8px;
}
body.v4-page .ctf-label {
  font-family: 'Inter', sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: var(--v4-amber) !important;
}
body.v4-page .ctf-val {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  color: var(--v4-text-2) !important;
  line-height: 1.65;
}
body.v4-page .cand-actions {
  padding-top: 1rem;
  border-top: 1px solid var(--v4-line);
  margin-top: 1rem;
}
body.v4-page .score-chip {
  border-radius: 999px !important;
  clip-path: none !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: .2px !important;
  font-size: 11px !important;
  padding: 3px 11px !important;
}
body.v4-page .score-pass,
body.v4-page .sp {
  background: rgba(34,197,94,.12) !important;
  color: #4ade80 !important;
  border: 1px solid rgba(34,197,94,.3) !important;
}
body.v4-page .score-fail,
body.v4-page .sf {
  background: rgba(239,68,68,.12) !important;
  color: #f87171 !important;
  border: 1px solid rgba(239,68,68,.3) !important;
}

/* === EMPTY STATE === */
body.v4-page .empty-state {
  padding: 4rem 2rem !important;
  color: var(--v4-text-3) !important;
  text-align: center;
  font-family: 'Inter', sans-serif;
}
body.v4-page .empty-state .icon { opacity: .35; }
body.v4-page .empty-state p { font-size: 14px; }

/* === LOG === */
body.v4-page .log-item {
  padding: .75rem 0 !important;
  border-bottom: 1px solid var(--v4-line) !important;
}
body.v4-page .log-dot {
  border-radius: 50% !important;
  clip-path: none !important;
}
body.v4-page .log-dot.accept { background: #22c55e !important; }
body.v4-page .log-dot.refuse { background: #ef4444 !important; }
body.v4-page .log-dot.submit { background: #3b82f6 !important; }
body.v4-page .log-txt {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  color: var(--v4-text-2) !important;
  line-height: 1.5;
}
body.v4-page .log-time {
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  color: var(--v4-text-4) !important;
}

/* === NOTIF === */
body.v4-page .notif {
  background: var(--v4-card) !important;
  border: 1px solid var(--v4-line) !important;
  border-radius: 12px !important;
  clip-path: none !important;
  font-family: 'Inter', sans-serif !important;
}

/* === NO ACCESS === */
body.v4-page .no-access {
  display: flex; align-items: center; justify-content: center;
  min-height: calc(100vh - 72px);
}

/* === RESPONSIVE adjustments === */
@media (max-width: 768px) {
  body.v4-page .form-row,
  body.v4-page .form-grid { grid-template-columns: 1fr !important; }
  body.v4-page .admin-content { padding: 1.5rem !important; }
}

/* ── Détails décoratifs background (corner marks, grille, glow) ── */
.v4-hero::before,
.v4-hero::after { z-index: 0 !important; }
.v4-hero-content,
#splash .sp-content { z-index: 5 !important; }

/* Corner marks (croix d'angle décoratives) */
.v4-corner-mark {
  position: absolute;
  width: 18px; height: 18px;
  opacity: .35;
  z-index: 1;
  pointer-events: none;
}
.v4-corner-mark::before,
.v4-corner-mark::after {
  content: '';
  position: absolute;
  background: var(--v4-amber);
}
.v4-corner-mark::before { left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%); }
.v4-corner-mark::after  { top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-50%); }
.v4-corner-mark.tl { top: 6rem; left: 2.5rem; }
.v4-corner-mark.tr { top: 6rem; right: 2.5rem; }
.v4-corner-mark.bl { bottom: 4rem; left: 2.5rem; }
.v4-corner-mark.br { bottom: 4rem; right: 2.5rem; }

/* Grille fine en fond (très subtile) */
.v4-grid-bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 80%);
  z-index: 0;
}

/* Glow rouge animé qui pulse lentement */
@keyframes v4GlowPulse {
  0%, 100% { opacity: .35; transform: scale(1); }
  50%      { opacity: .55; transform: scale(1.08); }
}
.v4-glow-red {
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(224,32,32,.10) 0%, rgba(224,32,32,0) 65%);
  pointer-events: none;
  animation: v4GlowPulse 8s ease-in-out infinite;
  z-index: 0;
  filter: blur(20px);
}
.v4-glow-red.tl { top: -100px; left: -100px; }
.v4-glow-red.br { bottom: -150px; right: -150px; animation-delay: 4s; }

/* Cross hair sniper (petit + au centre + cercle) */
.v4-crosshair {
  position: absolute;
  width: 100px; height: 100px;
  opacity: .12;
  pointer-events: none;
  z-index: 0;
}
.v4-crosshair::before,
.v4-crosshair::after {
  content: '';
  position: absolute;
  background: var(--v4-text);
}
.v4-crosshair::before { left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%); }
.v4-crosshair::after  { top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-50%); }
.v4-crosshair .ring {
  position: absolute; inset: 25%;
  border: 1px solid var(--v4-text);
  border-radius: 50%;
}

/* Noise pattern overlay (très discret) */
.v4-noise {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  pointer-events: none;
  opacity: .65;
  mix-blend-mode: overlay;
  z-index: 1;
}

/* Scan-line horizontale fine (presque invisible) */
.v4-scanline {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.02) 1px, transparent 2px);
  background-size: 100% 3px;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: overlay;
}

/* Tag/badge "label" décoratif coin (style codes serveur) */
.v4-corner-label {
  position: absolute;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--v4-text-4);
  letter-spacing: 2px;
  text-transform: uppercase;
  z-index: 2;
  pointer-events: none;
}
.v4-corner-label::before {
  content: ''; display: inline-block;
  width: 8px; height: 1px;
  background: var(--v4-amber);
  margin-right: 8px;
  vertical-align: middle;
}

/* ── Marquee scrolling (annonces serveur) — élément distinctif ── */
.v4-marquee {
  position: relative;
  padding: 14px 0;
  background: var(--v4-bg-2);
  border-top: 1px solid var(--v4-line);
  border-bottom: 1px solid var(--v4-line);
  overflow: hidden;
  display: flex;
  align-items: center;
}
.v4-marquee::before,
.v4-marquee::after {
  content: '';
  position: absolute; top: 0; bottom: 0;
  width: 80px; z-index: 2;
  pointer-events: none;
}
.v4-marquee::before { left: 0; background: linear-gradient(90deg, var(--v4-bg-2), transparent); }
.v4-marquee::after  { right: 0; background: linear-gradient(270deg, var(--v4-bg-2), transparent); }
.v4-marquee-track {
  display: flex; align-items: center;
  gap: 3rem;
  animation: v4MarqueeScroll 40s linear infinite;
  white-space: nowrap;
  will-change: transform;
}
.v4-marquee-item {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 13px; font-weight: 500;
  color: var(--v4-text-2);
  letter-spacing: .3px;
}
.v4-marquee-item .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--v4-amber);
  flex-shrink: 0;
}
.v4-marquee-item .tag {
  display: inline-block;
  padding: 2px 9px;
  font-size: 10px; font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  background: var(--v4-amber-soft);
  color: var(--v4-amber);
  border-radius: 999px;
}
@keyframes v4MarqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Faction stripe (4 bandeaux colorés horizontaux) — distinctif ── */
.v4-stripe {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--v4-line);
  border-bottom: 1px solid var(--v4-line);
}
.v4-stripe-cell {
  position: relative;
  padding: 1.75rem 1.5rem;
  border-right: 1px solid var(--v4-line);
  background: var(--v4-bg);
  transition: background .3s ease;
  cursor: default;
  overflow: hidden;
}
.v4-stripe-cell:last-child { border-right: none; }
.v4-stripe-cell::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
}
.v4-stripe-cell:nth-child(1)::before { background: #c41e1a; }
.v4-stripe-cell:nth-child(2)::before { background: #c9a449; }
.v4-stripe-cell:nth-child(3)::before { background: #4a6b8a; }
.v4-stripe-cell:nth-child(4)::before { background: #5a3a8c; }
.v4-stripe-cell:hover { background: var(--v4-card); }
.v4-stripe-code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--v4-text-4);
  letter-spacing: 1.5px;
  margin-bottom: .5rem;
}
.v4-stripe-name {
  font-family: 'Inter', sans-serif;
  font-size: 19px;
  font-weight: 600;
  color: var(--v4-text);
  margin-bottom: .25rem;
}
.v4-stripe-desc {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--v4-text-3);
}

/* ── Tag pills (petits chips) ── */
.v4-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.v4-tag {
  display: inline-flex; align-items: center;
  padding: 4px 12px;
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 500;
  letter-spacing: .3px;
  color: var(--v4-text-3);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--v4-line);
  border-radius: 999px;
}

/* ── Asymmetric editorial quote (différent du QA) ── */
.v4-quote-block {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2rem;
  align-items: start;
  padding: 3rem 0;
}
.v4-quote-mark {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 120px;
  line-height: .8;
  color: var(--v4-amber);
  opacity: .65;
}
.v4-quote-text {
  font-family: 'Inter', sans-serif;
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 400;
  line-height: 1.5;
  color: var(--v4-text);
  max-width: 60ch;
}
.v4-quote-cite {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--v4-text-3);
  margin-top: 1.25rem;
  letter-spacing: .5px;
}

/* ── Responsive v4 ── */
@media (max-width: 1024px) {
  .v4-split { grid-template-columns: 1fr; gap: 3rem; }
  .v4-cards,
  .v4-shop-grid,
  .v4-stripe { grid-template-columns: repeat(2, 1fr); }
  .v4-stats { grid-template-columns: 1fr; gap: 3rem; }
  .v4-footer-wrap { grid-template-columns: 1fr 1fr; }
  .v4-nav-links { display: none; }
  .v4-stripe-cell { border-right: none; border-bottom: 1px solid var(--v4-line); }
  .v4-stripe-cell:nth-child(2) { border-right: 1px solid var(--v4-line); }
}
@media (max-width: 700px) {
  .v4-nav { padding: 0 1.25rem; height: 64px; }
  .v4-section { padding: 4.5rem 1.5rem; }
  .v4-hero { padding: 7rem 1.5rem 4rem; }
  .v4-cards,
  .v4-shop-grid { grid-template-columns: 1fr; }
  .v4-footer-wrap { grid-template-columns: 1fr; gap: 2rem; }
  .v4-footer-bottom { flex-direction: column; gap: 1rem; text-align: center; }
}

/* ════════════════════════════════════════════════
   ── DESIGN SYSTEM v3 — MODERNE / ÉDITORIAL ──
   Palette cinéma, typo magazine, cartes propres,
   moins de polygones, plus de respiration.
   ════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Playfair+Display:ital,wght@0,400;0,600;1,400;1,600&display=swap');

:root {
  --ink:           #0a0809;
  --ink-2:         #11100f;
  --ink-3:         #181614;
  --paper:         #f5f0e6;
  --paper-muted:   #c9c2b3;
  --paper-dim:     rgba(245,240,230,.55);
  --paper-faint:   rgba(245,240,230,.22);
  --blood:         #8a0d0a;
  --blood-2:       #b71815;
  --gold:          #c9a449;
  --gold-soft:     rgba(201,164,73,.18);
  --steel:         #6b7280;
  --rule:          rgba(245,240,230,.08);
  --rule-strong:   rgba(245,240,230,.18);

  --font-display:  'Anton', 'Bebas Neue', 'Teko', sans-serif;
  --font-editorial:'Playfair Display', Georgia, serif;
}

/* — Eyebrow magazine (à utiliser au-dessus des titres) — */
.v3-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: 4px; text-transform: uppercase;
  color: var(--paper-muted);
  margin-bottom: 1rem;
}
.v3-eyebrow::before {
  content: ''; width: 22px; height: 1px; background: var(--blood-2);
}

/* — Titres éditoriaux — */
.v3-h1 {
  font-family: var(--font-display);
  font-size: clamp(48px, 9vw, 132px);
  font-weight: 400;
  letter-spacing: -1px; line-height: .92;
  text-transform: uppercase;
  color: var(--paper);
}
.v3-h1 em {
  font-family: var(--font-editorial);
  font-style: italic; font-weight: 400;
  text-transform: none; letter-spacing: -2px;
  color: var(--paper);
  display: inline-block;
  margin: 0 .1em;
}
.v3-h1 .accent { color: var(--blood-2); }

.v3-h2 {
  font-family: var(--font-display);
  font-size: clamp(36px, 5.5vw, 72px);
  font-weight: 400; line-height: .95;
  letter-spacing: -.5px;
  text-transform: uppercase;
  color: var(--paper);
}
.v3-h2 em { font-family: var(--font-editorial); font-style: italic; text-transform: none; letter-spacing: -1px; }

.v3-h3 {
  font-family: var(--font-display);
  font-size: 24px; font-weight: 400;
  letter-spacing: 1px; line-height: 1.1;
  text-transform: uppercase;
  color: var(--paper);
}

.v3-lead {
  font-family: 'Inter', sans-serif;
  font-size: 17px; font-weight: 300;
  line-height: 1.7;
  color: var(--paper-dim);
  max-width: 60ch;
}
.v3-lead strong { color: var(--paper); font-weight: 500; }

.v3-body {
  font-family: 'Inter', sans-serif;
  font-size: 15px; font-weight: 400;
  line-height: 1.8;
  color: var(--paper-dim);
}
.v3-body strong { color: var(--paper); font-weight: 500; }
.v3-body em { color: var(--paper-muted); font-style: italic; }

/* — Cartouches/section dividers — */
.v3-section {
  position: relative;
  padding: 7rem 0;
  z-index: 1;
}
.v3-section.tight { padding: 5rem 0; }
.v3-container { max-width: 1280px; margin: 0 auto; padding: 0 2.5rem; }
.v3-container.narrow { max-width: 880px; }

.v3-rule {
  width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--rule-strong) 20%, var(--rule-strong) 80%, transparent);
  margin: 0;
}

/* — Boutons modernes — */
.v3-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 28px;
  font-family: 'Inter', sans-serif;
  font-size: 13px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  border: none; outline: none;
  transition: all .25s cubic-bezier(.4,0,.2,1);
  position: relative; overflow: hidden;
  line-height: 1;
}
.v3-btn-primary {
  background: var(--paper);
  color: var(--ink);
}
.v3-btn-primary:hover {
  background: var(--blood-2);
  color: var(--paper);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(183,24,21,.35);
}
.v3-btn-ghost {
  background: transparent;
  color: var(--paper);
  border: 1px solid var(--rule-strong);
}
.v3-btn-ghost:hover {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}
.v3-btn-dark {
  background: var(--ink-2);
  color: var(--paper);
  border: 1px solid var(--rule-strong);
}
.v3-btn-dark:hover {
  border-color: var(--blood-2);
  color: var(--blood-2);
}
.v3-btn-discord {
  background: #5865f2;
  color: #fff;
}
.v3-btn-discord:hover { background: #4752c4; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(88,101,242,.35); }

/* — Live status badge — */
.live-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 10px;
  background: rgba(34,197,94,.08);
  border: 1px solid rgba(34,197,94,.3);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #4ade80;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34,197,94,.7);
  animation: livePulse 1.8s infinite;
}
@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,.7); }
  70%  { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

/* — Cartes "histoire" éditoriales — */
.v3-card {
  background: var(--ink-2);
  border: 1px solid var(--rule);
  padding: 2rem;
  transition: all .3s ease;
  position: relative;
}
.v3-card:hover {
  border-color: var(--rule-strong);
  background: var(--ink-3);
  transform: translateY(-3px);
}
.v3-card-num {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--blood-2);
  letter-spacing: 3px;
  margin-bottom: 1.5rem;
  display: flex; align-items: center; gap: 10px;
}
.v3-card-num::after { content: ''; flex: 1; height: 1px; background: var(--rule); }
.v3-card-title {
  font-family: var(--font-display);
  font-size: 28px; line-height: 1;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: .85rem;
  color: var(--paper);
}
.v3-card-text {
  font-family: 'Inter', sans-serif;
  font-size: 14px; line-height: 1.7;
  color: var(--paper-dim);
}

/* — Grille pilier (4 colonnes responsive) — */
.v3-pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.v3-pillar {
  background: var(--ink);
  padding: 2.5rem 1.75rem;
  transition: background .3s ease;
  position: relative;
}
.v3-pillar:hover { background: var(--ink-2); }
.v3-pillar i {
  font-size: 24px;
  color: var(--blood-2);
  margin-bottom: 1.5rem;
  display: inline-block;
}
.v3-pillar h4 {
  font-family: var(--font-display);
  font-size: 22px; letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: .65rem;
  color: var(--paper);
  font-weight: 400;
}
.v3-pillar p {
  font-family: 'Inter', sans-serif;
  font-size: 13px; line-height: 1.65;
  color: var(--paper-dim);
}

/* — Districts (cartes grandes) — */
.v3-district {
  position: relative;
  background: var(--ink-2);
  border: 1px solid var(--rule);
  padding: 0;
  overflow: hidden;
  transition: all .35s ease;
  height: 100%;
  display: flex; flex-direction: column;
}
.v3-district:hover {
  border-color: var(--blood);
  transform: translateY(-4px);
}
.v3-district-img {
  height: 200px;
  background: linear-gradient(135deg, rgba(138,13,10,.15), rgba(0,0,0,.5));
  position: relative;
  display: flex; align-items: flex-end;
  padding: 1.25rem;
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}
.v3-district-img::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(245,240,230,.025) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(90deg, rgba(245,240,230,.02) 0 1px, transparent 1px 12px);
}
.v3-district-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--paper-muted);
  letter-spacing: 2px;
  text-transform: uppercase;
  position: relative; z-index: 1;
}
.v3-district-body { padding: 1.5rem 1.75rem 2rem; flex: 1; }
.v3-district h4 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400; letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--paper);
  margin-bottom: .35rem;
}
.v3-district .sub {
  font-family: 'Inter', sans-serif;
  font-size: 12px; color: var(--blood-2);
  letter-spacing: 2px; text-transform: uppercase;
  margin-bottom: 1rem;
}
.v3-district p {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px; line-height: 1.7;
  color: var(--paper-dim);
}

/* — Stat strip — */
.v3-statstrip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--rule);
  background: var(--ink-2);
}
.v3-stat {
  padding: 2rem 1.5rem;
  border-right: 1px solid var(--rule);
  text-align: left;
  position: relative;
}
.v3-stat:last-child { border-right: none; }
.v3-stat-num {
  font-family: var(--font-display);
  font-size: 56px; line-height: 1;
  color: var(--paper);
  margin-bottom: .35rem;
}
.v3-stat-num .symbol { color: var(--blood-2); }
.v3-stat-label {
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--paper-muted);
}
.v3-stat-trend {
  position: absolute; top: 1.25rem; right: 1.25rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; color: #4ade80;
  letter-spacing: 1px;
}

/* — Step / Timeline magazine — */
.v3-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: var(--rule);
}
.v3-step {
  background: var(--ink);
  padding: 2.5rem 1.75rem;
  position: relative;
  transition: background .3s ease;
}
.v3-step:hover { background: var(--ink-2); }
.v3-step-num {
  font-family: var(--font-display);
  font-size: 72px;
  line-height: 1;
  color: var(--blood);
  opacity: .35;
  margin-bottom: 1rem;
}
.v3-step h4 {
  font-family: var(--font-display);
  font-size: 22px; letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--paper);
  margin-bottom: .65rem;
}
.v3-step p {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px; line-height: 1.7;
  color: var(--paper-dim);
}

/* — Testimonial cards — */
.v3-testim {
  background: var(--ink-2);
  border: 1px solid var(--rule);
  padding: 2rem;
  position: relative;
}
.v3-testim::before {
  content: '“';
  position: absolute; top: 1rem; right: 1.5rem;
  font-family: var(--font-editorial);
  font-size: 100px;
  line-height: 1;
  color: var(--blood);
  opacity: .25;
}
.v3-testim-text {
  font-family: var(--font-editorial);
  font-style: italic; font-size: 16px;
  line-height: 1.75;
  color: var(--paper);
  margin-bottom: 1.5rem;
}
.v3-testim-author {
  display: flex; align-items: center; gap: 12px;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
}
.v3-testim-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blood), var(--ink-3));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--paper);
}
.v3-testim-name { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; color: var(--paper); }
.v3-testim-role { font-family: 'Rajdhani', sans-serif; font-size: 11px; color: var(--paper-muted); letter-spacing: 2px; text-transform: uppercase; margin-top: 2px; }

/* — Manifesto block (texte éditorial avec accent) — */
.v3-manifesto {
  position: relative;
  padding: 4rem 3rem;
  background: var(--ink-2);
  border-left: 4px solid var(--blood-2);
}
.v3-manifesto-text {
  font-family: var(--font-editorial);
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 400;
  line-height: 1.5;
  color: var(--paper);
  max-width: 50ch;
}
.v3-manifesto-text em { font-style: italic; color: var(--blood-2); }
.v3-manifesto-sign {
  margin-top: 2rem;
  font-family: 'Rajdhani', sans-serif;
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--paper-muted);
}

/* — Mini badge / pill — */
.v3-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px;
  background: rgba(245,240,230,.04);
  border: 1px solid var(--rule);
  font-family: 'Rajdhani', sans-serif;
  font-size: 10px; font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--paper-muted);
}
.v3-pill.hot {
  background: rgba(183,24,21,.1);
  border-color: rgba(183,24,21,.35);
  color: var(--blood-2);
}
.v3-pill.gold {
  background: var(--gold-soft);
  border-color: rgba(201,164,73,.35);
  color: var(--gold);
}

/* — Footer v3 — */
.v3-footer {
  background: var(--ink);
  border-top: 1px solid var(--rule);
  padding: 4rem 0 2rem;
}
.v3-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  max-width: 1280px; margin: 0 auto; padding: 0 2.5rem;
}
.v3-footer h5 {
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--paper-muted);
  margin-bottom: 1.25rem;
}
.v3-footer a {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  color: var(--paper-dim);
  text-decoration: none;
  padding: 5px 0;
  transition: color .2s;
}
.v3-footer a:hover { color: var(--paper); }
.v3-footer-bottom {
  margin-top: 3rem;
  padding: 1.5rem 2.5rem 0;
  max-width: 1280px; margin-left: auto; margin-right: auto;
  border-top: 1px solid var(--rule);
  display: flex; justify-content: space-between; align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--paper-faint);
  letter-spacing: 1px;
}

/* — Nav v3 (override léger sur nav existant) — */
.v3-nav {
  background: rgba(10,8,9,.78) !important;
  backdrop-filter: blur(20px) saturate(1.3) !important;
  border-bottom: 1px solid var(--rule) !important;
  animation: none !important;
  height: 72px !important;
}
.v3-nav::after { display: none !important; }
.v3-nav .nav-brand-text {
  font-family: var(--font-display) !important;
  letter-spacing: 2px;
  font-weight: 400 !important;
  color: var(--paper) !important;
}
.v3-nav .nav-links a {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 1.5px !important;
  color: var(--paper-dim) !important;
  text-transform: uppercase;
}
.v3-nav .nav-links a:hover,
.v3-nav .nav-links a.active { color: var(--paper) !important; }
.v3-nav .nav-links a::after { background: var(--blood-2) !important; box-shadow: none !important; }
.v3-nav .btn-connect {
  background: var(--paper) !important;
  color: var(--ink) !important;
  border: none !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 1.5px !important;
  font-size: 11px !important;
  clip-path: none !important;
  height: 38px !important;
  padding: 0 18px !important;
}
.v3-nav .btn-connect i { color: #5865f2 !important; }
.v3-nav .btn-connect::before { display: none !important; }
.v3-nav .btn-connect:hover { background: var(--blood-2) !important; color: var(--paper) !important; box-shadow: 0 8px 20px rgba(183,24,21,.35) !important; }

/* — Responsive v3 — */
@media (max-width: 1024px) {
  .v3-pillars,
  .v3-steps { grid-template-columns: repeat(2, 1fr); }
  .v3-statstrip { grid-template-columns: repeat(2, 1fr); }
  .v3-statstrip .v3-stat:nth-child(2) { border-right: none; }
  .v3-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .v3-section { padding: 4.5rem 0; }
  .v3-container { padding: 0 1.5rem; }
  .v3-pillars,
  .v3-steps,
  .v3-statstrip { grid-template-columns: 1fr; }
  .v3-statstrip .v3-stat { border-right: none; border-bottom: 1px solid var(--rule); }
  .v3-footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .v3-footer-bottom { flex-direction: column; gap: 1rem; }
  .v3-manifesto { padding: 2.5rem 1.5rem; }
}

/* ════════════════════════════════════════════════
   ── CHICAGO PACK — éléments thématiques v2 ──
   Ces classes peuvent être réutilisées partout pour
   renforcer l'ambiance gang/mafia/Chicago RP.
   ════════════════════════════════════════════════ */

/* — Bande "POLICE LINE / CRIME SCENE" — */
@keyframes ybnTapeScroll { from { background-position: 0 0; } to { background-position: 200px 0; } }
.crime-tape {
  background:
    repeating-linear-gradient(
      135deg,
      #f5b300 0 22px,
      #1a1a1a 22px 44px
    );
  color: #1a1a1a;
  font-family: 'Teko', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 6px;
  text-transform: uppercase;
  padding: 6px 18px;
  text-align: center;
  position: relative;
  overflow: hidden;
  animation: ybnTapeScroll 4s linear infinite;
  border-top: 1px solid rgba(0,0,0,.4);
  border-bottom: 1px solid rgba(0,0,0,.4);
}
.crime-tape > span {
  background: rgba(245,179,0,.85);
  padding: 3px 14px;
  display: inline-block;
}

/* — Bloc style "rapport de police" — */
.police-report {
  background: rgba(15,15,22,.92);
  border: 1px solid rgba(255,255,255,.06);
  border-left: 4px solid #f5b300;
  padding: 1.25rem 1.5rem;
  position: relative;
  overflow: hidden;
  font-family: 'Inter', sans-serif;
  margin: 1.25rem 0;
}
.police-report::before {
  content: 'CONFIDENTIAL';
  position: absolute;
  top: 12px; right: -36px;
  transform: rotate(28deg);
  background: rgba(239,68,68,.18);
  border: 1px solid rgba(239,68,68,.5);
  padding: 3px 38px;
  font-family: 'Teko', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 4px;
  color: #f87171;
}
.police-report-head {
  font-family: 'Teko', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #f5b300;
  margin-bottom: .5rem;
  display: flex; align-items: center; gap: 8px;
}
.police-report-head::before { content: '◤'; font-size: 14px; color: rgba(245,179,0,.7); }

/* — Néon enseigne Chicago — */
@keyframes ybnNeonFlicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; text-shadow: 0 0 6px #ff2a16, 0 0 18px rgba(255,42,22,.7), 0 0 38px rgba(255,42,22,.4); }
  20%, 24%, 55% { opacity: .35; text-shadow: 0 0 2px #ff2a16; }
}
.neon-red {
  color: #ff5236;
  font-family: 'Teko', sans-serif;
  letter-spacing: 3px;
  text-transform: uppercase;
  animation: ybnNeonFlicker 6s infinite;
}
.neon-red.subtle { animation-duration: 12s; }

/* — Plaque Illinois "YBN-FR" — */
.illinois-plate {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(180deg, #fff 0%, #f1f1f1 100%);
  color: #0d0d0d;
  border: 3px solid #0d0d0d;
  padding: 4px 18px 7px;
  font-family: 'Teko', sans-serif;
  letter-spacing: 2px;
  line-height: 1;
  position: relative;
  clip-path: polygon(0 6px, 6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px));
  box-shadow: 0 4px 16px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.5);
}
.illinois-plate .ip-state {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 3px;
  color: #c50202;
  margin-bottom: 2px;
}
.illinois-plate .ip-num {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 4px;
  color: #0d0d0d;
}
.illinois-plate .ip-foot {
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 2px;
  color: #444;
  margin-top: 1px;
}

/* — Effet "billet 100$" pour les prix — */
.dollar-stamp {
  display: inline-flex; align-items: baseline; gap: 2px;
  font-family: 'Teko', sans-serif;
  color: #4ade80;
  font-weight: 700;
  letter-spacing: 1px;
  text-shadow: 0 0 8px rgba(74,222,128,.4);
}
.dollar-stamp::before { content: '$'; font-size: 0.7em; opacity: .85; }

/* — Conteneur "dossier mafia" cliquable — */
.gang-card {
  position: relative;
  background:
    linear-gradient(135deg, rgba(149,7,3,.04) 0%, rgba(0,0,0,0) 60%),
    rgba(8,8,16,.85);
  border: 1px solid rgba(149,7,3,.18);
  border-top: 2px solid var(--red);
  padding: 1.5rem;
  overflow: hidden;
  transition: all .3s;
  backdrop-filter: blur(10px);
}
.gang-card::before {
  content: '';
  position: absolute; top: 0; right: 0;
  width: 0; height: 0;
  border-style: solid;
  border-width: 0 22px 22px 0;
  border-color: transparent rgba(149,7,3,.35) transparent transparent;
  transition: border-color .3s;
}
.gang-card::after {
  content: ''; position: absolute; bottom: 0; left: 0;
  width: 0; height: 1px; background: var(--red);
  transition: width .35s ease;
}
.gang-card:hover { border-color: rgba(149,7,3,.45); transform: translateY(-3px); box-shadow: 0 18px 40px rgba(0,0,0,.6), 0 0 0 1px rgba(149,7,3,.18); }
.gang-card:hover::after { width: 100%; }
.gang-card:hover::before { border-color: transparent rgba(255,40,20,.7) transparent transparent; }
.gang-card-title {
  font-family: 'Teko', sans-serif; font-size: 22px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase; margin-bottom: .25rem;
}
.gang-card-sub {
  font-family: 'Rajdhani', sans-serif; font-size: 10px; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase; color: var(--muted2);
  margin-bottom: .85rem;
}

/* — Citation rue / graffiti — */
.street-quote {
  font-family: 'Teko', sans-serif;
  font-size: clamp(20px, 3vw, 30px);
  font-weight: 600;
  letter-spacing: 2px;
  line-height: 1.25;
  color: rgba(255,255,255,.78);
  border-left: 4px solid var(--red);
  padding: .75rem 0 .75rem 1.5rem;
  margin: 1.75rem 0;
  font-style: italic;
}
.street-quote::before { content: '“'; color: var(--red); margin-right: 4px; }
.street-quote::after  { content: '”'; color: var(--red); margin-left: 4px; }
.street-quote .quote-src {
  display: block;
  font-size: 12px;
  letter-spacing: 4px;
  color: var(--muted2);
  font-style: normal;
  margin-top: .35rem;
}

/* — Liste à puces "balles" — */
.bullet-list { list-style: none; padding: 0; margin: .5rem 0; }
.bullet-list li {
  position: relative;
  padding: 6px 0 6px 26px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--muted);
  border-bottom: 1px dashed rgba(255,255,255,.04);
}
.bullet-list li:last-child { border-bottom: none; }
.bullet-list li::before {
  content: '';
  position: absolute; left: 0; top: 14px;
  width: 14px; height: 5px;
  background: linear-gradient(90deg, var(--red), rgba(149,7,3,.2));
  clip-path: polygon(0 50%, 80% 0, 100% 50%, 80% 100%);
}
.bullet-list li strong { color: #fff; }

/* — Étiquette "WANTED" — */
.wanted-tag {
  display: inline-flex; align-items: center; gap: 8px;
  background: #b9b09a;
  color: #1a1a1a;
  padding: 6px 14px;
  font-family: 'Teko', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 6px;
  text-transform: uppercase;
  border: 2px solid #1a1a1a;
  position: relative;
  font-style: italic;
}
.wanted-tag::before { content: '★'; color: #1a1a1a; }
.wanted-tag::after  { content: '★'; color: #1a1a1a; }

/* — Échelle de chaleur (heatmap RP) — */
.heat-row { display: flex; align-items: center; gap: 10px; padding: .6rem 0; }
.heat-bar { flex: 1; height: 6px; background: rgba(255,255,255,.06); position: relative; overflow: hidden; border-radius: 1px; }
.heat-bar-fill {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, #22c55e, #facc15, #f97316, #ef4444, #b91c1c);
  transform-origin: left center;
}
.heat-label { font-family: 'Rajdhani', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); min-width: 80px; }
.heat-value { font-family: 'Teko', sans-serif; font-size: 16px; color: var(--red); min-width: 40px; text-align: right; }

/* — Box "exemple RP" type chat IC — */
.rp-chat {
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.05);
  border-left: 3px solid rgba(149,7,3,.5);
  padding: 1rem 1.25rem;
  margin: 1rem 0;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.7;
}
.rp-chat-line { display: block; padding: 3px 0; }
.rp-chat-line .who {
  font-family: 'Teko', sans-serif;
  font-size: 12px;
  letter-spacing: 1.5px;
  font-weight: 600;
  color: var(--red);
  margin-right: 8px;
}
.rp-chat-line .cmd {
  display: inline-block;
  background: rgba(149,7,3,.12);
  color: #f87171;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  padding: 1px 7px;
  margin: 0 4px;
  border-radius: 2px;
}
.rp-chat-line .me  { color: #c084fc; font-style: italic; }
.rp-chat-line .do  { color: #60a5fa; font-style: italic; }
.rp-chat-line .ooc { color: rgba(255,255,255,.35); font-style: italic; font-size: 12px; }

/* — Bandeau "section" type panneau gangs — */
.gang-banner {
  position: relative;
  background:
    linear-gradient(135deg, rgba(149,7,3,.10) 0%, rgba(0,0,0,.4) 100%);
  border: 1px solid rgba(149,7,3,.2);
  border-left: 4px solid var(--red);
  padding: 1.5rem 2rem;
  margin: 2rem 0 1.5rem;
  overflow: hidden;
  backdrop-filter: blur(8px);
}
.gang-banner::before {
  content: '';
  position: absolute; top: 0; right: 0; bottom: 0; width: 30%;
  background: repeating-linear-gradient(135deg, transparent 0 8px, rgba(149,7,3,.04) 8px 16px);
  pointer-events: none;
}
.gang-banner-eyebrow {
  font-family: 'Rajdhani', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: 5px;
  text-transform: uppercase; color: rgba(149,7,3,.85);
  margin-bottom: .35rem;
}
.gang-banner-title {
  font-family: 'Teko', sans-serif;
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  line-height: .9;
}
.gang-banner-title .accent { color: var(--red); }
.gang-banner-desc { font-size: 13.5px; color: var(--muted); margin-top: .55rem; max-width: 700px; line-height: 1.65; }

/* — Tableau spec faction — */
.faction-spec {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 0;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  margin: 1rem 0;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
}
.faction-spec dt {
  font-family: 'Rajdhani', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: 2.5px;
  text-transform: uppercase; color: rgba(149,7,3,.75);
  padding: .65rem .9rem;
  background: rgba(149,7,3,.04);
  border-bottom: 1px solid rgba(255,255,255,.04);
  border-right: 1px solid rgba(149,7,3,.12);
}
.faction-spec dd {
  padding: .65rem .9rem;
  border-bottom: 1px solid rgba(255,255,255,.04);
  color: var(--muted);
  margin: 0;
}
.faction-spec dt:last-of-type, .faction-spec dd:last-of-type { border-bottom: none; }
.faction-spec strong { color: #fff; font-weight: 600; }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  #ybn-nav { padding: 0 1.25rem; }
  .nav-links { display: none; }
  .nav-burger { display: flex; }
  .nav-links.open { display: flex; flex-direction: column; position: absolute; top: 68px; left: 0; right: 0; background: rgba(7,7,13,.97); padding: 1rem; border-bottom: 1px solid rgba(149,7,3,.2); }
  .guide-layout { grid-template-columns: 1fr; }
  .guide-sidebar { position: static; height: auto; }
  .admin-wrap { grid-template-columns: 1fr; }
  .admin-sidebar { position: static; height: auto; }
  .rules-wrap { padding: 2rem 1.25rem 4rem; }
  .form-grid { grid-template-columns: 1fr; }
  .scenario-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════
   ── MODERNISATION v4.1 — GUIDE & RÈGLEMENT ──
   Look premium moderne, cohérent avec l'accueil.
   100% CSS, appliqué via body.v4-page.
   ════════════════════════════════════════════════ */

/* — Layout : plus d'air, colonne de lecture confortable — */
body.v4-page .regl-content,
body.v4-page .guide-main {
  padding: 3.5rem 4rem 6rem !important;
  max-width: 920px !important;
}

/* — Sidebar flottante arrondie — */
body.v4-page .regl-sidebar,
body.v4-page .guide-sidebar {
  background: transparent !important;
  border-right: 1px solid var(--v4-line) !important;
  padding: 2rem 1.25rem !important;
}
body.v4-page .regl-sidebar::-webkit-scrollbar-thumb,
body.v4-page .guide-sidebar::-webkit-scrollbar-thumb { background: rgba(224,32,32,.4) !important; }

/* Items de menu : pills modernes avec hover doux */
body.v4-page .menu-section-btn {
  border-radius: 10px !important;
  padding: 11px 14px !important;
  transition: all .2s ease !important;
}
body.v4-page .menu-sub-item,
body.v4-page .chap-btn {
  border-radius: 9px !important;
  transition: all .18s ease !important;
}
body.v4-page .menu-sub-item.active,
body.v4-page .chap-btn.active {
  background: linear-gradient(90deg, rgba(224,32,32,.14), rgba(224,32,32,.04)) !important;
  border-left: 2px solid var(--v4-amber) !important;
  color: #fff !important;
}

/* — Section hero : gros titre éditorial comme l'accueil — */
body.v4-page .section-hero,
body.v4-page .chap-section .chap-h2 { }
body.v4-page .section-hero {
  margin-bottom: 3rem !important;
  padding-bottom: 2rem !important;
  border-bottom: 1px solid var(--v4-line) !important;
}
body.v4-page .section-hero-title,
body.v4-page .chap-h2 {
  font-size: clamp(34px, 5vw, 60px) !important;
  font-weight: 800 !important;
  line-height: 1.02 !important;
  letter-spacing: -1.5px !important;
  margin-top: 1.1rem !important;
}
body.v4-page .section-hero-title .accent,
body.v4-page .chap-h2 span { color: var(--v4-amber) !important; }
body.v4-page .section-hero-sub,
body.v4-page .chap-intro {
  font-size: 15.5px !important;
  line-height: 1.7 !important;
  margin-top: 1rem !important;
}
body.v4-page .chap-intro {
  padding: 1.1rem 1.4rem !important;
  border-radius: 0 14px 14px 0 !important;
}

/* — Cartes de règles : premium, icône en chip dégradé — */
body.v4-page .rule-item {
  border-radius: 16px !important;
  padding: 1.35rem 1.5rem !important;
  gap: 16px !important;
  margin-bottom: 12px !important;
  border-left: 1px solid var(--v4-line) !important;
}
body.v4-page .rule-item:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.35), 0 0 0 1px rgba(224,32,32,.15) !important;
}
body.v4-page .rule-icon {
  width: 44px !important; height: 44px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, rgba(224,32,32,.25), rgba(224,32,32,.06)) !important;
  border: 1px solid rgba(224,32,32,.3) !important;
  font-size: 16px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
body.v4-page .rule-t {
  font-size: 16.5px !important;
  margin-bottom: 6px !important;
}
body.v4-page .rule-d { font-size: 13.5px !important; line-height: 1.7 !important; }

/* — Tier cards : dégradé haut + élévation — */
body.v4-page .tier-card {
  border-radius: 16px !important;
  border-top: none !important;
  padding: 1.5rem !important;
  position: relative;
  overflow: hidden;
  transition: all .25s ease;
}
body.v4-page .tier-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--v4-amber), var(--v4-red-2));
}
body.v4-page .tier-card:hover { transform: translateY(-3px); border-color: rgba(224,32,32,.3) !important; }
body.v4-page .tier-name { font-size: 24px !important; letter-spacing: -.5px !important; }

/* — Scale rows (échelle violence) : barres arrondies modernes — */
body.v4-page .scale-row {
  border-radius: 12px !important;
  padding: .85rem 1.1rem !important;
  transition: all .2s ease;
}
body.v4-page .scale-row:hover { background: var(--v4-card-hov) !important; transform: translateX(4px); }
body.v4-page .scale-bar { border-radius: 999px !important; height: 5px !important; }

/* — Tableaux sanctions/peines : moderne — */
body.v4-page .sanction-table {
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 1px solid var(--v4-line) !important;
}
body.v4-page .sanction-table th {
  background: rgba(255,255,255,.02) !important;
  padding: .85rem 1.1rem !important;
}
body.v4-page .sanction-table td { padding: .85rem 1.1rem !important; }

/* — Info box & key point : cartes douces — */
body.v4-page .info-box,
body.v4-page .key-point {
  border-radius: 14px !important;
  padding: 1.25rem 1.6rem !important;
}

/* — Scénarios bon/mauvais (guide) : cartes modernes — */
body.v4-page .scenario-card,
body.v4-page .ex-card {
  border-radius: 14px !important;
  padding: 1.15rem 1.3rem !important;
  font-size: 13.5px !important;
  line-height: 1.65 !important;
}

/* — Lore cards & gang cards (guide) — */
body.v4-page .lore-card,
body.v4-page .gang-card {
  border-radius: 16px !important;
  padding: 1.5rem 1.75rem !important;
}

/* — Citation rue : moderne — */
body.v4-page .street-quote {
  background: var(--v4-card) !important;
  border-radius: 0 16px 16px 0 !important;
  padding: 1.5rem 1.75rem !important;
  font-size: clamp(18px, 2.2vw, 24px) !important;
}

/* — Bullet list & checklist (guide) — */
body.v4-page .bullet-list li,
body.v4-page .checklist li { font-size: 14px !important; }

/* — Progress bar guide : arrondie avec glow — */
body.v4-page .guide-progress-bar { border-radius: 999px !important; height: 5px !important; }
body.v4-page .guide-progress-fill { box-shadow: 0 0 12px rgba(224,32,32,.5); }

/* — Faction spec dl — */
body.v4-page .faction-spec { border-radius: 14px !important; overflow: hidden; }

/* — Boutons footer chapitre (guide) — */
body.v4-page .chap-footer { margin-top: 3rem !important; padding-top: 2rem !important; }

/* — Responsive : padding réduit mobile — */
@media (max-width: 900px) {
  body.v4-page .regl-content,
  body.v4-page .guide-main { padding: 2rem 1.5rem 4rem !important; }
}