/* ============================================================
   BCBT — Administration v1 (démo honnête)
   Fond profond texturé + couleurs de joie. Aucune grande
   section en couleur unie : dégradés, grille fine, lueurs.
   ============================================================ */
:root{
  --sun:#FFC93C; --coral:#FF6B57; --lav:#B8A9E8; --sage:#9DBE9C;
  --mist:#8FB8D8; --pink:#F7A8B8;
  --ink:#0C0D16; --panel:rgba(255,255,255,.045);
  --line:rgba(255,255,255,.10); --txt:#F4F1EA; --dim:#B9B4C7;
  --radius:10px;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{scrollbar-color:#3a3a55 var(--ink)}
body{
  margin:0; color:var(--txt);
  font-family:"Avenir Next","Segoe UI",system-ui,-apple-system,sans-serif;
  background-color:var(--ink);
  background-image:
    radial-gradient(640px 320px at 12% -40px, rgba(255,201,60,.16), transparent 62%),
    radial-gradient(760px 400px at 95% 60px, rgba(184,169,232,.14), transparent 62%),
    radial-gradient(900px 520px at 50% 115%, rgba(255,107,87,.12), transparent 62%),
    radial-gradient(520px 300px at 85% 78%, rgba(143,184,216,.10), transparent 60%);
  background-attachment:fixed;
  min-height:100vh;
  padding-bottom:96px; /* place pour la barre d'onglets mobile */
}
body::before{ /* grille fine sur le fond — jamais un aplat vide */
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.032) 1px, transparent 1px);
  background-size:30px 30px;
}
main, header, nav{position:relative; z-index:1}
::selection{background:var(--sun); color:#221a00}
:focus-visible{outline:2px solid var(--sun); outline-offset:2px}

.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- En-tête ---------- */
.topbar{
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(12,13,22,.88), rgba(12,13,22,.72));
  backdrop-filter:blur(8px);
  position:sticky; top:0; z-index:5;
}
.topbar-inner{
  max-width:1180px; margin:0 auto; padding:12px 16px 10px;
  display:flex; align-items:center; gap:14px;
}
.logo{width:86px; height:auto; flex:none; filter:drop-shadow(0 2px 10px rgba(0,0,0,.5))}
.topbar-text{flex:1; min-width:0}
.topbar-title{margin:0; font-weight:800; letter-spacing:.04em; font-size:1.02rem; text-transform:uppercase}
.accent-coral{color:var(--coral)}
.topbar-tag{margin:2px 0 0; font-size:.92rem; color:var(--sun); font-weight:600}
.topbar-sub{color:var(--dim); font-weight:400; display:block; font-size:.8rem}
.env-badge{
  flex:none; font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink); background:linear-gradient(120deg, var(--sun), var(--coral));
  padding:6px 10px; border-radius:999px;
}
.honesty-strip{
  max-width:1180px; margin:0 auto; padding:7px 16px 10px;
  font-size:.78rem; color:var(--dim); border-top:1px dashed rgba(255,255,255,.08);
}
.honesty-strip strong{color:var(--txt)}

/* ---------- Structure ---------- */
.wrap{max-width:1180px; margin:0 auto; padding:20px 16px 8px}
.panel{display:none; animation:panel-in .35s ease both}
.panel.active{display:block}
@keyframes panel-in{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
.panel-title{font-size:1.28rem; margin:4px 0 10px; line-height:1.3}
.panel-title .piste{
  display:block; font-size:.74rem; letter-spacing:.22em; color:var(--lav);
  font-weight:700; margin-bottom:5px;
}
.panel-lead{color:var(--dim); line-height:1.55; max-width:68ch; margin:0 0 18px}
.panel-lead strong, .status-card strong{color:var(--txt)}
.section-title{margin:26px 0 12px; font-size:1.02rem; letter-spacing:.02em}

/* ---------- Cartes ---------- */
.card{
  background:linear-gradient(165deg, rgba(255,255,255,.065), rgba(255,255,255,.02));
  border:1px solid var(--line); border-radius:var(--radius);
  padding:16px; position:relative; overflow:hidden;
}
.card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--acc, var(--sun)), transparent 85%);
}
.card h4{margin:2px 0 8px; font-size:1.02rem}
.card p{margin:0; color:var(--dim); line-height:1.5; font-size:.92rem}
.card-kicker{font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--acc, var(--sun)); font-weight:700; margin:0 0 4px !important}

/* ---------- Badges ---------- */
.badge{
  display:inline-block; font-size:.66rem; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; padding:4px 9px; border-radius:999px; line-height:1.4;
}
.badge.prep{background:rgba(255,201,60,.14); color:var(--sun); border:1px solid rgba(255,201,60,.45)}
.badge.demo{background:rgba(255,107,87,.15); color:#ffb0a4; border:1px solid rgba(255,107,87,.5)}
.badge.todo{background:rgba(143,184,216,.14); color:var(--mist); border:1px solid rgba(143,184,216,.45)}
.badge.sample{background:rgba(157,190,156,.14); color:var(--sage); border:1px solid rgba(157,190,156,.45)}

/* ---------- Tableau de bord ---------- */
.stat-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
.stat-card{padding:14px 16px}
.stat-num{font-size:1.9rem; font-weight:800; line-height:1.05; color:var(--acc)}
.stat-label{color:var(--txt); font-weight:600; font-size:.92rem; margin-top:2px}
.stat-sub{color:var(--dim); font-size:.78rem; line-height:1.45; margin-top:3px}
.status-grid{display:grid; gap:10px}
.status-card .badge{margin-top:12px}

/* ---------- Avis ---------- */
.notice{
  border-radius:var(--radius); padding:13px 15px; line-height:1.55; font-size:.9rem;
  border:1px solid var(--line); margin:0 0 16px; color:var(--dim);
}
.notice strong{color:var(--txt)}
.notice-sun{background:linear-gradient(140deg, rgba(255,201,60,.12), rgba(255,201,60,.03))}
.notice-coral{background:linear-gradient(140deg, rgba(255,107,87,.13), rgba(255,107,87,.03))}

/* ---------- Catalogue ---------- */
.catalogue-tools{display:grid; gap:10px; margin-bottom:12px}
.tool{display:grid; gap:5px}
.tool.grow{flex:1}
.tool-label{font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); font-weight:700}
input[type="search"], input[type="text"], input[type="number"], select, textarea{
  width:100%; background:rgba(10,10,20,.65); color:var(--txt);
  border:1px solid var(--line); border-radius:8px; padding:11px 12px; font:inherit; font-size:.95rem;
}
input::placeholder, textarea::placeholder{color:#7d7790}
input:focus, select:focus, textarea:focus{border-color:var(--sun); outline:none}
.result-count{color:var(--dim); font-size:.85rem; margin:4px 0 10px}
.item-list{display:grid; gap:10px}
.item-card{
  display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:start;
  background:linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  border:1px solid var(--line); border-radius:var(--radius); padding:13px 14px;
}
.item-piste{font-weight:800; color:var(--acc, var(--sun)); font-size:1.05rem; padding-top:2px}
.item-main h4{margin:0 0 3px; font-size:.98rem; line-height:1.35}
.item-meta{color:var(--dim); font-size:.83rem; margin:0 0 8px}
.item-price{font-weight:800; font-size:1.12rem; color:var(--sun); white-space:nowrap; padding-top:2px}
.empty{color:var(--dim); text-align:center; padding:26px 10px}

/* ---------- Ajout d'une pièce ---------- */
.dropzone{
  display:grid; gap:4px; text-align:center; cursor:pointer;
  border:2px dashed rgba(255,201,60,.5); border-radius:var(--radius);
  padding:30px 16px; margin-bottom:16px;
  background:
    radial-gradient(420px 160px at 50% 0%, rgba(255,201,60,.12), transparent 70%),
    linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  transition:border-color .2s, transform .2s;
}
.dropzone:hover, .dropzone.drag{border-color:var(--sun); transform:translateY(-1px)}
.dz-icon{font-size:2rem}
.dz-main{font-weight:700; font-size:1.02rem}
.dz-sub{color:var(--dim); font-size:.82rem}
.preview-box{position:relative; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); margin-bottom:16px; background:#000}
.preview-box img{display:block; width:100%; max-height:430px; object-fit:contain; background:#07070d}
.scan-line{
  position:absolute; left:0; right:0; height:64px; top:-64px;
  background:linear-gradient(180deg, transparent, rgba(255,201,60,.35), rgba(255,201,60,.75));
  animation:scan 1.5s ease-in-out infinite alternate;
}
@keyframes scan{from{transform:translateY(0)} to{transform:translateY(480px)}}
.scan-status{
  position:absolute; left:0; right:0; bottom:0; margin:0; padding:9px 14px;
  background:rgba(5,5,12,.82); font-size:.85rem; color:var(--sun);
}
.fiche{
  border:1px solid var(--line); border-radius:var(--radius); padding:16px;
  background:linear-gradient(165deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  display:grid; gap:14px;
}
.fiche-head{display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-weight:800; margin:0}
#fiche-fields{display:grid; gap:12px}
.field{
  display:grid; gap:6px; padding:11px 12px; border:1px solid rgba(255,255,255,.08);
  border-radius:8px; background:rgba(10,10,22,.45);
  opacity:0; transform:translateY(10px); transition:opacity .45s ease, transform .45s ease;
}
.field.shown{opacity:1; transform:none}
.field-top{display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap}
.field-label{font-size:.74rem; letter-spacing:.13em; text-transform:uppercase; color:var(--dim); font-weight:700}
.field-note{font-size:.76rem; color:var(--lav)}
.conf-row{display:flex; align-items:center; gap:9px}
.conf-track{flex:1; height:7px; border-radius:99px; background:rgba(255,255,255,.10); overflow:hidden}
.conf-fill{height:100%; width:0; border-radius:99px; transition:width 1s ease .15s}
.conf-fill.hi{background:linear-gradient(90deg, var(--sage), #cfe3b8)}
.conf-fill.mid{background:linear-gradient(90deg, var(--sun), #ffd97a)}
.conf-fill.low{background:linear-gradient(90deg, var(--coral), #ff9d8a)}
.conf-val{font-size:.8rem; font-weight:700; min-width:86px}
.conf-hint{font-size:.72rem; color:var(--dim)}
textarea{resize:vertical; min-height:64px; line-height:1.5}

.price-box{border:1px solid rgba(255,201,60,.35); border-radius:var(--radius); padding:14px; margin:0; display:grid; gap:12px}
.price-box legend{font-weight:800; padding:0 6px; display:flex; gap:8px; align-items:center}
.price-demo-note{margin:0; color:var(--dim); font-size:.85rem; line-height:1.5}
.price-trio{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.price-opt{display:grid; gap:5px; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); font-weight:700; text-align:center}
.price-opt input{text-align:center; font-weight:800; font-size:1.05rem}
.price-opt.price-target input{border-color:var(--sun); color:var(--sun); background:rgba(255,201,60,.08)}
.comps{list-style:none; margin:0; padding:0; display:grid; gap:6px}
.comps li{
  display:flex; justify-content:space-between; gap:10px; font-size:.83rem; color:var(--dim);
  border:1px dashed rgba(255,255,255,.16); border-radius:8px; padding:8px 11px;
}
.comps em{color:var(--pink); font-style:normal; white-space:nowrap}
.fiche-actions{display:grid; gap:8px; justify-items:start}
.fiche-actions-note{margin:0; color:var(--dim); font-size:.82rem; line-height:1.5; max-width:60ch}

/* ---------- Boutons ---------- */
.btn{
  font:inherit; font-weight:800; letter-spacing:.02em; cursor:pointer;
  border-radius:8px; padding:12px 18px; border:1px solid transparent;
}
.btn-primary{background:linear-gradient(120deg, var(--sun), var(--coral)); color:#241300}
.btn-primary:disabled{opacity:.45; cursor:not-allowed; filter:grayscale(.35)}
.btn-primary:not(:disabled):hover{filter:brightness(1.07)}

/* ---------- Splash ---------- */
.video-box{
  border-radius:var(--radius); overflow:hidden; border:1px solid var(--line);
  background:#000; box-shadow:0 18px 50px rgba(0,0,0,.5);
}
.video-box video{display:block; width:100%; height:auto; aspect-ratio:1024/784; background:#000}
.splash-actions{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin:14px 0 20px}
.beat-grid{display:grid; gap:10px}

/* ---------- Réglages ---------- */
.settings-card{margin-bottom:12px}
.settings-card h4{display:flex; gap:9px; align-items:center; flex-wrap:wrap}
.switch-row, .num-row{
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  padding:11px 2px; border-top:1px dashed rgba(255,255,255,.09); line-height:1.45; font-size:.93rem;
}
.switch-row small, .num-row small{color:var(--dim)}
.switch-row input[type="checkbox"]{
  appearance:none; width:46px; height:26px; flex:none; border-radius:99px; margin:0;
  background:rgba(255,255,255,.13); border:1px solid var(--line); position:relative; cursor:not-allowed; opacity:.55;
}
.switch-row input[type="checkbox"]::after{
  content:""; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%;
  background:#8f8aa3;
}
.num-row input{width:96px; text-align:center; flex:none}
.settings-note{margin:10px 0 0; color:var(--dim); font-size:.84rem; line-height:1.55}
.commission-example{
  margin:8px 0 0; padding:11px 13px; border-radius:8px; font-size:.9rem; line-height:1.55;
  background:rgba(255,201,60,.08); border:1px solid rgba(255,201,60,.3);
}

/* ---------- Barre d'onglets ---------- */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:10;
  display:grid; grid-template-columns:repeat(5,1fr);
  background:linear-gradient(180deg, rgba(16,17,30,.92), rgba(10,10,18,.97));
  border-top:1px solid var(--line); backdrop-filter:blur(10px);
  padding-bottom:env(safe-area-inset-bottom);
}
.tab{
  font:inherit; background:none; border:none; cursor:pointer; color:var(--dim);
  display:grid; justify-items:center; gap:1px; padding:9px 2px 10px;
  border-top:3px solid transparent;
}
.tab-num{font-weight:800; font-size:.95rem; letter-spacing:.06em}
.tab-label{font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700}
.tab.active{color:var(--txt); border-top-color:var(--sun)}
.tab.active .tab-num{color:var(--sun)}

/* ---------- Bureau ---------- */
@media (min-width:760px){
  .logo{width:118px}
  .topbar-sub{display:inline; margin-left:8px}
  .stat-grid{grid-template-columns:repeat(3,1fr)}
  .status-grid{grid-template-columns:repeat(2,1fr)}
  .catalogue-tools{grid-template-columns:1fr 230px 210px; align-items:end}
  .item-list{grid-template-columns:repeat(2,1fr)}
  .beat-grid{grid-template-columns:repeat(2,1fr)}
  #fiche-fields{grid-template-columns:repeat(2,1fr)}
  .field.wide{grid-column:1/-1}
  body{padding-bottom:110px}
}
@media (min-width:1080px){
  .status-grid{grid-template-columns:repeat(3,1fr)}
  .item-list{grid-template-columns:repeat(3,1fr)}
  .stat-grid{grid-template-columns:repeat(6,1fr)}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001s !important; transition-duration:.001s !important}
}