/* Schema "plaque tournante" : Cyril au centre, les equipes en orbite, les echanges passent par lui.
 * Rendu 2D en SVG et HTML, sans bibliotheque. Couleurs reprises de styles.css. */
.hub-diagram { background:#fbfaf7; }
.hub-layout { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:48px; align-items:start; margin-top:14px; }

/* Scene */
.hub-stage { position:relative; width:100%; max-width:560px; aspect-ratio:1; margin-inline:auto; isolation:isolate; visibility:hidden; }
.hub-stage.is-ready { visibility:visible; }
.hub-lines { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.hub-ring { fill:none; stroke:#d3d6dd; stroke-width:1; }
.hub-gear { fill:none; stroke:var(--blue); stroke-opacity:.4; stroke-width:1.5; stroke-linecap:round; stroke-dasharray:1 9; }
.hub-spoke { stroke:#c3c8d3; stroke-width:1.5; transition:stroke .3s; }
.hub-spoke.is-active { stroke:#9aa7e4; }
.hub-pulse { fill:var(--blue); }
.hub-trail { stroke:var(--blue); stroke-width:2; stroke-linecap:round; stroke-opacity:.35; }
.hub-ripple { fill:none; stroke:var(--blue); stroke-width:1.5; }
.hub-sat-ring { fill:none; stroke:#9aa7e4; stroke-width:1; }
.hub-sat { fill:var(--blue); }

/* Centre : le portrait */
.hub-center { position:absolute; top:50%; left:50%; z-index:3; width:calc(var(--hub-center,80px)*2); height:calc(var(--hub-center,80px)*2); transform:translate(-50%,-50%); }
.hub-center img { display:block; width:100%; height:100%; border-radius:50%; object-fit:cover; box-shadow:0 0 0 4px #fff,0 12px 30px #202a4426; }
.hub-center-label { position:absolute; bottom:-9px; left:50%; transform:translateX(-50%); padding:5px 13px; border-radius:999px; background:var(--ink); color:#fff; font-size:15px; font-weight:500; line-height:1.25; white-space:nowrap; box-shadow:0 0 0 3px #fff; }

/* Equipes en orbite : le texte reste droit et ne se deforme jamais */
.hub-node { position:absolute; top:0; left:0; z-index:4; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; width:calc(var(--hub-node,66px)*2); height:calc(var(--hub-node,66px)*2); border:1px solid #cdd2dc; border-radius:50%; background:#fff; color:var(--ink); text-align:center; cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent; box-shadow:0 8px 22px #202a4414; will-change:transform; }
.hub-node strong { font-size:16px; font-weight:500; line-height:1.2; letter-spacing:-.01em; }
.hub-node-plus { color:var(--blue); font-size:17px; line-height:1; }
.hub-node.is-hot { border-color:var(--blue); box-shadow:0 0 0 4px var(--blue-light),0 8px 22px #202a4414; }
.hub-node.is-selected { border-color:var(--ink); background:var(--ink); color:#fff; }
.hub-node.is-selected .hub-node-plus { color:#fff; }
.hub-stage.has-selection .hub-node:not(.is-selected) { color:#7c8497; box-shadow:none; }
.hub-stage.has-selection .hub-node:not(.is-selected):not(.is-hot) .hub-node-plus { color:#7c8497; }
.hub-stage.has-selection .hub-node.is-hot { color:var(--ink); box-shadow:0 0 0 4px var(--blue-light); }
.hub-stage.has-selection .hub-spoke:not(.is-chosen) { stroke-opacity:.35; }

/* Panneau de detail, toujours lisible et utilisable au clavier */
.hub-panel { padding-top:30px; }
.hub-hint { margin:0; color:#526077; font-size:14px; line-height:1.5; }
.hub-hint > span { display:inline-block; margin-left:5px; color:var(--blue); }
.hub-role { margin:8px 0 20px; color:var(--ink); font-size:16px; line-height:1.5; }
.hub-team { border-top:1px solid var(--line); scroll-margin-top:90px; }
.hub-team:last-of-type { border-bottom:1px solid var(--line); }
.hub-toggle { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:2px 12px; width:100%; min-height:68px; padding:12px 4px; border:0; background:none; color:var(--ink); font:inherit; text-align:left; cursor:pointer; }
.hub-toggle strong { font-size:17px; font-weight:500; line-height:1.3; }
.hub-toggle > span:not(.hub-toggle-plus) { grid-column:1; color:#596579; font-size:14px; line-height:1.4; }
.hub-toggle-plus { grid-column:2; grid-row:1 / span 2; display:grid; place-items:center; width:30px; height:30px; border:1px solid #c6ccd8; border-radius:50%; color:var(--blue); font-size:18px; line-height:1; }
.hub-toggle:hover strong,.hub-toggle.is-hot strong { color:var(--blue); }
.hub-toggle:hover .hub-toggle-plus,.hub-toggle.is-hot .hub-toggle-plus { border-color:var(--blue); background:var(--blue-light); }
.hub-toggle:focus-visible { outline:3px solid var(--blue); outline-offset:2px; }
.hub-team.is-open .hub-toggle-plus { border-color:var(--ink); background:var(--ink); color:#fff; }
.hub-team-body { display:grid; grid-template-rows:0fr; visibility:hidden; }
.hub-team.is-open .hub-team-body { grid-template-rows:1fr; visibility:visible; }
.hub-team-body > ul { min-height:0; margin:0; padding:0; overflow:hidden; list-style:none; }
.hub-team-body li { position:relative; padding:0 4px 13px 20px; }
.hub-team-body li::before { content:''; position:absolute; top:8px; left:5px; width:7px; height:7px; border-radius:50%; background:var(--blue); }
.hub-team-body strong { display:block; font-size:15px; font-weight:500; line-height:1.4; }
.hub-team-body li span { display:block; color:#596579; font-size:14px; line-height:1.4; }
.hub-diagram .orbit-context { margin-top:14px; text-align:left; }

/* Revue de page : experience, resultats des projets, copie de l'adresse */
.hero-role > .hero-experience { color:var(--ink); font-weight:500; }
.projects-section .project-main .project-role.project-result { margin-top:14px; padding-top:0; border-top:0; }
.projects-section .project-role.project-result > strong { color:var(--blue); }
.contact-copy { display:inline-flex; align-items:center; min-height:44px; margin-top:14px; padding:8px 16px; border:1px solid #8e97ad; border-radius:22px; background:none; color:#fff; font:inherit; font-size:15px; cursor:pointer; }
.contact-copy[hidden] { display:none; }
.contact-copy:hover { border-color:#b9c5ff; color:#b9c5ff; }
.contact-copy:focus-visible { outline:3px solid #b9c5ff; outline-offset:3px; }
.contact-copy-status { min-height:22px; margin:8px 0 0; color:#d5daf0; font-size:14px; line-height:1.5; }
.expertise-diagram .diagram-workspace { padding-bottom:4px; }

@media (prefers-reduced-motion:no-preference) {
 .hub-node { transition:background-color .3s,color .3s,border-color .3s,box-shadow .3s,opacity .3s; }
 .hub-team-body { transition:grid-template-rows .35s ease,visibility .35s; }
}
@media (max-width:860px) {
 .hub-layout { grid-template-columns:minmax(0,1fr); gap:18px; }
 .hub-stage { max-width:480px; }
 .hub-panel { padding-top:0; }
}
@media (max-width:700px) {
 /* Le chiffre "2 000+" passe au-dessus de sa legende pour ne pas la chevaucher */
 .projects-section .project-detail:not(.project-detail-text) { grid-template-columns:minmax(0,1fr); }
 .projects-section .project-detail:not(.project-detail-text) > p { margin-top:8px; }
}
@media (max-width:560px) {
 .hub-center-label { padding:4px 10px; font-size:13px; }
 .hub-node strong { font-size:13px; }
 .hub-node-plus { font-size:15px; }
}
@media (max-width:360px) {
 .hub-center-label { padding:3px 8px; font-size:12px; }
 .hub-node strong { font-size:12.5px; }
}