/* ============================================================
   MÉCAREMAP — MÉCAFILES THEME (socle partagé landing + panel)
   Unifie le branding (or/rouge/verre) et le rendu de la pièce
   MÉCACOIN. Importé par file-service.html (landing) ET
   mecafiles.html (panel) pour une identité unique « 100 M€ ».
   © 2026 MÉCAREMAP
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;600;700;800;900&family=Inter:wght@300;400;500;600;700;800&family=Rajdhani:wght@500;600;700&display=swap');

/* ── Jetons de marque (rappel, pour usage hors global.css) ── */
:root {
  --mc-red:        #E30613;
  --mc-red-dark:   #a80410;
  --mc-gold:       #C9A84C;
  --mc-gold-light: #E8C96A;
  --mc-gold-deep:  #9a7b2e;
  --mc-ink:        #060608;
  --mc-glass:      rgba(255, 255, 255, 0.045);
  --mc-glass-brd:  rgba(255, 255, 255, 0.09);
  --mc-gold-glow:  rgba(201, 168, 76, 0.35);
}

/* ============================================================
   1) PIÈCE MÉCACOIN — rendu correct (PNG transparent, sans blend)
   ------------------------------------------------------------
   IMPORTANT : ne JAMAIS utiliser mix-blend-mode:multiply sur la
   pièce — le PNG est déjà transparent ; multiply la noircit sur
   fond sombre. On la rend telle quelle, avec un léger halo doré.
   ============================================================ */
.mc-coin {
  display: inline-block;
  object-fit: contain;
  vertical-align: middle;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 5px rgba(201, 168, 76, 0.30));
  -webkit-user-drag: none;
  user-select: none;
}
/* Tailles utilitaires (si pas définies en inline) */
.mc-coin--xs { width: 16px;  height: 16px; }
.mc-coin--sm { width: 20px;  height: 20px; }
.mc-coin--md { width: 28px;  height: 28px; }
.mc-coin--lg { width: 40px;  height: 40px; }

/* ── Scène pièce HERO : halo + flottaison + reflet « shimmer » ── */
.mc-coin-stage {
  position: relative;
  display: inline-grid;
  place-items: center;
  isolation: isolate;
  width: clamp(180px, 34vw, 300px);
  aspect-ratio: 1;
}
/* Halo doré pulsant derrière la pièce */
.mc-coin-stage::before {
  content: "";
  position: absolute;
  inset: -14%;
  z-index: -1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 45%,
      rgba(201, 168, 76, 0.45) 0%,
      rgba(227, 6, 19, 0.10) 38%,
      transparent 68%);
  filter: blur(14px);
  animation: mc-halo 6s ease-in-out infinite;
}
/* Anneau lumineux fin */
.mc-coin-stage::after {
  content: "";
  position: absolute;
  inset: 4%;
  z-index: -1;
  border-radius: 50%;
  border: 1px solid rgba(201, 168, 76, 0.18);
  box-shadow: 0 0 60px rgba(201, 168, 76, 0.18) inset;
}
.mc-coin--hero {
  width: 78%;
  height: 78%;
  filter:
    drop-shadow(0 18px 40px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 22px rgba(201, 168, 76, 0.35));
  animation: mc-float 7s ease-in-out infinite;
  transform-style: preserve-3d;
}
/* Reflet « shimmer » qui balaie la pièce (clippé en disque) */
.mc-coin-shimmer {
  position: absolute;
  inset: 11%;
  z-index: 1;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 60%, transparent 72%);
          mask: radial-gradient(circle at 50% 50%, #000 60%, transparent 72%);
}
.mc-coin-shimmer::before {
  content: "";
  position: absolute;
  top: -60%;
  left: -120%;
  width: 80%;
  height: 220%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0.0) 30%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0.0) 70%,
    transparent 100%);
  transform: rotate(8deg);
  mix-blend-mode: screen;
  animation: mc-sheen 5.5s ease-in-out infinite;
}

@keyframes mc-float {
  0%, 100% { transform: translateY(0) rotateZ(-2deg); }
  50%      { transform: translateY(-16px) rotateZ(2deg); }
}
@keyframes mc-halo {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.06); }
}
@keyframes mc-sheen {
  0%   { left: -120%; }
  55%  { left: 130%; }
  100% { left: 130%; }
}

@media (prefers-reduced-motion: reduce) {
  .mc-coin--hero { animation: none; }
  .mc-coin-stage::before { animation: none; }
  .mc-coin-shimmer::before { animation: none; opacity: 0; }
}

/* ============================================================
   2) BOUTON OR PREMIUM (partagé landing + panel)
   ============================================================ */
.btn-gold,
.mc-btn-gold {
  --_g1: var(--mc-gold-light);
  --_g2: var(--mc-gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--_g1), var(--_g2));
  color: #1a1305;
  font-weight: 800;
  letter-spacing: 0.02em;
  border: 1px solid rgba(232, 201, 106, 0.6);
  box-shadow: 0 8px 26px rgba(201, 168, 76, 0.28);
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}
.btn-gold:hover,
.mc-btn-gold:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 14px 38px rgba(201, 168, 76, 0.42);
}

/* ============================================================
   3) PONT DE TOKENS POUR LE PANEL (#fs-app)
   ------------------------------------------------------------
   Ce bloc n'a d'effet que là où les --mf-* sont utilisés
   (mecafiles.html / file-service.css). Chargé APRÈS le CSS du
   panel, il réaligne la palette sur le branding du site et
   applique les polices de marque aux titres.
   ============================================================ */
:root {
  --mf-red:      #E30613;
  --mf-red-dim:  #a80410;
  --mf-gold:     #C9A84C;
  --mf-gold-dim: #9a7b2e;
  --mf-dark:     #060608;
  --mf-panel:    #0c0c12;
  --mf-panel2:   #121219;
  --mf-panel3:   #181822;
  --mf-border:   rgba(255, 255, 255, 0.08);
  --mf-border2:  rgba(255, 255, 255, 0.13);
}

/* Polices de marque dans le panel (titres = Orbitron, texte = Inter) */
#fs-app, #fs-loader {
  font-family: 'Inter', system-ui, sans-serif;
}
.fs-topbar-title,
.fs-section-title,
.fs-kpi-value,
.fs-wallet-balance-value,
.fs-loader-logo,
.fs-sidebar-logo-text strong {
  font-family: 'Orbitron', 'Inter', sans-serif !important;
  letter-spacing: 0.01em;
}

/* Logo sidebar : laisser la place à la pièce */
.fs-sidebar-logo .mc-coin { width: 30px; height: 30px; }

/* Reflet doré subtil sur les cartes KPI au survol (cohérence marque) */
.fs-kpi-card[data-accent="gold"]:hover {
  border-color: rgba(201, 168, 76, 0.4);
  box-shadow: 0 8px 30px rgba(201, 168, 76, 0.12);
}

/* ── Statuts additionnels alignés sur la contrainte DB file_orders.status
   (awaiting_client / done) — la table en a 7, le JS n'en stylait que 6. ── */
.fs-badge-awaiting_client {
  background: rgba(251, 146, 60, 0.15);
  color: #fb923c;
  border: 1px solid rgba(251, 146, 60, 0.3);
}
.fs-badge-awaiting_client::before { background: #fb923c; animation: badge-pulse 2s infinite; }
.fs-badge-done {
  background: rgba(201, 168, 76, 0.15);
  color: var(--mc-gold);
  border: 1px solid rgba(201, 168, 76, 0.3);
}
.fs-badge-done::before { background: var(--mc-gold); }