.cpt{--moi:var(--tq);--g:var(--color-bleu);--d:var(--color-orange)}
.cpt-mil{color:var(--tq)}

.cpt-orbe{stroke:url(#cpt-spectre);opacity:.55}
.cpt-s1{stop-color:var(--tq)}.cpt-s2{stop-color:var(--color-bleu)}.cpt-s3{stop-color:var(--color-violet)}
.cpt-limite{stroke:var(--color-hairline);stroke-dasharray:1 5}
.cpt-proj{stroke:var(--color-txt-secondary);stroke-dasharray:2 4;opacity:.32}
.cpt-encre{stroke:var(--color-primary);opacity:.62}
.cpt-poussiere{fill:var(--color-txt-secondary);opacity:.45}
.cpt-anneaux,.cpt-courant{stroke:var(--color-txt-secondary);stroke-dasharray:2 4;opacity:.4;animation:fh-derive 7s linear infinite}
.cpt-courant{stroke:var(--color-primary);opacity:.55}
.cpt-noeuds{fill:var(--color-primary)}
.cpt-noeuds circle:nth-child(n+78){fill:var(--color-txt-secondary);opacity:.7}
.cpt-fib{stroke:var(--tq);opacity:.75}
.cpt-cote{stroke:var(--color-hairline);opacity:.9}
.cpt-pouls{fill:var(--tq);opacity:0}
.js-motion .fh-plaque{opacity:0}

.cpt-flux{display:grid;grid-template-columns:auto minmax(0,1fr) auto}
.cpt-flux ul{display:grid;grid-auto-rows:1fr;white-space:nowrap}
.cpt-entrees{text-align:right}
.cpt-flux-plan{fill:var(--color-primary)}
.cpt-flux-plan path{fill:none}
.cpt-capa{stroke:var(--color-primary);transform-box:fill-box;transform-origin:left;transition:transform 1.3s var(--ease) .3s}
.fh-anim:not(.is-visible) .cpt-capa{transform:scaleX(0)}

.cpt-formes{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.cpt-formes-tete{position:sticky;top:112px}
.cpt-forme{display:grid;grid-template-columns:3rem minmax(0,1fr)}

.cpt-conv{fill:none;stroke:var(--tq);stroke-dasharray:1 1;transition:stroke-dashoffset 1.8s cubic-bezier(.45,0,.2,1) .2s}
.fh-anim:not(.is-visible) .cpt-conv{stroke-dashoffset:1}
.cpt-ent{fill:none;stroke:var(--color-txt)}
.cpt-metiers,.cpt-pt{fill:var(--color-txt-secondary)}
.cpt-mil-anneau{fill:none;stroke:var(--tq);stroke-dasharray:2 4;animation:fh-derive 7s linear infinite}
.cpt-mil-coeur{fill:var(--tq);animation:fh-pulse 5s ease-in-out infinite}
.cpt-mil-nom{text-decoration:underline var(--trait) var(--tq);text-underline-offset:.16em}
.cpt-btn-mil{--accent:var(--tq)}

.cpt-venn{max-width:460px;width:100%}
.cpt-venn circle{stroke-width:1}
.cpt-cc{fill:none;stroke:var(--color-primary)}
.cpt-ct{fill:none;stroke:var(--color-bleu);opacity:.8}
.cpt-cx{fill:none;stroke:var(--color-orange);opacity:.7}
.cpt-lentille{opacity:.07;animation:fh-tour 12s ease-in-out infinite}
.cpt-l1{fill:var(--color-bleu)}
.cpt-l2{fill:var(--color-orange);animation-delay:4s}
.cpt-l3{fill:var(--color-primary);animation-delay:8s}

@media (max-width:900px){
  .cpt-formes{grid-template-columns:minmax(0,1fr)}
  .cpt-formes-tete{position:relative;top:0}
  .cpt-venn{grid-row:2}
}
@media (max-width:640px){
  .cpt-flux{grid-template-columns:minmax(0,1fr)}
  .cpt-flux ul{grid-auto-rows:auto;grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr));text-align:left}
}