/* ═══════════════════════════════════════════════════════════════
   Outils Réseau — 1001Web.ca
   style.css — VERSION 2.8.2
   Design: Mission Control — dark tech premium
   Fonts: Space Mono (mono data) + DM Sans (UI)
═══════════════════════════════════════════════════════════════ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
    --bg-base:       #0a0d14;
    --bg-surface:    #111520;
    --bg-card:       #141826;
    --bg-card-hover: #181d2e;
    --bg-input:      #0e1220;

    --border:        rgba(147, 83, 172, 0.15);
    --border-strong: rgba(147, 83, 172, 0.32);

    --accent:        #9353AC;
    --accent-glow:   rgba(147, 83, 172, 0.18);
    --accent-2:      #00e5a0;
    --accent-warn:   #ffb740;
    --accent-danger: #ff4d6a;
    --accent-ok:     #00e5a0;

    --text-primary:  #e8edf8;
    --text-secondary:#8a96b0;
    --text-muted:    #8089a0;   /* v2.5.0 : 4,8:1 (AA) — avant #4a5568 = 2,35:1 */
    --text-mono:     #c084fc;
    --accent-text:   #b884d6;   /* violet 1001Web éclairci pour le TEXTE sur fond sombre : 5,8:1 */

    --font-ui:       'DM Sans', system-ui, sans-serif;
    --font-mono:     'Space Mono', 'Courier New', monospace;

    --radius-sm:     6px;
    --radius-md:     12px;
    --radius-lg:     18px;

    --shadow-card:   0 4px 24px rgba(0,0,0,.4), 0 1px 0 var(--border);
    --shadow-glow:   0 0 32px var(--accent-glow);

    --transition:    0.22s cubic-bezier(.4,0,.2,1);
}

/* ── Light Mode ─────────────────────────────────────────────── */
body:not(.dark-mode) {
    --bg-base:       #f5f0fa;
    --bg-surface:    #fff;
    --bg-card:       #fff;
    --bg-card-hover: #faf7fd;
    --bg-input:      #f8f4fc;

    --border:        rgba(147,83,172,0.16);
    --border-strong: rgba(147,83,172,0.32);

    --text-primary:  #1a1228;
    --text-secondary:#5a4a6a;
    --text-muted:    #6b5c7b;   /* v2.5.0 : 5,4:1 (AA) — avant #a090b0 = 2,95:1 */
    --text-mono:     #7c3aed;
    --accent-text:   #7b3f94;   /* 6,3:1 */
    --accent-2:      #047857;   /* vert lisible sur fond clair (avant #00e5a0 = 1,65:1) */
    --accent-ok:     #047857;
    --accent-warn:   #92400e;
    --accent-danger: #c81e3c;

    --shadow-card:   0 2px 16px rgba(147,83,172,.08), 0 1px 0 var(--border);
    --accent-glow:   rgba(147,83,172,.1);
}

/* ── Reset & Base ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
    font-family: var(--font-ui);
    background: var(--bg-base);
    color: var(--text-primary);
    min-height: 100vh;
    line-height: 1.6;
    transition: background var(--transition), color var(--transition);
    overflow-x: hidden;
}

/* subtle grid background */
body::before {
    content: '';
    position: fixed; inset: 0;
    background-image:
        linear-gradient(rgba(147,83,172,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(147,83,172,.035) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
    z-index: 0;
}

a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }

/* ── Header v1 — remplacé par .top-bar + .hero-header en v2.0.2 ─ */
.brand-accent { color: var(--accent-text); }

/* .theme-toggle réutilisé dans .top-bar */
.theme-toggle {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 50%;
    width: 38px; height: 38px;
    cursor: pointer;
    color: var(--text-secondary);
    display: flex; align-items: center; justify-content: center;
    font-size: .9rem;
    transition: var(--transition);
    flex-shrink: 0;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent-text); }
.dark-mode #iconSun  { display: none; }
.dark-mode #iconMoon { display: block; }
body:not(.dark-mode) #iconSun  { display: block; }
body:not(.dark-mode) #iconMoon { display: none; }

/* ── Hero Input ─────────────────────────────────────────────── */
.hero-input-section {
    position: relative; z-index: 1;
    padding: 3.5rem 1.5rem 2rem;
    background: linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-base) 100%);
    border-bottom: 1px solid var(--border);
}

.hero-inner { max-width: 860px; margin: 0 auto; }

.input-wrapper { position: relative; }

.input-type-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .7rem;
    font-family: var(--font-mono);
    color: var(--accent-text);
    background: var(--accent-glow);
    border: 1px solid rgba(147,83,172,.30);
    border-radius: 999px;
    padding: .2rem .75rem;
    margin-bottom: .75rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    transition: var(--transition);
}

.main-input-group {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--bg-input);
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius-lg);
    padding: .2rem .2rem .2rem 1rem;
    transition: var(--transition);
    box-shadow: var(--shadow-glow);
}

.main-input-group:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow), var(--shadow-glow);
}

.input-icon {
    color: var(--text-muted);
    font-size: .9rem;
    margin-right: .5rem;
    flex-shrink: 0;
}

.main-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: .95rem;
    padding: .65rem 0;
    min-width: 0;
}

.main-input::placeholder { color: var(--text-muted); font-family: var(--font-ui); }

.btn-myip {
    display: flex; align-items: center; gap: .4rem;
    background: transparent;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-family: var(--font-ui);
    font-size: .82rem;
    padding: .55rem .9rem;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
    flex-shrink: 0;
}
.btn-myip:hover { border-color: var(--accent-2); color: var(--accent-2); }

.btn-analyze {
    display: flex; align-items: center; gap: .5rem;
    background: var(--accent);
    border: none;
    border-radius: var(--radius-md);
    color: #fff;
    font-family: var(--font-ui);
    font-size: .92rem;
    font-weight: 600;
    padding: .6rem 1.25rem;
    cursor: pointer;
    transition: var(--transition);
    margin-left: .4rem;
    white-space: nowrap;
    flex-shrink: 0;
}
.btn-analyze:hover { background: #7d4594; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(147,83,172,.4); }
.btn-analyze:active { transform: translateY(0); }

.input-hint {
    font-size: .75rem;
    color: var(--text-muted);
    margin-top: .6rem;
    display: flex; align-items: center; gap: .4rem;
}
.input-hint i { color: var(--accent-warn); }

/* Quick features */
.quick-features {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: 1.75rem;
    justify-content: center;
}

.qf-item {
    display: flex; align-items: center; gap: .4rem;
    font-size: .75rem;
    color: var(--text-secondary);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: .3rem .85rem;
    transition: var(--transition);
}
.qf-item i { color: var(--accent-text); font-size: .7rem; }
.qf-item:hover { border-color: var(--accent); color: var(--text-primary); }

/* ── Results Zone ───────────────────────────────────────────── */
.results-zone {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
    position: relative; z-index: 1;
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: 5rem 1rem;
    color: var(--text-muted);
}
.empty-icon {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    opacity: .25;
}
.empty-state p { font-size: .95rem; }

/* Chargement — v2.2.0 : loader global retiré, chaque carte porte son état (voir fin de fichier) */
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Summary Banner ─────────────────────────────────────────── */
.result-summary {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.summary-domain {
    font-family: var(--font-mono);
    font-size: 1.2rem;
    color: var(--text-primary);
    font-weight: 700;
}

.summary-meta {
    display: flex; gap: .75rem; flex-wrap: wrap; flex: 1;
}

.summary-pill {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: .25rem .7rem;
    border-radius: 999px;
    border: 1px solid;
}
.pill-ok     { color: var(--accent-ok);     background: rgba(0,229,160,.08);   border-color: rgba(0,229,160,.25);   }
.pill-warn   { color: var(--accent-warn);   background: rgba(255,183,64,.08);  border-color: rgba(255,183,64,.25);  }
.pill-danger { color: var(--accent-danger); background: rgba(255,77,106,.08);  border-color: rgba(255,77,106,.25);  }
.pill-info   { color: var(--text-mono);              background: rgba(147,83,172,.12);  border-color: rgba(147,83,172,.30);  }

/* ── Cards Grid ─────────────────────────────────────────────── */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

@media (max-width: 1024px) { .cards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .cards-grid { grid-template-columns: 1fr; } }

.card-wide { grid-column: span 2; }
@media (max-width: 1024px) { .card-wide { grid-column: span 2; } }
@media (max-width: 640px)  { .card-wide { grid-column: span 1; } }

/* ── Result Card ─────────────────────────────────────────────── */
.result-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: var(--transition);
    display: flex; flex-direction: column;
}
.result-card:hover {
    border-color: var(--border-strong);
    background: var(--bg-card-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-card), 0 8px 32px rgba(0,0,0,.2);
}

.card-header {
    display: flex; align-items: center; gap: .75rem;
    padding: .9rem 1.25rem;
    border-bottom: 1px solid var(--border);
    background: rgba(255,255,255,.02);
}
body:not(.dark-mode) .card-header { background: rgba(0,0,0,.02); }

.card-icon {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-glow);
    border-radius: var(--radius-sm);
    color: var(--accent-text);
    font-size: .85rem;
    flex-shrink: 0;
}
.card-hosting .card-icon  { color: var(--accent-2);     background: rgba(0,229,160,.1);  }
.card-whois   .card-icon  { color: var(--accent-warn);  background: rgba(255,183,64,.1); }
.card-ssl     .card-icon  { color: var(--accent-ok);    background: rgba(0,229,160,.1);  }
.card-dns     .card-icon  { color: var(--accent-text);       background: var(--accent-glow);  }
.card-headers .card-icon  { color: #c084fc;             background: rgba(192,132,252,.1);}
.card-map     .card-icon  { color: var(--accent-danger);background: rgba(255,77,106,.1); }

.card-header h2,
.card-header h3 {
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--text-secondary);
    flex: 1;
    margin: 0;
}

.card-badge { margin-left: auto; }

.card-body {
    padding: 1.25rem;
    flex: 1;
    font-size: .88rem;
}

/* ── Data rows ──────────────────────────────────────────────── */
.data-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .75rem;
    padding: .45rem 0;
    border-bottom: 1px solid var(--border);
}
.data-row:last-child { border-bottom: none; }

.data-label {
    color: var(--text-muted);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    flex-shrink: 0;
    padding-top: .1rem;
    min-width: 110px;
    max-width: 130px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.data-value {
    font-family: var(--font-mono);
    color: var(--text-mono);
    font-size: .82rem;
    text-align: right;
    word-break: break-all;
}
.data-value.normal { font-family: var(--font-ui); color: var(--text-primary); font-size: .88rem; }
.data-value.ok     { color: var(--accent-ok); }
.data-value.warn   { color: var(--accent-warn); }
.data-value.danger { color: var(--accent-danger); }

/* Copyable */
.copyable {
    cursor: pointer;
    border-radius: 3px;
    transition: var(--transition);
    padding: .1rem .3rem;
}
.copyable:hover { background: var(--accent-glow); }

/* ── DNS Table ─────────────────────────────────────────────── */
.dns-type-tabs {
    display: flex; flex-wrap: wrap; gap: .4rem;
    margin-bottom: 1rem;
}

.dns-tab {
    font-size: .72rem;
    font-weight: 700;
    font-family: var(--font-mono);
    letter-spacing: .05em;
    padding: .25rem .65rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition);
}
.dns-tab:hover  { border-color: var(--accent); color: var(--accent-text); }
.dns-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.dns-tab.empty  { opacity: .4; cursor: default; }

.dns-records-list { display: flex; flex-direction: column; gap: .4rem; }

.dns-record {
    display: flex; align-items: baseline; gap: .75rem;
    padding: .45rem .65rem;
    background: var(--bg-input);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: .78rem;
    border: 1px solid var(--border);
    word-break: break-all;
}

.dns-record-type {
    font-size: .65rem;
    font-weight: 700;
    padding: .15rem .45rem;
    border-radius: 3px;
    background: var(--accent-glow);
    color: var(--accent-text);
    flex-shrink: 0;
    letter-spacing: .05em;
}

.dns-record-ttl {
    color: var(--text-muted);
    font-size: .7rem;
    flex-shrink: 0;
}

.dns-record-data { color: var(--text-mono); flex: 1; }

.no-records {
    color: var(--text-muted);
    font-size: .82rem;
    text-align: center;
    padding: .75rem;
}

/* ── SSL Card ───────────────────────────────────────────────── */
.ssl-grade {
    display: flex; align-items: center; justify-content: center;
    width: 48px; height: 48px;
    border-radius: 50%;
    font-family: var(--font-mono);
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 auto 1rem;
}
.ssl-grade.ok     { background: rgba(0,229,160,.1);  color: var(--accent-ok);     border: 2px solid var(--accent-ok);     }
.ssl-grade.warn   { background: rgba(255,183,64,.1); color: var(--accent-warn);   border: 2px solid var(--accent-warn);   }
.ssl-grade.danger { background: rgba(255,77,106,.1); color: var(--accent-danger); border: 2px solid var(--accent-danger); }

.ssl-expiry-bar {
    height: 4px;
    background: var(--bg-input);
    border-radius: 2px;
    margin: .75rem 0 .25rem;
    overflow: hidden;
}
.ssl-expiry-fill {
    height: 100%;
    border-radius: 2px;
    background: var(--accent-ok);
    transition: width .6s ease;
}

/* ── Headers Security ───────────────────────────────────────── */
.security-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .5rem;
    margin-bottom: 1rem;
}

.sec-item {
    display: flex; align-items: center; gap: .5rem;
    padding: .4rem .65rem;
    border-radius: var(--radius-sm);
    font-size: .75rem;
    font-weight: 500;
    border: 1px solid;
}
.sec-item.present { color: var(--accent-ok);   background: rgba(0,229,160,.07); border-color: rgba(0,229,160,.2);  }
.sec-item.missing  { color: var(--text-muted); background: var(--bg-input);     border-color: var(--border);       }

/* ── Map ─────────────────────────────────────────────────────── */
.card-map .card-body { padding: 0; }
.leaflet-container {
    width: 100%; min-height: 260px;
    background: var(--bg-input);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* ── Skeleton ──────────────────────────────────────────────── */
.skeleton-lines { display: flex; flex-direction: column; gap: .6rem; }
.skeleton-lines div {
    height: 12px;
    background: linear-gradient(90deg, var(--bg-input) 25%, var(--border) 50%, var(--bg-input) 75%);
    background-size: 200% 100%;
    border-radius: 4px;
    animation: shimmer 1.4s infinite;
}
.skeleton-lines div:nth-child(1) { width: 80%; }
.skeleton-lines div:nth-child(2) { width: 65%; }
.skeleton-lines div:nth-child(3) { width: 90%; }
.skeleton-lines div:nth-child(4) { width: 55%; }
.skeleton-lines div:nth-child(5) { width: 70%; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ── Utility ─────────────────────────────────────────────────── */
.hidden { display: none !important; }

.flag { font-size: 1.4rem; }

.ns-list { display: flex; flex-direction: column; gap: .25rem; text-align: right; }
.ns-item { font-family: var(--font-mono); font-size: .75rem; color: var(--text-mono); }

.error-card {
    display: flex; align-items: center; gap: .5rem;
    color: var(--accent-warn);
    font-size: .82rem;
    padding: .5rem 0;
}

/* ── Toast ──────────────────────────────────────────────────── */
.toast {
    position: fixed;
    bottom: 1.5rem; left: 50%; transform: translateX(-50%) translateY(100px);
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    color: var(--text-primary);
    padding: .65rem 1.25rem;
    border-radius: 999px;
    font-size: .85rem;
    display: flex; align-items: center; gap: .5rem;
    opacity: 0;
    transition: all .3s ease;
    z-index: 999;
    box-shadow: 0 4px 24px rgba(0,0,0,.3);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast i { color: var(--accent-ok); }

/* ── To Top ─────────────────────────────────────────────────── */
.btn-totop {
    position: fixed;
    bottom: 1.5rem; right: 1.5rem;
    background: var(--accent);
    border: none; border-radius: 50%;
    width: 42px; height: 42px;
    color: #fff; font-size: .9rem;
    cursor: pointer;
    opacity: 0; transform: translateY(16px);
    transition: var(--transition);
    z-index: 90;
    display: flex; align-items: center; justify-content: center;
}
.btn-totop.show { opacity: 1; transform: translateY(0); }
.btn-totop:hover { background: #7d4594; }

/* ── Footer ─────────────────────────────────────────────────── */
.site-footer {
    background: var(--bg-surface);
    border-top: 1px solid var(--border);
    position: relative; z-index: 1;
}

.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem;
    display: grid;
    grid-template-columns: 1fr repeat(2, auto);
    gap: 2rem;
}
@media (max-width: 640px) { .footer-inner { grid-template-columns: 1fr; } }

.footer-brand p { font-size: .82rem; color: var(--text-muted); margin-top: .5rem; }
.footer-logo { height: 100px; width: auto; }

.footer-links h4 {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-muted);
    margin-bottom: .75rem;
}
.footer-links ul { list-style: none; display: flex; flex-direction: column; gap: .4rem; }
.footer-links a { font-size: .82rem; color: var(--text-secondary); }
.footer-links a:hover { color: var(--accent-text); text-decoration: none; }

.footer-bottom {
    border-top: 1px solid var(--border);
    text-align: center;
    padding: 1rem 1.5rem;
    font-size: .75rem;
    color: var(--text-muted);
}
.footer-bottom a { color: var(--text-muted); }
.footer-bottom a:hover { color: var(--accent-text); }
.version-tag {
    display: inline-block;
    margin-left: .5rem;
    font-family: var(--font-mono);
    font-size: .65rem;
    color: var(--accent-text);
    background: var(--accent-glow);
    padding: .1rem .5rem;
    border-radius: 999px;
    border: 1px solid rgba(147,83,172,.30);
}

/* ── Leaflet overrides ──────────────────────────────────────── */
.leaflet-container { z-index: 1; }
.dark-mode .leaflet-tile { filter: invert(1) hue-rotate(180deg) brightness(.85) saturate(.7); }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 640px) {
    .hero-input-section { padding: 2rem 1rem 1.5rem; }
    .main-input-group { flex-wrap: wrap; padding: .5rem; gap: .4rem; }
    .main-input { order: 1; width: 100%; padding: .5rem .4rem; font-size: .88rem; }
    .input-icon { display: none; }
    .btn-myip { order: 2; flex: 1; justify-content: center; }
    .btn-analyze { order: 3; flex: 1; justify-content: center; }
    .results-zone { padding: 1.25rem 1rem 3rem; }
    .security-grid { grid-template-columns: 1fr; }
}

/* ── Entrance animations ────────────────────────────────────── */
.result-card { animation: cardIn .4s ease both; }
.result-card:nth-child(1) { animation-delay: .0s; }
.result-card:nth-child(2) { animation-delay: .07s; }
.result-card:nth-child(3) { animation-delay: .14s; }
.result-card:nth-child(4) { animation-delay: .21s; }
.result-card:nth-child(5) { animation-delay: .28s; }
.result-card:nth-child(6) { animation-delay: .35s; }

/* ── WHOIS étendu — contacts, statuts EPP, raw text ─────────── */
.whois-section-title {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--accent-text);
    font-family: var(--font-mono);
    margin: 1rem 0 .4rem;
    padding-bottom: .25rem;
    border-bottom: 1px solid var(--border);
}

.contact-block {
    background: rgba(147,83,172,.05);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .6rem .75rem;
    margin-bottom: .5rem;
}

.contact-line {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .82rem;
    color: var(--text-secondary);
    padding: .15rem 0;
}
.contact-line i {
    color: var(--accent-text);
    font-size: .75rem;
    width: 12px;
    flex-shrink: 0;
}

.status-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
}
.epp-status {
    font-size: .68rem;
    font-family: var(--font-mono);
    padding: .2rem .5rem;
    border-radius: 4px;
    border: 1px solid;
}
.epp-ok   { color: var(--accent-ok);   background: rgba(0,229,160,.08);  border-color: rgba(0,229,160,.25); }
.epp-lock { color: var(--accent-warn);  background: rgba(255,183,64,.08); border-color: rgba(255,183,64,.25);}

.whois-raw-toggle {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .78rem;
    color: var(--text-secondary);
    cursor: pointer;
    padding: .5rem .6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-top: .75rem;
    transition: var(--transition);
}
.whois-raw-toggle:hover { border-color: var(--accent); color: var(--accent-text); }

.whois-raw {
    font-family: var(--font-mono);
    font-size: .72rem;
    color: var(--text-muted);
    background: var(--bg-base);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .75rem;
    margin-top: .4rem;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 300px;
    overflow-y: auto;
    line-height: 1.5;
}
.whois-raw.hidden { display: none; }

@keyframes cardIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════
   v2.0.2 — TOP BAR + HERO HEADER + SEO CONTENT
═══════════════════════════════════════════════════════════════ */

/* ── Top Bar (sticky compact) ────────────────────────────────── */
.top-bar {
    position: sticky; top: 0; z-index: 100;
    background: rgba(10, 13, 20, 0.90);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 0 1.5rem;
    height: 48px;
}
body:not(.dark-mode) .top-bar {
    background: rgba(255,255,255,0.92);
}
.top-bar-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    gap: 1rem;
}
.top-bar-logo {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
}
.top-bar-logo:hover { text-decoration: none; color: var(--accent-text); }
.logo-top {
    height: 28px; width: 28px;
    border-radius: 50%;
    object-fit: cover;
    transition: var(--transition);
}
.top-bar-logo:hover .logo-top { transform: scale(1.08); }

.top-bar-nav {
    display: flex;
    gap: 1.5rem;
    margin-left: auto;
    margin-right: 1rem;
}
.top-bar-nav a {
    font-size: .8rem;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color var(--transition);
}
.top-bar-nav a:hover { color: var(--accent-text); text-decoration: none; }

/* Ajuster theme-toggle pour top-bar */
.top-bar .theme-toggle {
    width: 34px; height: 34px;
    font-size: .82rem;
}

@media (max-width: 520px) {
    .top-bar-nav { display: none; }
}

/* ── Hero Header (grand logo centré) ─────────────────────────── */
.hero-header {
    position: relative; z-index: 1;
    text-align: center;
    padding: 3.5rem 1.5rem 2.5rem;
    background: linear-gradient(180deg,
        var(--bg-surface) 0%,
        var(--bg-base) 100%
    );
}

/* Glow décoratif derrière le logo */
.hero-header::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -60%);
    width: 360px; height: 240px;
    background: radial-gradient(ellipse, rgba(147,83,172,0.20) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.hero-header-inner {
    position: relative; z-index: 1;
    max-width: 640px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.hero-logo-link { display: inline-block; }
.hero-logo {
    width: 140px; height: 140px;
    object-fit: contain;
    border-radius: 50%;
    filter: drop-shadow(0 8px 40px rgba(147, 83, 172, 0.35));
    transition: transform var(--transition), filter var(--transition);
}
.hero-logo-link:hover .hero-logo {
    transform: scale(1.05) translateY(-2px);
    filter: drop-shadow(0 12px 50px rgba(147, 83, 172, 0.55));
}

.hero-title {
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.15;
    color: var(--text-primary);
}
.hero-title .brand-accent { color: var(--accent-text); }

.hero-subtitle {
    font-size: clamp(.9rem, 2.5vw, 1.05rem);
    color: var(--text-secondary);
    line-height: 1.6;
    max-width: 480px;
}
.hero-subtitle strong {
    color: var(--accent-2);
    font-weight: 600;
}

/* Masquer le hero-header une fois qu'on a scrollé — pas de collapse,
   il reste visible car il contient le H1 important pour le SEO */

/* ── Séparateur hero → input ─────────────────────────────────── */
.hero-input-section {
    padding-top: 0 !important; /* supprime le gap entre hero et input */
    background: var(--bg-base) !important;
}

/* ── H2 titre section résultats ──────────────────────────────── */
.results-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: .03em;
    text-transform: uppercase;
    font-family: var(--font-mono);
    margin: 0 0 .5rem;
}
.results-section-title.hidden { display: none; }

/* ── Section contenu SEO éditorial ──────────────────────────── */
.seo-content {
    position: relative; z-index: 1;
    padding: 4rem 1.5rem 5rem;
    background: var(--bg-surface);
    border-top: 1px solid var(--border);
    margin-top: 2rem;
}

.seo-content-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.seo-h2 {
    font-size: clamp(1.25rem, 3vw, 1.7rem);
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--text-primary);
    text-align: center;
    margin-bottom: 1rem;
}

.seo-intro {
    text-align: center;
    font-size: .98rem;
    color: var(--text-secondary);
    max-width: 680px;
    margin: 0 auto 3rem;
    line-height: 1.8;
}

.seo-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.seo-feature-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.seo-feature-card:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-card);
}

.seo-feature-card h3 {
    font-size: .95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: .65rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.seo-feature-card h3 i {
    color: var(--accent-text);
    font-size: 1rem;
    flex-shrink: 0;
}
.seo-feature-card p {
    font-size: .875rem;
    color: var(--text-secondary);
    line-height: 1.7;
}
.seo-feature-card p strong { color: var(--text-primary); }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 768px) {
    .hero-logo { width: 100px; height: 100px; }
    .hero-header { padding: 2.5rem 1rem 1.5rem; }
    .seo-content { padding: 2.5rem 1rem 3rem; }
    .seo-features-grid { grid-template-columns: 1fr; gap: 1rem; }
}


/* ═══════════════════════════════════════════════════════════════
   v2.1.0 — FENÊTRE COPIER-COLLER (infos seulement)
═══════════════════════════════════════════════════════════════ */
.copy-panel {
    margin-top: 1.25rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    min-width: 0;
}

.copy-output {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 9rem;
    max-height: 70vh;
    resize: vertical;
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: .85rem 1rem;
    font-family: var(--font-mono);
    font-size: .8rem;
    line-height: 1.65;
    white-space: pre-wrap;        /* les longues lignes (TXT, SPF) passent à la ligne */
    overflow-wrap: anywhere;      /* → jamais de défilement horizontal */
    overflow-x: hidden;
    overflow-y: auto;
    tab-size: 4;
}
.copy-output:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.btn-copy-all {
    align-self: flex-end;
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    background: var(--accent);
    border: none;
    border-radius: var(--radius-md);
    color: #fff;
    font-family: var(--font-ui);
    font-size: .92rem;
    font-weight: 600;
    padding: .6rem 1.4rem;
    min-height: 44px;             /* cible tactile */
    cursor: pointer;
    transition: var(--transition);
}
.btn-copy-all:hover { background: #7d4594; box-shadow: 0 4px 16px var(--accent-glow); }
.btn-copy-all:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.btn-copy-all:active { transform: translateY(1px); }

@media (max-width: 640px) {
    .copy-panel { padding: .75rem; }
    .copy-output { font-size: .75rem; padding: .7rem .75rem; max-height: 60vh; }
    .btn-copy-all { align-self: stretch; width: 100%; }
}

/* v2.1.0 — Responsive : le halo du logo (::before 360px) débordait de 20px à 320px de large */
.hero-header { overflow: hidden; }
.hero-header::before { max-width: 100%; }

/* ═══════════════════════════════════════════════════════════════
   v2.2.0 — RENDU PROGRESSIF + LARGEUR UNIQUE
═══════════════════════════════════════════════════════════════ */

/* Carte en attente de sa réponse */
.pill-wait {
    color: var(--text-secondary);
    background: var(--bg-input);
    border-color: var(--border-strong);
}
.pill-spinner {
    width: 10px; height: 10px;
    border: 2px solid var(--border-strong);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin .7s linear infinite;
    flex-shrink: 0;
}
.result-card.is-loading { border-color: var(--border); }
.result-card.is-loading .card-icon { animation: pulseIcon 1.4s ease-in-out infinite; }
@keyframes pulseIcon { 50% { opacity: .45; } }

@media (prefers-reduced-motion: reduce) {
    .pill-spinner, .skeleton-lines div, .result-card.is-loading .card-icon { animation: none; }
}

/* Largeur unique : barre du haut, recherche, résultats, contenu SEO et pied de page
   partagent les mêmes bords gauche/droit (contenu 1152px + gouttière 24px, 16px sur mobile). */
:root { --content-w: 1152px; --gutter: 1.5rem; }
@media (max-width: 640px) { :root { --gutter: 1rem; } }

.top-bar           { padding-left: var(--gutter); padding-right: var(--gutter); }
.top-bar-inner     { max-width: var(--content-w); }
.hero-input-section{ padding-left: var(--gutter) !important; padding-right: var(--gutter) !important; }
.hero-inner        { max-width: var(--content-w); }
.results-zone      { max-width: calc(var(--content-w) + 2 * var(--gutter)); padding-left: var(--gutter); padding-right: var(--gutter); }
.seo-content       { padding-left: var(--gutter); padding-right: var(--gutter); }
.seo-content-inner { max-width: var(--content-w); }
.footer-inner      { max-width: calc(var(--content-w) + 2 * var(--gutter)); padding-left: var(--gutter); padding-right: var(--gutter); }

/* v2.4.1 — Carte « Localisation serveur » pleine largeur (toutes les colonnes de la grille) */
.card-map { grid-column: 1 / -1; }
.card-map .leaflet-container { min-height: 340px; }
@media (max-width: 640px) { .card-map .leaflet-container { min-height: 260px; } }

/* ═══════════════════════════════════════════════════════════════
   v2.5.0 — APPEL À L'ACTION · FAQ · ACCESSIBILITÉ
═══════════════════════════════════════════════════════════════ */
.cta-panel {
    margin-top: 1.25rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; flex-wrap: wrap;
    background: linear-gradient(135deg, rgba(147,83,172,.14), rgba(147,83,172,.04));
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem;
}
.cta-text { flex: 1 1 320px; min-width: 0; }
.cta-title { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); margin: 0 0 .35rem; }
.cta-issues { list-style: none; display: flex; flex-direction: column; gap: .25rem; margin: .35rem 0 .5rem; }
.cta-issues li { font-size: .86rem; color: var(--text-secondary); padding-left: 1.2rem; position: relative; }
.cta-issues li::before { content: '!'; position: absolute; left: 0; top: 0; font-weight: 700; color: var(--accent-warn); }
.cta-issues:empty { display: none; }
.cta-sub { font-size: .86rem; color: var(--text-secondary); margin: 0; }
.cta-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.btn-cta, .btn-cta-alt {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: .6rem 1.2rem;
    border-radius: var(--radius-md);
    font-size: .9rem; font-weight: 600; text-decoration: none; white-space: nowrap;
    transition: var(--transition);
}
.btn-cta { background: var(--accent); color: #fff; }
.btn-cta:hover { background: #7d4594; text-decoration: none; }
.btn-cta-alt { border: 1px solid var(--border-strong); color: var(--text-primary); }
.btn-cta-alt:hover { border-color: var(--accent); text-decoration: none; }
@media (max-width: 640px) {
    .cta-panel { padding: 1rem; }
    .cta-actions, .btn-cta, .btn-cta-alt { width: 100%; }
}

.faq-section { position: relative; z-index: 1; padding: 3.5rem var(--gutter) 4rem; }
.faq-inner { max-width: var(--content-w); margin: 0 auto; display: flex; flex-direction: column; gap: .75rem; }
.faq-item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0 1.25rem;
}
.faq-item summary {
    cursor: pointer; list-style: none;
    padding: 1rem 0; font-weight: 600; color: var(--text-primary);
    display: flex; justify-content: space-between; gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; color: var(--accent-text); font-weight: 700; }
.faq-item[open] summary::after { content: '–'; }
.faq-item p { color: var(--text-secondary); font-size: .9rem; line-height: 1.7; padding: 0 0 1rem; }

/* Focus clavier visible partout */
a:focus-visible, button:focus-visible, summary:focus-visible, [data-copy]:focus-visible, .dns-tab:focus-visible {
    outline: 2px solid var(--accent-text); outline-offset: 2px;
}
.map-unavailable { padding: 1rem; }

/* ═══════════════════════════════════════════════════════════════
   v2.6.0 — PARTAGE · REDIRECTIONS · MODE IP
═══════════════════════════════════════════════════════════════ */
.summary-actions { display: flex; gap: .5rem; margin-left: auto; }
.summary-actions .btn-myip span { margin-left: .1rem; }
.redirect-chain { display: flex; flex-direction: column; gap: .25rem; text-align: right; min-width: 0; }
.redirect-hop { display: flex; justify-content: flex-end; gap: .4rem; align-items: baseline; min-width: 0; }
.hop-status { font-family: var(--font-mono); font-size: .7rem; color: var(--accent-warn); flex-shrink: 0; }
.hop-url { font-family: var(--font-mono); font-size: .75rem; color: var(--text-mono); overflow-wrap: anywhere; min-width: 0; }
/* IP : seules Hébergeur et Carte restent — côte à côte sur grand écran */
.cards-grid.is-ip .card-hosting { grid-column: span 1; }
.cards-grid.is-ip .card-map     { grid-column: span 2; }
@media (max-width: 1024px) {
    .cards-grid.is-ip .card-hosting, .cards-grid.is-ip .card-map { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    .summary-actions { margin-left: 0; width: 100%; }
    .summary-actions .btn-myip:first-child { flex: 1; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════
   v2.7.0 — SANTÉ DES COURRIELS · SCORE /100
═══════════════════════════════════════════════════════════════ */
.card-mail, .card-loi25 { grid-column: 1 / -1; }
.card-loi25 .card-icon { color: var(--accent); background: rgba(147,83,172,.12); }
.mail-note a { color: inherit; text-decoration: underline; }
.card-mail .card-icon { color: var(--accent-2); background: rgba(0,229,160,.1); }
.mail-domain { font-size: .85rem; color: var(--text-secondary); margin-bottom: .85rem; }
.mail-domain strong { color: var(--text-primary); font-family: var(--font-mono); }
.mail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
@media (max-width: 768px) { .mail-grid { grid-template-columns: 1fr; } }
.mail-check {
    display: flex; gap: .65rem; align-items: flex-start; min-width: 0;
    padding: .7rem .8rem; border-radius: var(--radius-sm);
    background: var(--bg-input); border: 1px solid var(--border);
}
.mail-check > i { margin-top: .2rem; flex-shrink: 0; }
.mail-ok > i    { color: var(--accent-ok); }
.mail-warn > i  { color: var(--accent-warn); }
.mail-error > i { color: var(--accent-danger); }
.mail-info > i  { color: var(--text-muted); }
.mail-error { border-color: rgba(255,77,106,.35); }
.mail-warn  { border-color: rgba(255,183,64,.35); }
.mail-check-body { min-width: 0; flex: 1; }
.mail-check-head { display: flex; justify-content: space-between; gap: .5rem; font-size: .85rem; color: var(--text-primary); }
.mail-status { font-size: .72rem; color: var(--text-secondary); white-space: nowrap; }
.mail-check p { font-size: .82rem; color: var(--text-secondary); margin: .2rem 0 0; line-height: 1.5; }
.mail-check code {
    display: block; margin-top: .4rem; font-family: var(--font-mono); font-size: .72rem;
    color: var(--text-mono); overflow-wrap: anywhere; white-space: normal;
}
.mail-note { font-size: .74rem; color: var(--text-muted); margin-top: .75rem; }

.score-panel {
    display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem; margin-bottom: 1.5rem;
}
.score-ring {
    --pct: 0; --c: var(--accent-ok);
    width: 104px; height: 104px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; gap: .1rem;
    background: radial-gradient(closest-side, var(--bg-card) 78%, transparent 79% 100%),
                conic-gradient(var(--c) calc(var(--pct) * 1%), var(--bg-input) 0);
}
.score-ring.score-warn   { --c: var(--accent-warn); }
.score-ring.score-danger { --c: var(--accent-danger); }
.score-value { font-family: var(--font-mono); font-size: 1.9rem; font-weight: 700; color: var(--text-primary); }
.score-ring small { font-size: .75rem; color: var(--text-secondary); align-self: flex-end; margin-bottom: 1.9rem; }
.score-text { flex: 1 1 260px; min-width: 0; }
.score-label { font-size: 1.1rem; font-weight: 700; color: var(--text-primary); margin: 0 0 .2rem; }
.score-sub { font-size: .86rem; color: var(--text-secondary); margin: 0 0 .5rem; }
.score-details summary { cursor: pointer; font-size: .82rem; color: var(--accent-text); }
.score-items { list-style: none; margin-top: .5rem; display: flex; flex-direction: column; gap: .2rem; }
.score-items li { display: flex; justify-content: space-between; gap: 1rem; font-size: .82rem; color: var(--text-secondary); border-bottom: 1px solid var(--border); padding: .25rem 0; }
.score-items li span:last-child { font-family: var(--font-mono); white-space: nowrap; }
.score-items li.is-full span:last-child { color: var(--accent-ok); }
.score-items li.is-part span:last-child { color: var(--accent-warn); }
.score-items li.is-zero span:last-child { color: var(--accent-danger); }
@media (max-width: 640px) { .score-panel { padding: 1rem; gap: 1rem; } .score-ring { width: 88px; height: 88px; } }

/* ═══════════════════════════════════════════════════════════════
   v2.7.2 — INFOBULLES · TOUCHE « / »
═══════════════════════════════════════════════════════════════ */
.nw-tooltip {
    position: fixed; z-index: 1000; pointer-events: none;
    max-width: min(300px, calc(100vw - 16px));
    background: var(--text-primary); color: var(--bg-base);
    font-family: var(--font-ui); font-size: .8rem; font-weight: 500; line-height: 1.45;
    text-transform: none; letter-spacing: normal; text-align: left;
    padding: .5rem .7rem; border-radius: var(--radius-sm);
    box-shadow: 0 6px 24px rgba(0,0,0,.35);
}
.nw-tooltip[hidden] { display: none; }
[data-tip] { cursor: help; }
button[data-tip], a[data-tip], .copyable[data-tip], .dns-tab[data-tip] { cursor: pointer; }
.data-label[data-tip], .mail-check-head strong[data-tip], .card-header h3[data-tip], .score-items li[data-tip] > span:first-child {
    text-decoration: underline dotted; text-underline-offset: 3px; text-decoration-color: var(--text-muted);
}
.input-hint kbd {
    font-family: var(--font-mono); font-size: .7rem; padding: .05rem .35rem; margin: 0 .1rem;
    border: 1px solid var(--border-strong); border-radius: 4px; background: var(--bg-card); color: var(--text-secondary);
}
@media (hover: none) { .input-hint kbd { display: none; } }

/* v2.7.5 — case Turnstile (seulement si Cloudflare exige une interaction) */
.ts-box { display: flex; flex-direction: column; align-items: center; }
.ts-box.is-active { gap: .6rem; margin-top: 1rem; padding: 1rem; border: 1px solid var(--border-strong); border-radius: 14px; background: var(--bg-card); }
.ts-msg { display: none; margin: 0; font-weight: 600; text-align: center; }
.ts-box.is-active .ts-msg { display: block; }
.ts-box .cf-turnstile { max-width: 100%; }

/* v2.8.1 — lien vers le générateur de politiques, sous l'écart Loi 25 */
.loi25-link { display: inline-flex; align-items: center; gap: .4rem; margin-top: .5rem; padding: .35rem .7rem; border: 1px solid var(--border-strong); border-radius: 999px; font-weight: 600; font-size: .85rem; color: var(--accent-text); text-decoration: none; }
.loi25-link:hover { border-color: var(--accent); text-decoration: none; }

/* v2.8.2 — IP du visiteur sous le champ */
.my-ip { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; margin: .6rem 0 0; font-size: .85rem; color: var(--text-secondary, inherit); }
.my-ip.hidden { display: none; }
.my-ip-val { font-family: 'Space Mono', monospace; font-weight: 700; color: var(--accent-text); background: none; border: 1px solid var(--border-strong); border-radius: 999px; padding: .2rem .65rem; cursor: pointer; max-width: 100%; overflow-wrap: anywhere; }
.my-ip-val:hover, .my-ip-val:focus-visible { border-color: var(--accent); }
.my-ip-copy { background: none; border: 0; color: inherit; cursor: pointer; padding: .25rem; min-width: 28px; min-height: 28px; }
button.whois-raw-toggle { width: 100%; font-family: inherit; text-align: left; background: transparent; }