input,
input[type="password"],
input[type="email"],
input[type="text"],
input[type="number"],
input[type="search"],
textarea {
  color: #111 !important;
}
/* Disparition automatique des messages succès et erreur après 30s */
.message-success,
.message-error {
  animation: fadeout-message 1s linear 29s forwards;
}

@keyframes fadeout-message {
  0% { opacity: 1; }
  100% { opacity: 0; display: none; }
}
/* Messages custom */
.messages-block {
  margin-bottom: 18px;
}
.message {
  padding: 10px 16px;
  border-radius: 5px;
  margin-bottom: 8px;
  font-size: 1rem;
  font-family: Raleway, Arial, sans-serif;
  color: #fff;
  background: #3a3a3a;
  box-shadow: 0 2px 6px rgba(0,0,0,0.07);
  letter-spacing: 0.01em;
}
.message-info {
  background: #1a3a6e;
}
.message-success {
  background: #009a44;
}
.message-warning {
  background: #e8b84b;
  color: #222;
}
.message-error, .message-danger {
  background: #ce1126;
}
   @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Raleway:wght@300;400;500;600&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --gold: #C8972A;
  --gold-light: #E8B84B;
  --gold-pale: #F5D98C;
  --rouge: #CE1126;
  --vert: #009A44;
  --jaune: #FCD116;
  --dark: #e9e9f3;
  --dark2: #f5f5fa;
  --accent: #6fa8e6;
}

body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  font-family: 'Raleway', sans-serif;
  background: linear-gradient(160deg, #f5faff 0%, #e9f0fa 100%);
}

/* ===== BACKGROUND ===== */
.scene {
  position: fixed;
  inset: 0;
  background: linear-gradient(160deg, #060E20 0%, #0A1628 40%, #0D1E3A 70%, #091525 100%);
}

.map-bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.04;
}
.map-bg svg { width: 70%; height: 70%; fill: var(--gold); }

.stars { position: absolute; inset: 0; overflow: hidden; }
.star {
  position: absolute;
  background: white;
  border-radius: 50%;
  animation: twinkle var(--dur, 3s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes twinkle {
  0%, 100% { opacity: var(--min-op, 0.2); transform: scale(1); }
  50% { opacity: var(--max-op, 0.8); transform: scale(1.3); }
}

.landscape {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 220px;
  overflow: hidden;
}

.lattice {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(30deg, transparent 48%, rgba(200,151,42,0.05) 49%, rgba(200,151,42,0.05) 51%, transparent 52%),
    linear-gradient(-30deg, transparent 48%, rgba(200,151,42,0.05) 49%, rgba(200,151,42,0.05) 51%, transparent 52%),
    linear-gradient(90deg, transparent 48%, rgba(200,151,42,0.03) 49%, rgba(200,151,42,0.03) 51%, transparent 52%);
  background-size: 60px 60px;
  animation: lattice-drift 30s linear infinite;
}
@keyframes lattice-drift {
  from { background-position: 0 0; }
  to { background-position: 60px 60px; }
}

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  animation: float var(--dur, 8s) ease-in-out infinite;
}
.orb-1 { width:500px; height:500px; background:radial-gradient(circle, rgba(206,17,38,0.12) 0%, transparent 70%); top:-100px; left:-100px; --dur:12s; }
.orb-2 { width:400px; height:400px; background:radial-gradient(circle, rgba(0,154,68,0.10) 0%, transparent 70%); bottom:-50px; right:-50px; --dur:10s; animation-delay:-4s; }
.orb-3 { width:300px; height:300px; background:radial-gradient(circle, rgba(200,151,42,0.12) 0%, transparent 70%); top:40%; left:50%; --dur:15s; animation-delay:-7s; }
@keyframes float {
  0%, 100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(20px,-20px) scale(1.05); }
  66% { transform: translate(-15px,15px) scale(0.97); }
}

.flag-stripe { position:absolute; top:0; bottom:0; width:4px; opacity:0.6; }
.flag-rouge { left:0; background:var(--rouge); box-shadow:0 0 30px var(--rouge); }
.flag-vert  { right:0; background:var(--vert);  box-shadow:0 0 30px var(--vert); }
.flag-jaune-top { position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--rouge) 0%,var(--rouge) 33%,var(--jaune) 33%,var(--jaune) 66%,var(--vert) 66%,var(--vert) 100%); opacity:0.5; box-shadow:0 0 20px rgba(252,209,22,0.4); }
.flag-jaune-bot { position:absolute; bottom:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--rouge) 0%,var(--rouge) 33%,var(--jaune) 33%,var(--jaune) 66%,var(--vert) 66%,var(--vert) 100%); opacity:0.5; box-shadow:0 2px 20px rgba(252,209,22,0.4); }

.emblem-ring {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:520px; height:520px;
  border-radius:50%;
  border:1px solid rgba(200,151,42,0.08);
  box-shadow: 0 0 0 30px rgba(200,151,42,0.02), 0 0 0 60px rgba(200,151,42,0.015), 0 0 0 100px rgba(200,151,42,0.01);
  animation:ring-pulse 6s ease-in-out infinite;
}
.emblem-ring::before {
  content:''; position:absolute; inset:20px;
  border-radius:50%;
  border:1px dashed rgba(200,151,42,0.1);
  animation:ring-rotate 40s linear infinite;
}
.emblem-ring::after {
  content:''; position:absolute; inset:45px;
  border-radius:50%;
  border:1px solid rgba(200,151,42,0.06);
}
@keyframes ring-pulse {
  0%,100% { box-shadow:0 0 0 30px rgba(200,151,42,0.02),0 0 0 60px rgba(200,151,42,0.015),0 0 0 100px rgba(200,151,42,0.01); }
  50%      { box-shadow:0 0 0 35px rgba(200,151,42,0.04),0 0 0 70px rgba(200,151,42,0.025),0 0 0 110px rgba(200,151,42,0.015); }
}
@keyframes ring-rotate { from{transform:rotate(0deg);} to{transform:rotate(360deg);} }

.corner { position:absolute; width:80px; height:80px; }
.corner::before, .corner::after { content:''; position:absolute; background:var(--gold); }
.corner-tl { top:20px; left:20px; }
.corner-tl::before { top:0; left:0; width:40px; height:2px; }
.corner-tl::after  { top:0; left:0; width:2px; height:40px; }
.corner-tr { top:20px; right:20px; }
.corner-tr::before { top:0; right:0; width:40px; height:2px; }
.corner-tr::after  { top:0; right:0; width:2px; height:40px; }
.corner-bl { bottom:20px; left:20px; }
.corner-bl::before { bottom:0; left:0; width:40px; height:2px; }
.corner-bl::after  { bottom:0; left:0; width:2px; height:40px; }
.corner-br { bottom:20px; right:20px; }
.corner-br::before { bottom:0; right:0; width:40px; height:2px; }
.corner-br::after  { bottom:0; right:0; width:2px; height:40px; }

.particles { position:absolute; inset:0; pointer-events:none; }
.particle {
  position:absolute;
  font-size:11px;
  color:rgba(200,151,42,0.15);
  font-family:'Courier New',monospace;
  animation:particle-float var(--dur,12s) linear infinite;
  animation-delay:var(--delay,0s);
}
.particle-img {
  font-size:unset;
  color:unset;
  font-family:unset;
  pointer-events:none;
  user-select:none;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.08));
  border-radius: 8px;
}
@keyframes particle-float {
  0%   { transform:translateY(100vh) rotate(0deg); opacity:0; }
  10%  { opacity:1; }
  90%  { opacity:0.5; }
  100% { transform:translateY(-100px) rotate(360deg); opacity:0; }
}

.data-lines { position:absolute; right:30px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:6px; opacity:0.08; }
.data-line { height:1px; background:var(--gold); animation:data-scan 3s ease-in-out infinite; animation-delay:var(--d,0s); }
@keyframes data-scan {
  0%,100% { width:20px; opacity:0.5; }
  50%     { width:50px; opacity:1; }
}

/* ===== LOGIN CARD ===== */
.login-wrapper {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}

.login-card {
  width:100%; max-width:420px;
  background:rgba(10,22,40,0.85);
  border:1px solid rgba(200,151,42,0.25);
  border-radius:4px;
  padding:48px 40px 40px;
  box-shadow: 0 0 0 1px rgba(200,151,42,0.05), 0 30px 80px rgba(0,0,0,0.6), 0 0 60px rgba(200,151,42,0.06), inset 0 1px 0 rgba(200,151,42,0.1);
  backdrop-filter:blur(20px);
  animation:card-in 1s cubic-bezier(0.16,1,0.3,1) forwards;
  position:relative; overflow:hidden;
}
.login-card::before {
  content:''; position:absolute;
  top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--rouge),var(--jaune),var(--vert));
  opacity:0.8;
}
@keyframes card-in {
  from { opacity:0; transform:translateY(30px) scale(0.97); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}

.logo-area { text-align:center; margin-bottom:32px; }
.coa { width:72px; height:72px; margin:0 auto 16px; }
.coa-shield { width:72px; height:72px; }

.ministry-label { font-family:'Cinzel',serif; font-size:9px; letter-spacing:2.5px; color:var(--gold-pale); text-transform:uppercase; opacity:0.7; margin-bottom:6px; }
.system-title   { font-family:'Cinzel',serif; font-size:18px; font-weight:700; color:var(--gold-light); letter-spacing:1px; line-height:1.3; margin-bottom:4px; }
.system-subtitle{ font-size:11px; color:rgba(200,151,42,0.5); letter-spacing:3px; text-transform:uppercase; font-weight:300; }

.divider { display:flex; align-items:center; gap:10px; margin-bottom:28px; }
.divider-line    { flex:1; height:1px; background:linear-gradient(90deg,transparent,rgba(200,151,42,0.3),transparent); }
.divider-diamond { width:6px; height:6px; background:var(--gold); transform:rotate(45deg); opacity:0.6; }

.form-group { margin-bottom:18px; }
label { display:block; font-size:10px; letter-spacing:2px; text-transform:uppercase; color:rgba(200,151,42,0.6); margin-bottom:8px; font-weight:500; }
.input-wrap { position:relative; }
.input-icon { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:rgba(200,151,42,0.4); font-size:14px; }
input {
  width:100%;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(200,151,42,0.2);
  border-radius:3px;
  padding:12px 14px 12px 40px;
  color:#fff !important;
  font-family:'Raleway',sans-serif;
  font-size:14px;
  outline:none;
  transition:border-color 0.3s, background 0.3s, box-shadow 0.3s;
}
input::placeholder { color:rgba(255,255,255,0.2); }
input:focus {
  border-color:rgba(200,151,42,0.5);
  background:rgba(255,255,255,0.07);
  box-shadow:0 0 0 3px rgba(200,151,42,0.08);
}

.btn-login {
  width:100%; margin-top:26px; padding:14px;
  background:linear-gradient(135deg,#B8821E 0%,#C8972A 40%,#D4A53A 70%,#C08020 100%);
  border:none; border-radius:3px;
  color:#0A1628;
  font-family:'Cinzel',serif; font-size:13px; font-weight:700;
  letter-spacing:3px; text-transform:uppercase;
  cursor:pointer; transition:all 0.3s;
  position:relative; overflow:hidden;
}
.btn-login::after {
  content:''; position:absolute;
  top:0; left:-100%; width:100%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.25),transparent);
  transition:left 0.5s;
}
.btn-login:hover { box-shadow:0 6px 25px rgba(200,151,42,0.35); transform:translateY(-1px); }
.btn-login:hover::after { left:100%; }

.footer-text { text-align:center; margin-top:22px; font-size:10px; color:rgba(255,255,255,0.2); letter-spacing:1px; }
.footer-text span { color:rgba(200,151,42,0.4); }

/* ===== BADGE BAS DE PAGE ===== */
.republic-badge {
  position:absolute; bottom:24px; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:8px; white-space:nowrap;
}
.badge-flag { display:flex; height:14px; border-radius:2px; overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,0.4); }
.badge-flag span { display:block; width:10px; }
.badge-flag .r { background:var(--rouge); }
.badge-flag .j { background:var(--jaune); }
.badge-flag .v { background:var(--vert); }
.badge-text { font-family:'Cinzel',serif; font-size:10px; color:rgba(200,151,42,0.4); letter-spacing:2px; }

.floating-coa {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 38px;
  height: 38px;
  opacity: 0.85;
  z-index: 10;
  pointer-events: none;
  animation: particle-float 18s linear infinite;
  animation-delay: -3s;
}
.floating-coa img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.08));
}