.domain-group-na {
    background: rgb(255 0 0 / 10%)
    padding: 0.8rem;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.domain-group-nv {
    background: rgb(255 139 0 / 10%)
    padding: 0.8rem;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.interval-select {
  appearance: none;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 10px 40px 10px 15px;
  font-size: 16px;
  border-radius: 8px;
  background-image: url('data:image/svg+xml;utf8,<svg fill="gray" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 20px;
  cursor: pointer;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.interval-select:hover {
  border-color: #999;
}

.interval-select:focus {
  outline: none;
  border-color: #666;
  box-shadow: 0 0 5px rgba(100, 100, 100, 0.5);
}

:root {
            --primary: #0b5cd5;
            --secondary: #08429b;
            --accent: #166534;
            --error: #991b1b;
            --background: #f3f4f6;
            --card-bg: rgba(255, 255, 255, 0.95);
            --sidebar-bg: rgba(30, 41, 59, 0.95);
            --text: #111827;
            /* Textes secondaires et tertiaires. Mesures :
               5.12:1 et 4.64:1 sur la toile claire. */
            --text-2: #5b6875;
            --text-3: #616e7d;
            --entry-color: #9a4a06; /* Upload */
            --exit-color: #08429b; /* Download */
            --gold-dark: #8a6100;
    /* Surfaces teintées, de survol et de voile.
     *
     * Ces huit jetons existent parce que les pages en avaient besoin
     * et n'avaient que des valeurs codées en dur, toutes claires. Le
     * texte passait par un jeton qui bascule, le fond non : en mode
     * sombre, --error devenait #f9645d sur un #fee2e2 resté en place,
     * à 2.45:1.
     *
     * Un fond d'erreur n'est pas un fond de survol. Les confondre
     * donnerait des encadrés gris ou des survols rouges : l'opérateur
     * perdrait la distinction que la couleur porte.
     *
     * Chaque paire a été relevée par no_synch\_test_contraste_peint.php.
     */
    --nf-teinte-ok: #dcfce7;
    --nf-teinte-info: #dbeafe;
    --nf-teinte-erreur: #fee2e2;
    --nf-teinte-attention: #fef3c7;
    --nf-survol: #e5e7eb;
    --nf-voile: #ffffff;
    /* Les surfaces et les bordures de la charte, cote clair.
     *
     * soc_theme.css porte ces deux jetons pour le mode sombre, et sa
     * variante claire en porte d'autres. La charte n'est chargée
     * qu'en mode sombre : sans ces deux lignes, un var(--nf-surface-2)
     * posé dans une page était valide en mode sombre et sans effet en
     * mode clair. Aucune erreur, aucun avertissement : la declaration
     * devenait invalide et le fond n'était pas posé.
     *
     * Les valeurs sont celles de [data-nf-theme="clair"], à
     * l'identique, pour que le rendu ne dépende pas de l'ordre de
     * chargement des deux feuilles.
     */
    --nf-surface: #ffffff;
    --nf-surface-2: #f2f5f8;
    --nf-surface-3: #e9eef3;
    --nf-border: #d3dae1;
    --nf-border-fort: #b6c1cc;

    /* Jetons de la charte utilises par les pages, mais declares par
     * soc_theme.css — feuille liee uniquement en mode sombre.
     *
     * Sans ces lignes, un var(--nf-texte-2) ou un var(--nf-critique)
     * pose en mode clair devenait invalide : la declaration entiere
     * s'effaçait, sans erreur ni avertissement. C'est ainsi que les
     * libelles de parametres.php (contraste 1.18:1) et la legende du
     * tableau de bord etaient devenus illisibles.
     *
     * Valeurs identiques a [data-nf-theme="clair"] de soc_theme.css,
     * pour que le rendu ne depende pas de l'ordre de chargement.
     */
    --nf-texte: #1f2933;
    --nf-texte-2: #52606d;
    --nf-texte-3: #6b7a89;
    --nf-warn: #8a6100;
    --nf-critique: #991b1b;
    --nf-fond: #f6f8fa;

    /* Les couleurs semantiques de la charte, cote clair. Meme
     * raison que ci-dessus : soc_theme.css est lie uniquement en
     * mode sombre, donc un var(--nf-accent) ou un var(--nf-ok) pose
     * par une page etait invalide en mode clair — la declaration
     * entiere s'effacait, sans erreur. soc_ui.css (les pages
     * Securite/SOC) s'appuie sur tous ces jetons dans les deux modes.
     *
     * Valeurs identiques a [data-nf-theme="clair"] de soc_theme.css. */
    --nf-accent: #0b5cd5;
    --nf-accent-fort: #08429b;
    --nf-ok: #166534;
    --nf-info: #0b5cd5;
    --nf-alerte: #9a4a06;
    --nf-inconnu: #6b7a89;

    /* L'echelle de la charte — tailles, rythme d'espacement, rayon
     * et police. Ces valeurs ne dependent pas du mode (elles sont
     * les memes des deux cotes de soc_theme.css), mais elles n'etaient
     * declarees QUE dans cette feuille-liee en sombre. Traduites ici,
     * un var(--nf-titre-1) ou un var(--nf-espace-4) est valide partout.
     * Valeurs identiques a celles de soc_theme.css. */
    --nf-titre-1: 1.75rem;
    --nf-titre-2: 1.30rem;
    --nf-titre-3: 1.05rem;
    --nf-corps: 0.95rem;
    --nf-second: 0.85rem;
    --nf-petit: 0.78rem;
    --nf-espace-1: 0.25rem;
    --nf-espace-2: 0.5rem;
    --nf-espace-3: 0.75rem;
    --nf-espace-4: 1rem;
    --nf-espace-5: 1.5rem;
    --nf-espace-6: 2rem;
    --nf-rayon: 8px;
    --nf-police: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Alias utilises par les pages de gestion (parametres.php),
     * jusqu'ici declares nulle part : --danger et --warn n'avaient
     * aucune source, donc aucune bordure. */
    --danger: #991b1b;
    --warn: #8a6100;


    /* Les deux bornes du degrade de la carte « la plus active ».
     *
     * Un degrade n'est pas une couleur : le remplacer par une teinte
     * unie effacerait ce qu'il dit. Il a deux bornes, donc deux
     * jetons, et quatre valeurs.
     *
     * La borne claire a ete cherchee, pas choisie. Assombrir le bleu
     * rendait le titre or encore moins lisible : #6fd6f9 tombe a
     * 3.34:1. Il fallait l'eclaircir. #ddf0fe est la plus coloree qui
     * garde le titre au-dessus du seuil, avec une marge.
     */    --nf-degrade-debut: #ddf0fe;
    --nf-degrade-fin: #FFF8DC;
    /* Le role ' infobulle ' : une surface qui flotte au-dessus d'une
     * carte, sans fond connu, et doit rester lisible sur tout.
     *
     * Cette infobulle empruntait --sidebar-bg, le fond de la barre.
     * Tant que --nf-surface-2 n'existait pas en mode clair, le repli
     * de sidebar.css s'appliquait : rgba(30, 41, 59, 0.95). Elle
     * était donc sombre en mode clair, et le texte blanc y était 
     * 15.48:1.
     *
     * En déclarant --nf-surface-2 dans style.css, ce fond est devenu
     * clair : #f2f5f8. Le texte blanc est tombé à 1.09:1. Une
     * infobulle est devenue illisible en corrigeant autre chose.
     *
     * Un jeton de barre ne convient à ce rôle dans aucun mode : en
     * mode clair la barre est claire, et une infobulle claire à texte
     * blanc n'est pas une infobulle. Deux jetons, un par mode.
     */
    --nf-infobulle-fond: #1f2933;
    --nf-infobulle-texte: #ffffff;
    --nf-infobulle-bord: #3d4b5c;
    --nf-entete-texte: #dbeafe;
    --nf-entete-texte-survol: #ffffff;

            --gold-bg: #FFF8DC;
            /* Texte pose sur un fond --primary, --accent ou
               --error. Clair en mode clair, sombre en mode
               sombre : ces trois couleurs s eclaircissent quand
               le fond s assombrit, et un texte blanc pose sur
               elles devient illisible. Voir _test_sur_clair. */
            --sur-clair: #ffffff;
            /* Texte pose sur un fond --primary, --accent ou
               --error. Clair en mode clair, sombre en mode
               sombre : ces trois couleurs s eclaircissent quand
               le fond s assombrit, et un texte blanc pose sur
               elles devient illisible. Voir _test_sur_clair. */
            --sur-clair: #ffffff;
            /* ─── Severites des pages du groupe Securite ───────────────
             *
             * Ces quinze jetons existaient, mais en ligne : chacune des
             * pages SOC posait son propre :root dans sa feuille
             * <style>. Or ces feuilles sont chargees APRES
             * soc_theme.css, qui n'est relie qu'en mode sombre — un
             * :root en ligne le supplantait donc toujours, et le mode
             * sombre conservait des teintes choisies pour un fond
             * blanc. Les voici deplacees ici (clair) et dans
             * soc_theme.css (sombre), pour que chaque mode declare les
             * siennes et que l'ordre de chargement cesse de decider de
             * l'apparence.
             *
             * Quatre familles, quatre prefixes, les memes couleurs :
             * mt- pour menaces, ma- pour l'analyse avancee, soc- pour
             * le centre SOC, alr- pour les alertes et flx- pour le flux.
             * Un nom generique tel que --info serait pris par la
             * premiere page chargee et reutilise par toutes les
             * autres ; c'est le prix a payer pour des pages qui
             * portent chacune leur feuille en ligne.
             *
             * Les couleurs sont celles qui etaient ecrites dans les
             * quatre pages : aucun changement de rendu en mode clair.
             */
            --soc-critique: #c62d21;
            --soc-eleve:    #ea580c;
            --soc-moyen:    #b45309;
            --soc-faible:   #0891b2;
            --soc-info:     #64748b;
            --soc-ok:       #059669;

            --mt-ok:   #059669;
            --mt-warn: #b45309;
            --mt-err:  #c62d21;
            /* Gris ardoise : ni bon ni mauvais. Reserve au trafic
               interne, qui est une information et non un verdict. */
            --mt-info: #475569;
            --mt-bord: rgba(0, 0, 0, 0.08);

            --ma-ok:   #059669;
            --ma-warn: #b45309;
            --ma-err:  #c62d21;
            --ma-info: #475569;
            --ma-bord: rgba(0, 0, 0, 0.08);

            --alr-ok:   #059669;
            --alr-ko:   #dc2626;
            --alr-info: #64748b;

            --flx-ok:   #059669;
            --flx-ko:   #dc2626;
            --flx-note: #b45309;
            --flx-info: #64748b;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Segoe UI', Arial, sans-serif; background: var(--background); min-height: 100vh; color: var(--text); }
        .container { display: flex; min-height: 100vh; }.content { padding: 1.5rem; flex-grow: 1; transition: margin-left 0.3s ease; } 
        h2 { font-size: 1.8rem; font-weight: 700; margin-bottom: 1rem; display: flex; align-items: center; color: var(--primary); }
        h2 i { margin-right: 0.75rem; font-size: 2rem; color: var(--accent); transition: transform 0.3s ease; }
        h2:hover i { transform: rotate(15deg); }
        .legend {
            display: flex; gap: 1.5rem; justify-content: center; margin-bottom: 1rem; font-size: 0.95rem;
            background: var(--card-bg); padding: 0.5rem; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            flex-wrap: wrap;
        }
        .legend span { display: flex; align-items: center; gap: 0.5rem; }
        .most-active {
            background: linear-gradient(135deg, var(--nf-degrade-debut) 0%, var(--nf-degrade-fin) 100%);
            
            border-radius: 12px;
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
            padding: 1.5rem;
            margin-bottom: 1.5rem;
            text-align: center;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        .most-active:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }
        .most-active::before {
            content: '\f091';
            font-family: 'Font Awesome 6 Free';
            font-weight: 900;
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 2rem;
            color: var(--gold-dark);
            opacity: 0.2;
            transition: opacity 0.3s ease;
        }
        .most-active:hover::before {
            opacity: 0.4;
        }
        .most-active h3 {
            font-size: 1.3rem;
            color: var(--gold-dark);
            margin-bottom: 0.75rem;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }
        .most-active h3 i {
            color: var(--gold-dark);
            font-size: 1.5rem;
        }
        .most-active p {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--text);
        }
        .most-active p span {
            color: var(--error);
            font-weight: 700;
        }
        .chart-container {
            background: var(--card-bg);
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            padding: 1.5rem;
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
        }
        .chart-container canvas {
            width: 100% !important;
            max-height: 450px;
        }
        @media (max-width: 768px) {
            .content { margin-left: 0; padding: 1rem; }
            .legend { font-size: 0.85rem; gap: 1rem; }
            .most-active { padding: 1rem; }
            .most-active h3 { font-size: 1.1rem; }
            .most-active h3 i { font-size: 1.3rem; }
            .most-active p { font-size: 1rem; }
            .most-active::before { font-size: 1.5rem; }
            .chart-container { padding: 1rem; max-width: 100%; }
            .chart-container canvas { max-height: 350px; }
        }
        @media (max-width: 480px) {
            h2 { font-size: 1.5rem; }
            h2 i { font-size: 1.8rem; }
            .legend { font-size: 0.8rem; gap: 0.75rem; }
            .most-active h3 { font-size: 1rem; }
            .most-active p { font-size: 0.9rem; }
            .most-active::before { font-size: 1.2rem; }
            .chart-container canvas { max-height: 280px; }
        }