:root{
  --t-pop: 1s;
  --t-hover: .28s;
  --spring: cubic-bezier(.2,.8,.2,1);

  --radius:16px;
  --shadow:0 12px 24px rgba(0,0,0,.22);
  --elevate: translateY(-2px);

  --bg:#000;
  --card:#1761D1;        /* bleu clair (comme tes autres pages) */
  --text:#ffffff;
  --sub:#E4EEFF;
  --border:#2F6FE0;
  --accent:#8CC2FF;
  --avatar-ring:#000;
}

/* Base */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  min-height:100vh; color:var(--text);
  background: var(--bg);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.safe{min-height:100%; display:flex; justify-content:center}
.wrap{width:100%; max-width:860px; padding:26px 20px 96px; position:relative; z-index:1}

/* Sang AU-DESSUS de tout */
.bloodOnScreen{
  position: fixed; inset:0; width:100vw; height:100vh; object-fit:cover;
  z-index: 9999; pointer-events:none; opacity:.9; mix-blend-mode: normal;
}

/* Header */
.header{margin-bottom:22px}
.header-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.identity{display:flex; align-items:center; gap:12px}
.avatar-wrap{ position: relative; width:56px; height:56px; flex:0 0 auto; }
.avatar{
  width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; background:#111;
  border:2px solid var(--avatar-ring); box-shadow:0 4px 14px rgba(0,0,0,.35);
}
.presence{
  position:absolute; right:-2px; bottom:-2px; width:14px; height:14px; border-radius:50%;
  box-shadow: 0 0 0 2px var(--card), 0 2px 6px rgba(0,0,0,.35);
}
.presence--online{ background:#5CC8FF; }
.presence--online::after{
  content:""; position:absolute; inset:-6px; border-radius:inherit;
  background: rgba(92,200,255,.35); animation: presencePing 2.2s cubic-bezier(0,0,.2,1) infinite;
}
.title{ font-size:32px; font-weight:800; letter-spacing:.2px; margin:0; transform: translateY(8px); opacity:0; animation: fadeUp var(--t-pop) var(--spring) .1s forwards; }
.handle{margin-top:4px; color:var(--sub); font-size:14px}

.actions{display:flex; align-items:center; gap:10px}
.action-btn{
  display:inline-flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px;
  border:1px solid var(--border); background:linear-gradient(180deg, #2A6BE4 0%, #134DA9 100%);
  color:var(--text); text-decoration:none; font-weight:600; cursor:pointer;
  transition: transform var(--t-hover) var(--spring), box-shadow var(--t-hover) var(--spring), border-color var(--t-hover) var(--spring), background var(--t-hover) var(--spring);
}
.action-btn.primary{
  background: linear-gradient(180deg, #8CC2FF 0%, #5A95F0 100%);
  color:#001532; border-color:#5A95F0;
}
.action-btn .icon{width:18px;height:18px}
.action-btn:hover{ transform: var(--elevate); box-shadow: var(--shadow); border-color:#5A95F0; }
.action-btn:active{ transform: translateY(0) scale(.98); }

/* Card */
.card{
  background: linear-gradient(180deg, #1761D1 0%, #134DA9 100%);
  border:1px solid var(--border);
  border-radius:16px; padding:16px; margin-bottom:22px;
  box-shadow: 0 10px 28px rgba(19, 77, 169, .45);
  transform: translateY(12px) scale(.98); opacity: 0; will-change: transform, opacity;
}
.card.in{ animation: popIn var(--t-pop) var(--spring) forwards; }

/* Sections */
.section-head{margin-bottom:12px}
.section-row{display:flex; align-items:center; gap:8px}
.section-title{font-size:18px; font-weight:800}
.section-sub{color:var(--sub); margin-top:4px}
.icon{width:20px; height:20px}

/* Form */
.form{ display:grid; gap:16px }
.field{ display:grid; gap:8px }
.row{ display:flex; gap:10px; flex-wrap:wrap }
.field input{
  height:44px; padding:0 12px; border-radius:12px; border:1px solid var(--border);
  background:#0b1b3a; color:#fff; outline:none; min-width: 260px; flex: 1 1 260px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.field input:focus{ border-color:#5A95F0; box-shadow: 0 0 0 4px rgba(140,194,255,.18); }

.options{ display:flex; gap:12px; flex-wrap:wrap; color:var(--sub) }
.opt{ display:inline-flex; align-items:center; gap:6px; background: rgba(255,255,255,.06); border:1px solid var(--border); padding:8px 10px; border-radius:10px; }

.result{ background: rgba(255,255,255,.06); border:1px solid var(--border); border-radius:12px; padding:12px }
.result-title{ font-weight:800; margin-bottom:6px }
.output{ margin:0; word-break: break-word; }

/* Footer */
.footer{ margin-top:28px; text-align:center; transform: translateY(12px); opacity:0; animation: popIn var(--t-pop) var(--spring) .2s forwards; }
.footer-text{ color:var(--sub); margin:0 0 14px 0 }
.footer-line{ height:1px; width:100%; background: linear-gradient(90deg, transparent, #5A95F0, transparent); margin:0 0 10px 0 }
.copyright{ color:var(--sub); font-size:13px; margin:0 }

/* Animations */
@keyframes fadeUp{ to{ transform: translateY(0); opacity:1; } }
@keyframes popIn{ 0%{ transform: translateY(12px) scale(.98); opacity:0 } 100%{ transform: translateY(0) scale(1); opacity:1 } }
@keyframes presencePing{ 0%{ transform: scale(.6); opacity:.7 } 80%,100%{ transform: scale(1.6); opacity:0 } }

/* Small screens */
@media (max-width:480px){
  .title{font-size:26px}
  .avatar-wrap{width:48px;height:48px}
}
a:focus-visible, button:focus-visible, input:focus-visible{ outline:2px solid #fff; outline-offset:2px; }