/* ============================================================================
   api-tool.css — Styles mutualisés des outils « API » (validateur e-mail,
   inspecteur de domaine). Respecte le design system : hero « always-dark »,
   cartes Liquid Glass (var(--glass-*)), accents via var(--accent-text)
   (vert profond en clair, vif en sombre), statuts sémantiques.
   Préfixe de classes : .at-
   ========================================================================== */

.at-wrap { max-width: 900px; margin: 0 auto; padding: 6.5rem 1.2rem 6rem; }

/* Hero (toujours sombre, quel que soit le thème) */
.at-hero {
    text-align: center; padding: 3rem 1.5rem 2.5rem; border-radius: var(--radius-glass, 22px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    background:
        radial-gradient(ellipse 75% 120% at 50% -10%, rgba(55, 239, 186, 0.18), transparent 60%),
        linear-gradient(160deg, rgba(24, 29, 40, 0.94), rgba(11, 14, 20, 0.97));
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35), 0 0 60px rgba(55, 239, 186, 0.10);
    color: #f4fbff; margin-bottom: 2rem;
}
.at-hero-icon {
    width: 64px; height: 64px; margin: 0 auto 1.1rem; display: flex; align-items: center;
    justify-content: center; border-radius: 16px; font-size: 1.8rem; color: #37EFBA;
    background: linear-gradient(140deg, rgba(55, 239, 186, 0.2), rgba(0, 212, 255, 0.12));
    border: 1px solid rgba(255, 255, 255, 0.18);
}
.at-hero h1 { font-size: 2.05rem; margin-bottom: 0.6rem; }
.at-hero p { opacity: 0.9; max-width: 640px; margin: 0 auto; line-height: 1.6; }

/* Formulaire (dans le hero sombre : accents vifs OK) */
.at-form { display: flex; gap: 0.6rem; max-width: 640px; margin: 1.6rem auto 0.6rem; flex-wrap: wrap; }
.at-input {
    flex: 1 1 320px; font-family: inherit; font-size: 1rem; padding: 0.85rem 1.1rem;
    border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.06); color: #f4fbff;
}
.at-input::placeholder { color: rgba(244, 251, 255, 0.5); }
.at-input:focus { outline: none; border-color: #37EFBA; box-shadow: 0 0 0 3px rgba(55, 239, 186, 0.18); }
.at-btn {
    font-family: inherit; font-weight: 700; font-size: 1rem; cursor: pointer;
    padding: 0.85rem 1.6rem; border-radius: 12px; border: none; color: #0c1014;
    background: linear-gradient(135deg, #37EFBA, #00d4aa); display: inline-flex;
    align-items: center; gap: 0.5rem;
}
.at-btn:disabled { opacity: 0.55; cursor: default; }
.at-privacy { font-size: 0.82rem; opacity: 0.7; text-align: center; margin-top: 0.2rem; }

/* Résultats */
.at-results { margin-top: 2rem; display: none; }
.at-results.on { display: block; }
.at-msg { text-align: center; padding: 1.2rem; border-radius: var(--radius-glass, 18px); margin-top: 1.5rem; }
.at-msg.err { background: rgba(197, 57, 43, 0.1); border: 1px solid rgba(197, 57, 43, 0.3); color: var(--bad-text, #ff8a8a); font-weight: 600; }

/* Cartes « verre » (adaptent au thème via les tokens) */
.at-card {
    background: var(--glass-bg, rgba(20, 24, 33, 0.62)); border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.14));
    -webkit-backdrop-filter: blur(var(--glass-blur, 18px)); backdrop-filter: blur(var(--glass-blur, 18px));
    border-radius: var(--radius-glass, 22px); padding: 1.4rem 1.6rem; margin-bottom: 1.4rem;
    box-shadow: var(--glass-shadow, 0 14px 42px rgba(0, 0, 0, 0.35));
}
.at-card h2 { font-size: 1.15rem; margin: 0 0 1rem; display: flex; align-items: center; gap: 0.5rem; }
.at-card h2 i { color: var(--accent-text, #37EFBA); }

/* Bandeau de verdict */
.at-verdict { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.at-verdict-ic { width: 56px; height: 56px; flex-shrink: 0; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #fff; }
.at-verdict-ic.good { background: #17b978; }
.at-verdict-ic.warn { background: #e6a400; }
.at-verdict-ic.bad  { background: #e5484d; }
.at-verdict-txt b { font-size: 1.1rem; display: block; }
.at-verdict-txt span { opacity: 0.82; font-size: 0.92rem; }

/* Suggestion (faute de frappe) */
.at-suggest { margin-top: 0.9rem; padding: 0.7rem 0.9rem; border-radius: 12px; font-size: 0.92rem;
    background: rgba(230, 164, 0, 0.1); border: 1px solid rgba(230, 164, 0, 0.3); }
.at-suggest b { color: var(--accent-text, #37EFBA); }

/* Checklist */
.at-checks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.at-check { display: flex; gap: 0.7rem; align-items: flex-start; }
.at-check-ic { flex-shrink: 0; width: 22px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 0.72rem; color: #fff; margin-top: 0.1rem; }
.at-ok   .at-check-ic { background: #17b978; }
.at-warn .at-check-ic { background: #e6a400; }
.at-bad  .at-check-ic { background: #e5484d; }
.at-info .at-check-ic { background: #6b7280; }
.at-check-body b { display: block; font-size: 0.96rem; }
.at-check-body span { font-size: 0.88rem; opacity: 0.82; }

/* Tableau clé/valeur (DNS, WHOIS, TLS brut) */
.at-kv { font-size: 0.9rem; }
.at-kv > div { padding: 0.4rem 0; border-bottom: 1px solid rgba(128, 128, 128, 0.14); display: flex; gap: 0.8rem; }
.at-kv > div:last-child { border-bottom: none; }
.at-kv .k { flex: 0 0 150px; opacity: 0.65; }
.at-kv .v { word-break: break-word; flex: 1; }
.at-kv .v code { font-size: 0.86em; background: rgba(127, 140, 160, 0.16); padding: 0.08rem 0.35rem; border-radius: 5px; }
.at-mono { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }

/* Puces d'état inline */
.at-pill { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; font-weight: 700;
    padding: 0.18rem 0.6rem; border-radius: 20px; }
.at-pill.good { color: var(--accent-text, #37EFBA); background: rgba(55, 239, 186, 0.12); }
.at-pill.warn { color: var(--warn-text, #ffb066); background: rgba(230, 164, 0, 0.12); }
.at-pill.bad  { color: var(--bad-text, #ff8a8a); background: rgba(229, 72, 77, 0.12); }
.at-pill.muted { color: inherit; opacity: 0.7; background: rgba(128, 128, 128, 0.14); }

.at-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
@media (max-width: 720px) { .at-grid2 { grid-template-columns: 1fr; } }

.at-back { text-align: center; margin-top: 2rem; }
.at-back a { color: var(--accent-text, #37EFBA); font-weight: 600; text-decoration: none; }