/* ============================================================
   GameStore TN — Global Stylesheet
   ============================================================ */

:root {
  --bg:#ffffff; --bg-card:#fdfdfd; --bg-nav:#ffffff; --bg-modal:#ffffff; --bg-inp:#ffffff;
  --red:#e8192c; --gold:#f5a623; --blue:#1a73e8; --green:#22c55e;
  --white:#000000; --muted:#7a7a9a; --border:#1e1e2e;
  --r-sm:8px; --r-md:14px; --r-lg:20px;
  --fh:system-ui,sans-serif; --fb:system-ui,sans-serif;
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth }
body { font-family:var(--fb); background:var(--bg); color:var(--white); min-height:100vh; overflow-x:hidden }
a { text-decoration:none; color:inherit } img { max-width:100%; display:block } ul { list-style:none }
button { font-family:var(--fb); cursor:pointer } input,select,textarea { font-family:var(--fb) }
::-webkit-scrollbar { width:5px } ::-webkit-scrollbar-track { background:var(--bg) } ::-webkit-scrollbar-thumb { background:var(--red); border-radius:3px }

/* ── Utils ── */
.hidden { display:none!important }
.container { max-width:1280px; margin:0 auto; padding:0 24px }
.divider { border:none; border-top:1px solid var(--border); margin:0 }

/* ── Buttons ── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; font-family:var(--fh); font-weight:700; text-transform:uppercase; letter-spacing:.5px; border:none; border-radius:var(--r-sm); cursor:pointer; transition:opacity .2s,transform .15s,background .2s; white-space:nowrap }
.btn:hover { opacity:.88; transform:translateY(-1px) }
.btn-red    { background:var(--red);  color:#fff; padding:10px 22px; font-size:1rem }
.btn-gold   { background:var(--gold); color:#000; padding:10px 22px; font-size:1rem }
.btn-outline { background:transparent; color:var(--white); border:1px solid var(--border); padding:10px 22px; font-size:1rem }
.btn-outline:hover { border-color:var(--muted); background:rgba(255,255,255,.05) }
.btn-ghost  { background:rgba(255,255,255,.07); color:var(--white); padding:9px 16px; font-size:.9rem; border:none }
.btn-ghost:hover { background:rgba(255,255,255,.13); opacity:1; transform:none }
.btn-sm     { padding:7px 14px!important; font-size:.82rem!important }
.btn-full   { width:100% }
.btn-icon   { width:40px; height:40px; padding:0; background:rgba(255,255,255,.08); border:1px solid var(--border); color:var(--white); border-radius:var(--r-sm); font-size:1.05rem }
.btn-icon:hover { background:rgba(255,255,255,.15); opacity:1; transform:none }

/* ── Navbar ── */
.navbar { width:100%; background:var(--bg-nav); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:200; padding:0 28px; display:flex; align-items:center; gap:20px; height:64px }
.navbar-logo { font-family:var(--fh); font-size:1.8rem; font-weight:800; letter-spacing:-1px; flex-shrink:0; cursor:pointer; line-height:1 }
.navbar-logo .s { color:var(--red); font-size:.82em; display:block; line-height:1; margin-top:-3px }
.nav-links { display:flex; gap:2px; flex:1 }
.nav-links a { font-family:var(--fh); font-size:1rem; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--muted); padding:8px 14px; border-radius:var(--r-sm); transition:color .2s,background .2s; cursor:pointer }
.nav-links a:hover, .nav-links a.active { color:var(--white); background:rgba(255,255,255,.06) }
.nav-actions { display:flex; align-items:center; gap:10px; margin-left:auto }
.cart-wrap { position:relative }
.cart-dot { position:absolute; top:-5px; right:-5px; background:var(--red); color:#fff; font-size:.6rem; font-weight:800; width:17px; height:17px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:2px solid var(--bg-nav) }
.hamburger { display:none; background:none; border:none; color:var(--white); font-size:1.4rem; cursor:pointer; padding:4px }
#navUserMenu { display:none; align-items:center; gap:10px }

/* ── Product Card ── */
.pc { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; cursor:pointer; transition:transform .2s,border-color .2s,box-shadow .2s; position:relative }
.pc:hover { transform:translateY(-4px); border-color:rgba(232,25,44,.4); box-shadow:0 12px 30px rgba(232,25,44,.15) }
.pc-thumb { display:flex; align-items:flex-end; padding:10px; font-family:var(--fh); font-size:.95rem; font-weight:800; text-transform:uppercase; position:relative; overflow:hidden }
.pc-thumb.ar43 { aspect-ratio:3/4 } .pc-thumb.ar34 { aspect-ratio:4/3 }
.pc-info { padding:10px 12px 12px }
.pc-name { font-family:var(--fh); font-size:.86rem; font-weight:700; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.pc-price { margin-top:3px; font-size:.78rem; font-weight:600; color:var(--gold) }
.pc-bdg { position:absolute; top:7px; right:7px; font-family:var(--fh); font-size:.62rem; font-weight:800; text-transform:uppercase; letter-spacing:.4px; padding:3px 7px; border-radius:5px }
.bdg-red { background:var(--red); color:#fff } .bdg-gold { background:var(--gold); color:#000 } .bdg-green { background:var(--green); color:#000 }

/* ── Horizontal scroll row (home sections) ── */
.pg5 { display:flex; gap:12px; overflow-x:auto; padding-bottom:8px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch }
.pg5::-webkit-scrollbar { height:4px }
.pg5::-webkit-scrollbar-track { background:var(--border); border-radius:2px }
.pg5::-webkit-scrollbar-thumb { background:var(--red); border-radius:2px }
.pg5 .pc { flex:0 0 180px; scroll-snap-align:start }

/* ── Catalogue grid ── */
.pg5-cat { display:grid; grid-template-columns:repeat(5,1fr); gap:13px }

/* ── Section headers ── */
.prods-sec { padding:30px 0 }
.sec-hdr { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:16px }
.sec-hd { font-family:var(--fh); font-size:1.5rem; font-weight:800; text-transform:uppercase; letter-spacing:1px }
.sec-hd .acc { color:var(--red) }
.voir-tout { font-size:.78rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; cursor:pointer; transition:color .2s }
.voir-tout:hover { color:var(--red) }

/* ── Mobile nav ── */
.mob-nav { display:none; position:fixed; bottom:0; left:0; right:0; background:var(--bg-nav); border-top:1px solid var(--border); z-index:200; height:62px; align-items:center; justify-content:space-around }
.mni { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; color:var(--muted); font-size:.56rem; font-family:var(--fh); font-weight:700; text-transform:uppercase; letter-spacing:.3px; cursor:pointer; transition:color .2s; border:none; background:none; padding:0 }
.mni i { font-size:1.05rem }
.mni.active, .mni:hover { color:var(--red) }

/* ── Sidebar ── */
.sb-ov { display:none; position:fixed; inset:0; background:rgba(0,0,0,.78); z-index:400; opacity:0; transition:opacity .3s }
.sb-ov.open { display:block; opacity:1 }
.sidebar { position:fixed; top:0; left:-300px; bottom:0; width:280px; background:var(--bg-nav); border-right:1px solid var(--border); z-index:401; transition:left .3s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column; overflow-y:auto }
.sidebar.open { left:0 }
.sb-head { display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--border) }
.sb-logo { font-family:var(--fh); font-size:1.5rem; font-weight:800; cursor:pointer }
.sb-logo span { color:var(--red) }
.sb-close { background:none; border:none; color:var(--muted); font-size:1.1rem; cursor:pointer; padding:4px }
.sb-auth { padding:14px 18px; border-bottom:1px solid var(--border) }
.sb-auth-btn { display:flex; align-items:center; gap:9px; background:rgba(255,255,255,.06); border:1px solid var(--border); border-radius:var(--r-sm); padding:11px 14px; font-family:var(--fh); font-size:.9rem; font-weight:700; text-transform:uppercase; color:var(--white); cursor:pointer; width:100%; transition:background .2s }
.sb-auth-btn:hover { background:rgba(255,255,255,.1) }
.sb-nav { flex:1; padding:7px 0 }
.sb-nav a { display:flex; align-items:center; gap:13px; padding:14px 20px; font-family:var(--fh); font-size:1rem; font-weight:700; text-transform:uppercase; color:var(--muted); transition:color .2s,background .2s; cursor:pointer }
.sb-nav a:hover { color:var(--white); background:rgba(255,255,255,.04) }
.sb-nav a i { width:18px; font-size:.9rem; color:var(--red) }

/* ── Auth Modal ── */
.modal-ov { display:none; position:fixed; inset:0; background:rgba(0,0,0,.85); backdrop-filter:blur(6px); z-index:600; align-items:center; justify-content:center; padding:20px }
.modal-ov.open { display:flex!important }
.modal { background:var(--bg-modal); border:1px solid var(--border); border-radius:var(--r-lg); width:100%; max-width:440px; overflow:hidden; animation:mIn .3s cubic-bezier(.4,0,.2,1); max-height:90vh; overflow-y:auto }
@keyframes mIn { from{opacity:0;transform:translateY(22px) scale(.97)} to{opacity:1;transform:none} }
.modal-hdr { padding:22px 22px 0; display:flex; align-items:center; justify-content:space-between }
.modal-logo { font-family:var(--fh); font-size:1.5rem; font-weight:800 }
.modal-logo span { color:var(--red) }
.modal-x { background:none; border:none; color:var(--muted); font-size:1.05rem; cursor:pointer; width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:50%; transition:background .2s,color .2s }
.modal-x:hover { background:rgba(255,255,255,.08); color:var(--white) }
.modal-tabs { display:flex; padding:18px 22px 0; gap:4px; border-bottom:1px solid var(--border) }
.mtab { flex:1; font-family:var(--fh); font-size:1rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px; padding:9px; background:none; border:none; color:var(--muted); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; transition:color .2s,border-color .2s }
.mtab.active { color:var(--white); border-bottom-color:var(--red) }
.modal-body { padding:22px }
.mform { display:none } .mform.active { display:block }
.mfg { margin-bottom:15px }
.mfg label { display:block; font-family:var(--fh); font-size:.76rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); margin-bottom:5px }
.inp-wrap { position:relative }
.inp-wrap .ii { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:.84rem; pointer-events:none }
.mform input[type=text], .mform input[type=email], .mform input[type=password] { width:100%; background:var(--bg-inp); border:1px solid var(--border); border-radius:var(--r-sm); padding:12px 40px; color:var(--white); font-size:.92rem; outline:none; transition:border-color .2s; box-sizing:border-box }
.mform input::placeholder { color:var(--muted) }
.mform input:focus { border-color:var(--red) }
.pwd-eye { position:absolute; right:12px; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--muted); cursor:pointer; font-size:.84rem; padding:3px; transition:color .2s }
.pwd-eye:hover { color:var(--white) }
.mform .extras { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; font-size:.8rem }
.mform .extras a { color:var(--muted); cursor:pointer; transition:color .2s }
.mform .extras a:hover { color:var(--red) }
.chk-wrap { display:flex; align-items:center; gap:7px; cursor:pointer; font-size:.8rem; color:var(--muted) }
.chk-wrap input { width:14px; height:14px; accent-color:var(--red); cursor:pointer }
.m-divider { display:flex; align-items:center; gap:11px; margin:16px 0; color:var(--muted); font-size:.74rem; text-transform:uppercase; letter-spacing:.5px }
.m-divider::before, .m-divider::after { content:''; flex:1; border-top:1px solid var(--border) }
.soc-login { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:2px }
.soc-login-btn { display:flex; align-items:center; justify-content:center; gap:7px; background:var(--bg-inp); border:1px solid var(--border); border-radius:var(--r-sm); padding:10px; font-family:var(--fh); font-size:.84rem; font-weight:700; text-transform:uppercase; color:var(--white); cursor:pointer; transition:background .2s,border-color .2s }
.soc-login-btn:hover { background:rgba(255,255,255,.07); border-color:var(--muted) }
.mfooter { text-align:center; font-size:.8rem; color:var(--muted); margin-top:14px }
.mfooter a { color:var(--red); cursor:pointer }
.mfooter a:hover { text-decoration:underline }
.m-success { display:none; text-align:center; padding:10px 0 4px }
.m-success i { font-size:3rem; color:var(--green); margin-bottom:12px; display:block }
.m-success h3 { font-family:var(--fh); font-size:1.4rem; font-weight:800; text-transform:uppercase; margin-bottom:5px }
.m-success p { font-size:.84rem; color:var(--muted) }
.forgot-frm { display:none } .forgot-frm.active { display:block }
.back-lnk { display:inline-flex; align-items:center; gap:6px; font-size:.8rem; color:var(--muted); cursor:pointer; margin-bottom:16px; transition:color .2s }
.back-lnk:hover { color:var(--white) }

/* ── Toast ── */
.toast-wrap { position:fixed; bottom:82px; right:20px; z-index:9999; display:flex; flex-direction:column; gap:7px; pointer-events:none }
.toast { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r-md); padding:12px 16px; font-size:.86rem; display:flex; align-items:center; gap:9px; min-width:220px; max-width:300px; animation:tIn .3s ease; border-left:3px solid var(--green); pointer-events:none }
.toast.err { border-left-color:var(--red) } .toast.info { border-left-color:var(--blue) }
.toast i { font-size:.9rem; color:var(--green) }
.toast.err i { color:var(--red) } .toast.info i { color:var(--blue) }
@keyframes tIn { from{opacity:0;transform:translateX(18px)} to{opacity:1;transform:none} }

/* ── Footer ── */
.footer { background:#060609; border-top:1px solid var(--border); padding:46px 0 0 }
.footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1fr; gap:30px; padding-bottom:38px }
.footer-brand .logo { font-family:var(--fh); font-size:1.6rem; font-weight:800 }
.footer-brand .logo span { color:var(--red) }
.footer-brand p { margin-top:10px; font-size:.8rem; color:var(--muted); line-height:1.65 }
.footer-col h4 { font-family:var(--fh); font-size:.86rem; font-weight:700; text-transform:uppercase; letter-spacing:.8px; margin-bottom:13px }
.footer-col li { margin-bottom:8px }
.footer-col li a { font-size:.8rem; color:var(--muted); transition:color .2s; cursor:pointer }
.footer-col li a:hover { color:var(--white) }
.footer-bot { border-top:1px solid var(--border); padding:16px 0; display:flex; align-items:center; justify-content:space-between }
.footer-bot p { font-size:.76rem; color:var(--muted) }
.footer-soc { display:flex; gap:7px }
.soc-btn { width:33px; height:33px; border-radius:50%; background:rgba(255,255,255,.07); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:.82rem; color:var(--muted); transition:background .2s,color .2s,border-color .2s; cursor:pointer }
.soc-btn:hover { background:var(--red); color:#fff; border-color:var(--red) }

/* ── Responsive ── */
@media(max-width:1024px) {
  .pg5-cat { grid-template-columns:repeat(4,1fr) }
  .footer-grid { grid-template-columns:1fr 1fr 1fr }
}
@media(max-width:768px) {
  .navbar { padding:0 13px; gap:12px }
  .nav-links { display:none }
  .hamburger { display:block }
  .footer-grid { grid-template-columns:1fr 1fr }
  .footer-bot { flex-direction:column; gap:11px; text-align:center }
  .mob-nav { display:flex }
  body { padding-bottom:62px }
  .pg5-cat { grid-template-columns:repeat(2,1fr); gap:9px }
  .pg5 .pc { flex:0 0 150px }
}
@media(max-width:480px) {
  .container { padding:0 11px }
  .modal { max-width:100%; border-radius:var(--r-md) var(--r-md) 0 0 }
  .modal-ov { align-items:flex-end; padding:0 }
}