:root{
  --bg-void:#120C1F;
  --bg-panel:#1E1733;
  --bg-panel-alt:#271F42;
  --primary:#FF4FA3;
  --primary-dark:#B22E6C;
  --primary-dim:#FF4FA333;
  --cyan:#43E8D8;
  --cyan-dim:#43E8D855;
  --amber:#FFC85C;
  --blue:#9B7BFF;
  --green:#7CFF9E;
  --red:#FF5C7A;
  --text-primary:#F6F3FF;
  --text-muted:#AC9FCF;
  --text-faint:#6E6193;
  --line-blueprint:#4A3B7240;
  --line-blueprint-solid:#4A3B72;
  --mono:'JetBrains Mono', monospace;
  --sans:'Space Grotesk', sans-serif;
  --display:'Fredoka', sans-serif;
  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:22px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg-void);
  color:var(--text-primary);
  font-family:var(--sans);
  line-height:1.55;
  background-image:
    radial-gradient(circle at 12% 15%, #FF4FA326 0%, transparent 42%),
    radial-gradient(circle at 88% 8%, #43E8D822 0%, transparent 38%),
    radial-gradient(circle at 55% 95%, #9B7BFF22 0%, transparent 46%),
    radial-gradient(var(--line-blueprint) 1.6px, transparent 1.6px);
  background-size:auto, auto, auto, 26px 26px;
  background-attachment:fixed;
  min-height:100vh;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
}
a{color:inherit; text-decoration:none;}
::selection{background:var(--primary-dim); color:var(--text-primary);}
:focus-visible{outline:2px solid var(--primary); outline-offset:2px; border-radius:4px;}

.wrap{max-width:1120px; margin:0 auto; padding:0 28px;}
.wrap-narrow{max-width:760px; margin:0 auto; padding:0 28px;}

.eyebrow{
  font-family:var(--mono); font-weight:700; font-size:11.5px; letter-spacing:.07em; color:var(--bg-void);
  background:var(--cyan);
  display:inline-flex; align-items:center; gap:7px; margin-bottom:16px; text-transform:uppercase;
  padding:6px 13px; border-radius:999px;
}
.eyebrow::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--bg-void); display:inline-block;}

/* ---------- Header ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(18,12,31,.86); backdrop-filter:blur(10px);
  border-bottom:2px solid var(--line-blueprint-solid);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:16px 28px;}
.logo{font-family:var(--display); font-weight:700; font-size:19px; letter-spacing:.01em; display:flex; align-items:center; gap:9px;}
.logo .dot{width:10px;height:10px;border-radius:50%; background:var(--primary); box-shadow:0 0 8px var(--primary), 0 0 18px var(--primary-dim); display:inline-block; animation:dotpulse 2.2s ease-in-out infinite;}
@keyframes dotpulse{0%,100%{opacity:1; transform:scale(1);}50%{opacity:.55; transform:scale(.85);}}
.logo .dim{color:var(--text-muted); font-weight:400;}
.navlinks{display:flex; gap:26px; font-size:14px; color:var(--text-muted); font-weight:500;}
.navlinks a{transition:color .2s;}
.navlinks a:hover, .navlinks a.active{color:var(--cyan);}
.navcta{font-family:var(--mono); font-weight:700; font-size:13px; color:var(--bg-void); background:var(--primary); padding:10px 18px; border:none; border-radius:999px; box-shadow:0 4px 0 var(--primary-dark); transition:transform .15s, box-shadow .15s;}
.navcta:hover{transform:translateY(-2px); box-shadow:0 6px 0 var(--primary-dark);}
.navcta:active{transform:translateY(2px); box-shadow:0 1px 0 var(--primary-dark);}
@media(max-width:760px){ .navlinks{display:none;} }

/* ---------- buttons ---------- */
.btn{
  font-family:var(--mono); font-weight:700; font-size:13.5px; padding:13px 22px;
  display:inline-flex; align-items:center; gap:8px; border:2px solid var(--line-blueprint-solid);
  border-radius:var(--radius-md); transition:transform .15s, box-shadow .15s, border-color .15s, color .15s;
  cursor:pointer; background:var(--bg-panel); color:var(--text-primary);
}
.btn-primary{background:var(--primary); color:#1A0B14; border-color:var(--primary); font-weight:700; box-shadow:0 5px 0 var(--primary-dark), 0 8px 18px #FF4FA333;}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 7px 0 var(--primary-dark), 0 12px 22px #FF4FA344;}
.btn-primary:active{transform:translateY(3px); box-shadow:0 2px 0 var(--primary-dark);}
.btn-ghost{color:var(--text-primary); background:transparent;}
.btn-ghost:hover{border-color:var(--cyan); color:var(--cyan); transform:translateY(-2px);}
.btn-sm{padding:8px 15px; font-size:12.5px; border-radius:var(--radius-sm);}
.btn-danger{border-color:var(--red); color:var(--red); background:transparent;}
.btn-danger:hover{background:var(--red); color:#1A0B14; box-shadow:0 4px 0 #A8324A; transform:translateY(-1px);}
.btn:disabled{opacity:.4; cursor:not-allowed; transform:none !important; box-shadow:none !important;}

/* ---------- Section shell ---------- */
section{padding:64px 0;}
.section-head{margin-bottom:36px; max-width:640px;}
.section-head h2{font-family:var(--display); font-size:clamp(22px,3vw,30px); font-weight:600; letter-spacing:0;}
.section-head p{color:var(--text-muted); margin-top:10px; font-size:15px;}
.divider{border:none; border-top:2px dashed var(--line-blueprint-solid); margin:0; opacity:.6;}
h1{font-family:var(--display); font-weight:600; font-size:clamp(30px,5vw,50px); line-height:1.1; letter-spacing:0; margin-bottom:18px;}
h1 .accent{color:var(--primary);}

/* ---------- Panels / cards ---------- */
.panel{background:var(--bg-panel); border:2px solid var(--line-blueprint-solid); border-radius:var(--radius-lg); padding:26px; box-shadow:0 8px 26px #00000055; transition:box-shadow .2s;}
.panel.reveal:hover{box-shadow:0 8px 26px #00000055, 0 0 0 3px var(--cyan-dim);}
.panel-tab{
  font-family:var(--mono); font-weight:700; font-size:11.5px; letter-spacing:.03em; color:var(--bg-void);
  background:var(--cyan); padding:7px 15px; border-radius:999px; display:inline-block;
  margin:-26px 0 22px -6px; transform:rotate(-1.5deg); box-shadow:0 3px 0 #1E9E93;
}
.login-box .panel-tab{margin:-26px auto 22px; display:table; transform:rotate(0);}

/* ---------- Forms ---------- */
label{display:block; font-family:var(--mono); font-weight:600; font-size:12px; color:var(--text-muted); margin-bottom:6px; letter-spacing:.03em;}
input[type=text], input[type=email], input[type=password], textarea, select{
  width:100%; background:var(--bg-panel-alt); border:2px solid var(--line-blueprint-solid); border-radius:var(--radius-sm);
  color:var(--text-primary); font-family:var(--sans); font-size:14.5px; padding:11px 14px; margin-bottom:18px;
  transition:border-color .2s, box-shadow .2s;
}
input:focus, textarea:focus, select:focus{border-color:var(--primary); outline:none; box-shadow:0 0 0 3px var(--primary-dim);}
textarea{resize:vertical; min-height:90px;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media(max-width:560px){ .field-row{grid-template-columns:1fr;} }

/* ---------- Catalog / cart ---------- */
.catalog-group{margin-bottom:22px;}
.catalog-group h4{font-family:var(--mono); font-weight:700; font-size:12px; color:var(--cyan); text-transform:uppercase; letter-spacing:.05em; margin-bottom:10px;}
.catalog-item{
  display:flex; align-items:center; gap:12px; padding:11px 14px; border:2px solid var(--line-blueprint-solid);
  border-radius:var(--radius-md); margin-bottom:8px; cursor:pointer; transition:border-color .15s, background .15s, transform .15s;
}
.catalog-item:hover{border-color:var(--cyan); transform:translateY(-1px);}
.catalog-item.checked{border-color:var(--primary); background:var(--primary-dim); box-shadow:0 0 0 2px #FF4FA322;}
.catalog-item input{width:auto; margin:0; accent-color:var(--primary);}
.catalog-item .ci-label{flex:1; font-size:14px; font-weight:500;}
.catalog-item .ci-price{font-family:var(--mono); color:var(--amber); font-size:13.5px; font-weight:700;}
.cart-total{
  position:sticky; bottom:14px; background:var(--bg-panel-alt); border:2px solid var(--cyan);
  padding:16px 22px; display:flex; justify-content:space-between; align-items:center; margin-top:14px;
  border-radius:var(--radius-lg); box-shadow:0 8px 24px #00000066;
}
.cart-total .ct-label{font-family:var(--mono); font-weight:700; font-size:13px; color:var(--text-muted);}
.cart-total .ct-value{font-family:var(--mono); font-size:24px; font-weight:700; color:var(--cyan);}

/* ---------- status badges ---------- */
.badge-status{font-family:var(--mono); font-weight:700; font-size:11px; padding:6px 13px; border:2px solid; border-radius:999px; letter-spacing:.03em; white-space:nowrap;}
.badge-status.en_attente_paiement{color:var(--bg-void); background:var(--amber); border-color:var(--amber);}
.badge-status.paye_en_attente{color:var(--bg-void); background:var(--cyan); border-color:var(--cyan);}
.badge-status.en_cours{color:var(--bg-void); background:var(--blue); border-color:var(--blue);}
.badge-status.termine{color:var(--bg-void); background:var(--green); border-color:var(--green);}
.badge-status.annule{color:var(--bg-void); background:var(--red); border-color:var(--red);}

/* ---------- order cards (client) ---------- */
.order-card{border:2px solid var(--line-blueprint-solid); background:var(--bg-panel); border-radius:var(--radius-lg); padding:20px 22px; margin-bottom:16px;}
.order-card-head{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:12px; flex-wrap:wrap;}
.order-id{font-family:var(--mono); font-size:13px; color:var(--text-muted);}
.order-items{list-style:none; margin-bottom:10px;}
.order-items li{font-size:13.5px; color:var(--text-primary); padding:5px 0; display:flex; justify-content:space-between; border-top:1px dashed #4A3B7250;}
.order-items li:first-child{border-top:none;}
.order-total{font-family:var(--mono); font-weight:700; color:var(--amber); font-size:16px; text-align:right; margin-top:6px;}
.order-date{font-family:var(--mono); font-size:11px; color:var(--text-faint);}

/* ---------- admin table ---------- */
.stats-row{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:36px;}
@media(max-width:800px){ .stats-row{grid-template-columns:repeat(2,1fr);} }
.stat-card{border:2px solid var(--line-blueprint-solid); background:var(--bg-panel); border-radius:var(--radius-md); padding:20px;}
.stat-card .s-label{font-family:var(--mono); font-weight:700; font-size:11px; color:var(--text-faint); text-transform:uppercase; margin-bottom:8px;}
.stat-card .s-value{font-family:var(--mono); font-size:26px; font-weight:700; color:var(--cyan);}

.filter-bar{display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap;}
.filter-btn{font-family:var(--mono); font-weight:700; font-size:12px; padding:9px 16px; border:2px solid var(--line-blueprint-solid); border-radius:999px; color:var(--text-muted); cursor:pointer; background:none; transition:all .15s;}
.filter-btn.active{border-color:var(--primary); background:var(--primary); color:var(--bg-void);}

.admin-table{width:100%; border-collapse:separate; border-spacing:0; border:2px solid var(--line-blueprint-solid); border-radius:var(--radius-lg); overflow:hidden; background:var(--bg-panel);}
.admin-table th{font-family:var(--mono); font-weight:700; font-size:11px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.04em; text-align:left; padding:13px 14px; border-bottom:2px solid var(--line-blueprint-solid); background:var(--bg-panel-alt);}
.admin-table td{padding:14px; border-bottom:1px dashed #4A3B7250; font-size:13.5px; vertical-align:top;}
.admin-table tr:last-child td{border-bottom:none;}
.admin-table select{margin:0; padding:6px 8px; font-size:12.5px;}
.admin-table .small-note{font-family:var(--mono); font-size:11px; color:var(--text-faint);}
.table-scroll{overflow-x:auto; border-radius:var(--radius-lg);}

/* ---------- login box ---------- */
.center-screen{min-height:70vh; display:flex; align-items:center; justify-content:center;}
.login-box{width:100%; max-width:380px;}
.login-box .panel-tab{text-align:center;}

.empty-state{text-align:center; padding:60px 20px; color:var(--text-muted); font-family:var(--mono); font-size:13px; border:2px dashed var(--line-blueprint-solid); border-radius:var(--radius-lg);}

footer{border-top:2px solid var(--line-blueprint-solid); padding:28px 0; margin-top:20px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;}
footer .fmono{font-family:var(--mono); font-size:12px; color:var(--text-faint);}

.toast{
  position:fixed; bottom:24px; right:24px; background:var(--bg-panel); border:2px solid var(--cyan);
  color:var(--text-primary); font-family:var(--mono); font-size:13px; padding:14px 20px; z-index:200;
  border-radius:var(--radius-md); transform:translateY(140%); transition:transform .3s ease; max-width:320px;
  box-shadow:0 8px 24px #00000066;
}
.toast.show{transform:translateY(0);}
.toast.error{border-color:var(--red);}

.reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

/* ---------- rarity tag (pack tiers) ---------- */
.tier-tag{
  font-family:var(--mono); font-weight:700; font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  padding:4px 10px; border-radius:999px; display:inline-block;
}
.tier-tag.common{background:var(--cyan); color:var(--bg-void);}
.tier-tag.rare{background:var(--blue); color:var(--bg-void);}
.tier-tag.legendary{background:var(--amber); color:var(--bg-void);}