/* --- style.css --- */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #0a0a0c; /* Noir profond */
    font-family: 'Montserrat', sans-serif;
}

#graph-container {
    width: 100vw;
    height: 100vh;
}

/* Arêtes blanches pour ressortir */
.link {
    stroke: #ffffff;      /* Couleur blanche pure */
    stroke-opacity: 0.8;  /* Opacité élevée pour une meilleure visibilité */
    stroke-width: 2px;    /* Épaisseur légèrement augmentée */
}

.node {
    cursor: pointer;
}

/* Style des cercles (rempli par le GIF) */
.node circle {
    stroke-width: 2px;
    transition: transform 0.3s ease, stroke 0.3s;
    filter: none; /* Retirer les anciens filtres de lueur de couleur */
}

/* Contours neutres pour le centre et les enfants */
.node-root circle { stroke: #00d4ff; } /* Un contour cyan subtil pour le centre */
.node-child circle { stroke: #ff007a; } /* Un contour rose subtil pour les enfants */

/* Effet au survol */
.node:hover circle {
    transform: scale(1.1);
    stroke: #ffffff;
}

/* Texte : Montserrat, gras, grand et détouré pour lisibilité maximum */
.node text {
    fill: #ffffff;
    font-size: 14px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    pointer-events: none;
    text-anchor: middle;
    alignment-baseline: middle;
    /* Effet de détourage pour lisibilité maximale */
    text-shadow: 0px 0px 10px rgba(0,0,0,1), 
                 0px 0px 5px rgba(0,0,0,1),
                 2px 2px 2px rgba(0,0,0,0.8);
}

.node-root text {
    font-size: 18px;
}