/* Webmail ANISTORE : sombre, accent rouge du logo. */
:root {
  color-scheme: dark;
  --bg: #08090d; --bg-2: #0d0f15; --panel: #12151c; --panel-2: #1a1e27; --well: #0b0d12; --deep: #06070a;
  --line: #262b36; --line-2: #363c4a;
  --ink: #f2f5fa; --ink-soft: #aab2c0; --ink-faint: #727b8b;
  --gold: #ff2a3c; --gold-2: #d91a2b; --gold-ink: #ffffff; --grad-gold: linear-gradient(180deg, #f02c3d 0%, #d91a2b 100%);
  --pink: #ff8a94; --discord: #5865f2;
  --ok: #4ade80; --slow: #fbbf24; --down: #ff5c72; --maint: #7c9cff; --none: #2a2f3a;
  --r: 12px;
  --font-body: "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-pixel: "Rubik", system-ui, sans-serif;
  /* Alias utilisés par la webmail */
  --paper: var(--bg); --paper-2: var(--panel); --sand: var(--panel-2);
  --cocoa: var(--deep); --cocoa-2: var(--panel); --cocoa-3: var(--line-2);
  --edge: var(--line-2); --on-dark: var(--ink); --on-dark-soft: var(--ink-soft);
  --honey: var(--gold); --orange: var(--gold-2); --orange-2: var(--gold-2);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); color: var(--ink); font: 16px/1.6 var(--font-body); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3 { margin: 0; font-family: var(--font-pixel); font-weight: 400; line-height: 1.15; letter-spacing: .01em; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--gold); color: var(--gold-ink); }
[hidden] { display: none !important; }
.wrap { width: 100%; max-width: 1040px; margin: 0 auto; padding: 0 20px; }
.muted { color: var(--ink-soft); }

/* Boutons « bloc » */
.btn { --bg: var(--panel-2); --fg: var(--ink); display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 10px 18px 9px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--bg); color: var(--fg); font-family: var(--font-pixel); font-size: 14px; letter-spacing: .02em; white-space: nowrap; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .3), 0 10px 20px -14px rgba(0, 0, 0, .8); transition: transform .12s, box-shadow .12s, filter .15s; }
.btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.btn:active { transform: translateY(2px); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .3); }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.btn-primary { --bg: var(--grad-gold); --fg: var(--gold-ink); border-color: #ff6b78; box-shadow: inset 0 -3px 0 rgba(90, 0, 10, .45), 0 12px 26px -12px rgba(255, 42, 60, .55); }
.btn-discord { --bg: linear-gradient(180deg, #6a79ff, #4e5ce8); --fg: #fff; border-color: #7c89ff; box-shadow: inset 0 -3px 0 rgba(20, 20, 90, .4); }
.btn-danger { --bg: linear-gradient(180deg, #ff6b7f, #e5384e); --fg: #fff; border-color: #ff8496; }
.btn-sm { min-height: 36px; padding: 8px 13px 7px; font-size: 13px; }

/* Barre du haut */
.topbar { position: sticky; top: 0; z-index: 20; background: rgba(8, 9, 13, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.topbar-in { display: flex; align-items: center; gap: 16px; height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-pixel); color: var(--gold); font-size: 18px; }
.brand img { width: 38px; height: 38px; filter: drop-shadow(0 0 12px rgba(255, 42, 60, .35)); }
.brand span { padding: 3px 9px 2px; border: 1px solid rgba(255, 138, 148, .45); border-radius: 999px; background: rgba(255, 138, 148, .1); color: var(--pink); font-size: 13px; }
.top-actions { margin-left: auto; display: flex; gap: 10px; }

/* Hero : image du spawn */
.hero { position: relative; padding: 46px 0 70px; overflow: hidden; isolation: isolate; background: var(--deep); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8, 9, 13, .72) 0%, rgba(8, 9, 13, .86) 60%, var(--bg) 100%); }
.hero-in { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.hero-brand { width: min(420px, 82vw); display: flex; flex-direction: column; align-items: center; }
.hero-axo { width: 40%; margin-bottom: -5%; position: relative; z-index: 1; filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .55)); animation: bob 3.6s ease-in-out infinite; }
.hero-logo { width: 100%; filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .6)) drop-shadow(0 0 36px rgba(255, 42, 60, .22)); }
@keyframes bob { 50% { transform: translateY(-6px); } }
.px-edge { display: none; }

/* Bandeau d'état général */
.overall { --c: var(--ok); display: flex; align-items: center; gap: 16px; width: min(720px, 100%); padding: 18px 22px; border: 1px solid color-mix(in srgb, var(--c) 45%, var(--line)); border-radius: 14px; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 16%, var(--panel)), var(--panel) 70%); box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .8), 0 0 40px -18px color-mix(in srgb, var(--c) 60%, transparent); }
.overall-ico { flex: none; width: 46px; height: 46px; border-radius: 12px; background: var(--c) center / 26px no-repeat; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25), 0 0 22px -4px color-mix(in srgb, var(--c) 70%, transparent); }
.overall-up .overall-ico { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23062b14' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E"); }
.overall-down .overall-ico, .overall-degraded .overall-ico { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 6v8M12 18h.01'/%3E%3C/svg%3E"); }
.overall-maintenance .overall-ico { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 00-5.4 5.4L4 17l3 3 5.3-5.3a4 4 0 005.4-5.4l-2.5 2.5-2.5-.5-.5-2.5z'/%3E%3C/svg%3E"); }
.overall-degraded { --c: var(--slow); } .overall-down { --c: var(--down); } .overall-maintenance { --c: var(--maint); } .overall-pending { --c: var(--ink-faint); }
.overall b { display: block; font-family: var(--font-pixel); font-weight: 400; font-size: clamp(16px, 2.4vw, 21px); line-height: 1.25; }
.overall small { color: var(--ink-soft); font-size: 13.5px; }

/* Blocs */
.main { flex: 1; padding: 30px 20px 70px; display: grid; gap: 34px; }
.block-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.block-head h2 { font-size: clamp(22px, 3vw, 30px); }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 13px; color: var(--ink-soft); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: -6px; }
.l-ok { background: var(--ok); } .l-slow { background: var(--slow); } .l-down { background: var(--down); } .l-none { background: var(--none); }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 16px 36px -22px rgba(0, 0, 0, .75); }
.group { margin-bottom: 20px; overflow: hidden; }
.group-title { padding: 11px 20px; background: var(--panel-2); border-bottom: 1px solid var(--line); color: var(--pink); font-family: var(--font-pixel); font-size: 13px; letter-spacing: .04em; }
.svc { padding: 18px 20px 16px; border-top: 1px solid var(--line); }
.svc:first-of-type { border-top: 0; }
.svc-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.svc-name { font-weight: 700; font-size: 16.5px; }
.svc-meta { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--ink-soft); }
.svc-err { margin-top: 6px; font-size: 13px; color: #ff9aa8; }
.pill { --c: var(--ok); display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px; border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); font-size: 12px; font-weight: 700; white-space: nowrap; }
.pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.pill-degraded { --c: var(--slow); } .pill-down { --c: var(--down); } .pill-maintenance { --c: var(--maint); } .pill-pending { --c: var(--ink-faint); }
.pill-up::before { animation: pulse 2s infinite; box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent); }
@keyframes pulse { 70% { box-shadow: 0 0 0 6px transparent; } }
.days { display: flex; gap: 2px; height: 34px; margin-top: 14px; }
.days i { flex: 1; min-width: 2px; border-radius: 2px; background: var(--none); position: relative; transition: transform .12s; }
.days i.u100 { background: var(--ok); } .days i.u99 { background: #9be7b4; } .days i.u95 { background: var(--slow); } .days i.ulow { background: var(--down); }
.days i:hover { transform: scaleY(1.15); }
.days-leg { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12px; color: var(--ink-soft); }
.tip { position: fixed; z-index: 50; pointer-events: none; padding: 7px 10px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--deep); color: var(--ink); font-size: 12.5px; white-space: nowrap; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .8); }
.spark { width: 120px; height: 26px; }
.spark path { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linejoin: round; }

/* Incidents & maintenances */
.inc { --c: var(--gold-2); margin-bottom: 16px; padding: 20px 22px; border-left: 4px solid var(--c); }
.inc-critical { --c: var(--down); } .inc-major { --c: #ff8a3d; } .inc-minor { --c: var(--slow); } .inc-maintenance, .inc-maint { --c: var(--maint); }
.inc h3 { font-size: 18px; margin-bottom: 6px; }
.inc-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; color: var(--ink-soft); margin-bottom: 10px; }
.tag { padding: 2px 9px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--panel-2); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-soft); }
.tl { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tl li { padding-left: 16px; border-left: 2px solid var(--line-2); }
.tl b { font-size: 13px; text-transform: uppercase; letter-spacing: .03em; color: var(--gold); }
.tl time { font-size: 12.5px; color: var(--ink-soft); margin-left: 6px; }
.tl p { white-space: pre-line; margin-top: 2px; }
.announce { padding: 16px 20px; background: rgba(255, 42, 60, .1); border-color: rgba(255, 42, 60, .4); color: var(--gold); font-weight: 600; white-space: pre-line; }
.empty { padding: 26px; text-align: center; color: var(--ink-soft); border: 1px dashed var(--line-2); border-radius: var(--r); background: rgba(200, 220, 255, .02); }
.skeleton { border-radius: var(--r); background: linear-gradient(90deg, var(--panel) 25%, var(--panel-2) 50%, var(--panel) 75%); background-size: 200% 100%; animation: sk 1.4s infinite; }
@keyframes sk { to { background-position: -200% 0; } }

/* Pied de page */
.footer { margin-top: 40px; background: var(--deep); border-top: 1px solid var(--line); color: var(--ink-soft); }
.footer-in { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; padding: 30px 20px 34px; font-size: 14px; }
.footer-in img { width: 150px; }
.footer-in p { flex: 1; min-width: 240px; }
.footer nav { display: flex; gap: 18px; }
.footer nav a { color: var(--gold); font-weight: 600; }
.footer nav a:hover { color: var(--ink); }

/* ── Admin ── */
.adm-main { flex: 1; padding: 34px 20px 70px; }
.login { max-width: 420px; margin: 40px auto; padding: 30px; display: grid; gap: 16px; }
.login h1 { font-size: 26px; }
.field { display: grid; gap: 6px; }
.field label { font-size: 13.5px; font-weight: 700; }
.field small { color: var(--ink-soft); font-size: 12.5px; }
.input, .select, .textarea { width: 100%; min-height: 44px; padding: 10px 13px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--well); color: var(--ink); outline: none; transition: border-color .15s, box-shadow .15s; }
.input::placeholder, .textarea::placeholder { color: var(--ink-faint); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255, 42, 60, .2); }
.textarea { min-height: 110px; resize: vertical; }
.check { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.check input { width: 18px; height: 18px; accent-color: var(--gold-2); }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.tabs button { padding: 9px 16px 8px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--panel); color: var(--ink-soft); font-family: var(--font-pixel); font-size: 13px; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .3); }
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] { background: rgba(255, 42, 60, .14); border-color: rgba(255, 42, 60, .5); color: var(--gold); }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.card { padding: 22px; margin-bottom: 18px; }
.card h2 { font-size: 20px; margin-bottom: 14px; }
.rowx { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.list { display: grid; gap: 10px; }
.item { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--well); }
.item .grow { flex: 1; min-width: 180px; }
.item code { font-size: 12.5px; color: var(--ink-soft); word-break: break-all; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.alert { padding: 11px 15px; border: 1px solid; border-radius: 10px; font-weight: 600; font-size: 14px; }
.alert-err { border-color: rgba(255, 92, 114, .5); background: rgba(255, 92, 114, .1); color: #ffaab8; }
.alert-ok { border-color: rgba(74, 222, 128, .45); background: rgba(74, 222, 128, .1); color: #9ff0bd; }
.toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 60; padding: 12px 20px; border: 1px solid rgba(255, 42, 60, .45); border-radius: 10px; background: var(--panel-2); color: var(--ink); font-weight: 600; box-shadow: 0 16px 36px -14px rgba(0, 0, 0, .85); }
.toast.err { border-color: rgba(255, 92, 114, .5); color: #ffaab8; }
dialog { width: min(620px, calc(100vw - 24px)); padding: 0; border: 1px solid var(--line-2); border-radius: 14px; background: var(--panel); color: var(--ink); box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .9); }
dialog::backdrop { background: rgba(6, 7, 10, .7); backdrop-filter: blur(3px); }
dialog form { padding: 24px; display: grid; gap: 14px; }
dialog h2 { font-size: 22px; }

@media (max-width: 640px) {
  .topbar-in { height: 62px; }
  .brand span { display: none; }
  .hero { padding: 30px 0 54px; }
  .overall { padding: 15px; gap: 12px; }
  .svc-meta { margin-left: 0; width: 100%; }
  .spark { display: none; }
  .grid2 { grid-template-columns: 1fr; }
  .days { gap: 1px; height: 30px; }
  .days i:nth-child(-n+45) { display: none; }
  .days-leg span:first-child { font-size: 0; }
  .days-leg span:first-child::after { content: "Il y a 45 jours"; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
.btn.arrow { font-family: var(--font-body); font-size: 17px; font-weight: 700; width: 38px; padding: 0; }