/* =====================================================================
   GrosTony Multitools - Feuille de styles principale (compact)
   ===================================================================== */

:root {
    /* Thème sombre par défaut */
    --bg:           #0e1116;
    --bg-elevated: #161b22;
    --bg-hover:    #1f2630;
    --border:      #30363d;
    --text:        #e6edf3;
    --text-muted:  #8b949e;
    --accent:      #58a6ff;
    --accent-hover:#79b8ff;
    --success:     #3fb950;
    --success-bg:  #0f2417;
    --danger:      #f85149;
    --danger-hover:#ff6b62;
    --danger-bg:   #2a0f0f;
    --warning:     #d29922;
    --warning-bg:  #2a210f;
    --radius:      6px;
    --shadow:      0 2px 8px rgba(0, 0, 0, 0.35);
    --shadow-hover:0 8px 24px rgba(0, 0, 0, 0.45);
    --header-h:    48px;
    --mono:        ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

    /* === Couleurs par catégorie (slug → couleur signature) === */
    /* Réseau : bleu cyan vif */
    --cat-network:        #38bdf8;
    --cat-network-glow:   rgba(56, 189, 248, 0.35);
    --cat-network-bg:     rgba(56, 189, 248, 0.08);
    /* Référence : vert émeraude */
    --cat-reference:      #34d399;
    --cat-reference-glow: rgba(52, 211, 153, 0.35);
    --cat-reference-bg:   rgba(52, 211, 153, 0.08);
    /* Système & Sécurité : ambre/orange */
    --cat-system:         #fbbf24;
    --cat-system-glow:    rgba(251, 191, 36, 0.35);
    --cat-system-bg:      rgba(251, 191, 36, 0.08);
    /* Autres : violet/magenta — créatif, ludique */
    --cat-misc:           #c084fc;
    --cat-misc-glow:      rgba(192, 132, 252, 0.35);
    --cat-misc-bg:        rgba(192, 132, 252, 0.08);

    /* === Tokens d'animation === */
    --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
    --dur-fast:     150ms;
    --dur-base:     250ms;
    --dur-slow:     400ms;

    /* === Gradient signature (pour brand + accents principaux) === */
    --grad-brand: linear-gradient(135deg, #58a6ff 0%, #a78bfa 50%, #f472b6 100%);

    /* Transition globale pour le toggle de thème */
    --theme-transition: background-color var(--dur-base) var(--ease-out),
                        color var(--dur-base) var(--ease-out),
                        border-color var(--dur-base) var(--ease-out);
}

[data-theme="light"] {
    --bg:           #ffffff;
    --bg-elevated: #f6f8fa;
    --bg-hover:    #eaeef2;
    --border:      #d0d7de;
    --text:        #1f2328;
    --text-muted:  #59636e;
    --accent:      #0969da;
    --accent-hover:#0550ae;
    --success:     #1a7f37;
    --success-bg:  #dafbe1;
    --danger:      #cf222e;
    --danger-hover:#a40e26;
    --danger-bg:   #ffebe9;
    --warning:     #9a6700;
    --warning-bg:  #fff8c5;
    --shadow:      0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-hover:0 8px 24px rgba(0, 0, 0, 0.12);

    /* Couleurs catégorie ajustées pour fond clair (plus saturées) */
    --cat-network:        #0284c7;
    --cat-network-glow:   rgba(2, 132, 199, 0.18);
    --cat-network-bg:     rgba(2, 132, 199, 0.06);
    --cat-reference:      #059669;
    --cat-reference-glow: rgba(5, 150, 105, 0.18);
    --cat-reference-bg:   rgba(5, 150, 105, 0.06);
    --cat-system:         #d97706;
    --cat-system-glow:    rgba(217, 119, 6, 0.18);
    --cat-system-bg:      rgba(217, 119, 6, 0.06);
    --cat-misc:           #9333ea;
    --cat-misc-glow:      rgba(147, 51, 234, 0.18);
    --cat-misc-bg:        rgba(147, 51, 234, 0.06);

    --grad-brand: linear-gradient(135deg, #0969da 0%, #8b5cf6 50%, #db2777 100%);
}

* { box-sizing: border-box; }

html {
    /* Base réduite : 14px au lieu du défaut 16px */
    font-size: 14px;
}

html, body {
    margin: 0; padding: 0;
    background: var(--bg); color: var(--text);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    line-height: 1.45;
    min-height: 100vh;
}
body { display: flex; flex-direction: column; }

a {
    color: var(--accent);
    text-decoration: none;
    transition: color 0.15s ease;
}
a:hover { color: var(--accent-hover); }

.mono { font-family: var(--mono); font-size: 0.95em; }
.muted { color: var(--text-muted); }

/* =====================================================================
   En-tête (compact)
   ===================================================================== */
.site-header {
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 100;
}
.header-inner {
    max-width: 1600px; margin: 0 auto;
    padding: 0 1rem; height: var(--header-h);
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.75rem;
}

.brand {
    display: flex; align-items: center; gap: 0.4rem;
    font-weight: 700; font-size: 1.05rem; color: var(--text);
}
.brand:hover { color: var(--text); }
.brand-mark { font-size: 1.2rem; color: var(--accent); transition: transform 0.4s ease; }
.brand:hover .brand-mark { transform: rotate(60deg); }

.main-nav { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.nav-link {
    color: var(--text-muted);
    padding: 0.3rem 0.5rem;
    border-radius: var(--radius);
    font-size: 0.9rem;
    transition: background 0.15s, color 0.15s;
}
.nav-link:hover { color: var(--text); background: var(--bg-hover); }
.nav-cta { background: var(--accent); color: #fff; }
.nav-cta:hover { background: var(--accent-hover); color: #fff; }

.nav-user-link {
    display: flex; align-items: center; gap: 0.4rem;
    color: var(--text);
    padding: 0.2rem 0.4rem;
    border-radius: var(--radius);
    font-weight: 500;
    font-size: 0.9rem;
}
.nav-user-link:hover { color: var(--text); background: var(--bg-hover); }
.nav-avatar { border-radius: 50%; border: 1px solid var(--border); object-fit: cover; }
.nav-username { font-size: 0.9rem; }

.logout-form { display: inline; margin: 0; }
.link-button {
    background: none; border: none; color: var(--text-muted);
    cursor: pointer; font: inherit; font-size: 0.9rem;
    padding: 0.3rem 0.5rem; border-radius: var(--radius);
}
.link-button:hover { color: var(--text); background: var(--bg-hover); }

.nav-controls {
    display: flex; align-items: center; gap: 0.4rem;
    padding: 0 0.4rem;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
}
.lang-switch {
    display: inline-flex;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.lang-btn {
    background: transparent; border: none;
    color: var(--text-muted);
    padding: 0.2rem 0.5rem;
    cursor: pointer; font: inherit;
    font-size: 0.72rem; font-weight: 600;
    letter-spacing: 0.05em;
    transition: background 0.15s, color 0.15s;
}
.lang-btn:hover { background: var(--bg-hover); color: var(--text); }
.lang-btn.active { background: var(--accent); color: #fff; }

.theme-btn {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    width: 28px; height: 26px; cursor: pointer;
    color: var(--text-muted);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.15s, color 0.15s, transform 0.3s;
}
.theme-btn:hover { background: var(--bg-hover); color: var(--text); }
.theme-btn:active { transform: scale(0.92); }
.theme-icon { font-size: 0.9rem; line-height: 1; }

/* =====================================================================
   Contenu principal
   ===================================================================== */
.site-main {
    flex: 1; max-width: 1600px;
    margin: 0 auto; padding: 1.25rem 1rem; width: 100%;
}

.site-footer {
    padding: 0.85rem 1rem;
    background: var(--bg-elevated);
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    text-align: center; font-size: 0.8rem;
}
.site-footer p { margin: 0; }

/* =====================================================================
   Hero (accueil) - compact
   ===================================================================== */
.hero { text-align: center; padding: 1.5rem 1rem 1rem; }
.hero h1 {
    font-size: 1.85rem; margin: 0 0 0.4rem;
    background: linear-gradient(135deg, var(--accent), var(--accent-hover));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero .lead { font-size: 0.95rem; color: var(--text-muted); margin-bottom: 0.85rem; }
.hero-compact { padding: 1.25rem 1rem 0.75rem; }
.hero-compact h1 { font-size: 1.55rem; }
.status-ok { color: var(--success); font-weight: 600; font-size: 0.9rem; margin: 0.5rem 0; }
.hero-cta { display: flex; justify-content: center; gap: 0.5rem; flex-wrap: wrap; margin: 0; }

/* =====================================================================
   Boutons (compact)
   ===================================================================== */
.btn {
    display: inline-block;
    padding: 0.45rem 0.95rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg-elevated); color: var(--text);
    cursor: pointer; font: inherit; text-decoration: none;
    font-size: 0.9rem;
    transition: background 0.15s, border-color 0.15s, transform 0.05s;
}
.btn:hover { background: var(--bg-hover); color: var(--text); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover { background: var(--danger-hover); border-color: var(--danger-hover); color: #fff; }

/* =====================================================================
   Catalogue d'outils
   ===================================================================== */
.catalog-search {
    max-width: 560px; margin: 0 auto 1.25rem;
    text-align: center;
}
.catalog-search input[type="search"] {
    width: 100%;
    padding: 0.55rem 0.95rem;
    background: var(--bg-elevated);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.9rem; font: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.catalog-search input[type="search"]:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.2);
}
.search-counter { margin: 0.4rem 0 0; font-size: 0.8rem; }

.catalog { display: flex; flex-direction: column; gap: 1.25rem; }
.cat-title {
    font-size: 0.78rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 0.5rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
}

.tool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.65rem;
}
.tool-tile {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.75rem 0.85rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    transition: transform 0.12s, border-color 0.15s, box-shadow 0.15s;
    box-shadow: var(--shadow);
}
.tool-tile:hover {
    color: var(--text);
    border-color: var(--accent);
    transform: translateY(-1px);
}
.tile-icon {
    flex-shrink: 0;
    width: 36px; height: 36px;
    border-radius: var(--radius);
    background: var(--bg);
    display: flex; align-items: center; justify-content: center;
}
.tile-icon-fallback { font-size: 1.1rem; color: var(--accent); }
.tile-body { flex: 1; min-width: 0; }
.tile-name {
    margin: 0 0 0.15rem;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text);
}
.tile-description {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tool-tile.is-hidden { display: none; }

.search-no-results { text-align: center; padding: 1.5rem; }

.placeholder-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    box-shadow: var(--shadow);
    max-width: 520px;
    margin: 1.25rem auto;
    text-align: center;
}
.placeholder-card h2 { margin-top: 0; font-size: 1rem; }

.error-page, .text-page { padding: 2rem 1rem; max-width: 680px; margin: 0 auto; }
.error-page { text-align: center; }
.text-page h1 { margin-top: 0; font-size: 1.4rem; }

/* =====================================================================
   Page d'un outil
   ===================================================================== */
.tool-page { max-width: 100%; margin: 0; }
.tool-header { margin-bottom: 1rem; }
.tool-breadcrumb {
    color: var(--text-muted);
    font-size: 0.78rem;
    margin: 0 0 0.35rem;
}
.tool-breadcrumb .sep { margin: 0 0.4rem; }
.tool-title { margin: 0 0 0.3rem; font-size: 1.4rem; }
.tool-description { color: var(--text-muted); margin: 0; font-size: 0.88rem; }

.tool-form {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow);
}
.ip-input { font-family: var(--mono); font-size: 0.95rem; }
.form-actions { flex-direction: row; align-items: center; justify-content: flex-end; }

/* --- Résultats --- */
.tool-results {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow);
}
.results-title { margin: 0 0 0.85rem; font-size: 1.05rem; }
.results-subtitle {
    margin: 1rem 0 0.5rem;
    font-size: 0.92rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}
.results-subtitle:first-child { margin-top: 0; }

.result-headline {
    display: flex; align-items: center; gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 0.85rem;
}
.result-network {
    font-family: var(--mono);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--accent);
}
.result-class {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.25rem 1rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
}
.result-row {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--border);
    gap: 1rem;
    font-size: 0.88rem;
}
.result-row:last-child { border-bottom: none; }
.result-label { color: var(--text-muted); font-size: 0.82rem; }
.result-value { color: var(--text); font-weight: 500; text-align: right; word-break: break-all; }

.results-binary {
    margin-top: 0.85rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.6rem 0.85rem;
}
.results-binary summary {
    cursor: pointer; color: var(--text-muted);
    font-size: 0.82rem;
}
.bin-grid {
    margin-top: 0.5rem;
    display: grid; grid-template-columns: 80px 1fr;
    gap: 0.4rem 0.85rem; align-items: center;
}
.bin {
    font-size: 0.72rem;
    word-break: break-all;
    color: var(--text);
}

/* --- Badges (catégories d'IP) --- */
.badge {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem; font-weight: 600;
    border: 1px solid;
    background: var(--bg);
    color: var(--text);
}
.badge-public        { color: var(--success); border-color: var(--success); background: var(--success-bg); }
.badge-private       { color: var(--accent);  border-color: var(--accent);  background: rgba(88,166,255,.08); }
.badge-loopback      { color: var(--warning); border-color: var(--warning); background: var(--warning-bg); }
.badge-link_local    { color: var(--warning); border-color: var(--warning); background: var(--warning-bg); }
.badge-cgnat         { color: var(--accent);  border-color: var(--accent);  background: rgba(88,166,255,.08); }
.badge-multicast     { color: var(--accent);  border-color: var(--accent);  background: rgba(88,166,255,.08); }
.badge-reserved      { color: var(--danger);  border-color: var(--danger);  background: var(--danger-bg); }
.badge-documentation { color: var(--text-muted); }
.badge-benchmark     { color: var(--text-muted); }
.badge-this_network  { color: var(--text-muted); }
/* IPv6 types */
.badge-global_unicast { color: var(--success); border-color: var(--success); background: var(--success-bg); }
.badge-ula            { color: var(--accent);  border-color: var(--accent);  background: rgba(88,166,255,.08); }
.badge-unspecified    { color: var(--text-muted); }
.badge-ipv4_mapped    { color: var(--text-muted); }
.badge-nat64          { color: var(--accent);  border-color: var(--accent);  background: rgba(88,166,255,.08); }
.badge-6to4           { color: var(--text-muted); }

/* --- Sauvegarde --- */
.save-form {
    margin-top: 0.85rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
    display: flex; flex-direction: column; gap: 0.4rem;
}
.save-label-text { font-size: 0.8rem; color: var(--text-muted); }
.save-controls {
    display: flex; gap: 0.4rem;
}
.save-controls input[type="text"] {
    flex: 1;
    padding: 0.4rem 0.6rem;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font: inherit; font-size: 0.88rem;
}
.save-controls input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.2);
}
.btn-save { white-space: nowrap; }
.login-to-save { text-align: center; padding: 0.75rem 0 0; border-top: 1px solid var(--border); font-size: 0.88rem; }

/* --- Liste de sauvegardes --- */
.saves-panel {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.85rem 1.1rem;
    box-shadow: var(--shadow);
    margin-bottom: 1rem;
}
.saves-title {
    margin: 0 0 0.65rem;
    font-size: 0.92rem;
    color: var(--text);
}
.saves-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.save-item {
    display: flex; justify-content: space-between; align-items: center;
    gap: 0.75rem;
    padding: 0.45rem 0.6rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.save-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.save-load { color: var(--text); display: block; font-size: 0.88rem; }
.save-load:hover { color: var(--accent); }
.save-name { font-weight: 500; }
.save-query { font-size: 0.78rem; }
.save-date { font-size: 0.75rem; }
.btn-delete-save { font-size: 0.95rem; padding: 0.25rem 0.4rem; }

/* =====================================================================
   Section "Table de référence" (dépliable, intégrée au calculateur)
   ===================================================================== */
.masks-section {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-top: 1rem;
}
.masks-section > summary {
    cursor: pointer;
    padding: 0.75rem 1.1rem;
    list-style: none;
    display: flex; align-items: center; gap: 0.5rem;
    font-weight: 600;
    color: var(--text);
    user-select: none;
}
.masks-section > summary::-webkit-details-marker { display: none; }
.masks-section > summary::before {
    content: '▸';
    color: var(--text-muted);
    transition: transform 0.2s;
    font-size: 0.85rem;
}
.masks-section[open] > summary::before {
    transform: rotate(90deg);
}
.masks-section > summary:hover {
    background: var(--bg-hover);
    border-radius: var(--radius);
}
.masks-summary-icon { font-size: 1rem; }
.masks-summary-text { font-size: 0.9rem; }

.masks-section > .masks-filter,
.masks-section > .masks-table-wrap,
.masks-section > .masks-empty,
.masks-section > .masks-notes {
    margin: 0 1.1rem 1rem;
}
.masks-section > .masks-filter {
    margin-top: 0.25rem;
}

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.masks-filter {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.masks-filter input[type="search"] {
    flex: 1 1 220px;
    max-width: 360px;
    padding: 0.4rem 0.7rem;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font: inherit; font-size: 0.88rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.masks-filter input[type="search"]:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.2);
}

.masks-table-wrap {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow-x: auto;
}

.masks-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
}
.masks-table thead th {
    position: sticky;
    top: 0;
    background: var(--bg-elevated);
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.7rem;
    text-align: left;
    padding: 0.55rem 0.7rem;
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
    z-index: 2;
}
.masks-table thead th.num { text-align: right; }
.masks-table tbody tr { transition: background 0.12s ease; }
.masks-table tbody tr:nth-child(even) { background: rgba(127,127,127,0.04); }
.masks-table tbody tr:hover { background: var(--bg-hover); }
.masks-table th[scope="row"],
.masks-table td {
    padding: 0.45rem 0.7rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.masks-table tbody tr:last-child th,
.masks-table tbody tr:last-child td {
    border-bottom: none;
}

.cidr-cell {
    font-family: var(--mono);
    font-weight: 700;
    color: var(--accent);
    font-size: 0.95rem;
    text-align: left;
    width: 1%;
    white-space: nowrap;
}
.masks-table td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.masks-table td.muted { color: var(--text-muted); }
.masks-table .dash { color: var(--text-muted); }
.binary-col {
    font-size: 0.72rem;
    color: var(--text-muted);
    white-space: nowrap;
    letter-spacing: -0.02em;
}

.masks-table tbody tr.is-highlight {
    background: rgba(88, 166, 255, 0.18) !important;
    box-shadow: inset 3px 0 0 var(--accent);
}
.masks-table tbody tr.is-hidden { display: none; }

.class-badge {
    display: inline-block;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    border: 1px solid;
}
.class-A { color: var(--success);  border-color: var(--success);  background: var(--success-bg); }
.class-B { color: var(--accent);   border-color: var(--accent);   background: rgba(88,166,255,.08); }
.class-C { color: var(--warning);  border-color: var(--warning);  background: var(--warning-bg); }

.masks-empty {
    text-align: center;
    padding: 1rem;
    margin: 0;
    font-size: 0.85rem;
}

.masks-notes {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.65rem 1rem;
}
.masks-notes h4 {
    margin: 0 0 0.4rem;
    font-size: 0.85rem;
    color: var(--text);
}
.masks-notes ul {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--text-muted);
    font-size: 0.8rem;
}
.masks-notes li { margin-bottom: 0.2rem; }
.masks-notes li:last-child { margin-bottom: 0; }

/* =====================================================================
   Formulaires (auth, profil, etc.) - compact
   ===================================================================== */
.auth-page {
    max-width: 420px; margin: 1.25rem auto;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem; box-shadow: var(--shadow);
}
.auth-page h1 { margin-top: 0; text-align: center; font-size: 1.3rem; }

.auth-form { display: flex; flex-direction: column; gap: 0.7rem; }
.form-row { display: flex; flex-direction: column; gap: 0.25rem; }
.form-row label { font-weight: 500; color: var(--text); font-size: 0.88rem; }
.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="password"],
.form-row input[type="search"] {
    padding: 0.45rem 0.65rem;
    background: var(--bg); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius);
    font: inherit; font-size: 0.9rem; width: 100%;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.form-row input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.2);
}
.form-row input.match-ok    { border-color: var(--success); }
.form-row input.match-fail  { border-color: var(--danger); }
.form-hint { font-size: 0.78rem; color: var(--text-muted); margin: 0; }
.form-footer { text-align: center; margin-top: 0.4rem; color: var(--text-muted); font-size: 0.85rem; }
.checkbox-row label {
    display: flex; align-items: center; gap: 0.4rem;
    font-weight: normal; cursor: pointer;
    font-size: 0.88rem;
}

.password-wrapper { position: relative; }
.password-wrapper input { padding-right: 2.2rem; }
.password-toggle {
    position: absolute; right: 0.4rem; top: 50%;
    transform: translateY(-50%);
    background: none; border: none; color: var(--text-muted);
    cursor: pointer; font-size: 0.95rem; padding: 0.2rem;
}
.password-toggle:hover { color: var(--accent); }

.strength-meter { margin-top: 0.4rem; }
.strength-bar {
    height: 5px; background: var(--bg);
    border: 1px solid var(--border); border-radius: 3px; overflow: hidden;
}
.strength-bar span {
    display: block; height: 100%; width: 0%;
    background: var(--danger);
    transition: width 0.2s, background 0.2s;
}
.strength-bar[data-score="1"] span { width: 20%; background: var(--danger); }
.strength-bar[data-score="2"] span { width: 40%; background: var(--warning); }
.strength-bar[data-score="3"] span { width: 60%; background: var(--warning); }
.strength-bar[data-score="4"] span { width: 80%; background: var(--accent); }
.strength-bar[data-score="5"] span { width: 100%; background: var(--success); }

.strength-rules {
    list-style: none; padding: 0;
    margin: 0.4rem 0 0; font-size: 0.78rem;
    color: var(--text-muted);
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 0.15rem 0.85rem;
}
.strength-rules li::before { content: "○ "; color: var(--text-muted); }
.strength-rules li.ok { color: var(--success); }
.strength-rules li.ok::before { content: "✓ "; color: var(--success); }

.hp-field {
    position: absolute; left: -10000px; top: -10000px;
    width: 1px; height: 1px; overflow: hidden;
}

.alert {
    padding: 0.55rem 0.85rem;
    border-radius: var(--radius);
    border: 1px solid; margin-bottom: 0.85rem;
    font-size: 0.88rem;
}
.alert ul { margin: 0; padding-left: 1.1rem; }
.alert-error   { background: var(--danger-bg);  border-color: var(--danger);  color: var(--danger); }
.alert-success { background: var(--success-bg); border-color: var(--success); color: var(--success); }

/* =====================================================================
   Page profil - compact
   ===================================================================== */
.profile-page { max-width: 680px; margin: 0 auto; }
.profile-page h1 { margin-top: 0; font-size: 1.4rem; }

.profile-section {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow);
}
.profile-section h2 {
    margin-top: 0; margin-bottom: 0.75rem;
    font-size: 1.05rem; color: var(--text);
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.4rem;
}

.profile-identity {
    display: flex; align-items: flex-start; gap: 1rem;
    flex-wrap: wrap; margin-bottom: 1rem;
}
.profile-avatar-block { flex-shrink: 0; }
.profile-avatar-img {
    border-radius: 50%; border: 2px solid var(--border); object-fit: cover;
    width: 96px; height: 96px;
}
.profile-info { flex: 1; min-width: 180px; }
.profile-info p {
    margin: 0.15rem 0;
    display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: baseline;
    font-size: 0.88rem;
}
.info-label { color: var(--text-muted); font-size: 0.8rem; min-width: 100px; }
.info-value { color: var(--text); font-weight: 500; }
.info-locked { font-size: 0.7rem; color: var(--text-muted); cursor: help; }

.avatar-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: flex-start; }
.avatar-upload-form { display: flex; flex-direction: column; gap: 0.4rem; flex: 1; min-width: 220px; }
.file-input { position: absolute; opacity: 0; width: 1px; height: 1px; overflow: hidden; }
.file-label { display: flex; align-items: center; gap: 0.6rem; cursor: pointer; }
.file-name { color: var(--text-muted); font-size: 0.8rem; font-style: italic; }
.file-name:empty::before { content: "Aucun fichier sélectionné"; }

.inline-form { display: inline; margin: 0; }

.prefs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.5rem;
}
.pref-row {
    display: flex; justify-content: space-between;
    background: var(--bg);
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    font-size: 0.88rem;
}
.pref-label { color: var(--text-muted); }
.pref-value { color: var(--text); font-weight: 500; }

.danger-zone { border-color: var(--danger); border-left-width: 3px; }
.danger-zone h2 { color: var(--danger); border-bottom-color: var(--danger); }
.warning-text {
    color: var(--danger); font-weight: 500;
    background: var(--danger-bg);
    padding: 0.55rem 0.85rem;
    border-radius: var(--radius);
    border: 1px solid var(--danger);
    margin-bottom: 0.85rem;
    font-size: 0.88rem;
}

/* =====================================================================
   Outils palier 10
   ===================================================================== */

/* --- Statut base OUI --- */
.oui-db-info {
    margin: 0 0 0.75rem;
    font-size: 0.78rem;
}
.alert-warning {
    background: var(--warning-bg);
    border-color: var(--warning);
    color: var(--warning);
}

/* --- VLSM : lignes dynamiques --- */
.form-section-title {
    margin: 1.25rem 0 0.4rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
}
.vlsm-rows {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
}
.vlsm-row {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}
.vlsm-row input.vlsm-name {
    flex: 1.5;
    min-width: 120px;
}
.vlsm-row input.vlsm-hosts {
    flex: 0.7;
    min-width: 90px;
}
.vlsm-row input[type="text"],
.vlsm-row input[type="number"] {
    padding: 0.4rem 0.6rem;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font: inherit;
    font-size: 0.88rem;
}
.vlsm-row input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.2);
}
.btn-remove-row {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text-muted);
    width: 32px;
    cursor: pointer;
    border-radius: var(--radius);
    font-size: 1.1rem;
    line-height: 1;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn-remove-row:hover {
    background: var(--danger-bg);
    border-color: var(--danger);
    color: var(--danger);
}
.vlsm-controls {
    margin-bottom: 0.85rem;
}
.btn-secondary {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 0.85rem;
    padding: 0.4rem 0.85rem;
}
.btn-secondary:hover {
    background: var(--bg-hover);
    color: var(--text);
}

.vlsm-table th[scope="row"] {
    text-align: left;
    font-weight: 600;
}
.vlsm-table .mono strong {
    color: var(--accent);
    font-weight: 600;
}

/* --- Table ASCII --- */
.ascii-table tbody tr.is-control {
    color: var(--text-muted);
    background: rgba(140,140,140,0.04);
}
.ascii-table .ascii-char {
    font-size: 1.1rem;
    text-align: center;
    min-width: 36px;
}
.ascii-table tbody tr.is-hidden {
    display: none;
}

/* --- HTTP codes : filtre catégorie --- */
.http-cat-filter {
    display: inline-flex;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-left: 0.4rem;
}
.cat-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 0.4rem 0.7rem;
    cursor: pointer;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    transition: background 0.15s, color 0.15s;
    border-right: 1px solid var(--border);
}
.cat-btn:last-child {
    border-right: none;
}
.cat-btn:hover {
    background: var(--bg-hover);
    color: var(--text);
}
.cat-btn.active {
    background: var(--accent);
    color: #fff;
}

.http-table tbody tr.is-hidden {
    display: none;
}

/* Badges code HTTP : couleurs par catégorie */
.badge-http-1 { color: var(--text-muted); border-color: var(--text-muted); background: var(--bg); }
.badge-http-2 { color: var(--success);    border-color: var(--success);    background: var(--success-bg); }
.badge-http-3 { color: var(--accent);     border-color: var(--accent);     background: rgba(88,166,255,.08); }
.badge-http-4 { color: var(--warning);    border-color: var(--warning);    background: var(--warning-bg); }
.badge-http-5 { color: var(--danger);     border-color: var(--danger);     background: var(--danger-bg); }
.badge-http-1, .badge-http-2, .badge-http-3, .badge-http-4, .badge-http-5 {
    font-family: var(--mono);
    font-weight: 700;
    font-size: 0.85rem;
    padding: 0.15rem 0.55rem;
}

/* =====================================================================
   Encarts d'information (info boxes)
   ===================================================================== */
.info-box {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.85rem 1rem;
    margin-bottom: 0.85rem;
    border-left: 3px solid var(--text-muted);
}
.info-box-primary {
    border-left-color: var(--accent);
    background: rgba(88, 166, 255, 0.05);
}
.info-box-privacy {
    border-left-color: var(--success);
    background: var(--success-bg);
}
.info-box-title {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.info-box-icon {
    font-size: 1.05rem;
    line-height: 1;
}
.info-box-steps,
.info-box-list {
    margin: 0;
    padding-left: 1.4rem;
    font-size: 0.88rem;
    line-height: 1.55;
}
.info-box-steps > li,
.info-box-list > li {
    margin-bottom: 0.35rem;
}
.info-box-list > li:last-child,
.info-box-steps > li:last-child {
    margin-bottom: 0;
}

/* Étapes du comparateur de dossiers (avec commandes inline) */
.compare-steps > li {
    margin-bottom: 0.7rem;
}
.compare-step-action {
    margin: 0.4rem 0 0.2rem;
}
.btn-download {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
    font-weight: 500;
}
.btn-download:hover {
    text-decoration: none;
    filter: brightness(1.1);
}
.compare-cmd {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.55rem 0.8rem;
    margin: 0.35rem 0 0;
    overflow-x: auto;
    font-family: var(--mono);
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--text);
}
.compare-cmd code {
    background: none;
    padding: 0;
    font-size: inherit;
    color: inherit;
}

/* Bloc de sauvegarde dans le formulaire compare */
.compare-save-block {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.7rem 0.95rem;
    margin: 0.6rem 0 0.85rem;
}
.compare-save-block .checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    cursor: pointer;
    font-size: 0.9rem;
    margin-bottom: 0.45rem;
}
.compare-save-block .checkbox-label input[type="checkbox"] {
    margin: 0;
    width: 1rem;
    height: 1rem;
    cursor: pointer;
    accent-color: var(--accent);
}
.compare-save-label-input {
    display: block;
    width: 100%;
    padding: 0.4rem 0.7rem;
    background: var(--bg-elevated);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font: inherit;
    font-size: 0.85rem;
    margin-bottom: 0.3rem;
}
.compare-save-label-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.2);
}
.compare-cleanup-confirm {
    font-size: 0.82rem;
    margin: 0 0 0.85rem;
}

/* Footer link */
.site-footer {
    color: var(--text-muted);
}
.site-footer .footer-sep {
    margin: 0 0.4rem;
    color: var(--border);
}
.site-footer .footer-link {
    color: var(--text-muted);
    text-decoration: none;
}
.site-footer .footer-link:hover {
    color: var(--accent);
    text-decoration: underline;
}

/* =====================================================================
   Page Conditions d'utilisation
   ===================================================================== */
.terms-page {
    max-width: 820px;
    margin: 0 auto;
    line-height: 1.65;
}
.terms-page h1 {
    margin: 0 0 0.4rem;
    font-size: 1.6rem;
}
.terms-page .terms-meta {
    margin: 0 0 1.5rem;
    font-size: 0.85rem;
}
.terms-toc {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}
.terms-toc-title {
    margin: 0 0 0.6rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.terms-toc ol {
    margin: 0;
    padding-left: 1.4rem;
    columns: 2;
    column-gap: 1.5rem;
    font-size: 0.9rem;
}
.terms-toc ol > li {
    margin-bottom: 0.25rem;
    break-inside: avoid;
}
.terms-toc a {
    color: var(--accent);
    text-decoration: none;
}
.terms-toc a:hover {
    text-decoration: underline;
}
.terms-section {
    margin: 1.75rem 0;
    scroll-margin-top: 4rem;
}
.terms-section h2 {
    margin: 0 0 0.6rem;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--accent);
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.3rem;
}
.terms-section p {
    margin: 0 0 0.75rem;
}
.terms-section ul {
    margin: 0 0 0.75rem;
    padding-left: 1.5rem;
}
.terms-section ul > li {
    margin-bottom: 0.35rem;
}
.terms-highlight {
    background: var(--success-bg);
    border-left: 3px solid var(--success);
    padding: 0.65rem 0.9rem;
    border-radius: var(--radius);
    color: var(--success);
}
.terms-back {
    margin-top: 2rem;
    text-align: center;
}
.terms-back a {
    display: inline-block;
    padding: 0.4rem 0.9rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    text-decoration: none;
}
.terms-back a:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* =====================================================================
   Outil : Boîte à outils Proxmox
   ===================================================================== */

/* Section ISO : cartes de téléchargement */
.pmx-iso-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 0.5rem;
}
.pmx-iso-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.8rem 1rem;
    border-left: 3px solid var(--accent);
}
.pmx-iso-card[data-pmx-iso-missing="1"] {
    opacity: 0.55;
    border-left-color: var(--text-muted);
}
.pmx-iso-pve { border-left-color: #e57000; } /* orange Proxmox */
.pmx-iso-pbs { border-left-color: #5d8aa8; }
.pmx-iso-pmg { border-left-color: #588157; }
.pmx-iso-pdm { border-left-color: #a855f7; }

.pmx-iso-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}
.pmx-iso-info { flex: 1; min-width: 0; }
.pmx-iso-label {
    margin: 0 0 0.2rem;
    font-size: 0.95rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.pmx-iso-badge {
    display: inline-block;
    font-family: var(--mono);
    font-weight: 700;
    font-size: 0.72rem;
    padding: 0.15rem 0.5rem;
    border-radius: 3px;
    color: #fff;
    background: var(--accent);
}
.pmx-iso-badge-pve { background: #e57000; }
.pmx-iso-badge-pbs { background: #5d8aa8; }
.pmx-iso-badge-pmg { background: #588157; }
.pmx-iso-badge-pdm { background: #a855f7; }
.pmx-iso-meta {
    font-size: 0.78rem;
    word-break: break-all;
}
.pmx-iso-missing-text {
    color: var(--warning);
    font-style: italic;
}
.pmx-iso-unreadable-text {
    color: var(--danger);
    font-style: italic;
    font-weight: 500;
}
.pmx-iso-card[data-pmx-iso-status="missing"] {
    opacity: 0.55;
    border-left-color: var(--text-muted);
}
.pmx-iso-card[data-pmx-iso-status="unreadable"] {
    border-left-color: var(--danger);
}

/* Encart de correction permissions affiché quand le statut est unreadable */
.pmx-iso-fix-hint {
    margin-top: 0.6rem;
    padding: 0.6rem 0.8rem;
    background: var(--danger-bg);
    border: 1px solid var(--danger);
    border-radius: var(--radius);
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--text);
}
.pmx-iso-fix-hint strong {
    color: var(--danger);
    display: block;
    margin-bottom: 0.3rem;
}
.pmx-iso-fix-cmd {
    margin: 0.45rem 0 0;
    padding: 0.5rem 0.7rem;
    background: #1a1f24;
    color: #d8dee9;
    border-radius: 3px;
    font-size: 0.78rem;
    line-height: 1.5;
    overflow-x: auto;
}
:root[data-theme="light"] .pmx-iso-fix-cmd {
    background: #f6f8fa;
    color: #24292e;
}
.pmx-iso-fix-cmd code {
    background: none;
    padding: 0;
    color: inherit;
}
.pmx-iso-actions {
    flex-shrink: 0;
}
.pmx-iso-download {
    text-decoration: none;
    white-space: nowrap;
}

/* Hashes : grille label / valeur en mono */
.pmx-iso-hashes {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.25rem 0.7rem;
    margin: 0;
    padding: 0.4rem 0.55rem;
    background: var(--bg-elevated);
    border-radius: 3px;
    font-size: 0.78rem;
}
.pmx-iso-hashes dt {
    font-weight: 600;
    color: var(--text-muted);
    align-self: center;
}
.pmx-iso-hashes dd {
    margin: 0;
    word-break: break-all;
    align-self: center;
    color: var(--text);
}
.pmx-iso-hash { font-size: 0.75rem; }
.pmx-iso-md5-info {
    font-size: 0.7rem;
    font-style: italic;
    font-weight: normal;
}
.pmx-iso-compute-md5 {
    color: var(--accent);
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: 0.78rem;
}
.pmx-iso-compute-md5:hover {
    text-decoration: underline;
}
.pmx-iso-compute-md5[disabled] {
    color: var(--text-muted);
    cursor: wait;
}
.pmx-iso-compute-spinner {
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    border: 2px solid var(--text-muted);
    border-top-color: var(--accent);
    border-radius: 50%;
    margin-right: 0.4em;
    vertical-align: -2px;
    animation: pmx-spin 0.8s linear infinite;
}
@keyframes pmx-spin {
    to { transform: rotate(360deg); }
}

.pmx-context {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.85rem 1rem;
    margin: 0 0 1rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.7rem 1rem;
}
.pmx-context-row {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.pmx-context-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.pmx-context-select {
    width: 100%;
}
.pmx-context-hint {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 0.78rem;
}

/* Sections dépliables */
.pmx-sections {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.pmx-section {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.pmx-section[open] {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px rgba(88,166,255,0.15);
}
.pmx-section-summary {
    padding: 0.7rem 0.95rem;
    cursor: pointer;
    user-select: none;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 600;
    transition: background 0.12s;
}
.pmx-section-summary::-webkit-details-marker { display: none; }
.pmx-section-summary:hover {
    background: var(--bg-hover);
}
.pmx-section-icon {
    font-size: 1.15rem;
}
.pmx-section-title {
    flex: 1;
    font-size: 0.95rem;
}
.pmx-section-badge {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
}
.pmx-section-body {
    padding: 0.7rem 0.95rem 1rem;
    border-top: 1px solid var(--border);
    background: var(--bg-elevated);
}
.pmx-section-body > p:first-child {
    margin-top: 0;
}

/* Grille à 2 colonnes pour les forms */
.pmx-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem 1rem;
    margin-bottom: 0.6rem;
}

.pmx-checkbox-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.4rem;
    margin: 0.5rem 0;
}

.pmx-input-suffix {
    display: flex;
    gap: 0.4rem;
    align-items: stretch;
}
.pmx-input-suffix input { flex: 1; }
.pmx-input-suffix select { flex-shrink: 0; }
.pmx-suffix-static {
    display: flex;
    align-items: center;
    padding: 0 0.6rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: var(--mono);
    font-size: 0.85rem;
    color: var(--text-muted);
}

.pmx-raid-select { width: 100%; }
.pmx-raid-select optgroup { font-weight: 700; color: var(--accent); }

/* Aligne la checkbox QDevice avec l'input de nombre de nœuds */
.pmx-quorum-checkbox-label {
    padding-top: 1.4rem;
}

/* Sections Migration / Conversion / cgroup / Interfaces */
/* Bloc multi-lignes pour fichiers de conf : préserve les retours à la ligne.
   Sélecteur combiné pour battre la spécificité de .pmx-cmd-example
   (qui définit white-space: nowrap pour les commandes shell single-ligne). */
.pmx-cmd-example.pmx-conf-block,
pre.pmx-conf-block {
    white-space: pre;
    overflow-x: auto;
    line-height: 1.55;
}
.pmx-cmd-example.pmx-conf-block code,
pre.pmx-conf-block code {
    white-space: pre;
    display: block;
}
.pmx-cgroup-v {
    background: var(--bg-elevated);
    color: var(--text-muted);
    border: 1px solid var(--border);
    font-size: 0.7rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-family: var(--mono);
}
.pmx-cgroup-legacy-note {
    font-style: italic;
    font-size: 0.82rem;
}

/* Encart d'aide sur les modes de bond (générateur d'interfaces) */
.pmx-bond-help {
    margin-top: 0.6rem;
    padding: 0.65rem 0.85rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    font-size: 0.85rem;
    line-height: 1.55;
}
.pmx-bond-help-title {
    display: block;
    color: var(--accent);
    font-size: 0.92rem;
    margin-bottom: 0.25rem;
}
.pmx-bond-help-desc {
    margin: 0 0 0.5rem;
    color: var(--text);
}
.pmx-bond-help-meta {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.2rem 0.7rem;
}
.pmx-bond-help-meta > li {
    display: contents;
}
.pmx-bond-help-label {
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.78rem;
}
.pmx-bond-help-meta > li > span:last-child {
    font-size: 0.82rem;
    color: var(--text);
}

/* ============= Générateur d'interfaces : UI multi-objets ============= */
/* Un bloc = une catégorie d'objets (NICs, Bonds, VLANs, Bridges) */
.pmx-iface-block {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.7rem 0.9rem;
    margin: 0.5rem 0;
}
.pmx-iface-block-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
    flex-wrap: wrap;
}
.pmx-iface-block-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.pmx-iface-block-icon {
    font-size: 1.05rem;
}

/* Petit bouton "+ Ajouter" plus discret que le bouton primary */
.btn-sm {
    font-size: 0.78rem;
    padding: 0.3rem 0.65rem;
    line-height: 1.25;
}

/* Conteneur des lignes ajoutées dynamiquement */
.pmx-iface-rows {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.4rem;
}
/* Une ligne = un objet (NIC, bond, VLAN ou bridge) */
.pmx-iface-row {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.55rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
/* Grille principale d'une ligne : champs + bouton supprimer */
.pmx-iface-row-grid {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 0.5rem;
    align-items: end;
}
.pmx-iface-row-nic    { grid-template-columns: 2fr 1fr auto; }
.pmx-iface-row-bond   { grid-template-columns: 1fr 1.4fr auto; }
.pmx-iface-row-vlan   { grid-template-columns: 1.6fr 1fr auto; }
.pmx-iface-row-bridge { grid-template-columns: 2fr 1fr auto; }
.pmx-iface-row-grid > .form-row { margin: 0; }
.pmx-iface-row-grid > .btn-remove-row { align-self: end; margin-bottom: 0.05rem; }

/* Liste de checkboxes pour membres de bond / ports de bridge */
.pmx-iface-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.9rem;
    padding: 0.4rem 0.55rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 3px;
    min-height: 2rem;
    align-items: center;
}
.pmx-iface-cb {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    font-size: 0.85rem;
    cursor: pointer;
}
.pmx-iface-cb input { margin: 0; }

/* Champs IP/passerelle d'un bridge : visibles uniquement si "Configurer une IP"
   est coché. Encart accent pour bien distinguer des autres champs. */
.pmx-iface-ip-fields {
    background: rgba(88,166,255,0.05);
    border-left: 3px solid var(--accent);
    padding: 0.55rem 0.7rem 0.4rem;
    border-radius: 3px;
}
.pmx-iface-ip-fields .pmx-grid-2 {
    margin: 0 0 0.3rem;
}
.pmx-iface-ip-fields .form-hint {
    margin: 0.25rem 0 0;
    font-size: 0.78rem;
}
.pmx-iface-optional {
    font-size: 0.75rem;
    font-weight: normal;
    font-style: italic;
}

/* Responsive mobile : colonne unique pour les grilles de ligne */
@media (max-width: 720px) {
    .pmx-iface-row-grid,
    .pmx-iface-row-nic,
    .pmx-iface-row-bond,
    .pmx-iface-row-vlan,
    .pmx-iface-row-bridge {
        grid-template-columns: 1fr auto;
    }
    .pmx-iface-row-grid > .form-row:nth-child(2) {
        grid-column: 1 / -1;
    }
    .pmx-iface-row-grid > .btn-remove-row {
        grid-row: 1;
        grid-column: 2;
    }
}

/* Cache une ligne de formulaire (utilisé par le générateur d'interfaces) */
.pmx-hidden-row {
    display: none;
}

/* Tableau comparatif PVE 7/8/9 */
.pmx-compare-table th[scope="row"] {
    font-weight: 600;
    text-align: left;
    color: var(--text);
}
.pmx-compare-table th:not([scope="row"]) {
    text-align: center;
    font-family: var(--mono);
}
.pmx-compare-v7 { border-left: 3px solid #f97316; }
.pmx-compare-v8 { border-left: 3px solid var(--accent); }
.pmx-compare-v9 { border-left: 3px solid var(--success); }
.pmx-compare-table td {
    font-size: 0.82rem;
    line-height: 1.5;
}

/* Cartes de résultats */
.pmx-result-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.5rem;
    margin: 0.85rem 0;
}
.pmx-result-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.55rem 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.pmx-result-card.pmx-result-primary {
    border-color: var(--accent);
    background: rgba(88,166,255,0.06);
}
.pmx-result-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}
.pmx-result-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
}
.pmx-result-primary .pmx-result-value {
    color: var(--accent);
}

/* Avertissements dans les résultats */
.pmx-warnings {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.7rem;
}
.pmx-warning {
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius);
    border-left: 3px solid;
    font-size: 0.85rem;
    line-height: 1.45;
}
.pmx-warning-error { color: var(--danger);  border-color: var(--danger);  background: var(--danger-bg); }
.pmx-warning-warn  { color: var(--warning); border-color: var(--warning); background: var(--warning-bg); }
.pmx-warning-info  { color: var(--text-muted); border-color: var(--text-muted); background: var(--bg); }
.pmx-warning-ok    { color: var(--success); border-color: var(--success); background: var(--success-bg); }

/* Lignes VM dynamiques */
.pmx-vm-rows {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.pmx-vm-row {
    display: grid;
    grid-template-columns: 1fr 90px 90px auto auto;
    gap: 0.45rem;
    align-items: stretch;
}
.pmx-vm-unit {
    display: flex;
    align-items: center;
    color: var(--text-muted);
    font-family: var(--mono);
    font-size: 0.85rem;
    padding: 0 0.3rem;
}

/* Diagramme quorum */
.pmx-quorum-diagram {
    display: flex;
    justify-content: center;
    margin: 1rem 0;
}
.pmx-quorum-svg {
    max-width: 250px;
    width: 100%;
    height: auto;
}
.pmx-quorum-ring {
    fill: var(--bg);
    stroke: var(--border);
    stroke-width: 1;
}
.pmx-quorum-node-ok {
    fill: var(--success);
    stroke: var(--bg-elevated);
    stroke-width: 2;
}
.pmx-quorum-node-fail {
    fill: var(--warning);
    stroke: var(--bg-elevated);
    stroke-width: 2;
    opacity: 0.7;
}
.pmx-quorum-qdevice {
    fill: var(--accent);
    stroke: var(--bg-elevated);
    stroke-width: 2;
}
.pmx-quorum-label {
    fill: #fff;
    font-family: var(--mono);
    font-size: 14px;
    font-weight: 700;
}
.pmx-quorum-label-small {
    fill: #fff;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
}

/* Listes de commandes */
.pmx-cmd-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.7rem;
}
.pmx-cmd-cat {
    margin: 0.7rem 0 0.2rem;
    padding-bottom: 0.3rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent);
    border-bottom: 1px solid var(--border);
}
.pmx-cmd-cat:first-child {
    margin-top: 0;
}
.pmx-cmd-cat.pmx-hidden-cat {
    display: none;
}
.pmx-cmd-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.55rem 0.8rem;
}
.pmx-cmd-card.pmx-hidden-by-version,
.pmx-cmd-card.pmx-hidden-by-search {
    display: none;
}
.pmx-cmd-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
}
.pmx-cmd-name {
    font-family: var(--mono);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--accent);
    background: var(--bg-elevated);
    padding: 0.15rem 0.45rem;
    border-radius: 3px;
}
.pmx-cmd-versions {
    display: inline-flex;
    gap: 0.25rem;
    flex-wrap: wrap;
}
.pmx-version-pill {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    border: 1px solid;
}
.pmx-v7 { color: #f97316;       border-color: #f97316;       background: rgba(249,115,22,.08); }
.pmx-v8 { color: var(--accent); border-color: var(--accent); background: rgba(88,166,255,.08); }
.pmx-v9 { color: var(--success);border-color: var(--success);background: var(--success-bg); }
.pmx-cmd-syntax {
    color: var(--text-muted);
    font-size: 0.82rem;
    margin-bottom: 0.35rem;
    padding: 0.25rem 0.45rem;
    background: var(--bg-elevated);
    border-radius: 3px;
    overflow-x: auto;
    white-space: nowrap;
}
.pmx-cmd-desc {
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--text);
    margin-bottom: 0.4rem;
}
.pmx-cmd-example {
    font-size: 0.8rem;
    background: #1a1f24;
    color: #d8dee9;
    padding: 0.4rem 0.65rem;
    border-radius: 3px;
    border: 1px solid var(--border);
    overflow-x: auto;
    white-space: nowrap;
}
:root[data-theme="light"] .pmx-cmd-example {
    background: #f6f8fa;
    color: #24292e;
}
.pmx-cmd-prompt {
    color: var(--success);
    font-weight: 700;
    margin-right: 0.3rem;
    user-select: none;
}

/* =====================================================================
   Outils de référence DB-backed (ports, DNS, MIME)
   ===================================================================== */

/* Badges protocoles (ports TCP/UDP) */
.proto-badge {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    border-radius: 3px;
    font-family: var(--mono);
    font-weight: 700;
    font-size: 0.78rem;
    text-align: center;
    min-width: 2.4rem;
    color: #fff;
}
.proto-tcp  { background: var(--accent); }
.proto-udp  { background: #a855f7; }
.proto-sctp { background: #ec4899; }

/* Pills de catégorie (ports + MIME) — wrap horizontal sous le filtre */
.ports-cat-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0.5rem 0 0.85rem;
}
.cat-pill {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 500;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.cat-pill:hover {
    background: var(--bg-hover);
    color: var(--text);
}
.cat-pill.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* Badges DNS par statut */
.badge-dns-active   { color: var(--success); border-color: var(--success); background: var(--success-bg); }
.badge-dns-dnssec   { color: #a855f7;        border-color: #a855f7;        background: rgba(168,85,247,.1); }
.badge-dns-query    { color: var(--accent);  border-color: var(--accent);  background: rgba(88,166,255,.08); }
.badge-dns-obsolete { color: var(--text-muted); border-color: var(--text-muted); background: var(--bg); text-decoration: line-through; }
.badge-dns-active,
.badge-dns-dnssec,
.badge-dns-query,
.badge-dns-obsolete {
    font-family: var(--mono);
    font-weight: 700;
    font-size: 0.85rem;
    padding: 0.15rem 0.55rem;
    display: inline-block;
}

/* Format d'exemple DNS : code-style avec ellipsis sur grosses chaînes */
.dns-format {
    font-size: 0.78rem;
    color: var(--text-muted);
    max-width: 280px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dns-table tbody tr:hover .dns-format {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

/* MIME : cellule type étirée + badges d'extensions */
.mime-cell {
    word-break: break-all;
    font-size: 0.82rem;
    max-width: 280px;
}
.mime-ext-badge {
    display: inline-block;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    padding: 0.05rem 0.4rem;
    border-radius: 3px;
    font-family: var(--mono);
    font-size: 0.78rem;
    margin: 0.1rem 0.15rem 0.1rem 0;
    color: var(--text);
}

/* Lignes masquées (filtre) */
.ports-table tbody tr.is-hidden,
.dns-table   tbody tr.is-hidden,
.mime-table  tbody tr.is-hidden { display: none; }

/* =====================================================================
   Outil : Comparateur de dossiers
   ===================================================================== */
.compare-intro {
    margin-bottom: 1rem;
}
.compare-intro > p {
    margin: 0 0 0.6rem;
}
.compare-script-details {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.5rem 0.85rem;
}
.compare-script-details > summary {
    cursor: pointer;
    color: var(--accent);
    font-weight: 500;
    list-style: none;
    user-select: none;
}
.compare-script-details > summary::-webkit-details-marker { display: none; }
.compare-script-details > summary::before {
    content: "▶";
    display: inline-block;
    margin-right: 0.4rem;
    font-size: 0.7rem;
    transition: transform 0.15s;
}
.compare-script-details[open] > summary::before {
    transform: rotate(90deg);
}
.compare-script-code {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.85rem 1rem;
    margin: 0.6rem 0;
    overflow-x: auto;
    font-family: var(--mono);
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--text);
}

/* Champs upload */
.compare-form .compare-uploads {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 0.85rem;
}
.compare-upload {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    background: var(--bg);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    padding: 0.85rem 1rem;
}
.compare-upload-label {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.compare-upload-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text);
}
.compare-upload-hint {
    font-size: 0.78rem;
}
.compare-file-input {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.4rem;
    color: var(--text);
    font: inherit;
    font-size: 0.85rem;
}
.compare-file-input::file-selector-button {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    padding: 0.3rem 0.7rem;
    margin-right: 0.6rem;
    cursor: pointer;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 500;
}
.compare-file-input::file-selector-button:hover {
    filter: brightness(1.1);
}

/* Résultats */
.compare-meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
    margin: 1rem 0 1.25rem;
}
.compare-meta-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.7rem 0.95rem;
}
.compare-meta-title {
    margin: 0 0 0.5rem;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--accent);
}
.compare-meta-card dl {
    margin: 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.25rem 0.7rem;
    font-size: 0.85rem;
}
.compare-meta-card dt {
    color: var(--text-muted);
    font-weight: 500;
}
.compare-meta-card dd {
    margin: 0;
}

.compare-section {
    margin: 1.25rem 0;
}
.compare-section-title {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    padding: 0.4rem 0.7rem;
    border-radius: var(--radius);
    border-left: 3px solid;
}
.compare-section-count {
    color: var(--text-muted);
    font-weight: 400;
    font-size: 0.85rem;
    margin-left: 0.4rem;
}
.compare-only-source > .compare-section-title {
    border-color: var(--danger);
    background: var(--danger-bg);
    color: var(--danger);
}
.compare-only-dest > .compare-section-title {
    border-color: var(--accent);
    background: rgba(88, 166, 255, 0.1);
    color: var(--accent);
}
.compare-diff-type > .compare-section-title {
    border-color: #d97706;
    background: rgba(217, 119, 6, 0.1);
    color: #d97706;
}
.compare-diff-owner > .compare-section-title {
    border-color: var(--warning);
    background: var(--warning-bg);
    color: var(--warning);
}
.compare-diff-perms > .compare-section-title {
    border-color: var(--warning);
    background: var(--warning-bg);
    color: var(--warning);
}

.compare-identical > summary {
    cursor: pointer;
    background: var(--success-bg);
    color: var(--success);
    border-left: 3px solid var(--success);
    padding: 0.4rem 0.7rem;
    border-radius: var(--radius);
    font-size: 0.95rem;
    font-weight: 600;
    list-style: none;
    user-select: none;
}
.compare-identical > summary::-webkit-details-marker { display: none; }
.compare-identical[open] > summary {
    margin-bottom: 0.6rem;
}

/* Cellules de comparaison côte à côte */
.compare-table .compare-side-source,
.compare-table .compare-side-dest {
    font-size: 0.82rem;
    line-height: 1.6;
}
.compare-table .compare-side-source > span,
.compare-table .compare-side-dest > span {
    margin-right: 0.3rem;
}
.compare-highlight-owner {
    background: var(--warning-bg);
    color: var(--warning);
    padding: 0 0.25rem;
    border-radius: 3px;
    font-weight: 600;
}
.compare-highlight-perms {
    background: rgba(217, 119, 6, 0.18);
    color: #d97706;
    padding: 0 0.25rem;
    border-radius: 3px;
    font-weight: 600;
}

/* Badges de type (d, f, l) */
.compare-type-badge {
    display: inline-block;
    width: 1.2rem;
    height: 1.2rem;
    line-height: 1.2rem;
    text-align: center;
    border-radius: 3px;
    font-weight: 700;
    font-size: 0.78rem;
    margin-right: 0.25rem;
    color: #fff;
}
.compare-type-d { background: var(--accent); }
.compare-type-f { background: var(--text-muted); }
.compare-type-l { background: #a855f7; }
.compare-type-c, .compare-type-b, .compare-type-p, .compare-type-s {
    background: #ec4899;
}

.alert-success {
    background: var(--success-bg);
    border-color: var(--success);
    color: var(--success);
    font-weight: 500;
    padding: 0.6rem 0.95rem;
    border-radius: var(--radius);
    border: 1px solid;
    margin-bottom: 1rem;
}

/* =====================================================================
   Outil : Générateur de mot de passe
   ===================================================================== */
.pwgen-form {
    max-width: 720px;
}
.pwgen-row {
    margin-bottom: 0.85rem;
}
.pwgen-row-inline {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}
.pwgen-label-strong {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
    font-size: 0.92rem;
}
.pwgen-length-display {
    background: var(--accent);
    color: #fff;
    padding: 0.1rem 0.55rem;
    border-radius: 3px;
    font-family: var(--mono);
    font-size: 0.85rem;
    min-width: 2rem;
    text-align: center;
}
.pwgen-length-controls {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}
.pwgen-range {
    flex: 1;
    accent-color: var(--accent);
    cursor: pointer;
}
.pwgen-length-input {
    width: 70px;
    padding: 0.35rem 0.5rem;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font: inherit;
    font-size: 0.85rem;
    text-align: center;
}
.pwgen-length-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.2);
}

.pwgen-fieldset {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.6rem 0.95rem 0.85rem;
    margin: 0 0 0.85rem;
}
.pwgen-fieldset > legend {
    padding: 0 0.4rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.pwgen-classes,
.pwgen-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem 1.4rem;
}
.pwgen-classes .checkbox-label,
.pwgen-options .checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    cursor: pointer;
    font-size: 0.88rem;
}
.pwgen-classes input[type="checkbox"],
.pwgen-options input[type="checkbox"] {
    margin: 0;
    width: 1rem;
    height: 1rem;
    cursor: pointer;
    accent-color: var(--accent);
}

.pwgen-select {
    padding: 0.35rem 0.6rem;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font: inherit;
    font-size: 0.88rem;
    cursor: pointer;
}

/* Indicateur d'entropie */
.pwgen-entropy {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.7rem 0.95rem;
    margin: 0.85rem 0;
}
.pwgen-entropy-info {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
    font-size: 0.88rem;
}
.pwgen-entropy-label {
    color: var(--text-muted);
    font-weight: 500;
}
.pwgen-entropy-value {
    font-family: var(--mono);
    font-weight: 700;
    font-size: 1rem;
    color: var(--text);
}
.pwgen-entropy-strength {
    color: var(--text-muted);
    font-style: italic;
}
.pwgen-entropy-bar {
    background: var(--bg-elevated);
    border-radius: 3px;
    height: 8px;
    overflow: hidden;
    border: 1px solid var(--border);
}
.pwgen-entropy-bar-fill {
    height: 100%;
    width: 0%;
    background: var(--text-muted);
    transition: width 0.25s ease, background 0.25s ease;
}
/* Largeurs et couleurs par niveau de force (classes prédéfinies pour CSP-safe) */
.pwgen-entropy-bar-fill.pwgen-strength-1 { width: 12%;  background: var(--danger); }
.pwgen-entropy-bar-fill.pwgen-strength-2 { width: 30%;  background: #f97316; } /* orange */
.pwgen-entropy-bar-fill.pwgen-strength-3 { width: 50%;  background: var(--warning); }
.pwgen-entropy-bar-fill.pwgen-strength-4 { width: 72%;  background: #84cc16; } /* lime */
.pwgen-entropy-bar-fill.pwgen-strength-5 { width: 100%; background: var(--success); }

.pwgen-pool-info {
    margin: 0.5rem 0 0;
    font-size: 0.78rem;
}

/* Liste des résultats */
.pwgen-results {
    margin-top: 1.5rem;
}
.pwgen-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.pwgen-row-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.5rem 0.7rem;
}
.pwgen-password {
    flex: 1;
    font-family: var(--mono);
    font-size: 0.95rem;
    word-break: break-all;
    color: var(--text);
    padding: 0.3rem 0.5rem;
    background: var(--bg-elevated);
    border-radius: 3px;
    user-select: all;
}
.pwgen-copy-btn {
    flex-shrink: 0;
    font-size: 0.8rem;
    padding: 0.35rem 0.7rem;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.pwgen-copy-btn.pwgen-copy-success {
    background: var(--success-bg);
    border-color: var(--success);
    color: var(--success);
}

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 720px) {
    html { font-size: 13px; }
    .header-inner { flex-direction: column; height: auto; padding: 0.55rem 0.85rem; gap: 0.55rem; }
    .main-nav { gap: 0.4rem; justify-content: center; }
    .nav-controls { border-left: none; border-right: none; padding: 0; }
    .nav-username { display: none; }
    .hero h1 { font-size: 1.5rem; }
    .strength-rules { grid-template-columns: 1fr; }
    .profile-section { padding: 0.85rem; }
    .profile-identity { flex-direction: column; align-items: center; text-align: center; }
    .profile-info p { justify-content: center; }
    .save-controls { flex-direction: column; }
    .results-grid { grid-template-columns: 1fr; }
    .result-row { flex-direction: column; align-items: flex-start; gap: 0.1rem; }
    .result-value { text-align: left; }
    .masks-table .binary-col { display: none; }
    .masks-table { font-size: 0.78rem; }
    .masks-table th[scope="row"],
    .masks-table td { padding: 0.35rem 0.4rem; }

    .vlsm-row { flex-wrap: wrap; }
    .vlsm-row input.vlsm-name,
    .vlsm-row input.vlsm-hosts { flex: 1; }
    .http-cat-filter { margin-left: 0; margin-top: 0.4rem; }
    .masks-filter { flex-wrap: wrap; }

    .compare-form .compare-uploads { grid-template-columns: 1fr; }
    .compare-meta-grid { grid-template-columns: 1fr; }
    .compare-table { font-size: 0.78rem; }

    .terms-toc ol { columns: 1; }

    .pwgen-classes,
    .pwgen-options { flex-direction: column; gap: 0.45rem; }
    .pwgen-row-item { flex-wrap: wrap; }
    .pwgen-password { font-size: 0.85rem; }

    .pmx-context { grid-template-columns: 1fr; }
    .pmx-grid-2 { grid-template-columns: 1fr; }
    .pmx-vm-row {
        grid-template-columns: 1fr 1fr 1fr auto;
    }
    .pmx-vm-unit { display: none; }
    .pmx-result-grid { grid-template-columns: 1fr 1fr; }
    .pmx-cmd-syntax,
    .pmx-cmd-example { font-size: 0.75rem; }
}

/* ===== Boîte Sécurité & Crypto ===== */

/* Lignes de résultats hash : algo | valeur | bouton copier */
.crypto-hash-results {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0.5rem 0;
}
.crypto-hash-row {
    display: grid;
    grid-template-columns: 110px 1fr auto;
    gap: 0.6rem;
    align-items: center;
    padding: 0.45rem 0.7rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.crypto-hash-algo {
    font-weight: 600;
    color: var(--accent);
    font-size: 0.85rem;
}
.crypto-hash-value {
    font-family: var(--mono);
    font-size: 0.78rem;
    word-break: break-all;
    color: var(--text);
    background: transparent;
    padding: 0;
}
.crypto-copy-btn {
    flex-shrink: 0;
    font-size: 0.72rem;
    padding: 0.2rem 0.55rem;
}

/* Encart d'auto-détection format (encodage) */
.pmx-detection-hint {
    margin: 0.4rem 0;
    padding: 0.4rem 0.7rem;
    background: rgba(88,166,255,0.07);
    border-left: 3px solid var(--accent);
    border-radius: 3px;
    font-size: 0.85rem;
    display: flex;
    gap: 0.4rem;
    align-items: center;
}
.pmx-detection-hint strong {
    color: var(--accent);
}

/* JWT : liste des métadonnées */
.crypto-jwt-meta {
    list-style: none;
    margin: 0.4rem 0;
    padding: 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.3rem 0.7rem;
}
.crypto-jwt-meta > li {
    display: contents;
}
.crypto-jwt-meta-label {
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.82rem;
}
.crypto-jwt-meta-value {
    font-family: var(--mono);
    font-size: 0.85rem;
    color: var(--text);
}
.crypto-jwt-meta-extra {
    color: var(--text-muted);
    font-size: 0.78rem;
    margin-left: 0.3rem;
}

/* Mobile : empile la grille hash en colonnes */
@media (max-width: 720px) {
    .crypto-hash-row {
        grid-template-columns: 1fr;
        gap: 0.3rem;
    }
    .crypto-hash-algo {
        margin-bottom: 0.1rem;
    }
}

/* ===== JWT decoder layout (style jwt.io) ===== */
/* 2 colonnes : token brut à gauche, header+payload décodés à droite. */
.crypto-jwt-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
    margin: 0.5rem 0;
}
.crypto-jwt-left, .crypto-jwt-right {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.crypto-jwt-col-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Wrapper du textarea token avec overlay coloré */
.crypto-jwt-token-wrapper {
    position: relative;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    min-height: 220px;
    overflow: hidden;
}
.crypto-jwt-token-input,
.crypto-jwt-token-highlight {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    margin: 0;
    padding: 0.6rem;
    font-family: var(--mono);
    font-size: 0.82rem;
    line-height: 1.5;
    word-break: break-all;
    white-space: pre-wrap;
    overflow: auto;
    border: none;
    background: transparent;
}
.crypto-jwt-token-input {
    color: transparent;       /* Le texte est invisible : c'est le pre coloré qui est visible */
    caret-color: var(--text); /* Mais on garde le curseur visible */
    resize: none;
    z-index: 2;
    outline: none;
}
.crypto-jwt-token-input:focus {
    box-shadow: inset 0 0 0 2px var(--accent);
}
.crypto-jwt-token-highlight {
    pointer-events: none;
    z-index: 1;
    color: var(--text);
}

/* Coloration des 3 segments (style jwt.io) */
.jwt-tag-header   { color: #fb015b; }   /* magenta */
.jwt-tag-payload  { color: #d63aff; }   /* violet */
.jwt-tag-signature{ color: #00b9f1; }   /* cyan */

/* Petite barre de légende sous le textarea */
.crypto-jwt-legend {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    font-size: 0.76rem;
    font-weight: 600;
}
.jwt-tag {
    padding: 0.1rem 0.45rem;
    border-radius: 3px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
}

/* Blocs décodés (header + payload) */
.crypto-jwt-decoded {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.crypto-jwt-decoded-block {
    margin: 0;
    padding: 0.6rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    font-family: var(--mono);
    font-size: 0.78rem;
    line-height: 1.5;
    overflow: auto;
    max-height: 200px;
    color: var(--text);
}
.jwt-bg-header  { background: rgba(251, 1, 91, 0.06); }
.jwt-bg-payload { background: rgba(214, 58, 255, 0.06); }
.jwt-tag-header-title  { color: #fb015b; }
.jwt-tag-payload-title { color: #d63aff; }
.jwt-tag-signature-title { color: #00b9f1; }

/* Métadonnées en bandeau full-width */
.crypto-jwt-meta-wrap {
    margin: 0.5rem 0;
}

/* Verdict de la vérification */
.crypto-jwt-verdict {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.9rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    font-weight: 500;
    margin: 0.5rem 0;
}
.crypto-jwt-verdict-icon {
    font-size: 1.4rem;
    width: 1.6rem;
    text-align: center;
    flex-shrink: 0;
}
.crypto-jwt-verdict.verdict-valid {
    background: rgba(46, 160, 67, 0.10);
    border-color: #2ea043;
    color: #2ea043;
}
.crypto-jwt-verdict.verdict-invalid {
    background: rgba(248, 81, 73, 0.10);
    border-color: #f85149;
    color: #f85149;
}
.crypto-jwt-verdict.verdict-unsupported {
    background: rgba(255, 188, 0, 0.10);
    border-color: #ffbc00;
    color: #ffbc00;
}
.crypto-jwt-verdict.verdict-idle {
    color: var(--text-muted);
}

/* Mobile : empile les 2 colonnes */
@media (max-width: 720px) {
    .crypto-jwt-layout {
        grid-template-columns: 1fr;
    }
}

/* =====================================================================
   MODERNISATION UI — couches additives qui s'appliquent par-dessus
   ===================================================================== */

/* ---------- Transitions globales (theme switch fluide) ---------- */
html, body {
    transition: var(--theme-transition);
}

/* Tous les éléments importants reçoivent la transition de thème */
.site-header, .site-footer, .tool-tile, .pmx-section,
.btn, .btn-secondary, input, select, textarea,
.info-box, .alert, .pmx-section-summary,
.crypto-hash-row, .pmx-iface-row, .pmx-iface-block,
.crypto-jwt-decoded-block, .crypto-jwt-token-wrapper {
    transition: var(--theme-transition),
                transform var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out),
                border-color var(--dur-base) var(--ease-out);
}

/* ---------- Header : sticky + backdrop blur au scroll ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    background: color-mix(in srgb, var(--bg-elevated) 80%, transparent);
}

/* Le scroll détecté ajoute une bordure plus marquée */
.site-header.is-scrolled {
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.25);
    border-bottom-color: var(--border);
}

/* Brand : le logo "GrosTony" en gradient signature */
.brand-text {
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-weight: 700;
    transition: filter var(--dur-base) var(--ease-out);
}
.brand:hover .brand-text {
    filter: brightness(1.15) saturate(1.1);
}
.brand:hover .brand-mark {
    transform: rotate(180deg);
}

/* ---------- Toggle de thème : icône qui pivote ---------- */
.theme-btn {
    position: relative;
    overflow: hidden;
}
.theme-icon {
    display: inline-block;
    transition: transform var(--dur-slow) var(--ease-in-out);
}
.theme-btn:hover .theme-icon {
    transform: rotate(180deg) scale(1.15);
}

/* ---------- Boutons : glow accent au hover, ripple au clic ---------- */
.btn-primary {
    position: relative;
    overflow: hidden;
    transform: translateZ(0); /* hint de compositing pour le ripple */
}
.btn-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--grad-brand);
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease-out);
    z-index: -1;
}
.btn-primary:hover::before {
    opacity: 0.15;
}
.btn-primary:hover {
    box-shadow: 0 0 0 1px var(--accent), 0 4px 16px var(--cat-network-glow);
    transform: translateY(-1px);
}
.btn-primary:active {
    transform: translateY(0);
}

/* Effet ripple générique au clic (CSS pure) */
.btn::after, .btn-primary::after, .btn-secondary::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 5px; height: 5px;
    background: rgba(255, 255, 255, 0.5);
    opacity: 0;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    pointer-events: none;
}
.btn:active::after, .btn-primary:active::after, .btn-secondary:active::after {
    animation: ripple var(--dur-slow) var(--ease-out);
}
@keyframes ripple {
    0%   { opacity: 0.6; transform: translate(-50%, -50%) scale(0); }
    100% { opacity: 0;   transform: translate(-50%, -50%) scale(40); }
}

/* ---------- Tuiles d'outils sur la home : couleur par catégorie ---------- */
/* L'attribution se fait via [data-category="..."] sur le <section> parent. */

.catalog-cat {
    margin-bottom: 2rem;
}
.catalog-cat .cat-title {
    position: relative;
    padding-left: 0.7rem;
    border-left: 4px solid var(--cat-color, var(--accent));
    transition: padding-left var(--dur-base) var(--ease-out);
}

/* Mapping section → couleur (fallback sur accent si non mappé) */
.catalog-cat[data-category="network"]    { --cat-color: var(--cat-network); --cat-glow: var(--cat-network-glow); --cat-bg: var(--cat-network-bg); }
.catalog-cat[data-category="reference"]  { --cat-color: var(--cat-reference); --cat-glow: var(--cat-reference-glow); --cat-bg: var(--cat-reference-bg); }
.catalog-cat[data-category="system"]     { --cat-color: var(--cat-system); --cat-glow: var(--cat-system-glow); --cat-bg: var(--cat-system-bg); }
.catalog-cat[data-category="misc"]       { --cat-color: var(--cat-misc); --cat-glow: var(--cat-misc-glow); --cat-bg: var(--cat-misc-bg); }

/* Tuiles : effet lift + colorisation au hover */
.tool-tile {
    position: relative;
    overflow: hidden;
    border-left: 3px solid var(--cat-color, var(--border));
    /* Pré-positionné hors écran : revient avec l'animation stagger */
    opacity: 0;
    transform: translateY(8px);
    animation: tile-enter var(--dur-slow) var(--ease-out) forwards;
}

/* Stagger : chaque tuile suivante a un délai croissant. CSS pure via
   :nth-child, jusqu'à 12 (suffit pour la cat la plus chargée). */
.tool-tile:nth-child(1)  { animation-delay: 30ms; }
.tool-tile:nth-child(2)  { animation-delay: 60ms; }
.tool-tile:nth-child(3)  { animation-delay: 90ms; }
.tool-tile:nth-child(4)  { animation-delay: 120ms; }
.tool-tile:nth-child(5)  { animation-delay: 150ms; }
.tool-tile:nth-child(6)  { animation-delay: 180ms; }
.tool-tile:nth-child(7)  { animation-delay: 210ms; }
.tool-tile:nth-child(8)  { animation-delay: 240ms; }
.tool-tile:nth-child(9)  { animation-delay: 270ms; }
.tool-tile:nth-child(10) { animation-delay: 300ms; }
.tool-tile:nth-child(11) { animation-delay: 330ms; }
.tool-tile:nth-child(12) { animation-delay: 360ms; }

@keyframes tile-enter {
    to { opacity: 1; transform: translateY(0); }
}

.tool-tile:hover {
    transform: translateY(-3px);
    border-left-color: var(--cat-color, var(--accent));
    box-shadow:
        0 0 0 1px var(--cat-color, var(--border)),
        0 12px 28px rgba(0, 0, 0, 0.3),
        0 0 32px var(--cat-glow, transparent);
}
.tool-tile:hover .tile-icon {
    background: var(--cat-bg, var(--bg-hover));
    color: var(--cat-color, var(--accent));
    transform: scale(1.08) rotate(-3deg);
}
.tile-icon {
    transition: transform var(--dur-base) var(--ease-out),
                background-color var(--dur-base) var(--ease-out),
                color var(--dur-base) var(--ease-out);
}

/* Le titre de la tuile prend la couleur cat au hover */
.tool-tile:hover .tile-name {
    color: var(--cat-color, var(--accent));
}

/* ---------- Sections dépliables (style Proxmox/Crypto) ---------- */
.pmx-section-summary {
    transition: background-color var(--dur-fast) var(--ease-out),
                padding-left var(--dur-base) var(--ease-out);
    cursor: pointer;
}
.pmx-section-summary:hover {
    background: var(--bg-hover);
    padding-left: 1rem;
}
.pmx-section[open] > .pmx-section-summary {
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
}
.pmx-section[open] > .pmx-section-summary .pmx-section-icon {
    transform: rotate(360deg);
}
.pmx-section-icon {
    transition: transform var(--dur-slow) var(--ease-out);
    display: inline-block;
}

/* Animation d'apparition du body de section quand ça déplie */
.pmx-section[open] > .pmx-section-body {
    animation: section-reveal var(--dur-slow) var(--ease-out);
}
@keyframes section-reveal {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Badge sections : léger effet shimmer au passage souris */
.pmx-section-badge {
    background: var(--bg-hover);
    border: 1px solid var(--border);
    transition: all var(--dur-base) var(--ease-out);
}
.pmx-section-summary:hover .pmx-section-badge {
    background: var(--cat-bg, var(--bg-elevated));
    border-color: var(--cat-color, var(--accent));
    color: var(--cat-color, var(--accent));
}

/* ---------- Inputs : focus glow accent ---------- */
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* ---------- Liens nav : underline animé ---------- */
.nav-link {
    position: relative;
}
.nav-link::after {
    content: '';
    position: absolute;
    bottom: 4px; left: 12px; right: 12px;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--dur-base) var(--ease-out);
    border-radius: 2px;
}
.nav-link:hover::after,
.nav-link.is-active::after {
    transform: scaleX(1);
}
/* CTA reste comme avant */
.nav-cta::after { display: none; }

/* ---------- Alerts / info-box : bordure colorée animée ---------- */
.info-box-primary {
    border-left: 3px solid var(--accent);
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--accent) 8%, transparent) 0%,
        var(--bg-elevated) 30%,
        var(--bg-elevated) 100%
    );
}

/* ---------- Footer : doux gradient ---------- */
.site-footer {
    background: linear-gradient(
        180deg,
        var(--bg) 0%,
        color-mix(in srgb, var(--bg-elevated) 50%, var(--bg)) 100%
    );
    border-top: 1px solid var(--border);
}

/* ---------- Page d'erreur : un peu de personnalité ---------- */
.error-page {
    text-align: center;
    padding: 4rem 1rem;
    animation: tile-enter var(--dur-slow) var(--ease-out);
}
.error-page h1 {
    font-size: 3rem;
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ---------- Loader subtil pour les états async (hash file, etc) ---------- */
@keyframes pulse-bg {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
}
[data-loading="true"] {
    animation: pulse-bg 1.4s var(--ease-in-out) infinite;
}

/* ---------- Lang switch : transition douce ---------- */
.lang-btn {
    transition: all var(--dur-base) var(--ease-out);
}
.lang-btn.active {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}
.lang-btn:not(.active):hover {
    background: var(--bg-hover);
    color: var(--text);
}

/* ---------- Accessibilité : prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .tool-tile {
        opacity: 1;
        transform: none;
    }
}

/* ---------- Recherche / search bar (si présente) : focus glow ---------- */
.search-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent),
                0 0 20px color-mix(in srgb, var(--accent) 25%, transparent);
}

/* ---------- Scrollbar personnalisée (Chromium/WebKit) ---------- */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: var(--bg);
}
::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 6px;
    border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}
/* Firefox */
* {
    scrollbar-color: var(--border) var(--bg);
    scrollbar-width: thin;
}

/* ---------- Sélection texte : couleur accent ---------- */
::selection {
    background: color-mix(in srgb, var(--accent) 30%, transparent);
    color: var(--text);
}

/* ---------- Boîte Sécurité & Crypto : icône et badges colorés ---------- */
.crypto-hash-algo {
    background: var(--cat-system-bg);
    color: var(--cat-system);
    padding: 0.18rem 0.5rem;
    border-radius: 4px;
    font-weight: 700;
}

/* Verdict JWT avec petite animation au changement */
.crypto-jwt-verdict {
    animation: verdict-pop var(--dur-base) var(--ease-out);
}
@keyframes verdict-pop {
    0%   { transform: scale(0.97); }
    50%  { transform: scale(1.02); }
    100% { transform: scale(1); }
}

/* =====================================================================
   POLISH PHASE 2 — détails fins, micro-interactions, tooltips
   ===================================================================== */

/* ---------- Hero épuré (sans gradient mesh, sur retour utilisateur) ---------- */
.hero h1 {
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-size: 2rem;
    letter-spacing: -0.02em;
}
.hero-compact h1 {
    font-size: 1.75rem;
}

/* ---------- Search bar : icône loupe intégrée + shortcut hint ---------- */
.catalog-search {
    position: relative;
    max-width: 600px;
}
.catalog-search input[type="search"] {
    padding-left: 2.5rem;
    padding-right: 3rem;
    font-size: 0.95rem;
    border-radius: 999px; /* pill shape */
    background: var(--bg-elevated);
    transition: all var(--dur-base) var(--ease-out);
}
.catalog-search input[type="search"]:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent),
                0 8px 24px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}
/* Icône loupe en pseudo-élément - position absolute */
.catalog-search::before {
    content: '🔍';
    position: absolute;
    left: 0.95rem;
    top: 50%;
    transform: translateY(-50%);
    margin-top: -0.3rem; /* aligne avec le compteur */
    pointer-events: none;
    font-size: 0.95rem;
    opacity: 0.6;
    z-index: 1;
    transition: opacity var(--dur-fast);
}
.catalog-search:focus-within::before {
    opacity: 1;
    animation: search-pulse 1.4s var(--ease-in-out) infinite;
}
@keyframes search-pulse {
    0%, 100% { transform: translateY(-50%) scale(1); margin-top: -0.3rem; }
    50%      { transform: translateY(-50%) scale(1.15); margin-top: -0.3rem; }
}
/* Hint clavier "/" à droite */
.catalog-search::after {
    content: '/';
    position: absolute;
    right: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    margin-top: -0.3rem;
    padding: 0.1rem 0.5rem;
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--text-muted);
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: 4px;
    pointer-events: none;
    transition: opacity var(--dur-fast);
}
.catalog-search:focus-within::after {
    opacity: 0;
}

/* Compteur d'outils : animation pulsation quand le nombre change */
.search-counter {
    transition: color var(--dur-base);
}
.search-counter.is-changed {
    color: var(--accent);
    animation: counter-pop var(--dur-base) var(--ease-out);
}
@keyframes counter-pop {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.08); }
    100% { transform: scale(1); }
}

/* ---------- Tuiles : vraie élévation et hiérarchie visuelle ---------- */
.tool-tile {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    /* La bordure gauche colorée vient du bloc précédent */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    padding: 0.85rem 1rem;
    gap: 0.85rem;
}
.tile-icon {
    width: 42px; height: 42px;
    background: var(--bg);
    border: 1px solid var(--border);
    transition: all var(--dur-base) var(--ease-out);
}
.tool-tile:hover .tile-icon {
    border-color: var(--cat-color, var(--accent));
}
.tile-name {
    font-size: 0.95rem;
    transition: color var(--dur-fast);
}
.tile-description {
    font-size: 0.82rem;
    line-height: 1.45;
}

/* ---------- Tooltip natif amélioré (utilise [data-tip]) ---------- */
[data-tip] {
    position: relative;
}
[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    padding: 0.3rem 0.6rem;
    background: var(--text);
    color: var(--bg);
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
    z-index: 200;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
[data-tip]::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: var(--text);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-fast) var(--ease-out);
    z-index: 200;
}
[data-tip]:hover::after,
[data-tip]:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
[data-tip]:hover::before,
[data-tip]:focus-visible::before {
    opacity: 1;
}

/* ---------- Toast notifications (créés par JS) ---------- */
.toast-container {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
    max-width: 400px;
}
.toast {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    padding: 0.7rem 1rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    font-size: 0.88rem;
    color: var(--text);
    pointer-events: auto;
    animation: toast-in var(--dur-slow) var(--ease-out);
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.toast.toast-success { border-left-color: var(--success); }
.toast.toast-error   { border-left-color: var(--danger); }
.toast.toast-warning { border-left-color: var(--warning); }
.toast-icon {
    flex-shrink: 0;
    width: 20px; height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 700;
}
.toast-success .toast-icon { background: var(--success); color: white; }
.toast-error   .toast-icon { background: var(--danger); color: white; }
.toast-warning .toast-icon { background: var(--warning); color: var(--bg); }
.toast-icon-default { background: var(--accent); color: white; }
.toast.is-leaving {
    animation: toast-out var(--dur-base) var(--ease-out) forwards;
}
@keyframes toast-in {
    from { opacity: 0; transform: translateX(20px) scale(0.95); }
    to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes toast-out {
    to { opacity: 0; transform: translateX(20px) scale(0.95); }
}

/* ---------- Skeleton loader pour les chargements AJAX ---------- */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-elevated) 0%,
        var(--bg-hover) 50%,
        var(--bg-elevated) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s var(--ease-in-out) infinite;
    border-radius: 4px;
    color: transparent !important;
}
@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ---------- Focus visible amélioré pour l'accessibilité ---------- */
*:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}
.tool-tile:focus-visible {
    outline-color: var(--cat-color, var(--accent));
    outline-offset: 4px;
}
button:focus-visible {
    outline-offset: 3px;
}

/* ---------- Boutons : amélioration visuelle ---------- */
.btn {
    font-weight: 500;
    letter-spacing: 0.01em;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.btn-primary {
    background: linear-gradient(180deg, var(--accent) 0%, var(--accent-hover) 100%);
    border-color: transparent;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.btn-primary:hover {
    background: linear-gradient(180deg, var(--accent-hover) 0%, var(--accent) 100%);
    box-shadow: 0 4px 12px var(--cat-network-glow),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* ---------- Inputs : labels qui flottent au focus ---------- */
.form-row {
    transition: transform var(--dur-fast) var(--ease-out);
}
.form-row label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
    color: var(--text);
    transition: color var(--dur-fast);
}
.form-row:focus-within label {
    color: var(--accent);
}

/* ---------- Tags / chips dans les tuiles ---------- */
.tile-tags {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
    margin-top: 0.4rem;
}
.tile-tag {
    font-size: 0.7rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: var(--bg);
    color: var(--text-muted);
    border: 1px solid var(--border);
    transition: all var(--dur-fast);
}
.tool-tile:hover .tile-tag {
    border-color: var(--cat-color, var(--border));
    color: var(--cat-color, var(--text));
}

/* ---------- Footer enrichi ---------- */
.site-footer {
    padding: 1.5rem 1rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
}
.site-footer p {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: center;
}
.footer-sep {
    opacity: 0.3;
}
.footer-link {
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--dur-fast);
}
.footer-link:hover {
    color: var(--accent);
}

/* ---------- Outil pages : breadcrumb + en-tête coloré par cat ---------- */
.tool-header {
    margin-bottom: 1.25rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--border);
    position: relative;
}
.tool-header::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 60px;
    height: 2px;
    background: var(--cat-color, var(--accent));
    border-radius: 2px;
}

/* ---------- Responsive : ajustements mobile ---------- */
@media (max-width: 720px) {
    .hero h1 {
        font-size: 1.5rem;
    }
    .catalog-search::after {
        display: none; /* hint clavier inutile sur mobile */
    }
    .tool-grid {
        grid-template-columns: 1fr;
    }
    .toast-container {
        right: 0.5rem;
        left: 0.5rem;
        bottom: 0.5rem;
        max-width: none;
    }
    [data-tip]::after,
    [data-tip]::before {
        display: none; /* tooltips inutiles au tactile */
    }
}

/* ---------- Print : nettoie le rendu pour impression ---------- */
@media print {
    .site-header,
    .site-footer,
    .catalog-search,
    .toast-container,
    .pmx-section-summary {
        display: none !important;
    }
    .pmx-section[open] > .pmx-section-body {
        display: block !important;
    }
    body {
        background: white !important;
        color: black !important;
    }
}

/* ---------- Loading dots animés ---------- */
.loading-dots::after {
    content: '...';
    display: inline-block;
    animation: loading-dots 1.4s steps(4, end) infinite;
    overflow: hidden;
    vertical-align: bottom;
    width: 0;
}
@keyframes loading-dots {
    to { width: 1.5em; }
}

/* ---------- Surbrillance des résultats de recherche ---------- */
.tool-tile.is-search-match {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}

/* ---------- Tag NEW pour les outils récents ---------- */
.tile-badge-new {
    position: absolute;
    top: -6px;
    right: -6px;
    background: linear-gradient(135deg, var(--cat-system) 0%, #fb7185 100%);
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    box-shadow: 0 2px 6px var(--cat-system-glow);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    animation: badge-attention 3s var(--ease-in-out) infinite;
}
@keyframes badge-attention {
    0%, 50%, 100% { transform: scale(1); }
    25%, 75%      { transform: scale(1.08) rotate(-2deg); }
}

/* ---------- Status indicators dans le hero ---------- */
.status-ok {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.7rem;
    background: color-mix(in srgb, var(--success) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--success) 30%, transparent);
    border-radius: 999px;
    font-size: 0.85rem;
}

/* ---------- Modale de confirmation : effet zoom in ---------- */
.modal-overlay {
    animation: modal-fade var(--dur-base) var(--ease-out);
}
.modal-content {
    animation: modal-zoom var(--dur-base) var(--ease-out);
}
@keyframes modal-fade {
    from { opacity: 0; backdrop-filter: blur(0); }
    to   { opacity: 1; backdrop-filter: blur(4px); }
}
@keyframes modal-zoom {
    from { opacity: 0; transform: scale(0.92) translateY(10px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ---------- Effet glow sur les inputs spécifiques (search) ---------- */
@media (prefers-color-scheme: dark) {
    .catalog-search input[type="search"]:focus {
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent),
                    0 0 30px color-mix(in srgb, var(--accent) 18%, transparent),
                    0 8px 24px rgba(0, 0, 0, 0.3);
    }
}

/* ---------- Code blocks : syntax highlight subtil ---------- */
pre, code {
    font-feature-settings: 'liga' 0; /* désactive ligatures pour code */
}
pre {
    border-radius: var(--radius);
    border: 1px solid var(--border);
    overflow: auto;
    position: relative;
}
pre code {
    display: block;
    padding: 0.85rem 1rem;
    line-height: 1.55;
}
/* Bouton copier sur les blocs de code (sera placé par JS) */
.code-copy-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.7rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-muted);
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--dur-base);
}
pre:hover .code-copy-btn {
    opacity: 1;
}
.code-copy-btn:hover {
    background: var(--bg-hover);
    color: var(--text);
}

/* ---------- Indicateur de connexion en ligne (utile pour JWT verify, etc.) ---------- */
.connection-indicator {
    position: fixed;
    bottom: 1rem;
    left: 1rem;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 0 var(--success);
    animation: pulse-online 2s var(--ease-in-out) infinite;
    z-index: 100;
    opacity: 0; /* invisible par défaut, JS l'affichera si pertinent */
}
@keyframes pulse-online {
    0%, 100% { box-shadow: 0 0 0 0 var(--success); }
    50%      { box-shadow: 0 0 0 6px transparent; }
}

/* ---------- Hover ondulant sur sections de la home ---------- */
.catalog-cat:hover .cat-title {
    padding-left: 0.95rem;
}
.catalog-cat .cat-title {
    transition: padding-left var(--dur-base) var(--ease-out);
}

/* =====================================================================
   Switch Config Generator (slug: switch-config)
   ===================================================================== */

/* ---------- Plateforme tabs en haut ---------- */
.swc-platform-bar {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.7rem 1rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.swc-platform-label {
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.88rem;
}
.swc-platform-tabs {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.swc-platform-tab {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.45rem 0.85rem;
    cursor: pointer;
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.88rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: all var(--dur-base) var(--ease-out);
}
.swc-platform-tab:hover {
    background: var(--bg-hover);
    color: var(--text);
    border-color: var(--cat-network);
}
.swc-platform-tab.is-active {
    background: var(--cat-network-bg);
    color: var(--cat-network);
    border-color: var(--cat-network);
    box-shadow: 0 0 16px var(--cat-network-glow);
}
.swc-platform-icon {
    font-size: 1.1rem;
}

/* ---------- VLANs : lignes éditables ---------- */
.swc-vlans-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0.5rem 0 0.85rem;
}
.swc-vlan-row {
    display: grid;
    grid-template-columns: 90px 1fr auto;
    gap: 0.5rem;
    align-items: center;
}
.swc-vlan-id, .swc-vlan-name {
    margin: 0;
}

/* ---------- Tableau de ports ---------- */
.swc-ports-bulk {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.7rem;
    padding: 0.5rem 0.7rem;
    background: var(--bg);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    flex-wrap: wrap;
}
.btn-sm {
    padding: 0.25rem 0.6rem;
    font-size: 0.78rem;
}

.swc-ports-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    max-height: 600px;
    overflow-y: auto;
}
.swc-ports-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.swc-ports-table thead {
    position: sticky;
    top: 0;
    background: var(--bg-elevated);
    z-index: 1;
}
.swc-ports-table th {
    text-align: left;
    padding: 0.55rem 0.6rem;
    font-weight: 600;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.swc-ports-table td {
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.swc-ports-table tr:last-child td {
    border-bottom: none;
}
.swc-ports-table tr:hover {
    background: var(--bg-hover);
}
.swc-ports-table input,
.swc-ports-table select {
    padding: 0.25rem 0.45rem;
    font-size: 0.82rem;
    width: 100%;
    margin: 0;
}
.swc-ports-table .swc-port-desc { min-width: 150px; }
.swc-port-mode { min-width: 90px; }
.swc-port-vlan, .swc-port-allowed { min-width: 100px; }
.swc-port-speed { min-width: 80px; }

.swc-tiny-check {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.78rem;
    color: var(--text-muted);
    cursor: pointer;
}

/* ---------- LACP / ACLs ---------- */
.swc-lacp-list, .swc-acl-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin: 0.5rem 0;
}
.swc-lacp-row, .swc-acl-block {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.7rem 0.85rem;
}
.pmx-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
}
.swc-acl-rules {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.5rem;
}
.swc-acl-rule {
    display: grid;
    grid-template-columns: 80px 70px 1fr 1fr 100px auto;
    gap: 0.4rem;
    align-items: center;
}
.swc-acl-rule input, .swc-acl-rule select {
    font-size: 0.82rem;
    padding: 0.25rem 0.4rem;
    margin: 0;
}
.swc-acl-actions {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
}

/* ---------- Zone d'aperçu de la config ---------- */
.swc-output-block {
    margin-top: 1.5rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-hover);
}
.swc-output-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 1rem;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    gap: 0.6rem;
}
.swc-output-title {
    margin: 0;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.swc-output-icon {
    font-size: 1.15rem;
}
.swc-platform-display {
    font-size: 0.85rem;
    font-weight: normal;
    margin-left: 0.5rem;
}
.swc-output-actions {
    display: flex;
    gap: 0.4rem;
}
.swc-output {
    margin: 0;
    padding: 1rem 1.2rem;
    background: var(--bg);
    color: var(--text);
    font-family: var(--mono);
    font-size: 0.82rem;
    line-height: 1.55;
    max-height: 600px;
    overflow: auto;
    border-radius: 0;
}
.swc-output code {
    background: transparent;
    padding: 0;
    font-size: inherit;
    color: inherit;
    white-space: pre;
}
.swc-comment {
    color: var(--text-muted);
    font-style: italic;
}

/* ---------- Mobile : adapter ---------- */
@media (max-width: 720px) {
    .swc-platform-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .swc-ports-table {
        font-size: 0.78rem;
    }
    .pmx-grid-3 {
        grid-template-columns: 1fr;
    }
    .swc-acl-rule {
        grid-template-columns: 1fr 1fr;
    }
}

/* ---------- Icônes emoji des outils sur la home ---------- */
.tile-icon-emoji {
    font-size: 1.7rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* L'emoji ne devrait pas hériter de la couleur — il a sa propre teinte
       intrinsèque. Mais on lui ajoute un léger drop-shadow dans la
       couleur de la catégorie au hover pour cohérence visuelle. */
    transition: transform var(--dur-base) var(--ease-out),
                filter var(--dur-base) var(--ease-out);
}
.tool-tile:hover .tile-icon-emoji {
    transform: scale(1.15) rotate(-5deg);
    filter: drop-shadow(0 0 8px var(--cat-glow, transparent));
}

/* La tile-icon container reste neutre quand c'est un emoji
   (pas de fond bg-elevated qui ferait double-cadre) */
.tile-icon:has(.tile-icon-emoji) {
    background: transparent;
    border: none;
}
.tool-tile:hover .tile-icon:has(.tile-icon-emoji) {
    background: var(--cat-bg, transparent);
}

/* =====================================================================
   POLISH PHASE 3 — densification, search dans header, descriptions clamped
   ===================================================================== */

/* ---------- Plus large : on étend le main jusqu'à 1800px ---------- */
.site-main {
    max-width: 1800px;
    padding: 1rem 1.25rem;  /* moins de padding vertical */
}

/* ---------- Hero compact + plus serré ---------- */
.hero,
.hero-compact {
    padding: 0.85rem 0.5rem 0.6rem;
}
.hero h1,
.hero-compact h1 {
    font-size: 1.55rem;
    margin: 0 0 0.25rem;
}
.hero .lead {
    font-size: 0.9rem;
    margin-bottom: 0.4rem;
}
.status-ok {
    margin: 0.3rem 0;
    font-size: 0.8rem;
}

/* ---------- Header : on prévoit un slot search au centre ---------- */
.header-inner {
    /* Grid 3 zones : brand à gauche, search au centre flex, nav à droite */
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
}
.header-search-slot {
    /* Slot vide par défaut (sur les pages sans search). */
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0;  /* permet au slot de rétrécir */
}
.header-search-slot:empty {
    display: none;
}

/* La search déplacée dans le header reçoit cette classe via JS.
   On override les styles "pill XL" par une version plus compacte. */
.catalog-search-in-header {
    margin: 0;
    max-width: 480px;
    width: 100%;
    position: relative;
}
.catalog-search-in-header input[type="search"] {
    padding: 0.4rem 2.6rem 0.4rem 2.4rem;
    font-size: 0.88rem;
    border-radius: 999px;
    background: var(--bg);
    transition: all var(--dur-base) var(--ease-out);
}
.catalog-search-in-header input[type="search"]:focus {
    background: var(--bg-elevated);
    transform: none;  /* pas de translateY dans le header */
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent);
}
.catalog-search-in-header::before {
    /* Repositionne la loupe en mode header */
    margin-top: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.85rem;
    left: 0.85rem;
}
.catalog-search-in-header:focus-within::before {
    /* Désactive l'animation pulse en mode header (trop de mouvement) */
    animation: none;
    opacity: 1;
}
.catalog-search-in-header::after {
    /* Hint clavier "/" en plus petit dans le header */
    margin-top: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.68rem;
    padding: 0.05rem 0.35rem;
    right: 0.5rem;
}
/* Le compteur (.search-counter) reste dans le DOM mais on le cache
   visuellement quand la search est dans le header (le compteur est
   maintenant inutile car on voit directement la grille filtrée). */
.catalog-search-in-header .search-counter {
    display: none;
}

/* ---------- Catégories : grille plus serrée ---------- */
.catalog {
    gap: 0.85rem;  /* au lieu de 1.25rem */
}

/* ---------- Grille : densifier (plus de tuiles par ligne) ---------- */
.tool-grid {
    /* Tuile mini 220px au lieu de 240px = plus de tuiles par ligne */
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.5rem;  /* au lieu de 0.65rem */
}

/* ---------- Tuiles : moins de padding, description sur 2 lignes ---------- */
.tool-tile {
    padding: 0.6rem 0.75rem;  /* au lieu de 0.85rem 1rem */
    gap: 0.6rem;
}
.tile-icon {
    width: 36px;
    height: 36px;
}
.tile-name {
    font-size: 0.9rem;
    margin: 0 0 0.1rem;
}
.tile-description {
    font-size: 0.78rem;
    line-height: 1.35;
    /* IMPORTANT : 2 lignes max au lieu de 3, avec ellipsis. Ça force
       les descriptions trop longues à être tronquées et garantit que
       toutes les tuiles font la même hauteur. */
    -webkit-line-clamp: 2;
    line-clamp: 2;
    /* line-clamp est un raccourci moderne ; line-clamp standard. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- Sections d'outils (pmx-section) plus compactes ---------- */
.pmx-section-summary {
    padding: 0.55rem 0.85rem;  /* au lieu du défaut plus large */
}
.pmx-section-body {
    padding: 0.85rem 1rem;
}

/* ---------- Forms plus serrés ---------- */
.form-row {
    margin-bottom: 0.65rem;
}
.pmx-grid-2 {
    gap: 0.6rem;
}

/* ---------- Mobile : header passe en colonne, search en bas ---------- */
@media (max-width: 720px) {
    .header-inner {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        gap: 0.5rem;
    }
    .header-search-slot {
        grid-column: 1;
        grid-row: 2;
        order: 3;
    }
    .brand {
        grid-row: 1;
    }
    .main-nav {
        grid-row: 1;
        justify-self: end;
    }
    .catalog-search-in-header {
        max-width: 100%;
    }
    .catalog-search-in-header::after {
        display: none;  /* pas de hint clavier sur mobile */
    }
    .tool-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- Tablette : 2-3 colonnes ---------- */
@media (min-width: 721px) and (max-width: 1024px) {
    .tool-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}

/* =====================================================================
   Outils de référence (livraison batch 1)
   ===================================================================== */

/* ---------- chmod calculator ---------- */
.chmod-calc {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1.5rem;
    align-items: center;
}
.chmod-calc-grid {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.chmod-calc-row {
    display: grid;
    grid-template-columns: 100px 1fr 1fr 1fr;
    gap: 0.5rem;
    align-items: center;
}
.chmod-calc-special {
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.5rem;
    margin-bottom: 0.3rem;
}
.chmod-calc-label {
    font-weight: 600;
    font-size: 0.85rem;
}
.chmod-check {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    cursor: pointer;
    font-size: 0.85rem;
    user-select: none;
}
.chmod-calc-output {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    min-width: 240px;
}
.chmod-calc-result {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}
.chmod-calc-octal {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent);
    font-family: var(--mono);
}
.chmod-calc-symbolic {
    font-size: 1rem;
    color: var(--text);
    font-family: var(--mono);
    background: var(--bg-hover);
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
}

@media (max-width: 720px) {
    .chmod-calc {
        grid-template-columns: 1fr;
    }
    .chmod-calc-row {
        grid-template-columns: 100px repeat(3, 1fr);
        font-size: 0.8rem;
    }
}

/* ---------- ssh entries ---------- */
.ssh-entry {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.85rem 1rem;
    margin-bottom: 0.7rem;
}
.ssh-entry-title {
    margin: 0 0 0.4rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--cat-reference, var(--accent));
}
.ssh-entry-desc {
    margin: 0 0 0.5rem;
    font-size: 0.88rem;
    line-height: 1.5;
}
.ssh-entry .pmx-conf-block {
    margin: 0;
    font-size: 0.82rem;
}

/* ---------- iptables cards (2 colonnes : iptables / nftables) ---------- */
.iptables-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.iptables-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.85rem 1rem;
}
.iptables-card-desc {
    font-size: 0.9rem;
    margin-bottom: 0.6rem;
}
.iptables-card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem;
}
.iptables-cmd-label {
    margin-bottom: 0.3rem;
}
.iptables-cmd .pmx-conf-block {
    margin: 0;
    font-size: 0.8rem;
    overflow-x: auto;
}
@media (max-width: 720px) {
    .iptables-card-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- regex tester ---------- */
.regex-tester {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
}
.regex-pattern-row {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.85rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.4rem 0.6rem;
}
.regex-pattern-row:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.regex-delim {
    color: var(--text-muted);
    font-family: var(--mono);
    font-size: 1.05rem;
    font-weight: 700;
    user-select: none;
}
.regex-pattern {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--accent);
    font-family: var(--mono);
    font-size: 0.95rem;
    padding: 0;
    margin: 0;
}
.regex-flags {
    width: 60px;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-muted);
    font-family: var(--mono);
    font-size: 0.85rem;
    padding: 0;
    margin: 0;
    text-align: center;
}

.regex-results {
    margin-top: 0.85rem;
}
.regex-status {
    display: inline-block;
    padding: 0.3rem 0.7rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.85rem;
    color: var(--text-muted);
}
.regex-status-ok {
    color: var(--success);
    border-color: color-mix(in srgb, var(--success) 40%, transparent);
    background: color-mix(in srgb, var(--success) 10%, transparent);
}
.regex-status-err {
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 40%, transparent);
    background: color-mix(in srgb, var(--danger) 10%, transparent);
}

.regex-highlighted {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.7rem 0.85rem;
    font-family: var(--mono);
    font-size: 0.85rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-wrap: break-word;
    min-height: 60px;
    max-height: 250px;
    overflow: auto;
}
mark.regex-match {
    background: color-mix(in srgb, var(--accent) 35%, transparent);
    color: var(--text);
    padding: 0 2px;
    border-radius: 2px;
    font-weight: 600;
}

.regex-matches-list {
    list-style: none;
    margin: 0;
    padding: 0.5rem 0.85rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    max-height: 200px;
    overflow: auto;
    font-size: 0.85rem;
    line-height: 1.6;
}
.regex-match-item code {
    background: var(--bg-hover);
    padding: 0 4px;
    border-radius: 3px;
    font-size: 0.8rem;
}

/* =====================================================================
   Outils Réseau batch 2 + Units batch 3
   ===================================================================== */

/* Helpers visibility (CSP-safe) */
.ssp-error-hidden, .ssp-results-hidden,
.whois-hidden, .trace-hidden { display: none !important; }
.ssp-error-hidden { color: var(--danger); }
[data-ssp-error]:not(.ssp-error-hidden) {
    color: var(--danger);
    font-weight: 500;
}

/* Statut form-hint coloré */
.form-hint.status-info { color: var(--accent); }
.form-hint.status-ok   { color: var(--success); }
.form-hint.status-err  { color: var(--danger); }

/* ---------- Bandwidth calculator ---------- */
.bw-input-group {
    display: flex;
    gap: 0.4rem;
    align-items: stretch;
}
.bw-input-group input {
    flex: 1;
}
.bw-input-group select {
    flex: 1.2;
}
.bw-efficiency-row {
    margin: 0.7rem 0 1rem;
}
.bw-results {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.6rem;
    margin: 1rem 0;
}
.bw-result-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.85rem 1rem;
}
.bw-result-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.3rem;
}
.bw-result-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--accent);
    line-height: 1.2;
}
.bw-result-detail {
    font-size: 0.8rem;
    margin-top: 0.2rem;
    font-family: var(--mono);
}

/* ---------- Whois output ---------- */
.whois-input-row {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}
.whois-input-row input {
    flex: 1;
}
.whois-output-block {
    margin-top: 1.2rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-hover);
}
.whois-output-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 1rem;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    gap: 0.5rem;
}
.whois-output-title {
    margin: 0;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
}
.whois-output {
    margin: 0;
    padding: 1rem 1.2rem;
    background: var(--bg);
    color: var(--text);
    font-family: var(--mono);
    font-size: 0.82rem;
    line-height: 1.5;
    max-height: 600px;
    overflow: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* ---------- Network trace ---------- */
.trace-mode-tabs {
    display: flex;
    gap: 0.4rem;
}
.trace-mode-tab {
    flex: 1;
    cursor: pointer;
    user-select: none;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.55rem 0.85rem;
    text-align: center;
    transition: all var(--dur-base) var(--ease-out);
}
.trace-mode-tab:hover {
    border-color: var(--cat-network);
    color: var(--cat-network);
}
.trace-mode-tab input[type="radio"] {
    display: none;
}
.trace-mode-tab:has(input:checked) {
    background: var(--cat-network-bg);
    border-color: var(--cat-network);
    color: var(--cat-network);
    box-shadow: 0 0 12px var(--cat-network-glow);
}
.trace-output-block {
    margin-top: 1.2rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.trace-output-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 1rem;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    gap: 0.5rem;
}
.trace-output-title {
    margin: 0;
    font-size: 1rem;
}
.trace-output {
    margin: 0;
    padding: 1rem 1.2rem;
    background: var(--bg);
    color: var(--text);
    font-family: var(--mono);
    font-size: 0.82rem;
    line-height: 1.55;
    max-height: 500px;
    overflow: auto;
    white-space: pre;
}

/* ---------- Units converter ---------- */
.units-converter-row {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.units-results {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.units-results-table {
    width: 100%;
    margin: 0;
}
.units-results-table tbody td {
    padding: 0.45rem 0.85rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.88rem;
}
.units-results-table tbody tr:last-child td {
    border-bottom: none;
}
.units-results-table tbody tr:hover {
    background: var(--bg-hover);
}

@media (max-width: 720px) {
    .units-converter-row {
        grid-template-columns: 1fr;
    }
    .bw-input-group {
        flex-direction: column;
    }
    .whois-input-row {
        flex-direction: column;
    }
    .trace-mode-tabs {
        flex-direction: column;
    }
}
/* =====================================================================
 * POLISH UI v2 — Passe d'amélioration globale de l'interface
 * ---------------------------------------------------------------------
 * Cette section est ajoutée À LA FIN de app.css. Elle utilise une
 * spécificité raisonnable pour surcharger les styles de base existants
 * sans être trop agressive. Compatible CSP stricte (aucun inline).
 *
 * Sommaire :
 *   1. Variables additionnelles (ombres en couches, gradients, courbes)
 *   2. Sélection de texte + scrollbars custom
 *   3. Header sticky avec backdrop-blur
 *   4. Brand mark (le logo GT à gauche)
 *   5. Nav controls (lang switch, theme btn, user link)
 *   6. Hero : titre en gradient
 *   7. Tuiles d'outils : shine, parallax léger, halo coloré par catégorie
 *   8. Cat title (pill colorée)
 *   9. Boutons (primary, secondary, ripple)
 *  10. Inputs et formulaires
 *  11. Tables (header sticky, hover, fade-in)
 *  12. Sections (<details>) : chevron animé
 *  13. Info-box, alert
 *  14. Footer
 *  15. Search bar (pulse au '/', icone, badge)
 *  16. Tool page header (gradient brand-color border)
 *  17. Auth pages (top gradient bar)
 *  18. Profile page (sections avec accent bar)
 *  19. Animations (fade-in d'entrée, etc.)
 *  20. A11y (focus-visible, reduced-motion)
 *  21. Mobile (responsive)
 * ===================================================================== */

/* ==========================================================
   1. Variables additionnelles
   ========================================================== */
:root {
    /* Ombres en couches pour donner de la profondeur */
    --shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.25);
    --shadow-sm:   0 2px 6px rgba(0, 0, 0, 0.30);
    --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.40);
    --shadow-lg:   0 12px 32px rgba(0, 0, 0, 0.50);
    --shadow-glow: 0 0 24px rgba(88, 166, 255, 0.25);

    /* Gradients réutilisables */
    --grad-card: linear-gradient(180deg,
        rgba(255, 255, 255, 0.02) 0%,
        rgba(255, 255, 255, 0) 100%);
    --grad-shine: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.06) 50%,
        transparent 100%);

    /* Border radius */
    --radius-sm: 4px;
    --radius-lg: 12px;
    --radius-xl: 16px;
}

[data-theme="light"] {
    --shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-sm:   0 2px 6px rgba(0, 0, 0, 0.08);
    --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.10);
    --shadow-lg:   0 12px 32px rgba(0, 0, 0, 0.14);
    --shadow-glow: 0 0 24px rgba(88, 166, 255, 0.20);
    --grad-card: linear-gradient(180deg,
        rgba(255, 255, 255, 0.4) 0%,
        rgba(255, 255, 255, 0) 100%);
    --grad-shine: linear-gradient(90deg,
        transparent 0%,
        rgba(0, 0, 0, 0.04) 50%,
        transparent 100%);
}

/* ==========================================================
   2. Sélection texte + scrollbars
   ========================================================== */
::selection {
    background: color-mix(in srgb, var(--accent) 35%, transparent);
    color: var(--text);
}
::-moz-selection {
    background: color-mix(in srgb, var(--accent) 35%, transparent);
    color: var(--text);
}

/* Scrollbar Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
/* Scrollbar WebKit */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 10px;
    border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}
::-webkit-scrollbar-corner {
    background: transparent;
}

/* ==========================================================
   3. Header sticky avec backdrop blur
   ========================================================== */
.site-header {
    background: linear-gradient(180deg,
        var(--bg-elevated) 0%,
        color-mix(in srgb, var(--bg-elevated) 95%, var(--accent) 5%) 100%);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: box-shadow var(--dur-base) var(--ease-out),
                background var(--dur-base) var(--ease-out);
}
.site-header.is-scrolled {
    box-shadow: var(--shadow-md);
    background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
}

/* ==========================================================
   4. Brand mark (logo gradient)
   ========================================================== */
.brand {
    transition: transform var(--dur-base) var(--ease-out);
}
.brand:hover {
    transform: translateY(-1px);
}
.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    background: var(--grad-brand);
    color: var(--bg);
    font-size: 0.95rem;
    font-weight: 700;
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out);
}
.brand:hover .brand-mark {
    transform: rotate(-8deg) scale(1.05);
    box-shadow: var(--shadow-md), 0 0 12px var(--cat-network-glow);
}
.brand-text {
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ==========================================================
   5. Nav controls (langue, thème, user)
   ========================================================== */
.lang-switch {
    display: inline-flex;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 2px;
    transition: border-color var(--dur-base) var(--ease-out);
}
.lang-switch:hover {
    border-color: var(--accent);
}
.lang-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease-out);
}
.lang-btn:hover {
    color: var(--text);
}
.lang-btn.active {
    background: var(--accent);
    color: var(--bg);
    box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 40%, transparent);
}

.theme-btn {
    width: 32px;
    height: 32px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 50%;
    cursor: pointer;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all var(--dur-base) var(--ease-out);
}
.theme-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: rotate(15deg);
    box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 30%, transparent);
}

.nav-user-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.7rem 0.3rem 0.3rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    text-decoration: none;
    color: var(--text);
    font-size: 0.85rem;
    transition: all var(--dur-base) var(--ease-out);
}
.nav-user-link:hover {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, var(--bg));
    transform: translateY(-1px);
}
.nav-avatar {
    border-radius: 50%;
    object-fit: cover;
}

.nav-cta {
    transition: all var(--dur-base) var(--ease-out);
}
.nav-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 50%, transparent),
                var(--shadow-sm);
}

/* ==========================================================
   6. Hero : titre en gradient
   ========================================================== */
.hero h1 {
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    /* Anti-clipping pour les browsers qui sortent une bordure */
    padding: 0.1em 0;
}

/* ==========================================================
   7. Tuiles : shine + halo coloré + parallax (JS gère le mousemove)
   ========================================================== */
.tool-tile {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background-image: var(--grad-card);
    transition: transform var(--dur-base) var(--ease-out),
                border-color var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out);
}

/* Shine effect : gradient qui balaie de gauche à droite au hover */
.tool-tile::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--grad-shine);
    transition: left var(--dur-slow) var(--ease-out);
    pointer-events: none;
    z-index: 1;
}
.tool-tile:hover::before {
    left: 100%;
}

/* Variables de couleur par catégorie pour bordure et halo au hover */
.catalog-cat[data-category="network"]   .tool-tile {
    --cat-color: var(--cat-network);
    --cat-glow:  var(--cat-network-glow);
    --cat-bg:    var(--cat-network-bg);
}
.catalog-cat[data-category="reference"] .tool-tile {
    --cat-color: var(--cat-reference);
    --cat-glow:  var(--cat-reference-glow);
    --cat-bg:    var(--cat-reference-bg);
}
.catalog-cat[data-category="system"]    .tool-tile {
    --cat-color: var(--cat-system);
    --cat-glow:  var(--cat-system-glow);
    --cat-bg:    var(--cat-system-bg);
}
.catalog-cat[data-category="misc"]      .tool-tile {
    --cat-color: var(--cat-misc);
    --cat-glow:  var(--cat-misc-glow);
    --cat-bg:    var(--cat-misc-bg);
}

.tool-tile:hover {
    border-color: var(--cat-color, var(--accent));
    transform: translateY(-3px);
    box-shadow:
        var(--shadow-md),
        0 0 0 1px color-mix(in srgb, var(--cat-color, var(--accent)) 30%, transparent),
        0 8px 24px color-mix(in srgb, var(--cat-color, var(--accent)) 18%, transparent);
}

.tool-tile .tile-name {
    transition: color var(--dur-base) var(--ease-out);
}
.tool-tile:hover .tile-name {
    color: var(--cat-color, var(--accent));
}

/* Petite flèche → en haut à droite qui apparaît au hover */
.tool-tile::after {
    content: '→';
    position: absolute;
    top: 0.55rem;
    right: 0.7rem;
    color: var(--cat-color, var(--accent));
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out);
    font-size: 0.95rem;
    font-weight: 600;
    z-index: 2;
    pointer-events: none;
}
.tool-tile:hover::after {
    opacity: 1;
    transform: translateX(0);
}

/* Tile icon : background teinté par catégorie + halo au hover */
.tile-icon {
    background: var(--cat-bg, var(--bg));
    border: 1px solid color-mix(in srgb, var(--cat-color, var(--border)) 20%, var(--border));
    transition: all var(--dur-base) var(--ease-out);
}
.tool-tile:hover .tile-icon {
    background: color-mix(in srgb, var(--cat-color, var(--accent)) 18%, var(--bg));
    border-color: var(--cat-color, var(--accent));
    box-shadow: 0 0 12px color-mix(in srgb, var(--cat-color, var(--accent)) 30%, transparent);
}
.tile-icon-emoji {
    transition: transform var(--dur-base) var(--ease-out);
}
.tool-tile:hover .tile-icon-emoji {
    transform: scale(1.10) rotate(-3deg);
}

/* ==========================================================
   8. Cat title (Option D : bandeau gradient discret)
   ========================================================== */

/* On reset les anciennes règles cat-title pour repartir propre.
   Le bloc ligne 287 reste comme base mais sera surchargé. */
.cat-title {
    /* Layout : icône + nom + compteur + ligne dégradée qui prend tout l'espace */
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0 0 0.65rem;
    padding: 0;
    border: none;
    background: none;
    border-radius: 0;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--cat-color, var(--text-muted));
    line-height: 1;
}

/* Icône emoji dans un petit cercle teinté de la catégorie */
.cat-title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--cat-color, var(--accent)) 15%, var(--bg-elevated));
    border: 1px solid color-mix(in srgb, var(--cat-color, var(--border)) 40%, var(--border));
    font-size: 0.85rem;
    line-height: 1;
    flex-shrink: 0;
    box-shadow: 0 0 12px color-mix(in srgb, var(--cat-color, transparent) 25%, transparent);
    transition: transform var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out);
}

/* Pas de ::before ! On a remis le content via le HTML directement.
   Ça évite les emojis fantômes des anciennes règles. */
.cat-title::before {
    content: none;
    display: none;
}
.cat-title::after {
    content: none;
    display: none;
}

/* Nom de la catégorie (le mot principal) */
.cat-title-name {
    color: var(--cat-color, var(--text));
    flex-shrink: 0;
}

/* Petit badge compteur (ex: "9 outils") */
.cat-title-count {
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.72rem;
    text-transform: none;
    letter-spacing: 0.01em;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    flex-shrink: 0;
}

/* Ligne qui s'étire et fade vers la droite, dans la couleur de la catégorie */
.cat-title-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(
        90deg,
        var(--cat-color, var(--border)) 0%,
        color-mix(in srgb, var(--cat-color, var(--border)) 40%, transparent) 50%,
        transparent 100%
    );
    opacity: 0.5;
    margin-left: 0.2rem;
}

/* Couleurs par catégorie */
.catalog-cat[data-category="network"]   .cat-title-name { color: var(--cat-network); }
.catalog-cat[data-category="reference"] .cat-title-name { color: var(--cat-reference); }
.catalog-cat[data-category="system"]    .cat-title-name { color: var(--cat-system); }
.catalog-cat[data-category="misc"]      .cat-title-name { color: var(--cat-misc); }

/* Hover subtil sur le bandeau (à survol de la section) */
.catalog-cat:hover .cat-title-icon {
    transform: scale(1.08) rotate(-4deg);
    box-shadow: 0 0 16px color-mix(in srgb, var(--cat-color, transparent) 45%, transparent);
}

/* Mobile : un peu plus serré */
@media (max-width: 720px) {
    .cat-title {
        font-size: 0.72rem;
        gap: 0.45rem;
    }
    .cat-title-icon {
        width: 22px;
        height: 22px;
        font-size: 0.75rem;
    }
    .cat-title-count {
        font-size: 0.68rem;
        padding: 0.15rem 0.45rem;
    }
}

/* ==========================================================
   9. Boutons (primary, secondary, ripple)
   ========================================================== */
.btn-primary {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: all var(--dur-base) var(--ease-out);
}
.btn-primary:hover:not(:disabled) {
    box-shadow: var(--shadow-sm),
                0 0 16px color-mix(in srgb, var(--accent) 50%, transparent);
    transform: translateY(-1px);
}
.btn-primary:active:not(:disabled) {
    transform: translateY(0);
}
/* Ripple subtil au clic */
.btn-primary::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s var(--ease-out), height 0.6s var(--ease-out);
    pointer-events: none;
    z-index: -1;
}
.btn-primary:active:not(:disabled)::after {
    width: 300%;
    height: 300%;
    transition: 0s;
}

.btn-secondary {
    transition: all var(--dur-base) var(--ease-out);
}
.btn-secondary:hover:not(:disabled) {
    border-color: var(--accent);
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, var(--bg));
    transform: translateY(-1px);
}

/* État loading sur les boutons (.is-loading via JS) */
.btn.is-loading {
    color: transparent !important;
    pointer-events: none;
    position: relative;
}
.btn.is-loading::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    margin-left: -7px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: btnSpin 0.7s linear infinite;
    color: var(--bg);
}
@keyframes btnSpin {
    to { transform: rotate(360deg); }
}

/* ==========================================================
   10. Inputs et formulaires
   ========================================================== */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
textarea,
select {
    transition: border-color var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out),
                background var(--dur-base) var(--ease-out);
}
input[type="text"]:hover:not(:disabled):not(:focus),
input[type="number"]:hover:not(:disabled):not(:focus),
input[type="email"]:hover:not(:disabled):not(:focus),
input[type="password"]:hover:not(:disabled):not(:focus),
input[type="search"]:hover:not(:disabled):not(:focus),
input[type="url"]:hover:not(:disabled):not(:focus),
textarea:hover:not(:disabled):not(:focus),
select:hover:not(:disabled):not(:focus) {
    border-color: var(--text-muted);
}
input:focus,
select:focus,
textarea:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* Retire les flèches sur les input number */
input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

/* Checkbox et radio : couleur d'accent uniforme */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--accent);
}

/* ==========================================================
   11. Tables (header sticky, hover, fade-in)
   ========================================================== */
.masks-table thead th {
    background: linear-gradient(180deg,
        var(--bg-elevated) 0%,
        color-mix(in srgb, var(--bg-elevated) 95%, var(--accent) 5%) 100%);
    position: sticky;
    top: 0;
    z-index: 1;
}
.masks-table tbody tr {
    transition: background var(--dur-fast) var(--ease-out);
}

/* Animation d'entrée des rows (subtile, 1ère fois seulement) */
@keyframes rowFadeIn {
    from { opacity: 0; transform: translateY(-2px); }
    to   { opacity: 1; transform: translateY(0); }
}
.masks-table tbody tr {
    animation: rowFadeIn var(--dur-base) var(--ease-out) both;
}

/* ==========================================================
   12. Sections (<details>) : chevron animé
   ========================================================== */
.pmx-section {
    transition: border-color var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out);
}
.pmx-section:hover {
    border-color: color-mix(in srgb, var(--accent) 25%, var(--border));
}
.pmx-section[open] {
    box-shadow: var(--shadow-sm);
}
.pmx-section-summary {
    position: relative;
    transition: background var(--dur-fast) var(--ease-out);
}
.pmx-section-summary:hover {
    background: var(--bg-hover);
}
.pmx-section-summary::after {
    content: '⌃';
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%) rotate(180deg);
    color: var(--text-muted);
    font-size: 1.05rem;
    line-height: 1;
    transition: transform var(--dur-base) var(--ease-out);
    font-family: var(--mono);
}
.pmx-section[open] > .pmx-section-summary::after {
    transform: translateY(-50%) rotate(0deg);
}
.pmx-section-body {
    background: color-mix(in srgb, var(--bg-elevated) 80%, var(--bg));
}

/* ==========================================================
   13. Info-box, alert
   ========================================================== */
.info-box {
    position: relative;
    overflow: hidden;
}
.info-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: var(--accent);
}

.alert {
    animation: alertSlideIn var(--dur-base) var(--ease-out);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
@keyframes alertSlideIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.alert::before {
    font-size: 1.05rem;
    flex-shrink: 0;
}
.alert-success::before { content: '✓'; }
.alert-error::before   { content: '⚠'; }
.alert-warning::before { content: '⚠'; }

/* ==========================================================
   14. Footer minimaliste
   ========================================================== */
.site-footer {
    background: linear-gradient(180deg, var(--bg) 0%, var(--bg-elevated) 100%);
    border-top: 1px solid var(--border);
}
.site-footer .footer-link {
    transition: color var(--dur-fast) var(--ease-out);
}
.site-footer .footer-link:hover {
    color: var(--accent);
}

/* ==========================================================
   15. Search bar (pulse au '/', icone, badge)
   ========================================================== */
.catalog-search input[type="search"] {
    transition: all var(--dur-base) var(--ease-out);
}
.catalog-search input[type="search"]:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* Pulse animation déclenchée par JS (touche /) */
@keyframes searchPulse {
    0%   { transform: scale(1); }
    50%  {
        transform: scale(1.02);
        box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 20%, transparent);
    }
    100% { transform: scale(1); }
}
.search-pulse {
    animation: searchPulse 0.5s var(--ease-out);
}

/* Empty state plus engageant */
.search-no-results {
    text-align: center;
    padding: 2rem 1rem;
}
.search-no-results::before {
    content: '🔍';
    display: block;
    font-size: 2rem;
    margin-bottom: 0.6rem;
    opacity: 0.5;
}

/* ==========================================================
   16. Tool page header (gradient brand-color border)
   ========================================================== */
.tool-page {
    animation: pageFadeIn var(--dur-slow) var(--ease-out);
}
@keyframes pageFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.tool-header {
    position: relative;
    padding-left: 1.2rem;
    overflow: hidden;
}
.tool-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: var(--grad-brand);
    border-radius: var(--radius-sm);
}
.tool-breadcrumb a {
    color: var(--text-muted);
    text-decoration: none;
    padding: 0.15rem 0.4rem;
    border-radius: var(--radius-sm);
    transition: all var(--dur-fast) var(--ease-out);
}
.tool-breadcrumb a:hover {
    color: var(--accent);
    background: var(--bg-hover);
}

/* ==========================================================
   17. Auth pages (top gradient bar)
   ========================================================== */
.auth-page {
    position: relative;
    overflow: hidden;
}
.auth-page::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--grad-brand);
}
.auth-page h1 {
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ==========================================================
   18. Profile : sections avec accent bar
   ========================================================== */
.profile-section h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.profile-section h2::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 18px;
    background: var(--accent);
    border-radius: 2px;
    flex-shrink: 0;
}

/* ==========================================================
   19. Animations d'entrée
   ========================================================== */
@keyframes tileEntrance {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.tool-tile {
    animation: tileEntrance var(--dur-slow) var(--ease-out) both;
}
.tool-tile:nth-child(1)  { animation-delay:   0ms; }
.tool-tile:nth-child(2)  { animation-delay:  30ms; }
.tool-tile:nth-child(3)  { animation-delay:  60ms; }
.tool-tile:nth-child(4)  { animation-delay:  90ms; }
.tool-tile:nth-child(5)  { animation-delay: 120ms; }
.tool-tile:nth-child(6)  { animation-delay: 150ms; }
.tool-tile:nth-child(7)  { animation-delay: 180ms; }
.tool-tile:nth-child(8)  { animation-delay: 210ms; }
.tool-tile:nth-child(9)  { animation-delay: 240ms; }
.tool-tile:nth-child(10) { animation-delay: 270ms; }
.tool-tile:nth-child(n+11) { animation-delay: 300ms; }

/* Les widgets de résultat AJAX fade-in quand ils apparaissent */
.whois-output-block:not(.whois-hidden),
.trace-output-block:not(.trace-hidden) {
    animation: alertSlideIn var(--dur-base) var(--ease-out);
}

/* Bandwidth result cards : hover lift */
.bw-result-card {
    transition: all var(--dur-base) var(--ease-out);
}
.bw-result-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    box-shadow: var(--shadow-sm);
}

/* Feedback de copie (.copy-success ajoutée par JS) */
.copy-success {
    background: color-mix(in srgb, var(--success) 15%, var(--bg-elevated)) !important;
    border-color: var(--success) !important;
    color: var(--success) !important;
}

/* ==========================================================
   20. A11y (focus-visible, reduced-motion)
   ========================================================== */
*:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: none; /* on a déjà le box-shadow custom */
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================
   21. Mobile (responsive)
   ========================================================== */
@media (max-width: 720px) {
    .site-header {
        padding: 0.5rem 0.75rem;
    }
    .brand-mark {
        width: 26px;
        height: 26px;
        font-size: 0.85rem;
    }
    .nav-username {
        display: none; /* gain de place */
    }
    .lang-btn {
        padding: 0.2rem 0.45rem;
        font-size: 0.7rem;
    }
    .theme-btn {
        width: 28px;
        height: 28px;
    }
    .tool-tile {
        padding: 0.75rem 0.85rem;
    }
}

/* ==========================================================
   22. Print
   ========================================================== */
@media print {
    .site-header,
    .site-footer,
    .catalog-search,
    button,
    .btn,
    .nav-controls {
        display: none !important;
    }
    .tool-tile {
        break-inside: avoid;
        border: 1px solid #ccc !important;
    }
    a { color: #000 !important; text-decoration: underline !important; }
}

/* =====================================================================
   Polish #3 : Hero plus impactant (shine au chargement)
   ===================================================================== */
.hero {
    position: relative;
    overflow: hidden;
}
.hero h1 {
    position: relative;
    display: inline-block;
}
/* Effet shine : un gradient qui balaie le titre une fois au chargement */
.hero h1::after {
    content: '';
    position: absolute;
    top: 0;
    left: -50%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.3) 50%,
        transparent 100%
    );
    transform: skewX(-20deg);
    animation: heroShine 2s var(--ease-out) 0.5s 1 forwards;
    pointer-events: none;
    mix-blend-mode: overlay;
}
@keyframes heroShine {
    0%   { left: -50%; opacity: 0; }
    20%  { opacity: 1; }
    100% { left: 150%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .hero h1::after {
        display: none;
    }
}

/* =====================================================================
   Polish #7 : Bouton "Retour" visible sur les pages d'outils
   ===================================================================== */
.tool-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}
.tool-header-content {
    flex: 1;
    min-width: 0;
}
.tool-back-button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 500;
    flex-shrink: 0;
    transition: all var(--dur-base) var(--ease-out);
    margin-top: 0.2rem;
}
.tool-back-button:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, var(--bg-elevated));
    transform: translateX(-2px);
}
.tool-back-arrow {
    font-size: 0.95rem;
    line-height: 1;
    transition: transform var(--dur-base) var(--ease-out);
}
.tool-back-button:hover .tool-back-arrow {
    transform: translateX(-2px);
}

/* Mobile : juste la flèche pour gagner de la place */
@media (max-width: 720px) {
    .tool-header {
        gap: 0.6rem;
    }
    .tool-back-button {
        padding: 0.4rem 0.6rem;
    }
    .tool-back-label {
        display: none;
    }
}

/* =====================================================================
   Word generator (catégorie misc)
   ===================================================================== */
.wg-warning-text { color: var(--warning); }

/* Tabs langue (FR/EN) */
.wg-lang-tabs {
    display: flex;
    gap: 0.4rem;
}
.wg-lang-tab {
    flex: 1;
    cursor: pointer;
    user-select: none;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.55rem 0.85rem;
    text-align: center;
    transition: all var(--dur-base) var(--ease-out);
}
.wg-lang-tab:hover {
    border-color: var(--cat-misc);
    color: var(--cat-misc);
}
.wg-lang-tab input[type="radio"] {
    display: none;
}
.wg-lang-tab:has(input:checked) {
    background: var(--cat-misc-bg);
    border-color: var(--cat-misc);
    color: var(--cat-misc);
    box-shadow: 0 0 12px var(--cat-misc-glow);
}

/* Sliders custom */
.wg-creativity-slider {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 999px;
    background: var(--border);
    outline: none;
    margin: 0.6rem 0;
    transition: background var(--dur-base) var(--ease-out);
}
.wg-creativity-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--cat-misc);
    cursor: pointer;
    border: 2px solid var(--bg-elevated);
    box-shadow: 0 0 8px var(--cat-misc-glow);
    transition: transform var(--dur-base) var(--ease-out);
}
.wg-creativity-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}
.wg-creativity-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--cat-misc);
    cursor: pointer;
    border: 2px solid var(--bg-elevated);
    box-shadow: 0 0 8px var(--cat-misc-glow);
}
.wg-creativity-slider:hover {
    background: color-mix(in srgb, var(--cat-misc) 25%, var(--border));
}

/* Options row */
.wg-options-row {
    display: flex;
    gap: 1.2rem;
    flex-wrap: wrap;
    padding: 0.85rem 1rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

/* Bouton large pour générer */
.btn-large {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    width: 100%;
    background: var(--cat-misc);
    border-color: var(--cat-misc);
    color: var(--bg);
}
.btn-large:hover:not(:disabled) {
    box-shadow: var(--shadow-sm),
                0 0 24px var(--cat-misc-glow);
}

/* Bloc résultats */
.wg-results-block {
    margin-top: 1.4rem;
    background: var(--bg-elevated);
    background-image: var(--grad-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    animation: revealResults var(--dur-slow) var(--ease-out);
}
.wg-hidden { display: none !important; }

@keyframes revealResults {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.wg-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.1rem;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    gap: 0.6rem;
}
.wg-results-title {
    margin: 0;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

/* Liste de mots générés : grid responsive */
.wg-words-list {
    list-style: none;
    margin: 0;
    padding: 0.85rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.5rem;
}

.wg-word-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.85rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: all var(--dur-base) var(--ease-out);
    animation: wgWordPop var(--dur-base) var(--ease-out) both;
}
.wg-word-item:hover {
    border-color: var(--cat-misc);
    box-shadow: 0 0 12px var(--cat-misc-glow);
    transform: translateY(-1px);
}

@keyframes wgWordPop {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
}

.wg-word-text {
    font-family: var(--mono);
    font-size: 1rem;
    font-weight: 500;
    color: var(--cat-misc);
    flex: 1;
    cursor: text;
    user-select: text;
}

.wg-word-actions {
    display: flex;
    gap: 0.3rem;
    align-items: center;
}

.wg-word-action {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem 0.4rem;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1;
    transition: all var(--dur-fast) var(--ease-out);
}
.wg-word-action:hover {
    background: var(--bg-hover);
    color: var(--cat-misc);
    transform: scale(1.1);
}

/* Stagger animation pour les mots */
.wg-word-item:nth-child(1)  { animation-delay: 0ms; }
.wg-word-item:nth-child(2)  { animation-delay: 30ms; }
.wg-word-item:nth-child(3)  { animation-delay: 60ms; }
.wg-word-item:nth-child(4)  { animation-delay: 90ms; }
.wg-word-item:nth-child(5)  { animation-delay: 120ms; }
.wg-word-item:nth-child(6)  { animation-delay: 150ms; }
.wg-word-item:nth-child(7)  { animation-delay: 180ms; }
.wg-word-item:nth-child(8)  { animation-delay: 210ms; }
.wg-word-item:nth-child(9)  { animation-delay: 240ms; }
.wg-word-item:nth-child(10) { animation-delay: 270ms; }
.wg-word-item:nth-child(n+11) { animation-delay: 300ms; }

/* Mobile */
@media (max-width: 720px) {
    .wg-lang-tabs {
        flex-direction: column;
    }
    .wg-options-row {
        flex-direction: column;
        gap: 0.5rem;
    }
    .wg-words-list {
        grid-template-columns: 1fr;
    }
}