/* ============================================================
   3TRANX LOGISTIQUE — Habillage moderne + animations (client)
   Additif : se charge APRÈS style.css. Ne touche pas à l'admin.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

:root{
  --ui-shadow: 0 4px 20px rgba(15,23,42,.06);
  --ui-shadow-lg: 0 14px 40px rgba(249,115,22,.18);
  --ui-grad: linear-gradient(135deg,#f97316 0%,#fb923c 45%,#f59e0b 100%);
}

/* ── Transitions globales douces ── */
a, button, .card, .btn-primary, .btn-sm, .btn-track, .dcard, .kpi, .stat-card, .badge, input, select, textarea {
  transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
}

/* ── Animations d'entrée ── */
@keyframes ui-fade-up { from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:translateY(0);} }
@keyframes ui-fade    { from{opacity:0;} to{opacity:1;} }
@keyframes ui-pop     { 0%{transform:scale(.9);opacity:0;} 60%{transform:scale(1.03);} 100%{transform:scale(1);opacity:1;} }
@keyframes ui-pulse   { 0%,100%{box-shadow:0 0 0 0 rgba(249,115,22,.5);} 50%{box-shadow:0 0 0 8px rgba(249,115,22,0);} }
@keyframes ui-shine   { from{background-position:-200% 0;} to{background-position:200% 0;} }
@keyframes ui-float   { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-6px);} }
@keyframes ui-bar     { from{width:0;} }

/* Le hero et les cartes apparaissent en fondu-montant */
.hero { animation: ui-fade-up .5s both; }
.card, .dcard, .status-panel { animation: ui-fade-up .5s both; }
/* Décalage progressif (effet cascade) */
.page-wrap > .card:nth-of-type(1){animation-delay:.04s}
.page-wrap > .card:nth-of-type(2){animation-delay:.10s}
.page-wrap > .card:nth-of-type(3){animation-delay:.16s}
.page-wrap > .card:nth-of-type(4){animation-delay:.22s}
.page-wrap > .card:nth-of-type(5){animation-delay:.28s}
.dcard:nth-of-type(2){animation-delay:.06s}
.dcard:nth-of-type(3){animation-delay:.12s}
.dcard:nth-of-type(4){animation-delay:.18s}
.dcard:nth-of-type(5){animation-delay:.24s}
.kpi{ animation: ui-pop .5s both; }
.kpi:nth-child(2){animation-delay:.07s}
.kpi:nth-child(3){animation-delay:.14s}
.kpi:nth-child(4){animation-delay:.21s}
.stat-card{ animation: ui-pop .45s both; }

/* ── Topbar : léger flou + ombre ── */
.topbar{ backdrop-filter: saturate(140%) blur(8px); box-shadow: 0 1px 0 rgba(15,23,42,.06); }
.logo-icon{ background: var(--ui-grad) !important; box-shadow: 0 4px 14px rgba(249,115,22,.35); }

/* ── Hero : dégradé animé + halo ── */
.hero{
  position: relative; overflow: hidden;
  background: var(--ui-grad); background-size: 180% 180%;
  animation: ui-fade-up .5s both, ui-gradient 12s ease infinite;
  color:#fff; border-radius: 0 0 26px 26px;
}
@keyframes ui-gradient{ 0%{background-position:0% 50%;} 50%{background-position:100% 50%;} 100%{background-position:0% 50%;} }
.hero::after{
  content:""; position:absolute; top:-40%; right:-10%; width:260px; height:260px;
  background: radial-gradient(circle, rgba(255,255,255,.25), transparent 70%);
  border-radius:50%; animation: ui-float 6s ease-in-out infinite; pointer-events:none;
}
.hero h1, .hero p{ position:relative; color:#fff !important; }

/* ── Cartes : survol qui soulève ── */
.card:hover, .status-panel:hover{ transform: translateY(-3px); box-shadow: var(--ui-shadow-lg); }
.card, .status-panel{ box-shadow: var(--ui-shadow); }
.dcard:hover{ transform: translateY(-3px); box-shadow: var(--ui-shadow-lg); border-color: var(--brand) !important; }

/* ── KPIs : survol ── */
.kpi:hover, .stat-card:hover{ transform: translateY(-3px); box-shadow: var(--ui-shadow-lg); }

/* ── Boutons : dégradé + éclat au survol ── */
.btn-primary{
  background: var(--ui-grad) !important; border:none; position:relative; overflow:hidden;
  box-shadow: 0 6px 18px rgba(249,115,22,.32);
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 10px 26px rgba(249,115,22,.45); }
.btn-primary:active{ transform: translateY(0) scale(.99); }
.btn-primary::after{
  content:""; position:absolute; top:0; left:0; width:100%; height:100%;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  background-size: 200% 100%; opacity:0;
}
.btn-primary:hover::after{ opacity:1; animation: ui-shine 1.1s ease; }
.btn-track:hover, .btn-sm:hover{ transform: translateY(-2px); }

/* ── Champs : focus net avec halo ── */
input:focus, select:focus, textarea:focus{
  outline:none; border-color: var(--brand) !important;
  box-shadow: 0 0 0 4px rgba(249,115,22,.14);
}

/* ── Badges de statut : petit éclat ── */
.badge{ position:relative; }

/* ── Timeline : l'étape en cours pulse ── */
.timeline-step.current .timeline-dot{ animation: ui-pulse 1.8s infinite; background: var(--brand) !important; color:#fff; }
.timeline-step .timeline-dot{ transition: transform .3s ease; }
.timeline-step.done .timeline-dot{ transform: scale(1); }
/* Barre de progression qui se remplit */
.card [style*="width:"][style*="background:var(--brand)"],
.status-panel [style*="width:"][style*="background:var(--brand)"]{ animation: ui-bar 1s cubic-bezier(.22,1,.36,1) both; }

/* ── Segments (espace client) ── */
.seg a{ animation: ui-fade .5s both; }
.seg a:hover{ transform: translateY(-2px); box-shadow: var(--ui-shadow); }

/* ── En-tête client (compte) : dégradé ── */
.cli-hd{ background: var(--ui-grad) !important; box-shadow: var(--ui-shadow-lg); }

/* ── Liens produits / images : zoom doux ── */
.card img{ transition: transform .3s ease; }
.card img:hover{ transform: scale(1.04); }

/* ── Alertes : glisse depuis le haut ── */
.alert{ animation: ui-fade-up .4s both; border-left: 4px solid var(--brand); }

/* ── Toast (déjà présent) : petit rebond ── */
#toast{ animation: ui-pop .4s both; }

/* ── Accessibilité : couper les animations si demandé ── */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}