/* Styles extraits de index.html (abrégé pour la démo) */
/* Thème futuriste (neon HUD) */
:root{--neon-cyan:#00fff2;--neon-green:#39ff14;--neon-blue:#22a2ff;--neon-purple:#a26bff;--hud-glow:0 0 18px rgba(0,255,242,.25);--neon-intensity:1}
:root{--primary:#1B4D3E;--primary-light:#2E6B5A;--primary-dark:#0F3529;--secondary:#D4AF37;--secondary-light:#E8C547;--secondary-dark:#B8941F;--background:#F8F9FA;--surface:#FFFFFF;--text-primary:#1A1A1A;--text-secondary:#6C757D;--success:#27AE60;--warning:#F39C12;--error:#E74C3C;--border:#E1E5E9;--shadow-sm:0 2px 4px rgba(0,0,0,.05);--shadow-md:0 4px 12px rgba(0,0,0,.1);--shadow-lg:0 8px 24px rgba(0,0,0,.15);--gradient-primary:linear-gradient(135deg,var(--primary) 0%,var(--primary-light) 100%);--gradient-gold:linear-gradient(135deg,var(--secondary) 0%,var(--secondary-light) 100%)}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI','Roboto',sans-serif;background:var(--background);color:var(--text-primary);line-height:1.6;font-weight:400}
.header{background:var(--gradient-primary);color:#fff;padding:0;box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.header::before{content:'';position:absolute;inset:0;opacity:.4}
.header-top{background:rgba(0,0,0,.1);padding:.5rem 0;font-size:.875rem}
.header-top-content{max-width:1400px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding:0 2rem;position:relative}
.gov-info{display:flex;align-items:center;gap:1rem;opacity:.9}
.security-badge{background:rgba(212,175,55,.2);padding:.25rem .75rem;border-radius:15px;border:1px solid rgba(212,175,55,.3);font-size:.8rem;display:flex;align-items:center;gap:.5rem}
.language-switch{display:flex;gap:0;background:rgba(255,255,255,.1);border-radius:25px;padding:.25rem;border:1px solid rgba(255,255,255,.2)}
.lang-btn{background:transparent;border:none;color:#fff;padding:.5rem 1rem;border-radius:20px;cursor:pointer;transition:all .3s ease;font-size:.875rem;font-weight:500}
.lang-btn.active,.lang-btn:hover{background:var(--secondary);color:var(--primary);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.header-main{padding:1.5rem 0;position:relative}
.header-content{max-width:1400px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 2rem;position:relative}
.logo-section{display:flex;align-items:center;gap:1.5rem}
.mali-emblem{width:60px;height:60px;background:var(--gradient-gold);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md);position:relative;border:3px solid rgba(255,255,255,.2)}
.mali-flag{width:40px;height:30px;display:flex;border-radius:4px;overflow:hidden;box-shadow:var(--shadow-sm)}
.flag-green{background:#14B53A;flex:1}.flag-yellow{background:#FCD116;flex:1}.flag-red{background:#CE1126;flex:1}
.header-text h1{font-size:1.75rem;font-weight:700;margin-bottom:.25rem;text-shadow:0 2px 4px rgba(0,0,0,.1)}
.header-text p{font-size:.95rem;opacity:.9;font-weight:400}
.system-status{display:flex;align-items:center;gap:1rem;background:rgba(255,255,255,.1);padding:1rem 1.5rem;border-radius:12px;border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(10px)}
.status-indicator{display:flex;align-items:center;gap:.5rem;font-size:.875rem}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--success);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
.main-container{max-width:1400px;margin:0 auto;padding:2rem}
.nav-container{background:var(--surface);border-radius:16px;box-shadow:var(--shadow-lg);overflow:hidden;margin-bottom:2rem}
.nav-tabs{display:flex;background:linear-gradient(90deg,#f8f9fa 0%,#fff 100%);border-bottom:1px solid var(--border)}
.tab-btn{flex:1;background:transparent;border:none;padding:1.5rem 2rem;cursor:pointer;font-weight:600;color:var(--text-secondary);transition:all .3s ease;border-bottom:3px solid transparent;position:relative;display:flex;align-items:center;justify-content:center;gap:.75rem;font-size:.95rem}
.tab-btn.active{color:#fff;border-bottom-color:var(--secondary);position:relative}
.tab-icon{font-size:1.2rem}
.tab-content{padding:3rem;min-height:700px}
.tab-pane{display:none;animation:fadeIn .4s ease-in-out}
.tab-pane.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.section-header{margin-bottom:2rem;text-align:center}
.section-title{font-size:2rem;font-weight:700;color:var(--primary);margin-bottom:.5rem}
.section-subtitle{font-size:1.1rem;color:var(--text-secondary);max-width:600px;margin:0 auto}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin-bottom:2rem}
.form-card{background:var(--surface);padding:2rem;border-radius:12px;box-shadow:var(--shadow-md);border:1px solid var(--border);transition:transform .2s ease,box-shadow .2s ease}
.form-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.form-group{margin-bottom:1.5rem}
.form-label{display:block;margin-bottom:.75rem;font-weight:600;color:var(--text-primary);font-size:.95rem}
.form-input,.form-select{width:100%;padding:1rem 1.25rem;border:2px solid var(--border);border-radius:8px;font-size:1rem;transition:all .3s ease;background:var(--surface);font-family:inherit}
.form-input:focus,.form-select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(27,77,62,.1)}
.form-input:invalid{border-color:var(--error)}.form-input:valid{border-color:var(--success)}
.biometric-section{background:linear-gradient(135deg,#f8f9fa 0%,#fff 100%);padding:3rem;border-radius:16px;margin-bottom:2rem;border:2px solid rgba(27,77,62,.1);position:relative;overflow:hidden}
.biometric-content{position:relative;z-index:1}
.camera-container{position:relative;width:100%;max-width:450px;margin:0 auto 2rem;background:#000;border-radius:16px;overflow:hidden;box-shadow:var(--shadow-lg);border:3px solid var(--secondary)}
.camera-feed{width:100%;height:320px;display:flex;align-items:center;justify-content:center;color:#fff;position:relative}
.face-outline{width:220px;height:280px;border:4px solid var(--secondary);border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;opacity:.8;position:relative}
.camera-controls{display:flex;justify-content:center;gap:1rem;margin-top:2rem}
.btn{background:var(--gradient-primary);color:#fff;border:none;padding:1rem 2rem;border-radius:10px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;display:inline-flex;align-items:center;gap:.75rem;box-shadow:var(--shadow-md);position:relative;overflow:hidden}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.btn-secondary{background:var(--gradient-gold);color:var(--primary)}
.btn-outline{background:transparent;color:var(--primary);border:2px solid var(--primary)}
.btn-outline:hover{background:var(--primary);color:#fff}
.btn-lg{padding:1.25rem 2.5rem;font-size:1.1rem}
.fingerprint-scanner{width:200px;height:200px;margin:0 auto;border:4px solid var(--secondary);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .4s ease;position:relative;box-shadow:var(--shadow-lg)}
.scanner-icon{font-size:4rem;color:var(--primary);position:relative;z-index:1}
.data-table-container{background:var(--surface);border-radius:12px;overflow:hidden;box-shadow:var(--shadow-md);margin-top:2rem}
.data-table{width:100%;border-collapse:collapse}
.data-table th,.data-table td{padding:1.25rem 1.5rem;text-align:left;border-bottom:1px solid var(--border)}
.data-table th{background:var(--gradient-primary);color:#fff;font-weight:700;font-size:.95rem;text-transform:uppercase;letter-spacing:.5px}
.data-table tbody tr:hover{background:rgba(27,77,62,.05)}
.data-table tbody tr:nth-child(even){background:rgba(248,249,250,.5)}
.status-badge{padding:.5rem 1rem;border-radius:25px;font-size:.875rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;display:inline-flex;align-items:center;gap:.5rem}
.status-verified{background:var(--success);color:#fff}
.status-pending{background:var(--warning);color:#fff}
.status-failed{background:var(--error);color:#fff}
.alert{padding:1.5rem 2rem;border-radius:12px;margin-bottom:2rem;border-left:4px solid;display:flex;align-items:flex-start;gap:1rem;box-shadow:var(--shadow-sm)}
.alert-success{background:linear-gradient(135deg,#d4edda 0%,#c3e9d0 100%);border-left-color:var(--success);color:#155724}
.alert-error{background:linear-gradient(135deg,#f8d7da 0%,#f5c6cb 100%);border-left-color:var(--error);color:#721c24}
.alert-info{background:linear-gradient(135deg,#cce7ff 0%,#b8daff 100%);border-left-color:#3498DB;color:#0c4a6e}
.progress-bar{width:100%;height:12px;background:var(--border);border-radius:6px;overflow:hidden;box-shadow:inset 0 2px 4px rgba(0,0,0,.1)}
.progress-fill{height:100%;background:var(--gradient-gold);transition:width .8s ease;position:relative;border-radius:6px}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;margin-bottom:3rem}
.stat-card{padding:2rem;border-radius:16px;color:#fff;position:relative;overflow:hidden;box-shadow:var(--shadow-lg);transition:transform .3s ease}
.stat-card:hover{transform:translateY(-4px)}
.stat-success{background:linear-gradient(135deg,var(--success),#2ECC71)}
.stat-info{background:linear-gradient(135deg,#3498DB,#5DADE2)}
.stat-warning{background:linear-gradient(135deg,var(--warning),#F7DC6F)}
.stat-danger{background:linear-gradient(135deg,var(--error),#EC7063)}
.footer{background:var(--gradient-primary);color:#fff;padding:3rem 0 2rem;margin-top:4rem;position:relative;overflow:hidden}
.footer::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--gradient-gold)}
.footer-content{max-width:1400px;margin:0 auto;padding:0 2rem;text-align:center}
.hidden{display:none!important}
.loading{display:inline-block;width:20px;height:20px;border:2px solid rgba(255,255,255,.3);border-radius:50%;border-top-color:#fff;animation:spin 1s ease-in-out infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes slideOut{from{transform:translateX(0);opacity:1}to{transform:translateX(100%);opacity:0}}

/* Camera futuriste */
.camera-container{position:relative}
.camera-container.futuristic{background:radial-gradient(circle at 50% 0%, rgba(0,255,242,.08), transparent 50%), #000; border:1px solid rgba(0,255,242,.25); box-shadow: calc(var(--neon-intensity)*0px) 0 calc(var(--neon-intensity)*18px) rgba(0,255,242,.25), inset 0 0 calc(var(--neon-intensity)*30px) rgba(0,255,242,.12)}
.camera-feed video{width:100%;height:100%;object-fit:cover;filter:contrast(1.05) saturate(1.1)}
.hud-overlay{position:absolute;inset:0;pointer-events:none}
.hud-overlay .corner{position:absolute;width:54px;height:54px;border:2px solid var(--secondary);filter:drop-shadow(0 0 calc(var(--neon-intensity)*6px) rgba(247,227,106,.6))}
.hud-overlay .corner.tl{top:8px;left:8px;border-right:none;border-bottom:none}
.hud-overlay .corner.tr{top:8px;right:8px;border-left:none;border-bottom:none}
.hud-overlay .corner.bl{bottom:8px;left:8px;border-right:none;border-top:none}
.hud-overlay .corner.br{bottom:8px;right:8px;border-left:none;border-top:none}
.hud-overlay .scanline{position:absolute;left:6%;right:6%;height:2px;background:linear-gradient(90deg, transparent, rgba(0,255,242,.9), transparent);animation:scanY 2.4s linear infinite;opacity:.85;mix-blend-mode:screen}
@keyframes scanY{0%{transform:translateY(10%)}100%{transform:translateY(90%)}}
/* Reticle + crosshair */
.hud-overlay .reticle{position:absolute;top:50%;left:50%;width:160px;height:160px;border:2px solid rgba(0,255,242,.4);border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 calc(var(--neon-intensity)*10px) rgba(0,255,242,.25)}
.hud-overlay .cross-h,.hud-overlay .cross-v{position:absolute;top:50%;left:50%;background:rgba(0,255,242,.5)}
.hud-overlay .cross-h{width:240px;height:2px;transform:translate(-50%,-50%)}
.hud-overlay .cross-v{height:240px;width:2px;transform:translate(-50%,-50%)}

/* Fingerprint futuriste */
.fingerprint-scanner{position:relative}
.fingerprint-scanner.futuristic{border-color:var(--neon-cyan);box-shadow:0 0 calc(var(--neon-intensity)*18px) rgba(0,255,242,.35), inset 0 0 calc(var(--neon-intensity)*20px) rgba(0,255,242,.15)}
.fingerprint-scanner .scan-beam{position:absolute;left:12%;right:12%;height:3px;background:linear-gradient(90deg, transparent, rgba(0,255,242,.95), transparent);animation:scanY 1.8s linear infinite;opacity:.9}
.fingerprint-scanner .ring{position:absolute;inset:10%;border:2px dashed rgba(0,255,242,.35);border-radius:50%;filter:drop-shadow(0 0 6px rgba(0,255,242,.55))}
.fingerprint-scanner .ring.r2{inset:20%}
.fingerprint-scanner .ring.r3{inset:30%}
.fingerprint-scanner.active{transform:scale(1.05)}
@media(max-width:1200px){.main-container{max-width:100%;padding:1.5rem}}
@media(max-width:768px){.header-content{flex-direction:column;gap:1.5rem;text-align:center}.nav-tabs{flex-direction:column}.tab-btn{padding:1rem;font-size:.9rem}.tab-content{padding:2rem 1.5rem}.stats-grid,.form-grid{grid-template-columns:1fr}.camera-controls{flex-direction:column;align-items:center}.section-title{font-size:1.5rem}}