/* ============================================================
   Mysteria — embellissement des formulaires publics
   (douane /wl, staff /staff, déban /appeal). Chargé APRÈS
   la feuille de la page + neo-theme.css → il gagne.
   Effets : hero immersif, cartes verre, lueur or / cyan.
   ============================================================ */

/* ---- HERO : bannière immersive + logo flottant ---- */
.hero { height: 300px !important; border-bottom: 1px solid rgba(212,175,55,.32) !important;
  background-color: #070b14 !important; background-position: center !important; background-size: cover !important;
  animation: neoHeroZoom 20s ease-in-out infinite alternate; }
@keyframes neoHeroZoom { from { background-size: 106% auto; } to { background-size: 118% auto; } }
.hero::after {
  background:
    radial-gradient(700px 340px at 18% 130%, rgba(212,175,55,.28), transparent 60%),
    radial-gradient(500px 260px at 82% 10%, rgba(0,212,255,.18), transparent 55%),
    linear-gradient(180deg, rgba(7,11,20,.28), rgba(7,11,20,.78) 55%, var(--bg,#070b14)) !important;
}
.hero-in { padding: 26px 30px !important; align-items: flex-end !important; }
.hero-logo { width: 96px !important; height: 96px !important; border-radius: 50% !important;
  border: 2px solid rgba(212,175,55,.65) !important; background: #0c1422 !important;
  box-shadow: 0 12px 36px rgba(0,0,0,.6), 0 0 34px rgba(0,212,255,.28) !important;
  object-fit: cover !important;
  animation: neoFloat 4.5s ease-in-out infinite; }
@keyframes neoFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.hero-txt h1 { font-family: 'Cinzel', serif !important; font-size: 34px !important; line-height: 1.1 !important;
  background: linear-gradient(180deg, #ffffff 10%, #ffd700 80%, #d4af37);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; filter: drop-shadow(0 2px 18px rgba(0,212,255,.35)); }
.hero-badge { color: #1a1302 !important; background: linear-gradient(180deg,#ffe27a,#d4af37) !important;
  border: none !important; border-radius: 999px !important; box-shadow: 0 4px 16px rgba(212,175,55,.4); }

/* ---- CARTES : verre + apparition en cascade + accent or ---- */
.wrap .card { background: rgba(16,26,44,.72) !important; backdrop-filter: blur(13px); -webkit-backdrop-filter: blur(13px);
  border: 1px solid rgba(212,175,55,.18) !important; border-radius: 16px !important;
  box-shadow: 0 12px 36px rgba(0,0,0,.42) !important; position: relative; overflow: hidden;
  opacity: 0; transform: translateY(16px); animation: neoUp .55s cubic-bezier(.2,.75,.3,1) forwards;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.wrap .card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, #00d4ff, #d4af37); opacity: .9; }
.wrap .card:hover { border-color: rgba(212,175,55,.5) !important; transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0,0,0,.5), 0 0 24px rgba(0,212,255,.12) !important; }
@keyframes neoUp { to { opacity: 1; transform: none; } }
.wrap .card:nth-of-type(1){animation-delay:.04s} .wrap .card:nth-of-type(2){animation-delay:.10s}
.wrap .card:nth-of-type(3){animation-delay:.16s} .wrap .card:nth-of-type(4){animation-delay:.22s}
.wrap .card:nth-of-type(5){animation-delay:.28s} .wrap .card:nth-of-type(6){animation-delay:.34s}
.wrap .card:nth-of-type(n+7){animation-delay:.40s}
.wrap .intro { animation: neoUp .5s ease forwards; }

/* ---- numéros d'étape dorés ---- */
.step-t .n { background: linear-gradient(180deg,#ffe27a,#d4af37) !important; color: #1a1302 !important;
  border: none !important; box-shadow: 0 2px 8px rgba(212,175,55,.4); font-weight: 900 !important; }

/* ---- champs : coins ronds + focus glow ---- */
.q input, .q textarea, .q select { border-radius: 11px !important; background: rgba(7,11,20,.62) !important;
  border: 1px solid rgba(255,255,255,.12) !important; transition: border-color .15s, box-shadow .15s, background .15s; }
.q input:focus, .q textarea:focus, .q select:focus { border-color: #d4af37 !important;
  box-shadow: 0 0 0 3px rgba(212,175,55,.2), 0 0 16px rgba(0,212,255,.12) !important; background: rgba(7,11,20,.88) !important; }
.q label { font-weight: 700 !important; }
.me { border-radius: 12px !important; background: rgba(7,11,20,.5) !important; }

/* ---- boutons ---- */
.btn { border-radius: 12px !important; transition: transform .14s ease, box-shadow .14s ease, filter .14s ease; }
.btn.primary { background: linear-gradient(180deg,#ffe27a,#d4af37 55%,#a68620) !important; color: #1a1302 !important;
  border: none !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 6px 22px rgba(212,175,55,.3) !important; }
.btn.primary:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 12px 32px rgba(212,175,55,.48), 0 0 20px rgba(0,212,255,.2) !important; }
.btn.block { padding: 14px 22px !important; font-size: 15px !important; }
.btn.discord { box-shadow: 0 6px 20px rgba(88,101,242,.4) !important; }

/* ---- bannières d'état ---- */
.banner { border-radius: 12px !important; }
.banner.ok { box-shadow: 0 0 0 1px rgba(0,212,255,.18), 0 8px 24px rgba(0,0,0,.3); }
.banner.wait { box-shadow: 0 0 0 1px rgba(212,175,55,.25), 0 8px 24px rgba(0,0,0,.3); }

@media (prefers-reduced-motion: reduce) {
  .hero, .hero-logo, .wrap .card, .wrap .intro { animation: none !important; opacity: 1 !important; transform: none !important; }
}