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

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

  /* BLACK THEME — fond noir total */
  --bg: #000000;
  --card-bg:#0B0B0F;
  --card-text:#FFFFFF;
  --card-sub:#9CA3AF;
  --card-border:#1a1a1a;
  --accent:#3B82F6;

  --avatar-ring: #000000; /* liseré noir autour de l’avatar */
}

/* Light override si tu actives le toggle (cartes claires mais BACKGROUND reste noir) */
html[data-theme="light"]{
  --card-bg:#111115;
  --card-text:#F5F5F5;
  --card-sub:#B7BEC8;
  --card-border:#20222a;
  --accent:#7ab6ff;
  --avatar-ring:#000000;
}

/* ---------- BASE ---------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  min-height:100vh;
  font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--card-text);
  background: var(--bg); /* 🟩 noir intégral */
  -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 FULLSCREEN AU-DESSUS DE TOUT */
.bloodOnScreen{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;

  /* ✅ au-dessus des cartes, header, etc. */
  z-index: 9999;

  /* ✅ laisse passer les clics dessous */
  pointer-events: none;

  /* ajuste si tu veux plus/moins visible */
  opacity: 0.3;

  /* pas de blend spécial pour garder la couleur du sang */
  mix-blend-mode: normal;
}

/* ---------- HEADER ---------- */
.header{margin-bottom:22px; position:relative; z-index:1}
.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);
}

/* Dot online + halo */
.presence{
  position:absolute; right:-2px; bottom:-2px;
  width:14px; height:14px; border-radius:50%;
  box-shadow: 0 0 0 2px var(--card-bg), 0 2px 6px rgba(0,0,0,.35);
}
.presence--online{ background:#22c55e; }
.presence--online::after{
  content:""; position:absolute; inset:-6px; border-radius:inherit;
  background: rgba(34,197,94,.35);
  animation: presencePing 2.2s cubic-bezier(0,0,.2,1) infinite;
}

.title{
  font-size:32px; font-weight:800; letter-spacing:0.2px; margin:0;
  transform: translateY(8px); opacity:0;
  animation: fadeUp var(--t-pop) var(--spring) .1s forwards;
}
.handle{margin-top:4px; color:var(--card-sub); font-size:14px}

/* Actions */
.actions{display:flex; align-items:center; gap:10px}
.action-btn, .theme-toggle{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:12px;
  border:1px solid var(--card-border); background:var(--card-bg); color:var(--card-text);
  cursor:pointer; user-select:none; text-decoration:none; font-weight:600;
  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:hover, .theme-toggle:hover{ transform: var(--elevate); box-shadow: var(--shadow); border-color:#222; }
.action-btn:active, .theme-toggle:active{ transform: translateY(0) scale(.98); }
.theme-toggle .icon, .action-btn .icon{width:18px; height:18px}
.toggle-label{font-weight:600; font-size:14px}

/* ---------- CARDS ---------- */
.card{
  background:var(--card-bg);
  border:1px solid var(--card-border);
  padding:16px; border-radius:16px; margin-bottom:22px;
  box-shadow:var(--shadow);
  transform: translateY(12px) scale(.98);
  opacity: 0;
  will-change: transform, opacity, box-shadow;
}
.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(--card-sub); margin-top:4px}

/* ---------- LIST / ITEMS ---------- */
.list{display:grid; gap:10px}
.item{
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:12px;
  padding:14px; border:1px solid var(--card-border);
  border-radius:12px; text-decoration:none; color:inherit;
  transition: transform var(--t-hover) var(--spring), border-color var(--t-hover) var(--spring), background var(--t-hover) var(--spring), box-shadow var(--t-hover) var(--spring);
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
}
.item:hover{
  transform: var(--elevate);
  border-color:#222;
  background:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
  box-shadow: 0 6px 18px rgba(0,0,0,.22);
}
.item:active{ transform: translateY(0) scale(.99); }
.grow{flex:1}
.item-title{font-weight:700}
.item-sub{color:var(--card-sub); font-size:14px; margin-top:2px}

/* Icons */
.icon{width:20px; height:20px; display:inline-block}
.icon-lg{width:22px; height:22px}

/* Ripple */
.ripple {
  position:absolute; border-radius:50%;
  transform: scale(0); opacity:.6; pointer-events:none;
  background: radial-gradient(circle, rgba(255,255,255,.35), rgba(255,255,255,0) 60%);
  animation: ripple var(--t-ripple) ease-out forwards;
}

/* ---------- 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(--card-sub); margin: 0 0 14px 0; }
.footer-line{
  height:1px; width:100%;
  background: linear-gradient(90deg, transparent, var(--card-border), transparent);
  margin: 0 0 10px 0;
}
.copyright{ color:var(--card-sub); font-size:13px; margin:0; }

/* ---------- ANIMS ---------- */
@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 ripple{ to{ transform: scale(6); opacity:0; } }
@keyframes presencePing{ 0%{ transform: scale(.6); opacity:.7; } 80%,100%{ transform: scale(1.6); opacity:0; } }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition:none !important}
}

/* Small screens */
@media (max-width:480px){
  .title{font-size:26px}
  .avatar-wrap{width:48px;height:48px}
}

/* Focus */
a:focus-visible, button:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

/* Masquer les anciennes flèches de droite (si tu ne modifies pas encore le HTML) */
.item > svg.icon { display: none; }

/* Nouvelle flèche carrée à droite */
.icon-right {
  width: 20px;
  height: 20px;
  margin-left: auto;            /* pousse l’icône complètement à droite */
  opacity: .9;
  transition: transform .25s ease, filter .25s ease, opacity .25s ease;
}
.item:hover .icon-right {
  transform: translateX(4px);
  opacity: 1;
  filter: brightness(1.25);
}

.section-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* bloc heure/date */
.datetime {
  text-align: right;
  color: #9CA3AF;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.datetime #time {
  display: block;
  font-size: 16px;
  color: #ffffff;
  font-weight: 800;
}

.datetime #date {
  font-size: 13px;
  opacity: 0.8;
}

/* --- Announcement (Echo26x) --- */
.announce{
  margin-top:14px;
  background:#000000;
  border:1px solid #1a1a1a;
  border-radius:14px;
  padding:14px;
  box-shadow:0 0 12px rgba(0,0,0,.45);
}
.announce-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px;
}
.ah-left{display:flex; align-items:center; gap:8px; min-width:0}
.announce-title{margin:0; font-size:16px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tag{
  display:inline-flex; align-items:center; height:22px; padding:0 8px; border-radius:999px;
  font-size:12px; font-weight:800; border:1px solid #2a2a2a; color:#e5e7eb; background:#111;
}
.tag-soon{ border-color:#3b0a0a; background:#170707; color:#ff4b4b; text-shadow:0 0 10px rgba(255,75,75,.25) }

.ah-right .eta{ color:#9CA3AF; font-size:12px; font-weight:700 }

.announce-sub{ margin:6px 0 8px; color:#ddd; }
.announce-meta{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px }


.announce-actions{ display:flex; gap:8px; flex-wrap:wrap }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:36px; padding:0 12px; border-radius:10px; border:1px solid #1a1a1a;
  color:#fff; text-decoration:none; font-weight:900;
  transition:transform .15s ease, filter .15s ease, box-shadow .15s ease;
  background:#111;
}
.btn:hover{ transform:translateY(-1px); filter:brightness(1.05) }
.btn-mini{ height:32px; padding:0 10px; font-size:14px }
.btn-primary{ background:#3B82F6; border-color:#3B82F6; box-shadow:0 8px 24px rgba(59,130,246,.25) }
.btn-ghost{ background:#000000 }

@media (max-width:560px){
  .announce-head{ align-items:flex-start }
  .ah-right{ margin-top:2px }
}
/* recrutement */
.recruit{
  border-color:#3b0a0a;
  background:rgba(20,0,0,.55);
  box-shadow:0 0 20px rgba(255,0,0,.15);
}
.recruit .announce-title{color:#ff3b3b}
.recruit .announce-sub{color:#ddd;font-size:15px;line-height:1.5}

@keyframes fade {
  0% { opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; }
}

#changing-text {
  display: inline-block;
  animation: fade 5s infinite;
  transition: opacity 0.5s ease;
}

/* ---- Blood opacity panel ---- */
.blood-controls{
  display:flex; gap:10px; align-items:center;
}
.blood-range{
  -webkit-appearance:none; appearance:none;
  width:100%; height:8px; border-radius:999px;
  background:#151515; outline:none; border:1px solid var(--card-border);
}
.blood-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px; border-radius:50%;
  background:var(--accent); border:1px solid #1a1a1a;
  box-shadow:0 4px 12px rgba(59,130,246,.35);
  cursor:pointer;
}
.blood-range::-moz-range-thumb{
  width:18px; height:18px; border:none; border-radius:50%;
  background:var(--accent); cursor:pointer;
}
.blood-value{
  color:var(--card-sub); font-weight:800; font-size:14px;
}