/* BoosterX - Premium UI (home) */

:root{
  --bg0:#070A12;
  --bg1:#0B1020;
  --card: rgba(255,255,255,.06);
  --card2: rgba(255,255,255,.09);
  --stroke: rgba(255,255,255,.10);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.70);
  --muted2: rgba(255,255,255,.55);
  --accent:#ff7a18;
  --accent2:#ffb347;
  --good:#2be2a8;
  --shadow: 0 18px 60px rgba(0,0,0,.55);
  --radius: 18px;
  --radius2: 14px;
}

*{box-sizing:border-box}
html,body{height:100%}
body.bx{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Noto Sans", Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 18% 12%, rgba(255,122,24,.18), transparent 55%),
    radial-gradient(900px 700px at 85% 18%, rgba(43,226,168,.12), transparent 60%),
    radial-gradient(1000px 900px at 55% 95%, rgba(255,179,71,.10), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}

a{color:inherit; text-decoration:none}
a:hover{opacity:.95}
.bx-container{
  width:min(1120px, calc(100% - 40px));
  margin:0 auto;
}

.bx-header{
  position:sticky; top:0; z-index:50;
  background: rgba(7,10,18,.55);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.bx-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
  gap:14px;
}

.bx-brand{display:flex; align-items:center; gap:10px}
.bx-brand-mark{
  width:38px; height:38px;
  border-radius:12px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color:#111;
  font-weight:900;
  letter-spacing:.3px;
  box-shadow: 0 14px 30px rgba(255,122,24,.22);
}
.bx-brand-name{font-weight:800; letter-spacing:.2px}

.bx-menu{
  display:flex;
  align-items:center;
  gap:18px;
}
.bx-menu a{
  color: var(--muted);
  font-weight:650;
  font-size:14px;
}
.bx-menu a:hover{color:var(--text)}

.bx-burger{
  display:none;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  border-radius: 12px;
  width:44px; height:44px;
  padding:0;
  cursor:pointer;
}
.bx-burger span{
  display:block;
  width:18px;
  height:2px;
  background: rgba(255,255,255,.88);
  margin:4px auto;
  border-radius:2px;
}

.bx-btn{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: var(--text);
  padding:12px 14px;
  border-radius: 14px;
  font-weight:800;
  font-size:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  cursor:pointer;
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
}
.bx-btn:hover{
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.16);
}
.bx-btn:active{transform: translateY(1px)}
.bx-btn--full{width:100%}

.bx-btn--primary{
  border-color: rgba(255,122,24,.30);
  background: linear-gradient(135deg, rgba(255,122,24,.95), rgba(255,179,71,.92));
  color:#111;
  box-shadow: 0 18px 50px rgba(255,122,24,.18);
}
.bx-btn--primary:hover{
  filter: brightness(1.03);
  border-color: rgba(255,122,24,.45);
}
.bx-btn--soft{
  border-color: rgba(43,226,168,.22);
  background: rgba(43,226,168,.12);
}
.bx-btn--soft:hover{
  border-color: rgba(43,226,168,.32);
  background: rgba(43,226,168,.16);
}
.bx-btn--ghost{
  background: transparent;
}

.bx-hero{
  padding: 52px 0 28px;
}
.bx-hero-grid{
  display:grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 26px;
  align-items: stretch;
}

.bx-chip{
  display:inline-flex;
  gap:10px;
  align-items:center;
  padding:8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: var(--muted);
  font-weight:700;
  font-size:13px;
}

.bx-title{
  margin: 16px 0 10px;
  font-size: clamp(34px, 4.2vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.7px;
}
.bx-accent{
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.bx-subtitle{
  margin:0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
  max-width: 54ch;
}

.bx-hero-cta{
  display:flex;
  gap: 12px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.bx-badges{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.bx-badge{
  padding:8px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--muted);
  font-weight:700;
  font-size:13px;
}

.bx-glass{
  height:100%;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  box-shadow: var(--shadow);
  padding: 18px;
  position:relative;
  overflow:hidden;
}
.bx-glass:before{
  content:"";
  position:absolute; inset:-80px;
  background:
    radial-gradient(420px 260px at 18% 22%, rgba(255,122,24,.20), transparent 60%),
    radial-gradient(380px 300px at 85% 30%, rgba(43,226,168,.14), transparent 62%);
  filter: blur(10px);
  opacity:.9;
  pointer-events:none;
}
.bx-glass > *{position:relative}

.bx-glass-title{
  font-weight:900;
  letter-spacing:.2px;
  margin-bottom: 14px;
}

.bx-mini-cards{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.bx-mini-card{
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  padding: 12px;
}
.bx-mini-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom: 10px;
}
.bx-mini-label{
  color: var(--text);
  font-weight:900;
  font-size:14px;
}
.bx-mini-pill{
  font-weight:900;
  font-size:12px;
  padding: 6px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  color: var(--muted);
  background: rgba(255,255,255,.05);
}
.bx-mini-big{
  font-size:18px;
  font-weight:950;
  letter-spacing:-.3px;
}
.bx-mini-sub{
  margin-top: 4px;
  color: var(--muted2);
  font-weight:700;
  font-size:12px;
}
.bx-glass-foot{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top: 14px;
  color: var(--muted);
  font-weight:700;
  font-size:13px;
}
.bx-dot{
  width:10px; height:10px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 0 6px rgba(43,226,168,.12);
}

.bx-section{
  padding: 34px 0;
}
.bx-section-head{
  margin-bottom: 16px;
}
.bx-section-head h2{
  margin:0 0 6px;
  font-size: 26px;
  letter-spacing: -.2px;
}
.bx-section-head p{
  margin:0;
  color: var(--muted);
  line-height: 1.5;
}

.bx-card{
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  box-shadow: var(--shadow);
  padding: 18px;
}

.bx-form{padding: 18px}
.bx-form-grid{
  display:grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 14px;
}
.bx-field--wide{grid-column: 1 / -1}

.bx-field label{
  display:block;
  color: var(--muted);
  font-weight:800;
  font-size:13px;
  margin-bottom: 8px;
}
.bx-label-empty{opacity:0}

.bx-field input,
.bx-field select{
  width:100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  color: var(--text);
  padding: 12px 12px;
  outline: none;
  font-weight:750;
}
.bx-field input:focus,
.bx-field select:focus{
  border-color: rgba(255,122,24,.35);
  box-shadow: 0 0 0 6px rgba(255,122,24,.10);
}
.bx-help{
  margin-top: 8px;
  color: var(--muted2);
  font-weight:650;
  font-size:12px;
  line-height:1.4;
}

.bx-recap{
  margin-top: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  display:flex;
  justify-content:space-between;
  gap: 14px;
  padding: 14px;
}
.bx-recap-title{
  font-weight:950;
  margin-bottom: 6px;
}
.bx-recap-line{
  color: var(--muted);
  font-weight:750;
  margin-top: 4px;
}
.bx-recap-price{
  text-align:right;
  font-size: 24px;
  font-weight: 980;
  letter-spacing: -.4px;
}
.bx-recap-sub{
  text-align:right;
  color: var(--muted2);
  font-weight:700;
  font-size:12px;
  margin-top: 4px;
}

.bx-note{
  margin-top: 10px;
  color: var(--muted2);
  font-weight:650;
  font-size:12px;
  line-height: 1.5;
}

.bx-form-grid--track{
  grid-template-columns: 1fr 220px;
  align-items:end;
}

.bx-faq{
  display:grid;
  gap: 12px;
}
.bx-faq-item{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  padding: 12px 14px;
}
.bx-faq-item summary{
  cursor:pointer;
  font-weight:900;
  color: var(--text);
}
.bx-faq-body{
  margin-top: 10px;
  color: var(--muted);
  font-weight:650;
  line-height: 1.55;
}

.bx-footer-note{
  margin-top: 18px;
  color: var(--muted2);
  font-weight:650;
  font-size:12px;
}

/* Mobile menu */
@media (max-width: 860px){
  .bx-hero-grid{grid-template-columns: 1fr; }
  .bx-mini-cards{grid-template-columns: 1fr 1fr}
  .bx-form-grid{grid-template-columns: 1fr}
  .bx-form-grid--track{grid-template-columns: 1fr}
  .bx-menu{
    position: fixed;
    top: 70px;
    left: 20px;
    right: 20px;
    display:none;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(7,10,18,.92);
    backdrop-filter: blur(14px);
    box-shadow: var(--shadow);
  }
  body.bx-menu-open .bx-menu{display:flex}
  .bx-burger{display:block}
}

/* Small */
@media (max-width: 420px){
  .bx-container{width:min(1120px, calc(100% - 28px))}
  .bx-mini-cards{grid-template-columns: 1fr}
}

/* ===============================
   TITRES – CENTRAGE LANDING
================================ */
.bx-title,
.bx-subtitle{
  text-align:center;
}

/* Sous-titre plus propre */
.bx-subtitle{
  max-width: 720px;
  margin: 0 auto 1.6rem auto;
  opacity: .85;
}

/* ===============================
   FIX LIGNES ROUGES (focus/border)
================================ */
input, select, textarea, button{
  outline: none !important;
}

input:focus, select:focus, textarea:focus{
  border-color: rgba(255,255,255,.18) !important;
  box-shadow: 0 0 0 1px rgba(255,120,0,.35) !important;
}


/* ===============================
   FIX STRIES (banding) MOBILE
   Cause: backdrop-filter + gradients
================================ */
@media (max-width: 900px){
  /* désactive le blur sur mobile */
  .bx-card, .bx-panel, .bx-box, .bx-form, .bx-summary, .bx-glass, .glass{
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* fond plus "plein" = plus de stries */
  .bx-card, .bx-panel, .bx-box, .bx-form, .bx-summary, .bx-glass, .glass{
    background: rgba(14, 14, 18, .88) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    box-shadow: 0 18px 50px rgba(0,0,0,.55) !important;
  }
}

/* évite les “lignes” dues aux outlines / tap highlight */
*{
  -webkit-tap-highlight-color: transparent;
}


/* ===============================
   TEST: couper les overlays / gradients du fond
   (banding sur mobile -> lignes)
================================ */
body{
  background: #0b0b10 !important;
  background-image: none !important;
}

body::before,
body::after{
  content: none !important;
  display: none !important;
  background: none !important;
  filter: none !important;
  opacity: 0 !important;
}

/* coupe aussi les "glow/noise layers" si présents */
.bx-bg, .bx-ambient, .bx-glow, .bx-noise,
.bg, .ambient, .glow, .noise{
  display: none !important;
}


/* ===============================
   FIX: fond premium SAFE (sans banding)
   - garde les overlays OFF
   - remet un fond propre + léger grain
================================ */

/* fond principal: dégradé très doux */
html, body{
  background: radial-gradient(1200px 800px at 20% 10%, rgba(255,70,70,.08), rgba(0,0,0,0) 60%),
              radial-gradient(900px 700px at 85% 20%, rgba(255,140,60,.06), rgba(0,0,0,0) 55%),
              linear-gradient(180deg, #07070b 0%, #0b0b12 40%, #07070b 100%) !important;
  background-attachment: fixed !important;
}

/* on laisse les pseudo-elements coupés (c’est eux qui bandaient)
   mais on ajoute un grain ultra léger sur un vrai élément */
body{
  position: relative;
}

/* petit grain discret, sans filter/blur */
body::before{
  content: "" !important;
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .06;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, rgba(0,0,0,0) 1px 3px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, rgba(0,0,0,0) 1px 4px);
  mix-blend-mode: overlay;
}

/* assure que le contenu reste au-dessus */
main, header, nav, .bx-wrap, .bx-container, .bx-card{
  position: relative;
  z-index: 1;
}

/* ===============================
   CENTRAGE GLOBAL DES SECTIONS
================================ */

section,
.bx-section {
  text-align: center;
}

/* Titres principaux */
section h1,
section h2 {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* Sous-titres */
section p,
.section-subtitle {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 680px;
}

.bx-error{
  margin-top:.6rem;
  font-size:.95rem;
  font-weight:600;
  color:#ff4d4d;
  text-align:center;
}

/* ===============================
   AUTH MODAL (Login / Register)
================================ */
.bx-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.bx-modal.is-open{ display: block; }

.bx-modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.60);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.bx-modal__card{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(520px, calc(100vw - 32px));
  border-radius: 22px;
  padding: 18px 18px 16px 18px;

  background: rgba(18,18,22,.78);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 28px 80px rgba(0,0,0,.65),
    0 0 0 1px rgba(255,255,255,.06) inset;

  animation: bxModalIn .18s ease-out;
}

@keyframes bxModalIn{
  from { opacity: 0; transform: translate(-50%,-46%) scale(.98); }
  to   { opacity: 1; transform: translate(-50%,-50%) scale(1); }
}

.bx-modal__close{
  position: absolute;
  right: 12px;
  top: 12px;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.90);
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.bx-modal__close:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.18);
}

.bx-modal__head{ padding: 10px 10px 4px 10px; }

.bx-modal__badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .2px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}

.bx-modal__title{
  margin: 12px 0 6px 0;
  font-size: 26px;
  line-height: 1.1;
}

.bx-modal__sub{
  margin: 0 0 10px 0;
  opacity: .78;
}

.bx-modal__form{
  padding: 10px;
  display: grid;
  gap: 12px;
}

.bx-field{
  display: grid;
  gap: 6px;
}

.bx-field > span{
  font-weight: 700;
  font-size: 13px;
  opacity: .85;
}

.bx-field input{
  width: 100%;
  border-radius: 16px;
  padding: 12px 14px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
  outline: none;
  transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}

.bx-field input::placeholder{ color: rgba(255,255,255,.35); }

.bx-field input:focus{
  border-color: rgba(255,140,0,.45);
  box-shadow: 0 0 0 4px rgba(255,140,0,.15);
  background: rgba(0,0,0,.28);
}

.bx-modal__cta{
  margin-top: 4px;
  width: 100%;
  border-radius: 16px;
  padding: 12px 14px;
  font-weight: 800;
}

.bx-modal__row{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
  font-size: 13px;
  opacity: .92;
}

.bx-link{
  color: rgba(255,255,255,.85);
  text-decoration: none;
  border-bottom: 1px dashed rgba(255,255,255,.25);
}
.bx-link:hover{
  color: rgba(255,255,255,.95);
  border-bottom-color: rgba(255,255,255,.45);
}

.bx-sep{ opacity: .35; }

.bx-link--disabled{
  opacity: .45;
  cursor: not-allowed;
  border-bottom-color: rgba(255,255,255,.12);
}

@media (max-width: 420px){
  .bx-modal__title{ font-size: 22px; }
  .bx-modal__card{ border-radius: 18px; }
}


/* ===============================
   AUTH MODAL (login) - BoosterX
   =============================== */

.bx-no-scroll { overflow: hidden; }

.bx-modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}

.bx-modal.is-open{ display: block; }

.bx-modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.bx-modal__panel{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 420px);
  border-radius: 18px;
  padding: 18px 16px 16px;
  background: rgba(18,18,22,.92);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
}

.bx-modal__title{
  margin: 2px 0 4px;
  font-size: 1.25rem;
  font-weight: 800;
  text-align: center;
}

.bx-modal__subtitle{
  margin: 0 0 14px;
  opacity: .8;
  text-align: center;
}

.bx-modal__close{
  position: absolute;
  right: 10px;
  top: 10px;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: #fff;
  font-size: 18px;
}

.bx-modal__close:active{ transform: scale(.98); }

.bx-auth{ display: grid; gap: 12px; }

.bx-auth__label span{
  display: block;
  font-size: .9rem;
  opacity: .85;
  margin-bottom: 6px;
}

.bx-auth__input{
  width: 100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
  color: #fff;
  outline: none;
}

.bx-auth__input:focus{
  border-color: rgba(255,140,40,.55);
  box-shadow: 0 0 0 3px rgba(255,140,40,.15);
}

.bx-auth__submit{
  width: 100%;
  margin-top: 4px;
}

.bx-auth__forgot{
  display: block;
  text-align: center;
  margin-top: 6px;
  font-size: .92rem;
  opacity: .85;
  text-decoration: none;
}

.bx-auth__forgot:hover{ opacity: 1; }

/* Inscription désactivée (menu) */
.bx-link-pill--disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(100%);
}

/* Menu mobile – boutons auth */
.bx-menu .bx-link-pill {
  margin-top: 0.6rem;
  text-align: center;
}

.bx-menu .bx-link-pill + .bx-link-pill {
  margin-top: 0.4rem;
}

/* --- Auth modal bottom actions (align row) --- */
.bx-auth-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  margin-top: .9rem;
  opacity:.92;
}

.bx-auth__link{
  font-weight:600;
  text-decoration:none;
  color: rgba(255,255,255,.85);
}

.bx-auth__link:hover{
  color: rgba(255,255,255,1);
  text-decoration: underline;
}

.bx-auth__link--disabled{
  opacity:.55;
  cursor:not-allowed;
  pointer-events:none; /* bloque le clic */
  text-decoration:none !important;
}

.bx-auth-sep{
  opacity:.55;
}

/* ===============================
   MENU – Pills premium (Connexion/Inscription)
   =============================== */
.bx-menu{
  display:flex;
  align-items:center;
  gap: .8rem;
}

.bx-link-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  padding:.55rem .95rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.88);
  font-weight: 700;
  letter-spacing: .2px;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
}

.bx-link-pill:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.18);
  color: rgba(255,255,255,1);
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
}

.bx-link-pill:active{
  transform: translateY(0px);
}

.bx-link-pill--primary{
  border-color: rgba(255,140,0,.25);
  background: linear-gradient(180deg, rgba(255,140,0,.22), rgba(120,0,0,.25));
  box-shadow: 0 14px 40px rgba(255,120,0,.10);
}

.bx-link-pill--primary:hover{
  border-color: rgba(255,140,0,.38);
  box-shadow: 0 18px 52px rgba(255,120,0,.14);
}

.bx-link-pill--disabled{
  opacity:.55;
  cursor:not-allowed;
  pointer-events:none;
}

/* Mobile menu (quand burger ouvert) : centre et espace */
body.bx-menu-open .bx-menu{
  flex-direction: column;
  align-items: center;
  gap: .9rem;
}

body.bx-menu-open .bx-menu .bx-link-pill{
  min-width: 180px;
}


/* ===============================
   MOBILE MENU – caché par défaut, ouvert uniquement avec .bx-menu-open
   + espace réduit Inscription/Connexion
   =============================== */
@media (max-width: 860px){
  .bx-menu{
    position: fixed;
    left: 16px;
    right: 16px;
    top: 86px;
    z-index: 999;
    padding: 14px 14px;
    border-radius: 18px;
    background: rgba(10,10,14,.82);
    border: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(14px);

    /* fermé par défaut */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .55rem;                 /* <-- espace réduit */
    opacity: 0;
    transform: translateY(-8px) scale(.98);
    pointer-events: none;
    visibility: hidden;
  }

  body.bx-menu-open .bx-menu{
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    visibility: visible;
  }

  .bx-menu-sep{
    display:none !important;
  }

  body.bx-menu-open .bx-menu .bx-link-pill{
    min-width: 180px;
  }
}

/* =========================
   MENU MOBILE – SECTION COMPTE
   ========================= */

.bx-menu {
  gap: 10px; /* réduit l'espacement global */
}

/* Séparateur visuel "Compte" */
.bx-menu-account {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  gap: 6px; /* espace réduit inscription / connexion */
}

/* Titre discret */
.bx-menu-account-title {
  font-size: 12px;
  opacity: 0.6;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 4px;
}

/* Inscription désactivée */
.bx-menu-account .bx-link-pill--disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Bouton Connexion plus clean */
.bx-menu-account .bx-link-pill {
  padding: 6px 14px;
  font-size: 14px;
}

/* --- Menu mobile : bloc Compte centré --- */
.bx-menu-account {
  text-align: center;
}

.bx-menu-account-title {
  display: block;
  width: 100%;
  text-align: center;
  margin: 6px 0 10px;
  letter-spacing: 0.12em;
  opacity: 0.75;
}

/* =========================
   MENU MOBILE – COMPTE + spacing
   ========================= */

/* Séparateur plus propre (la barre avant "Compte") */
.bx-menu-sep{
  height: 1px;
  width: 100%;
  margin: 10px 0;
  opacity: .35;
}

/* "COMPTE" (juste après le séparateur) : centré + stylé */
.bx-menu .bx-menu-sep + *{
  display: block;
  width: 100%;
  text-align: center;
  margin: 4px 0 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .20em;
  text-transform: uppercase;
  color: rgba(255, 165, 60, .95);
  text-shadow: 0 0 10px rgba(255, 120, 0, .25);
}

/* Réduire l’espace entre Inscription et Connexion */
.bx-menu .bx-link-pill,
.bx-menu .bx-link-pill--disabled{
  margin-top: 4px !important;
  margin-bottom: 4px !important;
  padding-top: 8px;
  padding-bottom: 8px;
}

/* Optionnel: rapprocher Inscription/Connexion entre eux */
.bx-menu .bx-link-pill--disabled{
  margin-bottom: 2px !important;
}
.bx-menu button.bx-link-pill{
  margin-top: 2px !important;
}

.bx-btn--danger {
  background: linear-gradient(135deg, #b31212, #ff3b3b);
  color: #fff;
}

.bx-btn--danger:hover {
  filter: brightness(1.1);
}

/* ===============================
   DASHBOARD ORDERS – UX polish
================================ */

.bx-token {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12.5px;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  display: inline-block;
  vertical-align: middle;
}

.bx-copy {
  margin-left: 8px;
  padding: 7px 10px !important;
  line-height: 1 !important;
  border-radius: 10px !important;
  font-size: 12.5px !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.bx-btn--sm {
  padding: 7px 10px !important;
  font-size: 12.5px !important;
  border-radius: 10px !important;
}

.bx-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12.5px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  white-space: nowrap;
}

.bx-status::before{
  content:"";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.35);
}

.bx-status--pending::before { background: rgba(255,190,0,.95); }
.bx-status--paid::before { background: rgba(0,200,255,.95); }
.bx-status--processing::before { background: rgba(0,255,170,.95); }
.bx-status--completed::before { background: rgba(120,255,120,.95); }
.bx-status--failed::before { background: rgba(255,80,80,.95); }


/* =========================
   BoosterX – Hotfix UI
   Menu align + Orders compact
   ========================= */

/* ---- MENU (burger) : éviter l'effet "centré" / items pas alignés ---- */
.bx-menu,
.bx-menu *{
  box-sizing: border-box;
}

.bx-menu{
  align-items: stretch !important;
}

.bx-menu a,
.bx-menu button{
  display: block;
  width: 100%;
  text-align: left !important;
  justify-content: flex-start !important;
  padding-left: 18px !important;
  padding-right: 18px !important;
}

.bx-menu .bx-menu__logout,
.bx-menu form,
.bx-menu form button{
  width: 100% !important;
  text-align: left !important;
}

.bx-menu .bx-menu__logout{
  margin-top: 10px;
  padding-left: 18px !important;
  padding-right: 18px !important;
}

/* ---- MES COMMANDES : version compacte (mobile d'abord) ---- */

/* Filtres en grille 2 colonnes (max 2 lignes visibles sur écran standard) */
.bx-orders-tabs{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  margin-top: 10px !important;
}

.bx-orders-tabs a{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 12px !important;
  border-radius: 16px !important;
  text-decoration: none !important;
  min-height: 44px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Le dernier (Annulées/Échec) prend toute la largeur si tu veux (optionnel)
   -> commente ces 2 lignes si tu préfères strict 2 colonnes partout */
.bx-orders-tabs a.is-wide{
  grid-column: 1 / -1 !important;
}

/* Cards plus petites */
.bx-order-card{
  padding: 16px !important;
  border-radius: 18px !important;
  margin-top: 14px !important;
}

.bx-order-card h3{
  font-size: 26px !important;
  margin: 0 0 6px 0 !important;
}

.bx-order-card .bx-order-meta{
  margin-top: 6px !important;
  gap: 10px !important;
  font-size: 14px !important;
}

.bx-order-card .bx-order-grid{
  margin-top: 10px !important;
  gap: 10px !important;
}

.bx-order-card .bx-order-price{
  font-size: 26px !important;
}

/* Token + actions compacts */
.bx-order-token{
  margin-top: 10px !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  word-break: break-all !important;
}

.bx-order-actions{
  margin-top: 12px !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}

.bx-order-actions .bx-btn{
  width: 100% !important;
  padding: 12px 12px !important;
  border-radius: 14px !important;
}

/* Si tu as un bouton unique (ex: "Suivi public") -> pleine largeur */
.bx-order-actions .bx-btn.is-wide{
  grid-column: 1 / -1 !important;
}

/* Desktop / grands écrans : on remet les filtres sur une ligne */
@media (min-width: 900px){
  .bx-orders-tabs{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
  }
  .bx-orders-tabs a{
    width: auto !important;
  }
  .bx-order-actions{
    display: flex !important;
    gap: 12px !important;
  }
}

/* ===== BoosterX: Orders (compact UI) ===== */
.bx-page{max-width:980px;margin:0 auto;padding:18px}
.bx-muted{opacity:.75}

.bx-orders-head h1{margin:0 0 6px 0}
.bx-orders-meta{display:flex;justify-content:space-between;gap:12px;margin-top:12px;opacity:.9}

.bx-orders-tabs{
  margin-top:14px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.bx-orders-tabs a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  text-decoration:none;
  color:inherit;
  background:rgba(0,0,0,.25);
  min-width:140px;
}
.bx-orders-tabs a.is-wide{min-width:210px}
.bx-orders-tabs a span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:28px;
  height:28px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  font-weight:700;
  font-size:12px;
  opacity:.95;
}
.bx-orders-tabs a.active{
  border-color:rgba(195,0,0,.45);
  box-shadow:0 0 0 1px rgba(195,0,0,.25) inset;
}

.bx-orders-list{display:grid;gap:14px;margin-top:14px}

.bx-order-card{padding:14px 14px 12px}
.bx-order-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.bx-order-title{margin:0;font-size:20px;line-height:1.15}
.bx-order-date{opacity:.75;font-size:14px;margin-top:3px}

.bx-order-grid{
  margin-top:10px;
  display:flex;
  justify-content:space-between;
  gap:14px;
}
.bx-order-grid small{display:block;opacity:.7;margin-bottom:3px}
.bx-order-price strong{font-size:20px}

.bx-order-target{margin-top:10px;text-align:center}
.bx-order-target small{display:block;opacity:.7;margin-bottom:3px}

.bx-order-token{
  margin-top:10px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}
.bx-token{opacity:.9;font-size:14px}

.bx-order-actions{margin-top:10px;display:flex;justify-content:center}

/* bouton ghost minimal si pas déjà présent */
.bx-btn--ghost{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.18);
  border-radius:14px;
  padding:10px 14px;
}

/* Mobile: 2 lignes max pour tabs */
@media (max-width:520px){
  .bx-orders-tabs a{min-width:calc(50% - 5px)}
  .bx-orders-tabs a.is-wide{min-width:100%}
  .bx-order-title{font-size:18px}
}

/* ===== Menu: éviter "pas centré" (si ton menu utilise .bx-menu) ===== */
.bx-menu a, .bx-menu button{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  text-align:left;
}

/* ===== MENU MOBILE FIX ===== */

.bx-menu-btn {
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: 10001;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 22px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bx-mobile-menu {
    position: fixed;
    top: 64px;
    right: 12px;
    width: 220px;
    background: rgba(10,10,10,0.98);
    border-radius: 16px;
    padding: 14px;
    display: none;
    flex-direction: column;
    gap: 12px;
    z-index: 10000;
}

.bx-mobile-menu a,
.bx-mobile-menu button {
    color: #fff;
    text-align: left;
    background: none;
    border: none;
    font-size: 16px;
}

.bx-mobile-menu.open {
    display: flex;
}


/* ===== FIX MENU (index) : centrer les items, éviter le désalignement ===== */
.bx-menu{
  text-align:center;
}

.bx-menu a,
.bx-menu button{
  display:block;
  width:100%;
  text-align:center !important;
  justify-content:center;
  align-items:center;
}

/* si ton menu a une liste */
.bx-menu ul{
  list-style:none;
  padding:0;
  margin:0;
}
.bx-menu li{
  display:block;
}

/* assure que le panneau reste bien au-dessus */
.bx-menu{
  position: relative;
  z-index: 9999;
}

/* ===== MENU HEADER : réduire l'épaisseur (mobile friendly) ===== */
.bx-header,
.bx-topbar,
.bx-navbar {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  min-height: unset !important;
}

/* logo + titre */
.bx-logo,
.bx-brand {
  line-height: 1.1 !important;
}

/* bouton burger */
.bx-burger {
  padding: 6px 8px !important;
  height: auto !important;
}

/* menu déroulant */
.bx-menu {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

/* liens menu */
.bx-menu a,
.bx-menu button {
  padding: 10px 12px !important;
  font-size: 15px;
}

/* mobile only (sécurité) */
@media (max-width: 600px) {
  .bx-header,
  .bx-topbar,
  .bx-navbar {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }
}

/* ===== HEADER ULTRA COMPACT (force) ===== */
.bx-header,
.bx-topbar,
.bx-navbar {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  min-height: 44px !important; /* hauteur mobile idéale */
}

/* Logo BX + texte */
.bx-logo,
.bx-brand,
.bx-brand span {
  line-height: 1 !important;
  font-size: 16px !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Bouton burger */
.bx-burger {
  padding: 4px 6px !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px;
}

/* Icône burger (les traits) */
.bx-burger span,
.bx-burger i {
  transform: scale(0.85);
}

/* Menu déroulant */
.bx-menu {
  padding: 8px 10px !important;
}

/* Liens menu */
.bx-menu a,
.bx-menu button {
  padding: 8px 10px !important;
  font-size: 14px !important;
}

/* Mobile sécurité */
@media (max-width: 600px) {
  .bx-header,
  .bx-topbar,
  .bx-navbar {
    min-height: 40px !important;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
  }
}

/* =========================================================
   BX OVERRIDES — Header/Menu compact (mobile) — BoosterX
   (Ajouté en fin de fichier pour écraser les doublons)
   ========================================================= */

.bx-header{
  padding: 10px 14px !important;
}

.bx-header__inner{
  min-height: 56px !important;
  align-items: center !important;
}

.bx-brand{
  gap: 10px !important;
}

.bx-brand-name{
  font-size: 18px !important;
  line-height: 1.1 !important;
}

.bx-burger{
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 14px !important;
}

/* --- Mobile menu: moins "épais", moins de padding, mieux aligné --- */
@media (max-width: 900px){
  .bx-menu{
    position: fixed !important;
    top: 68px !important;              /* baisse la "grosse barre" */
    left: 12px !important;
    right: 12px !important;

    padding: 12px !important;
    gap: 10px !important;

    border-radius: 18px !important;
    max-height: calc(100vh - 92px) !important;
    overflow: auto !important;

    justify-content: flex-start !important; /* évite le centrage chelou */
    align-items: stretch !important;
    text-align: left !important;
  }

  /* liens/boutons du menu : pleine largeur, pas centrés */
  .bx-menu a,
  .bx-menu button{
    width: 100% !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }

  /* séparateur + logout un peu plus compacts */
  .bx-menu-sep{
    margin: 6px 0 !important;
  }
  .bx-menu-logout,
  .bx-menu form{
    width: 100% !important;
  }
}

/* Menu visible uniquement quand .bx-menu-open est actif (sécurise) */
@media (max-width: 900px){
  .bx-menu{ display: none; }
  body.bx-menu-open .bx-menu{ display: flex !important; flex-direction: column !important; }
}

/* === Fix align menu + label "Menu" === */
.bx-burger{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
}

.bx-burger__icon{ line-height:1; font-size:20px; }
.bx-burger__label{ font-weight:700; font-size:14px; opacity:.95; }

/* Liens menu : éviter texte “décalé” */
.bx-menu a,
.bx-menu button{
  padding-left: 14px !important;
  padding-right: 14px !important;
  justify-content: flex-start !important;
  text-align: left !important;
}

/* Mobile : menu plus propre */
@media (max-width: 900px){
  .bx-menu{
    align-items: stretch !important;
  }
}

/* === HEADER: logo gauche, bouton droite, titre centré (toutes pages) === */
.bx-header{ position: sticky; top: 0; z-index: 50; }
.bx-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

/* centre optique du header (brand à gauche / burger à droite) */
.bx-header__center{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  text-align:center;
  width:60%;
  pointer-events:none;
}
.bx-header__center .bx-header__title{
  font-weight:800;
  letter-spacing:.2px;
}

/* burger + label */
.bx-burger{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
}
.bx-burger__icon{ font-size:20px; line-height:1; }
.bx-burger__label{ font-weight:800; font-size:14px; opacity:.95; }

/* menu mobile: items bien centrés verticalement mais texte aligné à gauche */
@media (max-width: 900px){
  .bx-menu a, .bx-menu button{
    text-align:left !important;
    justify-content:flex-start !important;
  }
}

/* === Header: titre centré + bouton "Menu" === */
.bx-header{ position: sticky; top: 0; z-index: 50; }

.bx-header .bx-nav{ position: relative; }

.bx-header__center{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  text-align:center;
  width:60%;
}

.bx-header__title{
  font-weight:800;
  letter-spacing:.2px;
  opacity:.95;
}

/* burger + label */
.bx-burger{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
}
.bx-burger__icon{ font-size:20px; line-height:1; }
.bx-burger__label{ font-weight:800; font-size:14px; opacity:.95; }


/* === Burger "comme home": rond + 3 barres visibles === */
.bx-burger{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:52px !important;
  height:52px !important;
  border-radius:16px !important;
  border:1px solid rgba(255,255,255,.08) !important;
  background:rgba(0,0,0,.35) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding:0 !important;
  gap:0 !important;
}
.bx-burger__icon, .bx-burger__label{ display:none !important; } /* on enlève "Menu" dans le bouton */
.bx-burger span{
  display:block !important;
  width:22px !important;
  height:2px !important;
  margin:3px 0 !important;
  border-radius:2px !important;
  background: rgba(255,255,255,.9) !important;
}

/* === Titre centré header (partout) === */
.bx-header .bx-nav{ position:relative; }
.bx-header__center{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  width:60%;
  pointer-events:none;
  text-align:center;
}
.bx-header__title{
  font-weight:800;
  letter-spacing:.2px;
  opacity:.95;
}

/* =========================================================
   BX — Mobile menu: centrage + look plus clean
   (Overrides en fin de fichier, donc prioritaire)
   ========================================================= */

@media (max-width: 860px){
  /* Le panneau menu */
  body.bx-menu-open .bx-menu{
    display:flex;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    width:min(520px, calc(100vw - 24px)) !important;
    margin:14px auto 0 !important;
    padding:14px !important;
  }

  /* Chaque lien/bouton centré */
  body.bx-menu-open .bx-menu a,
  body.bx-menu-open .bx-menu button{
    width:100% !important;
    max-width:480px !important;
    margin:6px auto !important;
    text-align:center !important;
    justify-content:center !important;
  }

  /* Le séparateur au milieu centré aussi */
  body.bx-menu-open .bx-menu-sep{
    width:100% !important;
    max-width:480px !important;
    margin:10px auto !important;
  }
}

/* =========================================================
   Burger plus visible: rouge / néon
   ========================================================= */
.bx-burger{
  border:1px solid rgba(195,0,0,.40) !important;
  box-shadow:
    0 0 0 1px rgba(195,0,0,.25),
    0 0 18px rgba(195,0,0,.35) !important;
}

.bx-burger:hover{
  box-shadow:
    0 0 0 1px rgba(195,0,0,.35),
    0 0 26px rgba(195,0,0,.45) !important;
}

/* Page name à côté de BoosterX */
.bx-brand-page{
  font-weight:800;
  opacity:.85;
  margin-left:10px;
  letter-spacing:.2px;
}
/* Liens non encore dispo */
.bx-link-pill--disabled{
  opacity:.45 !important;
  pointer-events:none !important;
  cursor:not-allowed !important;
}

/* ===== BoosterX patch: menu overlay + menu plus foncé ===== */
body.bx-menu-open::before{
  content:"";
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 999; /* overlay */
}

body.bx-menu-open .bx-menu{
  background: rgba(0,0,0,.86) !important;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 18px 70px rgba(0,0,0,.65);
  z-index: 1000; /* au-dessus de l’overlay */
}

/* petite amélioration lisibilité liens */
body.bx-menu-open .bx-menu a,
body.bx-menu-open .bx-menu button{
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
}

/* ===== Menu commun – mise en valeur des liens ===== */
.bx-menu a{
  color: #ffb26b;
  font-weight: 600;
}

.bx-menu a:hover{
  color: #ff7a18;
  text-shadow: 0 0 12px rgba(255,122,24,.45);
}

/* Lien actif (page courante) */
.bx-menu a.active{
  color: #ff3b30;
  font-weight: 800;
}

/* Bouton déconnexion */
.bx-menu-logout-btn{
  width: 100%;
  background: linear-gradient(135deg,#b30000,#ff3b30);
  border: none;
  border-radius: 14px;
  padding: 14px 16px;
  color: #fff;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 28px rgba(255,59,48,.35);
}

.bx-menu-logout-btn:hover{
  background: linear-gradient(135deg,#ff3b30,#ff6a00);
}

/* --- Admin quick switch (visible staff only) --- */
.bx-adminbar{
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.25);
  backdrop-filter: blur(10px);
}
.bx-adminbar__inner{
  display:flex;
  gap:10px;
  align-items:center;
  padding:10px 0;
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
}
.bx-adminbar__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.35);
  color: rgba(255,255,255,.92);
  font-weight: 800;
  text-decoration:none;
  white-space: nowrap;
}
.bx-adminbar__btn:active{
  transform: scale(.99);
}

/* --- UX: menu burger + lisible (AdminX/Dashboard) --- */
.bx-menu {
  background: rgba(0,0,0,.92);
  backdrop-filter: blur(10px);
}

body.bx-menu-open::before{
  content:"";
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.65);
  z-index: 20;
}

.bx-header { position: relative; z-index: 30; }
.bx-menu { position: relative; z-index: 40; }

.bx-menu a {
  color: rgba(255,255,255,.92);
}

.bx-link-pill--disabled{
  color: rgba(255,255,255,.55) !important;
  opacity: 1 !important;
}

/* --- BoosterX: burger menu lisibilité (Admin/AdminX) --- */
.bx-menu {
  background: rgba(0, 0, 0, 0.72);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(10px);
}

.bx-menu a {
  color: rgba(255,255,255,0.92);
}

.bx-link-pill--disabled {
  opacity: 0.75 !important;
  color: rgba(255,255,255,0.72) !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
}

.bx-link-pill--disabled:hover {
  opacity: 0.75 !important;
}


/* ===== BoosterX: Navbar meta (solde/rang) ===== */
.bx-nav-meta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  font-size:13px;
  line-height:1;
  white-space:nowrap;
}
.bx-nav-meta__sep{ opacity:.45; }
.bx-nav-meta__item{ opacity:.9; }
.bx-nav-meta__item strong{ opacity:1; font-weight:700; }


/* ===== BoosterX: Top meta (solde/rang) ===== */
.bx-nav{ position:relative; }
.bx-top-meta{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  font-size:13px;
  line-height:1;
  white-space:nowrap;
}
/* Sur mobile : on le masque si ça squeeze trop */
@media (max-width: 420px){
  .bx-top-meta{ display:none; }
}
.bx-top-meta__sep{ opacity:.45; }
.bx-top-meta__item{ opacity:.9; }
.bx-top-meta__item strong{ opacity:1; font-weight:700; }

/* --- Orders compact mode (terminées) --- */
.order-card {
  padding: 16px;
  margin-bottom: 14px;
}

.order-card--compact {
  padding: 10px 12px;
  opacity: 0.85;
}

.order-card--compact .order-title {
  font-size: 16px;
  font-weight: 700;
}

.order-card--compact .order-price-value {
  font-size: 16px;
}

.order-card--compact .order-meta {
  font-size: 13px;
}

.order-card--compact .order-token {
  font-size: 12px;
  opacity: 0.6;
  margin-top: 6px;
}

/* ===== Dashboard Orders : Tabs (filtres) ===== */
.bx-tabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  padding:12px !important;
}

.bx-tab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  border-radius:14px;
  text-decoration:none;
  font-weight:800;
  font-size:14px;
  line-height:1;
  color:rgba(255,255,255,.85);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  transition:transform .08s ease, background .15s ease, border-color .15s ease;
}

.bx-tab:active{ transform:scale(.98); }

.bx-tab.is-active{
  color:#fff;
  background:rgba(255,0,0,.18);
  border-color:rgba(255,0,0,.35);
  box-shadow:0 0 0 1px rgba(255,0,0,.18) inset;
}

/* ===== Orders cards layout ===== */
.order-card{
  padding:16px !important;
  margin-bottom:14px;
}

.order-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
}

.order-title{
  font-size:20px;
  font-weight:900;
}

.order-date{
  opacity:.75;
  margin-top:4px;
  font-size:13px;
}

.order-price{
  text-align:right;
}

.order-price-label{
  opacity:.75;
  font-size:13px;
}

.order-price-value{
  font-size:20px;
  font-weight:900;
  margin-top:2px;
}

.order-meta{
  display:flex;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}

.order-meta span{
  opacity:.7;
  font-size:12px;
  display:block;
}

.order-meta strong{
  font-size:14px;
}

.order-token{
  margin-top:12px;
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:12px;
  opacity:.85;
  word-break:break-all;
}

.order-actions{
  margin-top:12px;
  display:flex;
  justify-content:flex-end;
}

/* ===== Compact mode (Terminées) ===== */
.order-card--compact{
  padding:10px 12px !important;
  opacity:.88;
}

.order-card--compact .order-title{ font-size:16px; font-weight:850; }
.order-card--compact .order-price-value{ font-size:16px; }
.order-card--compact .order-meta strong{ font-size:13px; }
.order-card--compact .order-token{ font-size:11px; opacity:.65; }


/* =========================
   Dashboard Orders (BX)
   ========================= */
.bx-orders__top{
  padding:14px;
}

.bx-orders__meta{
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  opacity:.9;
}

.bx-orders__tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:12px;
}

.bx-tab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:9px 12px;
  border-radius:14px;
  text-decoration:none;
  font-weight:800;
  font-size:13px;
  color:rgba(255,255,255,.85);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
}

.bx-tab.is-active{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.18);
}

.bx-orders__cta{
  margin-top:12px;
}

.bx-orders__list{
  margin-top:14px;
}

.bx-order-card{
  padding:12px;
  margin-bottom:12px;
}

.bx-order-card__head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
}

.bx-order-card__name{
  font-size:16px;
  font-weight:950;
  line-height:1.15;
}

.bx-order-card__date{
  margin-top:4px;
  font-size:12px;
  opacity:.7;
}

.bx-order-card__price{
  text-align:right;
  min-width:92px;
}

.bx-order-card__priceLabel{
  font-size:12px;
  opacity:.7;
}

.bx-order-card__priceValue{
  font-size:16px;
  font-weight:950;
  margin-top:2px;
}

.bx-order-card__grid{
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-top:10px;
}

.bx-order-card__kv{
  min-width:140px;
}

.bx-order-card__k{
  font-size:12px;
  opacity:.7;
}

.bx-order-card__v{
  font-size:14px;
  font-weight:900;
}

.bx-order-card__foot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}

.bx-order-card__token{
  font-size:12px;
  opacity:.85;
}

.bx-order-card__reorder{
  padding:8px 10px !important;
  border-radius:12px !important;
  font-size:13px !important;
}

/* =========================
   Dashboard Orders (BX) - Clean UI
   ========================= */
.bx-orders__top{ padding:14px; }
.bx-orders__meta{
  display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap;
  opacity:.9;
}

.bx-orders__tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.bx-tab{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px;
  border-radius:999px;
  text-decoration:none;
  font-weight:900;
  font-size:13px;
  color:rgba(255,255,255,.9);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}
.bx-tab.is-active{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.20);
}
.bx-badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:22px; height:18px;
  padding:0 6px;
  border-radius:999px;
  font-size:12px;
  font-weight:950;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.10);
}

.bx-orders__cta{ margin-top:12px; }
.bx-orders__list{ margin-top:14px; }

.bx-order-card{
  padding:14px;
  margin-bottom:12px;
}
.bx-order-card__row1{
  display:flex; justify-content:space-between; gap:12px; align-items:flex-start;
}
.bx-order-card__left{ min-width:0; }
.bx-order-card__title{
  font-size:16px;
  font-weight:1000;
  line-height:1.15;
  letter-spacing:.2px;
}
.bx-order-card__sub{ font-size:12px; opacity:.7; margin-top:4px; }
.bx-order-card__right{ text-align:right; min-width:92px; }
.bx-order-card__price{ font-size:16px; font-weight:1000; margin-top:2px; }

.bx-order-card__row2{
  display:flex; gap:10px; flex-wrap:wrap;
  margin-top:12px;
}
.bx-order-card__pill{
  display:flex; gap:8px; align-items:baseline;
  padding:8px 10px;
  border-radius:14px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}
.bx-pill__k{ font-size:12px; opacity:.65; font-weight:800; }
.bx-pill__v{
  font-size:13px;
  font-weight:950;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  max-width:240px;
}

.bx-order-card__row3{
  display:flex; justify-content:space-between; gap:10px;
  align-items:center; flex-wrap:wrap;
  margin-top:12px;
}
.bx-order-card__token{ font-size:12px; opacity:.85; }

.bx-order-card__reorder{
  padding:8px 10px !important;
  border-radius:14px !important;
  font-size:13px !important;
  font-weight:950 !important;
}

/* ===== BoosterX: Parrainage layout fix ===== */
.bx-ref-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;      /* autorise passage à la ligne */
  min-width:0;         /* évite débordements flex */
}

.bx-ref-input{
  flex:1 1 420px;      /* prend la place, mais peut wrap */
  min-width:0;
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:inherit;
  outline:none;
}

.bx-ref-input:focus{
  border-color: rgba(255,255,255,.25);
}

.bx-ref-btn{
  flex:0 0 auto;
  white-space:nowrap;
}

/* Mobile: le bouton passe dessous en full width */
@media (max-width: 520px){
  .bx-ref-btn{ width:100%; }
  .bx-ref-input{ flex-basis:100%; }
}

/* FIX: évite une "pilule vide" dans le menu */
.bx-menu a:empty,
.bx-menu button:empty,
.bx-menu .bx-menu-item:empty,
.bx-menu .bx-menu-row:empty{
  display:none !important;
}

/* =========================
   BoosterX - Burger v3 (clean)
   ========================= */
.bx-burger{
  width:44px !important;
  height:44px !important;
  border-radius:16px !important;
  border:1px solid rgba(255,255,255,.10) !important;
  background:rgba(15,15,20,.35) !important;
  box-shadow:
    0 10px 30px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,140,0,.12) inset,
    0 0 22px rgba(255,140,0,.10) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:pointer !important;
  transition:transform .12s ease, background .15s ease, box-shadow .15s ease !important;
}

.bx-burger span{
  display:block !important;
  width:18px !important;
  height:2px !important;
  margin:2.5px 0 !important;
  border-radius:99px !important;
  background:rgba(255,255,255,.86) !important;
  box-shadow:0 0 10px rgba(255,140,0,.10) !important;
  opacity:.95 !important;
}

.bx-burger:hover{
  background:rgba(15,15,20,.48) !important;
  box-shadow:
    0 12px 34px rgba(0,0,0,.42),
    0 0 0 1px rgba(255,140,0,.18) inset,
    0 0 28px rgba(255,140,0,.14) !important;
}

.bx-burger:active{
  transform:scale(.97) !important;
}

/* =========================
   BoosterX - Footer SEO
   ========================= */
.bx-footer{padding:28px 0 34px;border-top:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.18);backdrop-filter: blur(10px)}
.bx-footer__grid{display:grid;gap:16px}
.bx-footer__brand{display:flex;align-items:center;gap:12px}
.bx-footer__logo{width:42px;height:42px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-weight:900;color:#111;background:linear-gradient(135deg, rgba(255,140,0,.92), rgba(255,80,0,.75))}
.bx-footer__name{font-weight:900;letter-spacing:.2px}
.bx-footer__desc{opacity:.72;font-size:13px;margin-top:2px}
.bx-footer__links{display:flex;flex-wrap:wrap;gap:10px}
.bx-footer__links a{padding:10px 12px;border-radius:14px;text-decoration:none;color:#fff;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10)}
.bx-footer__links a:hover{background:rgba(255,255,255,.08)}
.bx-footer__copy{opacity:.7;font-size:13px}

@media (min-width: 920px){
  .bx-footer__grid{grid-template-columns: 1fr 1.2fr; align-items:center}
  .bx-footer__copy{grid-column:1 / -1}
}