/* DarkBunker - Styles principaux */
:root {
    --primary: #00FF99;
    --secondary: #FF0050;
    --tertiary: #00FFFF;
    --warning: #FF9900;
    --bg-dark: #181818;
    --bg-darker: #101010;
    --bg-card: #161616f2;
    --text-primary: #ffffff;
    --text-secondary: #dadada;
}

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

html, body {
    min-height: 100vh;
    background: var(--bg-dark);
    color: var(--text-primary);
    font-family: 'Share Tech Mono', monospace;
    overflow-x: hidden;
}

/* Canvas Matrix */
#matrix {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: -1; opacity: 0.1;
}

/* Titre */
.bkr-title {
    font-size: 4em; text-align: center; margin-top: 40px; letter-spacing: 0.12em;
    background: linear-gradient(90deg, var(--warning), var(--secondary), var(--tertiary));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 15px rgba(255,0,80,.5));
    animation: glow 2s ease-in-out infinite alternate;
}
@keyframes glow {
    from { filter: drop-shadow(0 0 15px rgba(255,0,80,.5)); }
    to   { filter: drop-shadow(0 0 25px rgba(0,255,153,.7)); }
}

/* Layout principal */
.bkr-main {
    display: flex; flex-direction: row; align-items: center; justify-content: center;
    gap: 5vw; min-height: 60vh; max-width: 1200px; margin: 0 auto; padding: 20px;
}

/* Section latérale */
.bkr-side { max-width: 500px; text-align: center; }
.bkr-side .logo {
    width: 250px; height: 250px; filter: drop-shadow(0 0 40px rgba(0,255,153,.8));
    margin-bottom: 20px; animation: float 3s ease-in-out infinite;
}
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

.bkr-welcome { font-size: 2em; text-shadow: 0 2px 16px #000, 0 0 10px rgba(0,255,153,.5); margin-bottom: 20px; }
.bkr-slogan {
    font-size: 1.2em; color: var(--text-secondary); background: rgba(16,20,16,.9);
    padding: 20px; border-radius: 15px; margin: 20px 0; border: 1px solid rgba(0,255,153,.2); line-height: 1.5;
}
.bkr-details-btn{
    padding:12px 30px; background:linear-gradient(90deg,var(--primary),var(--warning),var(--secondary));
    color:#111; font-weight:bold; border:none; border-radius:10px; font-size:1.2em; cursor:pointer;
    text-transform:uppercase; letter-spacing:1px; transition:all .3s ease; box-shadow:0 4px 20px rgba(0,255,153,.6);
}
.bkr-details-btn:hover{ transform:translateY(-2px); box-shadow:0 6px 30px rgba(0,255,153,.8); }

/* Carte de connexion */
.bkr-login-card{
    background:var(--bg-card); border-radius:20px; padding:40px; width:420px;
    border:1px solid rgba(0,255,153,.2); backdrop-filter:blur(10px); box-shadow:0 0 60px rgba(0,98,51,.4);
}
.bkr-login-card label{ display:block; margin-bottom:10px; font-size:1.1em; }
.bkr-field{
    display:flex; align-items:center; gap:12px; border:1.5px solid rgba(68,68,68,.8); background:rgba(34,34,34,.9);
    border-radius:10px; padding:14px 18px; margin-bottom:25px; transition:all .3s ease;
}
.bkr-field:focus-within{ border-color:var(--primary); box-shadow:0 0 20px rgba(0,255,153,.4); background:rgba(34,34,34,1); }
.bkr-icon{ color:var(--primary); font-size:1.2em; }
.bkr-field input{
    background:none; border:none; outline:none; color:var(--text-primary); width:100%;
    font-size:1.1em; font-family:inherit;
}
.bkr-field input::placeholder{ color:#666; }

.bkr-login-btn{
    background:linear-gradient(90deg,var(--warning),var(--secondary),var(--tertiary));
    color:#111; font-weight:bold; border:none; border-radius:12px; width:100%; padding:15px; font-size:1.2em;
    cursor:pointer; text-transform:uppercase; letter-spacing:1px; transition:all .3s ease; box-shadow:0 4px 20px rgba(0,255,201,.5);
}
.bkr-login-btn:hover{ transform:translateY(-2px); box-shadow:0 6px 30px rgba(0,255,201,.7); }

.bkr-error{ color:#ff5066; margin-top:15px; text-align:center; animation:shake .5s; }
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

/* Footer */
.bkr-powered{
    position:fixed; bottom:20px; width:100%; text-align:center; font-size:1.1em; color:var(--text-secondary); font-style:italic;
}
.bkr-powered .by{ color:var(--primary); font-weight:bold; text-shadow:0 0 10px rgba(0,255,153,.5); }

/* Sélecteur de langue */
.lang-switch{ position:absolute; top:20px; right:30px; z-index:10; }
.lang-switch select{
    background:var(--bg-dark); color:var(--primary); border:1px solid var(--primary);
    padding:8px 15px; border-radius:8px; font-family:inherit; font-size:1.1em; cursor:pointer;
}

/* Responsive */
@media(max-width:1024px){
    .bkr-main{ flex-direction:column; gap:40px; }
    .bkr-title{ font-size:3em; }
    .bkr-side .logo{ width:200px; height:200px; }
}

/* ==== DARKBUNKER — ULTRA-SECURE blocks ==== */
.bkr-ultra-banner{
  margin:18px auto 6px;
  padding:16px 18px;
  border:1px solid rgba(0,255,153,.25);
  border-radius:12px;
  background:rgba(0,32,24,.45);
  box-shadow:0 0 24px rgba(0,255,153,.15) inset;
  text-align:left;
}
.bkr-ultra-banner .flag{
  display:inline-block;
  font-size:.85em;
  letter-spacing:.06em;
  padding:3px 8px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:6px;
  margin-bottom:8px;
  color:var(--primary);
}
.bkr-ultra-banner h3{margin:6px 0 8px; color:#fff; font-size:1.05em}
.bkr-ultra-banner ul{margin-left:16px; color:var(--text-secondary)}
.bkr-ultra-banner li{margin:4px 0}

.bkr-compare .bkr-ultra{
  margin:18px 0 12px;
  padding:16px 18px;
  border:1px solid rgba(0,255,153,.25);
  border-radius:12px;
  background:rgba(16,24,20,.55);
}
.bkr-ultra h3{margin:0 0 10px}
.bkr-ultra-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px;
  margin:10px 0 8px;
}
.bkr-ultra-grid h4{margin:0 0 6px; color:var(--primary)}
.bkr-ultra-grid ul{margin:0 0 0 16px; color:var(--text-secondary)}
.bkr-ultra-metrics{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:10px; margin:12px 0 6px
}
.bkr-ultra-metrics>div{
  background:rgba(0,0,0,.25);
  border:1px solid rgba(0,255,153,.2);
  border-radius:10px; padding:10px 12px
}
.bkr-ultra-metrics span{display:block; font-size:.85em; color:var(--text-muted)}
.bkr-ultra-metrics strong{font-size:1.15em; color:#fff}
.bkr-ultra-details summary{cursor:pointer; color:var(--primary); margin-top:6px}

/* ==== DARKBUNKER — ULTRA-SECURE blocks ==== */
.bkr-ultra-banner{
  margin:18px auto 6px;
  padding:16px 18px;
  border:1px solid rgba(0,255,153,.25);
  border-radius:12px;
  background:rgba(0,32,24,.45);
  box-shadow:0 0 24px rgba(0,255,153,.15) inset;
  text-align:left;
}
.bkr-ultra-banner .flag{
  display:inline-block;
  font-size:.85em;
  letter-spacing:.06em;
  padding:3px 8px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:6px;
  margin-bottom:8px;
  color:var(--primary);
}
.bkr-ultra-banner h3{margin:6px 0 8px; color:#fff; font-size:1.05em}
.bkr-ultra-banner ul{margin-left:16px; color:var(--text-secondary)}
.bkr-ultra-banner li{margin:4px 0}

.bkr-compare .bkr-ultra{
  margin:18px 0 12px;
  padding:16px 18px;
  border:1px solid rgba(0,255,153,.25);
  border-radius:12px;
  background:rgba(16,24,20,.55);
}
.bkr-ultra h3{margin:0 0 10px}
.bkr-ultra-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px;
  margin:10px 0 8px;
}
.bkr-ultra-grid h4{margin:0 0 6px; color:var(--primary)}
.bkr-ultra-grid ul{margin:0 0 0 16px; color:var(--text-secondary)}
.bkr-ultra-metrics{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:10px; margin:12px 0 6px
}
.bkr-ultra-metrics>div{
  background:rgba(0,0,0,.25);
  border:1px solid rgba(0,255,153,.2);
  border-radius:10px; padding:10px 12px
}
.bkr-ultra-metrics span{display:block; font-size:.85em; color:var(--text-muted)}
.bkr-ultra-metrics strong{font-size:1.15em; color:#fff}
.bkr-ultra-details summary{cursor:pointer; color:var(--primary); margin-top:6px}