/* BJMdistrib — finition visuelle et animations, mobile-first */
:root {
  --bg: #07111d;
  --s1: #101d2c;
  --s2: #192b3e;
  --ln: #2a4158;
  --tx: #f2f7fb;
  --mu: #9aafc1;
  --ac: #67dfc7;
  --wa: #f4c36e;
  --rd: #ff8288;
  --ease-out: cubic-bezier(.2,.75,.25,1);
}

html { scroll-behavior: smooth; }
body { isolation: isolate; }
body::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: -20%;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 12% 8%, #1c53604a, transparent 34%),
    radial-gradient(ellipse at 92% 38%, #183b6940, transparent 37%),
    radial-gradient(ellipse at 48% 100%, #16443b25, transparent 45%);
  animation: atmosphere-drift 24s ease-in-out infinite alternate;
}

#app { max-width: 780px; }
.scr:not(.lock-screen) { animation: screen-arrive .34s var(--ease-out) both; }
@keyframes screen-arrive {
  from { opacity: 0; transform: translate3d(0,10px,0) scale(.995); }
  to { opacity: 1; transform: translate3d(0,0,0) scale(1); }
}
@keyframes atmosphere-drift {
  from { transform: translate3d(-1%,0,0) scale(1); }
  to { transform: translate3d(1%,1.5%,0) scale(1.04); }
}
@keyframes card-arrive {
  from { opacity: 0; transform: translate3d(0,12px,0); }
  to { opacity: 1; transform: translate3d(0,0,0); }
}
@keyframes chart-draw { to { stroke-dashoffset: 0; } }
@keyframes point-pop {
  from { opacity: 0; transform: scale(.5); }
  to { opacity: 1; transform: scale(1); }
}

button, input, select { font: inherit; }
button { touch-action: manipulation; }
.btn, .bk, .tile, .bottom-nav__item, .home-install, .fleet-add,
.dash-stat, .chart-card, .dash-panel, .card, .fleet-card, .fill-product {
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out),
    background-color .2s var(--ease-out), transform .2s var(--ease-out), color .2s var(--ease-out);
}
.btn {
  position: relative;
  overflow: hidden;
  border: 1px solid #8affdf33;
  background: linear-gradient(135deg, #73e7d0, #48bda9);
  box-shadow: 0 9px 24px #43cbb233, inset 0 1px 0 #ffffff55;
  letter-spacing: -.015em;
}
.btn.g {
  border-color: #344d64;
  background: linear-gradient(145deg, #20364a, #17283a);
  box-shadow: inset 0 1px 0 #ffffff0b;
}
.btn.r { border-color: #a6525e77; background: linear-gradient(145deg,#351e2b,#251824); }
.btn:active, .bk:active { transform: translateY(1px) scale(.975); }
.bk { border-color: #354d64; background: linear-gradient(145deg,#21374b,#152638); }
.btn:focus-visible, .bk:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--ac);
  outline-offset: 3px;
}
input[type=text], input[type=number], input[type=tel], input[type=password], .buy-select {
  min-height: 46px;
  border-color: #30475d;
  background: linear-gradient(145deg,#0c1825,#0b1622);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
input:focus, .buy-select:focus {
  outline: 0;
  border-color: #62d8c4;
  box-shadow: 0 0 0 3px #62d8c422, 0 6px 20px #0002;
}
label { color: #a7b9c9; font-weight: 650; }

/* Accueil et parc de machines */
.home-v2 .home-mast { margin-bottom: 18px; }
.home-v2 .home-identity img {
  border: 1px solid #ffffff18;
  box-shadow: 0 8px 24px #0005, 0 0 0 5px #ffffff05;
}
.home-v2 .home-wordmark { font-size: 17px; letter-spacing: -.055em; }
.home-v2 .home-wordmark small { color: #a3b6c7; }
.home-v2 .home-install {
  border-color: #3a586b;
  background: linear-gradient(145deg,#21394c,#17293a);
  box-shadow: 0 7px 18px #0003,inset 0 1px 0 #ffffff12;
  transition: transform .18s var(--ease-out), border-color .18s ease, box-shadow .18s ease;
}
.home-v2 .home-install:active { transform: scale(.96); }
.home-v2 .overview {
  border-color: #3b666c;
  background:
    radial-gradient(ellipse at 100% 0,#2e6b64 0,transparent 48%),
    radial-gradient(ellipse at 0 100%,#213b54 0,transparent 57%),
    linear-gradient(145deg,#1a3042,#0e1d2b 78%);
  box-shadow: 0 22px 54px #0004, inset 0 1px 0 #ffffff0c;
}
.home-v2 .overview:after { animation: halo-drift 18s ease-in-out infinite alternate; }
@keyframes halo-drift {
  from { transform: translate3d(0,0,0) rotate(0); opacity: .7; }
  to { transform: translate3d(-12px,9px,0) rotate(12deg); opacity: 1; }
}
.home-v2 .overview-stat {
  border-color: #ffffff19;
  background: linear-gradient(145deg,#07131d99,#10222d88);
  box-shadow: inset 0 1px 0 #ffffff0b;
}
.home-v2 .overview-stat.primary { border-color: #65ddc533; }
.home-v2 .overview-stat strong { letter-spacing: -.055em; }
.home-v2 .fleet-heading { margin-top: 27px; }
.home-v2 .fleet-heading h2 { font-size: 23px; }
.home-v2 .fleet-card {
  position: relative;
  border-color: #304a61;
  background: linear-gradient(148deg,#1a2d40,#101d2b 76%);
  box-shadow: 0 13px 32px #0003, inset 0 1px 0 #ffffff08;
  animation: card-arrive .48s var(--ease-out) both;
}
.home-v2 .fleet-card:nth-child(2) { animation-delay: .045s; }
.home-v2 .fleet-card:nth-child(3) { animation-delay: .09s; }
.home-v2 .fleet-card:nth-child(4) { animation-delay: .135s; }
.home-v2 .fleet-card:nth-child(n+5) { animation-delay: .18s; }
.home-v2 .fleet-card:after {
  content: "";
  position: absolute;
  inset: 0 18px auto;
  height: 1px;
  background: linear-gradient(90deg,transparent,#9af3df3b,transparent);
  pointer-events: none;
}
.home-v2 .fleet-card__head { transition: transform .18s var(--ease-out); }
.home-v2 .fleet-card__head:active { transform: scale(.985); }
.home-v2 .fleet-card__head .brandmark { box-shadow: 0 6px 16px #0003; }
.home-v2 .fleet-stock {
  border-color: #ffffff15;
  background: linear-gradient(145deg,#0a1722,#0d1b28);
}
.home-v2 .fleet-stock__bar { background: #263b4d; box-shadow: inset 0 1px 2px #0005; }
.home-v2 .fleet-stock__bar i, .stock-screen .stock-bar i, .bar i {
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 12px #54d5bc44;
}
.home-v2 .fleet-metric { background: linear-gradient(145deg,#ffffff08,#ffffff03); }
.home-v2 .fleet-actions .btn { box-shadow: 0 7px 18px #0003; }
.home-v2 .fleet-actions .btn:first-child { box-shadow: 0 8px 22px #53d2bd33,inset 0 1px 0 #ffffff44; }
.home-v2 .fleet-add { transition: background .2s ease, border-color .2s ease, transform .2s ease; }
.home-v2 .fleet-add:active { transform: scale(.985); background:#ffffff0a; }

/* Navigation fixe */
.bottom-nav {
  border-color: #38536a;
  background: linear-gradient(145deg,#142638ed,#0d1926f2);
  box-shadow: 0 18px 48px #0009, inset 0 1px 0 #ffffff12;
}
.bottom-nav__item { position: relative; overflow: hidden; }
.bottom-nav__item svg { transition: transform .22s var(--ease-out), filter .22s ease; }
.bottom-nav__item.active {
  color: #8af0dc;
  border: 1px solid #5ed9c52b;
  background: linear-gradient(150deg,#24514f,#19384a);
  box-shadow: 0 5px 16px #3ed2b11e, inset 0 1px 0 #ffffff1c;
}
.bottom-nav__item.active svg { transform: translateY(-1px); filter: drop-shadow(0 0 5px #72e4cd77); }
.bottom-nav__item:active svg { transform: scale(.88); }

/* Fiche machine, statistiques et courbe */
.dash-head {
  border-color: #375269;
  background: radial-gradient(ellipse at 100% 0,#27495a 0,transparent 54%),linear-gradient(145deg,#1a2e41,#101b29 77%);
  box-shadow: 0 14px 34px #0003,inset 0 1px 0 #ffffff0b;
}
.dash-stat {
  border-color: #30475c;
  background: linear-gradient(150deg,#1a2d40,#111e2c 82%);
  box-shadow: 0 9px 24px #0002,inset 0 1px 0 #ffffff08;
  animation: card-arrive .42s var(--ease-out) both;
}
.dash-stat:nth-child(2) { animation-delay: .04s; }
.dash-stat:nth-child(3) { animation-delay: .08s; }
.dash-stat:nth-child(4) { animation-delay: .12s; }
.dash-stat:nth-child(5) { animation-delay: .16s; }
.dash-stat .value { letter-spacing: -.055em; }
.chart-card, .dash-panel {
  border-color: #2e475e;
  background: linear-gradient(150deg,#15283a,#101c2a 80%);
  box-shadow: 0 12px 30px #0002,inset 0 1px 0 #ffffff08;
}
.chart-card { overflow: hidden; }
.chart-revenue {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: chart-draw 1.15s .18s var(--ease-out) forwards;
  filter: drop-shadow(0 2px 5px #53d2bd55);
}
.chart-profit { filter: drop-shadow(0 2px 4px #f4bd5940); }
.chart-dot { transform-box: fill-box; transform-origin: center; animation: point-pop .32s var(--ease-out) both; }
.chart-dot:nth-of-type(1) { animation-delay:.2s; }
.chart-dot:nth-of-type(2) { animation-delay:.28s; }
.chart-dot:nth-of-type(3) { animation-delay:.36s; }
.chart-dot:nth-of-type(4) { animation-delay:.44s; }
.chart-dot:nth-of-type(5) { animation-delay:.52s; }
.chart-dot:nth-of-type(6) { animation-delay:.6s; }
.chart-dot:nth-of-type(7) { animation-delay:.68s; }
.rank-line { transition: background .18s ease, padding .18s ease; }
.rank-line.is-bestseller { margin-inline:-7px; padding-inline:7px; border-radius:12px; background:linear-gradient(90deg,#56d4b91c,transparent); }

/* Réassort et stocks */
.fill-progress { position:relative; gap:7px; }
.fill-stage { position:relative; z-index:1; }
.fill-stage i { transition: background .22s ease,border-color .22s ease,transform .22s var(--ease-out),box-shadow .22s ease; }
.fill-stage.active i { transform:scale(1.06); box-shadow:0 0 0 4px #5edac516,0 5px 14px #0002; }
.flow-guidance {
  border: 1px solid #34556a;
  border-radius: 20px;
  background: radial-gradient(ellipse at 0 0,#1c3b4a 0,transparent 68%),linear-gradient(145deg,#15293a,#101c29);
  box-shadow: inset 0 1px 0 #ffffff0b;
}
.flow-guidance__number { box-shadow: 0 6px 17px #50cfb53a; }
.fill-screen>.card, .initial-fill-list {
  border-color: #30475e;
  background: linear-gradient(150deg,#142536,#101d2a);
}
.fill-product {
  position: relative;
  border-bottom-color: #ffffff12;
}
.fill-product[data-bestseller="true"] {
  margin-inline:-8px;
  padding-inline:8px;
  border-radius:15px;
  border-bottom-color:transparent;
  background:linear-gradient(100deg,#57d9bc12,transparent 80%);
}
.fill-product__main>b { letter-spacing:-.025em; }
.fill-add {
  padding:9px 8px;
  border:1px solid #ffffff0e;
  border-radius:17px;
  background:linear-gradient(145deg,#0c1925,#0e1b28);
}
.fill-add .st button {
  border-color:#39556b;
  background:linear-gradient(145deg,#263e52,#1b3042);
  box-shadow:0 4px 10px #0003;
  transition:transform .14s var(--ease-out),background .14s ease,border-color .14s ease;
}
.fill-add .st button:active { transform:scale(.9); border-color:var(--ac); }
.fill-add .st .fill-add__input {
  min-height:44px;
  border-color:#3b5d70;
  background:#122536;
  color:#8af0d9;
}
.product-visual, .stock-screen .pg {
  border-color:#30485e;
  background:linear-gradient(145deg,#10202e,#0c1824);
}
.stock-screen .pg[data-bestseller="true"] { box-shadow:0 8px 24px #4cc3b011; }
.stock-screen .stock-bar { box-shadow:inset 0 1px 2px #0005; }
.field-help { color:#92a8bb; }
.row { transition:background .18s ease,padding .18s ease; }
.row:active { background:#ffffff06; }

/* Verrouillage, confidentialité et retour visuel */
.lock-card-v2 {
  border-color:#3b5d73;
  background:radial-gradient(ellipse at 50% -5%,#2b586a 0,transparent 52%),linear-gradient(155deg,#172d40,#0d1926 78%);
  box-shadow:0 28px 80px #0008,inset 0 1px 0 #ffffff12;
  animation:card-arrive .55s var(--ease-out) both;
}
.lock-card-v2 .pin button {
  border-color:#3b5970;
  background:linear-gradient(145deg,#223b51,#172a3d);
  box-shadow:0 6px 15px #0004,inset 0 1px 0 #ffffff10;
  transition:transform .13s var(--ease-out),border-color .16s ease,background .16s ease,box-shadow .16s ease;
}
.lock-card-v2 .pin button:active { transform:scale(.92); box-shadow:0 2px 7px #0005; }
.lock-card-v2 .faceid-button { box-shadow:0 7px 20px #52d5bd19,inset 0 1px 0 #ffffff0b; }
.lock-card-v2 .dots i { transition:transform .16s var(--ease-out),background .16s ease,box-shadow .16s ease; }
.lock-card-v2 .dots i.f { transform:scale(1.18); }
#t { box-shadow:0 12px 28px #0006; backdrop-filter:blur(16px); }

@media (hover:hover) and (pointer:fine) {
  .home-v2 .fleet-card:hover, .dash-stat:hover, .dash-panel:hover, .chart-card:hover {
    transform:translateY(-2px);
    border-color:#47677e;
    box-shadow:0 18px 38px #0004,inset 0 1px 0 #ffffff0c;
  }
  .bottom-nav__item:not(.active):hover { color:#e9f4f7; background:#ffffff0a; }
  .btn:hover { filter:brightness(1.045); box-shadow:0 12px 28px #43cbb240,inset 0 1px 0 #ffffff66; }
  .btn.g:hover { border-color:#48647a; box-shadow:inset 0 1px 0 #ffffff12; }
}
@media (max-width:620px) {
  .home-v2 .overview { box-shadow:0 18px 42px #0004,inset 0 1px 0 #ffffff0c; }
  .home-v2 .fleet-card { border-radius:21px; }
  .chart-revenue { stroke-width:3.4; }
  .fill-add { padding:7px 6px; }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after {
    scroll-behavior:auto !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}