/* ---- Page statut — styles spécifiques (base dans shared.css) ---------------- */

.status-section{ margin-bottom:40px }
.status-section h2{ font-size:20px; font-weight:680; letter-spacing:-.01em; margin:0 0 16px }

.status-updated{color:var(--muted); font-size:12.5px; font-family:var(--mono); margin-top:8px; margin-bottom:30px}

.status-overall{
  display:flex; align-items:center; gap:10px;
  border:1px solid var(--border-soft); border-radius:12px;
  background:var(--surface); padding:14px 16px; margin-bottom:14px;
}
.status-overall-label{ font-size:14px; font-weight:600 }
.status-overall.ok{ border-color:rgba(60,180,100,.35) }
.status-overall.warn{ border-color:rgba(230,170,50,.4) }
.status-overall.down{ border-color:rgba(230,80,80,.4) }

.status-list{ list-style:none; margin:0; padding:0 }
.status-item{
  display:flex; align-items:center; gap:12px;
  border:1px solid var(--border-soft); border-radius:12px;
  background:var(--surface); padding:12px 16px; margin-bottom:8px;
}
.status-item-main{ display:flex; flex-direction:column; gap:2px; min-width:0 }
.status-name{ font-size:14px; font-weight:600 }
.status-value{ font-size:12px; font-family:var(--mono); color:var(--muted) }
.status-value.ok{ color:#3cb464 }
.status-value.warn{ color:#e6aa32 }
.status-value.down{ color:#e65050 }
.status-value.unknown{ color:var(--muted) }
.status-detail{ font-size:11.5px; color:var(--muted) }

.dot{ width:10px; height:10px; border-radius:50%; flex-shrink:0; background:#888 }
.dot.ok{ background:#3cb464; box-shadow:0 0 0 4px rgba(60,180,100,.15) }
.dot.warn{ background:#e6aa32; box-shadow:0 0 0 4px rgba(230,170,50,.15) }
.dot.down{ background:#e65050; box-shadow:0 0 0 4px rgba(230,80,80,.15) }
.dot.unknown{ background:#888; box-shadow:none }

.status-note{ font-size:11.5px; color:var(--muted); margin-top:10px; line-height:1.6 }
.status-note code{ font-family:var(--mono); font-size:11px; background:var(--bg); padding:2px 5px; border-radius:5px; border:1px solid var(--border-soft) }

/* Journal des mises à jour */
.changelog-entry{
  border:1px solid var(--border-soft); border-radius:12px;
  background:var(--surface); padding:16px 18px; margin-bottom:12px;
}
.changelog-head{ display:flex; align-items:center; gap:10px; margin-bottom:10px; flex-wrap:wrap }
.changelog-date{ font-family:var(--mono); font-size:12.5px; color:var(--text); font-weight:600 }
.changelog-tag{
  font-size:11px; font-weight:600; letter-spacing:.02em; text-transform:uppercase;
  color:var(--muted); border:1px solid var(--border-soft); border-radius:999px; padding:3px 9px;
}
.changelog-items{ list-style:none; margin:0; padding:0 }
.changelog-items li{
  font-size:13px; color:var(--muted); line-height:1.6;
  padding:4px 0 4px 18px; position:relative;
}
.changelog-items li::before{ content:"—"; position:absolute; left:0; color:var(--muted) }

@media(max-width:560px){
  .changelog-entry{ padding:14px }
  .status-item{ padding:10px 12px }
}

/* ═══════════════ ANIMATIONS STATUT ═══════════════ */

/* Status items : staggered entrance + dot glow */
.status-item { opacity: 0; animation: statusSlideUp .4s cubic-bezier(.22,1,.36,1) forwards }
.status-item:nth-child(1) { animation-delay: 0s }
.status-item:nth-child(2) { animation-delay: .08s }
.status-item:nth-child(3) { animation-delay: .16s }
.status-item:nth-child(4) { animation-delay: .24s }
.status-item:nth-child(5) { animation-delay: .32s }
@keyframes statusSlideUp {
  from { opacity: 0; transform: translateY(10px) }
  to { opacity: 1; transform: none }
}

/* Status dots : glow pulse per status */
.dot.ok { animation: okGlow 3s ease-in-out infinite }
@keyframes okGlow {
  0%, 100% { box-shadow: 0 0 6px rgba(92,255,157,.6) }
  50% { box-shadow: 0 0 12px rgba(92,255,157,.8) }
}
.dot.warn { animation: warnGlow 2s ease-in-out infinite }
@keyframes warnGlow {
  0%, 100% { box-shadow: 0 0 6px rgba(255,200,80,.6) }
  50% { box-shadow: 0 0 14px rgba(255,200,80,.9) }
}
.dot.down { animation: downBlink 1.2s ease-in-out infinite }
@keyframes downBlink {
  0%, 100% { box-shadow: 0 0 6px rgba(255,92,92,.6) }
  50% { box-shadow: 0 0 14px rgba(255,92,92,.9) }
}

/* Changelog entries : entrance */
.changelog-entry { opacity: 0; animation: statusSlideUp .4s cubic-bezier(.22,1,.36,1) forwards }
.changelog-entry:nth-child(2) { animation-delay: .1s }
.changelog-entry:nth-child(3) { animation-delay: .2s }
.changelog-entry:nth-child(4) { animation-delay: .3s }
.changelog-entry:nth-child(5) { animation-delay: .4s }

/* Overall status bar : pulse */
.status-overall { transition: all .3s cubic-bezier(.34,1.56,.64,1) }
.status-overall.ok { animation: overallGlow 3s ease-in-out infinite }
@keyframes overallGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(92,255,157,0) }
  50% { box-shadow: 0 0 12px rgba(92,255,157,.1) }
}

/* ═══════════════ ANIMATIONS STATUT — V2 ═══════════════ */

/* Status section titles : underline reveal */
.status-section h2 { position:relative }
.status-section h2::after {
  content:""; position:absolute; left:0; bottom:-6px; width:0; height:1px;
  background:var(--text); opacity:.2; transition:width .3s cubic-bezier(.22,1,.36,1);
}
.status-section:hover h2::after { width:100% }

/* Status items : hover lift */
.status-item { transition:transform .15s cubic-bezier(.34,1.56,.64,1), border-color .15s }
.status-item:hover { transform:translateX(2px); border-color:#3a3a3f }

/* Changelog entries : hover glow */
.changelog-entry { transition:border-color .2s, box-shadow .2s }
.changelog-entry:hover { border-color:#3a3a3f; box-shadow:0 2px 8px rgba(0,0,0,.15) }

/* Overall bar : entrance pop */
.status-overall { opacity:0; animation:overallIn .4s cubic-bezier(.34,1.56,.64,1) .1s forwards }
@keyframes overallIn {
  from { opacity:0; transform:translateY(10px) scale(.98) }
  to { opacity:1; transform:none }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important }
}

/* ================= Polish V4 : fond premium ================= */
body{
  background-image:
    radial-gradient(1100px 520px at 75% -10%, rgba(255,255,255,.05), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(92,255,157,.035), transparent 60%);
  background-attachment: fixed;
}
.main h1{
  background:linear-gradient(180deg,#fff 25%,#9d9da6);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid rgba(231,231,231,.55);outline-offset:2px;
}