/* MailyBounce · design system (clone Codabill, bleu→rouge). © Novadesko SRL. */
:root{
  --ground:#FBF5F4;--surface:#FFFFFF;--surface-2:#F6ECEA;--line:#ECDAD7;
  --ink:#1A0E0D;--ink-muted:#6E5A57;--ink-faint:#9A8582;
  --red-700:#A21419;--red-600:#DC1F24;--red-500:#F23A3E;--red-400:#FF6266;--red-300:#FF9497;
  --ember:#FF7A2F;
  --ok:#0E9F6E;--warn:#B45309;--danger:#C81E4A;--info:#1D7FC4;
  --valid:#0E9F6E;--catchall:#B45309;--unknown:#7C6F12;--invalid:#C81E4A;--greylist:#1D7FC4;
  --glow:0 6px 22px rgba(220,31,36,.28);
  --radius:16px;--radius-sm:11px;
  --f-display:'Sora',system-ui,sans-serif;--f-ui:'Inter',system-ui,sans-serif;--f-mono:'JetBrains Mono',ui-monospace,monospace;
  --t:.2s cubic-bezier(.4,0,.2,1);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ground:#0C0708;--surface:#160C0D;--surface-2:#1F1214;--line:#2E1B1D;
  --ink:#F6ECEB;--ink-muted:#B79E9B;--ink-faint:#7E6663;
  --red-700:#B01217;--red-600:#E5322D;--red-500:#F23A3E;--ember:#FF8A3D;
  --glow:0 8px 30px rgba(229,50,45,.35);
  --valid:#2BD98F;--catchall:#F0A93C;--unknown:#E3C64C;--invalid:#FF5C7A;--greylist:#4CC3FF;
}}
:root[data-theme="dark"]{
  --ground:#0C0708;--surface:#160C0D;--surface-2:#1F1214;--line:#2E1B1D;
  --ink:#F6ECEB;--ink-muted:#B79E9B;--ink-faint:#7E6663;
  --red-700:#B01217;--red-600:#E5322D;--red-500:#F23A3E;--ember:#FF8A3D;
  --glow:0 8px 30px rgba(229,50,45,.35);
  --valid:#2BD98F;--catchall:#F0A93C;--unknown:#E3C64C;--invalid:#FF5C7A;--greylist:#4CC3FF;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--f-ui);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--f-display);line-height:1.15;margin:0;text-wrap:balance}
a{color:var(--red-600);text-decoration:none}a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--red-500);outline-offset:2px;border-radius:5px}
.mono{font-family:var(--f-mono)}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
/* boutons */
.btn{display:inline-flex;align-items:center;gap:8px;font:600 14px/1 var(--f-ui);padding:12px 20px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;transition:var(--t)}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn-primary{background:linear-gradient(135deg,var(--red-600),var(--red-700));color:#fff;border:none;box-shadow:var(--glow)}
.btn-ghost{background:transparent}
/* cartes glass */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px}
.glass{background:color-mix(in srgb,var(--surface) 82%,transparent);backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:var(--radius)}
.grid{display:grid;gap:16px}.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:820px){.g2,.g3,.g4{grid-template-columns:1fr}}
/* logo */
.mb-logo{display:inline-flex;align-items:center;gap:11px;font-family:var(--f-display);font-weight:800;font-size:19px;color:var(--ink)}
.mb-logo:hover{text-decoration:none}
.mb-logo span{color:var(--red-500)}
.mb-mark{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(140deg,var(--red-600),var(--red-700));box-shadow:var(--glow)}
.mb-mark svg{width:22px;height:22px}
/* statut de vérification */
.pill{font:600 12.5px/1 var(--f-ui);padding:6px 12px;border-radius:999px;display:inline-flex;align-items:center;gap:7px;border:1px solid color-mix(in srgb,var(--c) 40%,transparent);color:var(--c);background:color-mix(in srgb,var(--c) 12%,transparent)}
.pill::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c)}
.st-valid{--c:var(--valid)}.st-catch_all{--c:var(--catchall)}.st-unknown{--c:var(--unknown)}.st-greylist{--c:var(--greylist)}
.st-invalid{--c:var(--invalid)}.st-no_mx,.st-disposable,.st-role,.st-invalid_syntax{--c:var(--ink-faint)}
/* topbar */
.topbar{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--ground) 88%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.topbar nav{display:flex;gap:26px;align-items:center}
.topbar nav a{color:var(--ink-muted);font-weight:500;font-size:14.5px}
.topbar nav a:hover{color:var(--ink);text-decoration:none}
/* hero */
.hero{position:relative;overflow:hidden;padding:76px 0 64px;background:
  radial-gradient(1100px 420px at 80% -80px,color-mix(in srgb,var(--red-600) 20%,transparent),transparent 70%),
  radial-gradient(720px 340px at 6% 120%,color-mix(in srgb,var(--ember) 12%,transparent),transparent 70%)}
.hero h1{font-size:clamp(34px,5.6vw,58px);font-weight:800;letter-spacing:-.02em;max-width:15ch}
.hero h1 em{font-style:normal;background:linear-gradient(92deg,var(--red-500),var(--ember));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{font-size:19px;color:var(--ink-muted);max-width:56ch;margin:20px 0 30px}
.eyebrow{font:700 12.5px/1 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--red-600);display:inline-flex;gap:9px;align-items:center;margin-bottom:18px}
.eyebrow::before{content:"";width:26px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--red-600),var(--ember))}
/* démo widget */
.demo{margin-top:14px;max-width:520px}
.demo form{display:flex;gap:10px}
.demo input{flex:1;padding:14px 16px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:500 15px var(--f-ui)}
.demo input:focus{outline:none;border-color:var(--red-500)}
/* app shell */
.shell{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
@media(max-width:820px){.shell{grid-template-columns:1fr}.sidebar{display:none}}
.sidebar{background:var(--surface);border-right:1px solid var(--line);padding:20px 14px;display:flex;flex-direction:column;gap:6px;position:sticky;top:0;height:100vh}
.sidebar .mb-logo{padding:6px 10px 18px}
.s-item{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:11px;color:var(--ink-muted);font-weight:500;font-size:14.5px;transition:var(--t)}
.s-item:hover{background:var(--surface-2);color:var(--ink);text-decoration:none}
.s-item.on{color:#fff;background:linear-gradient(135deg,var(--red-600),var(--red-700));box-shadow:var(--glow)}
.s-item i{width:18px;text-align:center}
.main{padding:28px 32px;min-width:0}
.page-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;flex-wrap:wrap;gap:12px}
.page-h h1{font-size:24px;font-weight:700}
/* kpi */
.kpi{padding:18px 20px}
.kpi .v{font-family:var(--f-display);font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.kpi .k{font-size:12.5px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.06em;margin-top:8px}
.kpi .ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;color:#fff;font-size:16px;background:linear-gradient(140deg,var(--red-600),var(--red-700));float:right}
/* tables */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius)}
table{border-collapse:collapse;width:100%;font-size:14px;min-width:520px}
th,td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line)}
th{font:700 11.5px/1 var(--f-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);background:var(--surface-2)}
tr:last-child td{border-bottom:none}
/* footer */
.foot{border-top:1px solid var(--line);padding:30px 0;color:var(--ink-faint);font-size:13.5px;margin-top:60px}
.foot .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
.badge-ok{color:var(--valid);font-weight:600}