/* ── VARIABLES SUPPLÉMENTAIRES STATUS ── */
:root {
    --green: #00f5a0;
    --orange: #f5a000;
    --red: #f54040;
}

/* ── HERO ── */
.hero { position:relative; z-index:10; padding:9rem 3rem 3rem; max-width:1100px; margin:0 auto; }
.hero-title { font-size:clamp(3rem,7vw,5.5rem); font-weight:800; line-height:0.9; letter-spacing:-0.04em; opacity:0; transform:translateY(24px); animation:fadeUp 0.9s cubic-bezier(0.16,1,0.3,1) forwards 0.5s; }
.hero-intro { margin-top:1.2rem; font-family:'DM Mono',monospace; font-size:0.85rem; color:var(--muted2); opacity:0; transform:translateY(12px); animation:fadeUp 0.7s ease forwards 0.8s; }

/* ── STATUS PAGE GRID ── */
.status-page { position:relative; z-index:10; max-width:1100px; margin:0 auto; padding:2rem 3rem; display:grid; grid-template-columns:1fr 1fr; gap:1rem; border-top:1px solid var(--border2); }
.status-col { display:flex; flex-direction:column; gap:1rem; }

/* ── CARDS ── */
.status-card { background:var(--surface); border:1px solid var(--border2); padding:1.5rem; transition:border-color 0.2s; }
.status-card:hover { border-color:rgba(0,245,160,0.15); }
.card-header { display:flex; align-items:baseline; gap:0.75rem; margin-bottom:1.2rem; }
.card-tag { font-family:'DM Mono',monospace; font-size:10px; color:var(--accent); letter-spacing:0.1em; }
.card-title { font-size:1rem; font-weight:700; }

/* ── SYSTEM STATUS ── */
.sys-status { display:flex; align-items:center; gap:10px; margin-bottom:1.2rem; padding:0.75rem 1rem; background:rgba(0,245,160,0.05); border:1px solid rgba(0,245,160,0.15); }
.sys-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; animation:blink 2s ease-in-out infinite; }
.sys-dot.online { background:var(--green); }
.sys-dot.warning { background:var(--orange); }
.sys-dot.offline { background:var(--red); }
.sys-label { font-family:'DM Mono',monospace; font-size:12px; color:var(--accent); letter-spacing:0.06em; }
.sys-rows { display:flex; flex-direction:column; }
.sys-row { display:flex; justify-content:space-between; align-items:center; padding:0.5rem 0; border-bottom:1px solid var(--border2); }
.sys-row:last-child { border-bottom:none; }
.sys-key { font-family:'DM Mono',monospace; font-size:11px; color:var(--muted2); letter-spacing:0.06em; }
.sys-val { font-family:'DM Mono',monospace; font-size:12px; color:var(--text); text-align:right; }

/* ── PAGES ── */
.pages-list { display:flex; flex-direction:column; }
.page-row { display:flex; align-items:center; gap:10px; padding:0.6rem 0; border-bottom:1px solid var(--border2); }
.page-row:last-child { border-bottom:none; }
.page-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; animation:blink 3s ease-in-out infinite; }
.page-dot.online { background:var(--green); }
.page-dot.warning { background:var(--orange); }
.page-dot.offline { background:var(--red); }
.page-name { font-family:'DM Mono',monospace; font-size:12px; color:var(--text); flex:1; }
.page-status { font-family:'DM Mono',monospace; font-size:10px; padding:2px 8px; letter-spacing:0.08em; }
.page-status.ok   { color:var(--green);  border:1px solid rgba(0,245,160,0.3); }
.page-status.warn { color:var(--orange); border:1px solid rgba(245,160,0,0.3); }
.page-status.down { color:var(--red);    border:1px solid rgba(245,64,64,0.3); }

/* ── WEATHER ── */
.weather-main { display:flex; align-items:baseline; gap:1rem; margin-bottom:1.2rem; }
.weather-temp { font-size:2.5rem; font-weight:800; color:var(--accent); letter-spacing:-0.03em; }
.weather-desc { font-family:'DM Mono',monospace; font-size:13px; color:var(--muted2); }

/* ── CURRENT STATUS ── */
.current-status { display:flex; flex-direction:column; }
.current-row { display:flex; align-items:flex-start; gap:12px; padding:0.8rem 0; border-bottom:1px solid var(--border2); }
.current-row:last-child { border-bottom:none; }
.current-icon { color:var(--accent); flex-shrink:0; margin-top:2px; }
.current-label { display:block; font-family:'DM Mono',monospace; font-size:10px; color:var(--muted2); letter-spacing:0.1em; text-transform:uppercase; margin-bottom:3px; }
.current-val { display:block; font-size:13px; font-weight:700; color:var(--text); line-height:1.4; }

/* ── DISPO ── */
.dispo-main { display:flex; align-items:center; gap:10px; margin-bottom:1.2rem; padding:0.75rem 1rem; background:rgba(0,245,160,0.05); border:1px solid rgba(0,245,160,0.2); }
.dispo-dot { width:10px; height:10px; border-radius:50%; background:var(--accent); animation:blink 1.5s ease-in-out infinite; flex-shrink:0; }
.dispo-text { font-family:'DM Mono',monospace; font-size:12px; color:var(--accent); letter-spacing:0.06em; }

/* ── OBJECTIF ── */
.goal-main { margin-bottom:1rem; }
.goal-name { display:block; font-size:1rem; font-weight:700; color:var(--text); margin-bottom:4px; }
.goal-deadline { font-family:'DM Mono',monospace; font-size:11px; color:var(--accent2); letter-spacing:0.06em; }
.goal-bar-wrap { display:flex; align-items:center; gap:1rem; }
.goal-bar { flex:1; height:3px; background:var(--muted); }
.goal-fill { height:100%; width:0; background:var(--accent); transition:width 1s cubic-bezier(0.4,0,0.2,1); }
.goal-pct { font-family:'DM Mono',monospace; font-size:11px; color:var(--accent); min-width:32px; text-align:right; }
.done   { color:var(--accent)  !important; }
.inprog { color:var(--accent2) !important; }
.pending { color:var(--muted2) !important; }

/* ── LEARNING ── */
.learning-ticker { background:rgba(0,245,160,0.03); border:1px solid rgba(0,245,160,0.1); border-left:3px solid var(--accent); padding:1rem 1.2rem; display:flex; align-items:center; gap:12px; font-family:'DM Mono',monospace; font-size:13px; margin-bottom:1rem; }
.learning-label { color:var(--muted2); white-space:nowrap; }
.learning-text { color:var(--accent); flex:1; }
.learning-tags { display:flex; flex-wrap:wrap; gap:8px; }
.ltag { font-family:'DM Mono',monospace; font-size:10px; color:var(--accent2); border:1px solid rgba(0,200,245,0.2); padding:4px 10px; letter-spacing:0.06em; }

/* ── NAV CLOCK ── */
.nav-clock { font-family:'DM Mono',monospace; font-size:12px; color:var(--accent); letter-spacing:0.1em; }

/* ── RESPONSIVE ── */
@media (max-width:700px) {
    .status-page { grid-template-columns:1fr; }
    .hero { padding:8rem 1.5rem 2rem; }
}