.cnx{--moi:var(--color-orange);--g:var(--tq);--d:var(--color-bleu)}
.cnx-cdi{color:var(--color-orange)}
.cnx-jumpo{color:var(--color-rouge)}

#cnx-plaque path,#cnx-plaque circle{vector-effect:non-scaling-stroke}
.cnx-grille{fill:var(--color-txt-secondary);fill-opacity:.16}
.cnx-onde{stroke:var(--color-primary);stroke-opacity:.35;stroke-dasharray:2 6;opacity:0}
.cnx-sorties,.cnx-futurs{stroke:var(--color-txt-secondary);stroke-opacity:.5;stroke-dasharray:2 4;animation:fh-derive 7s linear infinite}
.cnx-rayons{stroke:var(--color-txt-secondary);stroke-opacity:.26}
.cnx-arcs path{stroke:var(--color-primary);stroke-opacity:.42;transition:stroke-opacity 1.2s}
.cnx-arcs .is-vif{stroke-opacity:.95;transition-duration:.3s}
.cnx-indiv{fill:var(--color-primary);fill-opacity:.8}
.cnx-hub circle{fill:var(--background-color);stroke:var(--color-primary);transition:stroke .4s,fill .4s}
.cnx-hub .o{fill:none;stroke-opacity:.4}
.cnx-hub .c{fill:var(--color-primary);stroke:none}
.cnx-hub.is-actif circle:first-child{stroke:var(--color-orange)}
.cnx-hub.is-actif .c{fill:var(--color-orange)}
.cnx-pouls{fill:var(--color-orange);opacity:0}
.js-motion .cnx-reseau{opacity:0}
.js-motion .cnx-grille{animation:cnx-voile 1s ease both}
.js-motion .cnx-arcs{animation:cnx-renforce 1.2s ease .7s both}
@keyframes cnx-voile{from{opacity:0}}
@keyframes cnx-renforce{from{opacity:.2}}

.cnx-fiche{stroke:var(--color-txt-secondary);stroke-opacity:.5}
.cnx-fiche-pts,.cnx-curseur{stroke:var(--color-txt-secondary)}
.cnx-defile{stroke:var(--color-hairline-soft)}
.cnx-flux{stroke:var(--color-orange);stroke-opacity:.8;stroke-dasharray:2 4;animation:fh-derive 7s linear infinite}
.cnx-noeuds{fill:var(--background-color);stroke:var(--color-primary)}
.cnx-coeur{fill:var(--color-primary)}

.cnx-echelles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.cnx-echelles li{--pas:48px;border-top:var(--trait) solid var(--color-hairline)}
.cnx-echelles li::before{content:"";position:absolute;left:0;right:0;top:0;height:7px;background:repeating-linear-gradient(90deg,var(--color-hairline) 0 1px,transparent 1px var(--pas))}
.cnx-echelles li::after{content:"";position:absolute;left:0;top:-6px;width:1px;height:13px;background:var(--color-primary)}
.cnx-echelles li:nth-child(2){--pas:24px}
.cnx-echelles li:nth-child(3){--pas:12px}
.cnx-echelles li:nth-child(4){--pas:6px}
.cnx-echelles li:nth-child(5){--pas:3px}
.cnx-echelles .fh-glyphe{width:4.5rem;height:4.5rem}

.cnx-perimetres{stroke:var(--color-hairline)}
.cnx-int{stroke:var(--color-primary);stroke-opacity:.55}
.cnx-membres{fill:var(--color-primary);stroke:none}
.cnx-dirigeants,.cnx-cdi-ports,.cnx-multi,.cnx-i-hubs,.cnx-i-interfaces{fill:var(--background-color)}
.cnx-dirigeants,.cnx-cdi-anneau,.cnx-cdi-ports,.cnx-cdi-raccords,.cnx-i-attaches{stroke:var(--color-orange)}
.cnx-cdi-int,.cnx-cdi-cordes{stroke:var(--color-orange);stroke-opacity:.5;stroke-dasharray:2 4}
.cnx-cdi-cordes{animation:fh-derive 7s linear infinite}
.cnx-cdi-nom{text-decoration:underline var(--trait) var(--color-orange);text-underline-offset:.16em}
.cnx-jumpo-nom{text-decoration:underline var(--trait) var(--color-rouge);text-underline-offset:.16em}
.cnx-btn-cdi{--accent:var(--color-orange)}
.cnx-btn-jumpo{--accent:var(--color-rouge)}
.cnx-j-contenus{stroke:var(--color-txt-secondary)}
.cnx-j-p{fill:var(--color-rouge);stroke:none}
.cnx-j-flux{stroke:var(--color-rouge);stroke-opacity:.75;stroke-dasharray:2 4;animation:fh-derive 7s linear infinite}
.cnx-multi{stroke:var(--color-rouge)}

.cnx-interop,.cnx-tresse{fill:none}
.cnx-interop *,.cnx-tresse *{vector-effect:non-scaling-stroke}
.cnx-i-bords{stroke:var(--color-primary);stroke-opacity:.5;animation:cnx-phase 16s ease-in-out -8s infinite}
.cnx-i-hubs,.cnx-i-interfaces{stroke:var(--color-primary)}
.cnx-i-attaches{animation:cnx-phase 16s ease-in-out -12s infinite}
.cnx-i-membre circle:last-child{fill:var(--color-orange)}
.cnx-i-halo{fill:none;stroke:var(--color-orange);stroke-dasharray:2 4;animation:cnx-phase 16s ease-in-out infinite}
.cnx-i-comete path{vector-effect:none;stroke:var(--color-orange);stroke-width:3;stroke-linecap:round;stroke-dasharray:.03 1;stroke-dashoffset:.03;opacity:0;animation:cnx-comete 16s linear infinite}
.cnx-quatre{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.cnx-quatre li::before{content:"";position:absolute;left:0;top:-1px;width:3rem;height:1px;background:var(--moi);transform-origin:left;animation:cnx-marque 16s ease-in-out infinite}
.cnx-quatre li:nth-child(2)::before{animation-delay:-12s}
.cnx-quatre li:nth-child(3)::before{animation-delay:-8s}
.cnx-quatre li:nth-child(4)::before{animation-delay:-4s}
@keyframes cnx-phase{0%,25%,100%{opacity:.35}4%,21%{opacity:1}}
@keyframes cnx-marque{0%,25%,100%{transform:scaleX(.25)}4%,21%{transform:scaleX(1)}}
@keyframes cnx-comete{0%,74%{stroke-dashoffset:.03;opacity:0}76%{opacity:1}96%{stroke-dashoffset:-.97;opacity:1}98%,100%{stroke-dashoffset:-.97;opacity:0}}

.cnx-b-cpt{stroke:var(--tq)}
.cnx-b-tec{stroke:var(--color-bleu)}
.cnx-b-cnx{stroke:var(--color-orange)}
.cnx-brin-suite{stroke-opacity:.5;stroke-dasharray:2 4;animation:fh-derive 7s linear infinite}
.cnx-bords{fill:var(--color-primary)}
.cnx-x circle{fill:var(--background-color);animation:fh-allume 12s ease-in-out infinite}
.cnx-x1 circle{--f:color-mix(in srgb,var(--tq) 45%,var(--background-color));stroke:var(--tq)}
.cnx-x2 circle{--f:color-mix(in srgb,var(--color-bleu) 45%,var(--background-color));stroke:var(--color-bleu);animation-delay:4s}
.cnx-x3 circle{--f:color-mix(in srgb,var(--color-primary) 40%,var(--background-color));stroke:var(--color-primary);animation-delay:8s}
.cnx-legende li::before{content:"";width:2rem;height:1px;background:var(--tq)}
.cnx-legende li:nth-child(2)::before{background:var(--color-bleu)}
.cnx-legende li:nth-child(3)::before{background:var(--color-orange)}

.cnx-etape-jumpo{--ligne:var(--color-rouge)}

@media (max-width:1100px){
  .cnx-echelles{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .cnx-quatre{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cnx-planche{grid-row:2}
}
@media (max-width:640px){
  .cnx-echelles,.cnx-quatre{grid-template-columns:minmax(0,1fr)}
}