flotte par-dessus le canvas grâce au z-index. pointer-events: none sur le conteneur — on ne veut pas bloquer les clics sur le canvas Three.js en dessous. Les étiquettes individuelles réactivent pointer-events. ===================================================== */ #ui { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; /* par-dessus le canvas */ pointer-events: none; /* laisse passer les clics vers Three.js */ } /* ===================================================== BLOC 5 — ÉTIQUETTES (.label) Chaque sphère 3D a une étiquette texte correspondante. Le JS va déplacer ces étiquettes en temps réel pour les garder alignées avec leur sphère. "position: absolute" est obligatoire ici pour que le JS puisse les positionner via label.style.left / .top. ===================================================== */ .label { position: absolute; /* positionnée par le JS */ transform: translate(-50%, -50%); /* translate(-50%, -50%) centre l'étiquette sur le point que le JS calcule. Sans ça, le coin haut-gauche du texte serait sur la sphère, pas son centre. */ padding: 6px 16px; /* border-radius: 999px; forme pilule */ font-family: var(--police); font-size: 14px; font-weight: 400; letter-spacing: 0.02em; white-space: nowrap; /* pas de retour à la ligne */ cursor: pointer; pointer-events: none; /* désactivé par défaut — réactivé uniquement quand visible */ /* Apparition / disparition fluide */ opacity: 0; transition: opacity var(--vitesse) ease, transform var(--vitesse) ease, /* background var(--vitesse) ease; */ /* État caché par défaut — le JS gère la visibilité */ /* user-select: none;*/ } /* Étiquette visible (classe ajoutée par le JS) */ .label.visible { opacity: 1; pointer-events: auto; } /* Légère mise à l'échelle au survol */ .label:hover { transform: translate(-50%, -50%) scale(1.08); } /* ===================================================== BLOC 6 — STYLES PAR NIVEAU DE NOEUD Chaque niveau a ses propres couleurs et tailles. ===================================================== */ /* Noeud racine — Simon Duchesne */ .label.root { font-size: 22px; font-weight: 500; color: var(--couleur-racine); background: rgba(255, 255, 255, 0.08); /* border: 1px solid rgba(255, 255, 255, 0.2);*/ padding: 10px 28px; letter-spacing: 0.05em; } .label.root:hover { background: rgba(255, 255, 255, 0.14); } /* Noeuds enfants — CV, Hobbies, Liens */ .label.child { font-size: 15px; font-weight: 400; color: var(--couleur-enfant); background: rgba(167, 139, 250, 0.1); border: 1px solid rgba(167, 139, 250, 0.3); } .label.child:hover { background: rgba(167, 139, 250, 0.2); } /* Noeuds petits-enfants — Expériences, Voyage, etc. */ .label.grandchild { font-size: 13px; font-weight: 300; color: var(--couleur-grandenfant); background: rgba(148, 163, 184, 0.07); border: 1px solid rgba(148, 163, 184, 0.2); } .label.grandchild:hover { background: rgba(148, 163, 184, 0.15); color: var(--couleur-texte); } /* Noeuds avec panel texte — couleur bleue */ .label.panel-node { color: #60a5fa; background: rgba(96, 165, 250, 0.08); border: 1px solid rgba(96, 165, 250, 0.3); } .label.panel-node:hover { background: rgba(96, 165, 250, 0.18); } /* Noeuds liens — Instagram ↗, LinkedIn ↗, GitHub ↗ */ .label.link { color: var(--couleur-lien); background: rgba(52, 211, 153, 0.08); border: 1px solid rgba(52, 211, 153, 0.3); } .label.link:hover { background: rgba(52, 211, 153, 0.18); } /* ===================================================== BLOC 7 — PANEL EXPLICATIF Glisse depuis la droite. Caché par défaut (translateX 100%). La classe .open le fait apparaître. ===================================================== */ #panel { position: fixed; top: 0; right: 0; width: min(420px, 90vw); height: 100%; background: rgba(10, 10, 20, 0.92); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-left: 1px solid rgba(167, 139, 250, 0.18); z-index: 30; padding: 48px 36px 48px 40px; box-sizing: border-box; transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); overflow-y: auto; pointer-events: none; } #panel.open { transform: translateX(0); pointer-events: auto; } #panel-close { position: absolute; top: 20px; right: 20px; background: transparent; border: none; color: rgba(241, 245, 249, 0.4); font-size: 18px; cursor: pointer; line-height: 1; padding: 4px 8px; transition: color var(--vitesse) ease; } #panel-close:hover { color: var(--couleur-texte); } #panel-title { font-size: 20px; font-weight: 500; color: var(--couleur-texte); margin-bottom: 20px; letter-spacing: 0.02em; } #panel-body { font-size: 14px; font-weight: 300; color: rgba(241, 245, 249, 0.7); line-height: 1.75; } #panel-body p { margin-bottom: 14px; } #panel-body p:last-child { margin-bottom: 0; } /* ===================================================== BLOC 8 — HINT (message d'aide discret) Petit texte en bas de page qui disparaît après quelques secondes (géré en CSS pur). ===================================================== */ #hint { position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%); font-size: 12px; color: rgba(241, 245, 249, 0.3); letter-spacing: 0.08em; z-index: 20; pointer-events: none; /* Animation de disparition après 4s */ animation: fadeout 1s ease 4s forwards; } @keyframes fadeout { to { opacity: 0; } } /* ===================================================== BLOC 8 — RESPONSIVE MOBILE Sur petits écrans, on réduit légèrement les tailles de texte pour éviter que les étiquettes se chevauchent. @media : "si la largeur est inférieure à 600px, alors..." ===================================================== */ @media (max-width: 600px) { .label.root { font-size: 17px; padding: 8px 20px; } .label.child { font-size: 13px; } .label.grandchild { font-size: 11px; } }