:root { color-scheme: dark; }
* { -webkit-tap-highlight-color: transparent; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { overflow-x: hidden; letter-spacing: -0.011em; }

/* ---------- Surfaces & sections ---------- */
.hero-bg {
  background:
    radial-gradient(900px 420px at 88% -8%, rgba(249,115,22,.10), transparent 60%),
    radial-gradient(700px 380px at 5% 0%, rgba(255,255,255,.03), transparent 55%);
  border-bottom: 1px solid var(--line, #232833);
}
.glass { background: rgba(11,13,18,.72); backdrop-filter: saturate(140%) blur(14px); }

.card { background: #12151C; border: 1px solid #232833; border-radius: 0.9rem; }
.card-2 { background: #171B24; border: 1px solid #232833; border-radius: 0.9rem; }
.card-hover { transition: border-color .18s ease, transform .18s ease, background .18s ease; }
.card-hover:hover { border-color: #2E3542; transform: translateY(-2px); }
.divide-line > * + * { border-top: 1px solid #232833; }

/* ---------- Boutons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:600; font-size:.925rem; line-height:1; border-radius:.7rem;
  padding:.72rem 1.15rem; transition: all .15s ease; cursor:pointer; border:1px solid transparent;
  white-space:nowrap; }
.btn svg { width:1.1em; height:1.1em; }
.btn-brand { background:#F97316; color:#0B0D12; box-shadow: 0 1px 0 rgba(255,255,255,.12) inset; }
.btn-brand:hover { background:#FB923C; }
.btn-ghost { background:transparent; color:#E7EAF0; border-color:#2E3542; }
.btn-ghost:hover { border-color:#475065; background:#171B24; }
.btn-soft { background:#171B24; color:#E7EAF0; border-color:#232833; }
.btn-soft:hover { border-color:#2E3542; background:#1B2029; }
.btn-danger { background:#F04438; color:#fff; }
.btn-danger:hover { background:#e0362b; }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn-lg { padding:.9rem 1.5rem; font-size:1rem; border-radius:.8rem; }
.btn-sm { padding:.5rem .8rem; font-size:.83rem; }

/* ---------- Champs ---------- */
.input, select.input { width:100%; background:#0B0D12; border:1px solid #2E3542; border-radius:.65rem;
  padding:.72rem .85rem; color:#F1F5F9; outline:none; transition:border .15s, box-shadow .15s;
  font-size:16px; /* 16px = empêche le zoom auto des champs sur iOS */ }
.input:focus { border-color:#F97316; box-shadow:0 0 0 3px rgba(249,115,22,.14); }
.input::placeholder { color:#4B5563; }
select.input { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23667085' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .7rem center; padding-right:2rem; }
.label { font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:#98A2B3; margin-bottom:.4rem; display:block; }

/* ---------- Chips / tags ---------- */
.chip { display:inline-flex; align-items:center; gap:.4rem; border:1px solid #2E3542; border-radius:.6rem;
  padding:.5rem .85rem; cursor:pointer; transition:all .15s; font-size:.875rem; font-weight:500; color:#CBD5E1; background:#0B0D12; }
.chip.active { background:rgba(249,115,22,.12); color:#FDBA74; border-color:#F97316; }
.chip:hover:not(.active) { border-color:#475065; color:#fff; }

.badge { display:inline-flex; align-items:center; gap:.35rem; font-size:.72rem; font-weight:600;
  padding:.25rem .55rem; border-radius:.4rem; border:1px solid #232833; }
.badge-ok { background:rgba(18,183,106,.12); color:#6CE9A6; border-color:rgba(18,183,106,.3); }
.badge-warn { background:rgba(247,144,9,.12); color:#FDB022; border-color:rgba(247,144,9,.3); }
.badge-dim { background:#171B24; color:#98A2B3; }
.badge-brand { background:rgba(249,115,22,.12); color:#FDBA74; border-color:rgba(249,115,22,.3); }

/* ---------- Navigation ---------- */
.nav-link { display:inline-flex; align-items:center; gap:.45rem; padding:.5rem .75rem; border-radius:.55rem;
  font-weight:500; font-size:.9rem; color:#98A2B3; cursor:pointer; transition:.15s; }
.nav-link:hover { color:#fff; background:#171B24; }
.nav-link.active { color:#fff; background:#1B2029; }
.nav-link.active svg { color:#F97316; }

.mobile-tab { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:.55rem 0;
  font-size:.66rem; font-weight:500; color:#667085; transition:.15s; }
.mobile-tab.active { color:#F97316; }
.mobile-tab svg { width:1.3rem; height:1.3rem; }

/* ---------- Toast ---------- */
.toast-item { display:flex; align-items:center; gap:.6rem; background:#171B24; border:1px solid #2E3542;
  border-radius:.7rem; padding:.7rem 1rem; box-shadow:0 12px 40px rgba(0,0,0,.55); animation:pop .2s ease;
  width:100%; font-size:.9rem; }
.toast-item svg { flex-shrink:0; width:1.15rem; height:1.15rem; }
.toast-ok { border-color:rgba(18,183,106,.4); } .toast-ok svg { color:#12B76A; }
.toast-err { border-color:rgba(240,68,56,.4); } .toast-err svg { color:#F04438; }
@keyframes pop { from { transform:translateY(8px); opacity:0 } to { transform:none; opacity:1 } }

/* ---------- Divers ---------- */
.spin { width:1.05rem; height:1.05rem; border:2px solid rgba(255,255,255,.25); border-top-color:#fff;
  border-radius:50%; animation:rot .8s linear infinite; display:inline-block; }
@keyframes rot { to { transform:rotate(360deg) } }

.stat-num { font-variant-numeric: tabular-nums; letter-spacing:-.02em; }
.pulse-dot { position:relative; }
.pulse-dot::after { content:''; position:absolute; inset:0; border-radius:50%; background:#12B76A;
  animation:pulse 1.8s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(18,183,106,.5)} 70%{box-shadow:0 0 0 7px rgba(18,183,106,0)} 100%{box-shadow:0 0 0 0 rgba(18,183,106,0)} }

::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background:#2E3542; border-radius:8px; }
::-webkit-scrollbar-track { background:#0B0D12; }

.fade-in { animation: fade .28s ease; }
@keyframes fade { from { opacity:0; transform:translateY(5px) } to { opacity:1; transform:none } }

table.data th { font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:#98A2B3; font-weight:600; }
table.data td, table.data th { padding:.8rem 1rem; text-align:left; }
table.data tbody tr { border-top:1px solid #232833; }
table.data tbody tr:hover { background:#171B24; }

canvas.pose-canvas, video.pose-video { transform: scaleX(-1); }
.progress-track { background:#232833; border-radius:999px; overflow:hidden; }
.progress-fill { background:#F97316; height:100%; transition:width .3s ease; }

/* ---------- Anti-débordement & mobile ---------- */
img, svg, video, canvas { max-width: 100%; }
table.data td { overflow-wrap: anywhere; }
.break-anywhere { overflow-wrap: anywhere; word-break: break-word; }
.card, main { min-width: 0; }

@media (max-width: 1023px) {
  main { padding-bottom: 5rem; }            /* dégage la barre de navigation du bas */
  #toast { bottom: 5.25rem; }               /* toasts au-dessus de la barre mobile */
  .card { border-radius: 0.8rem; }
  h1 { line-height: 1.1; }
}