/* 42.fr · Holy Graph : une seule démonstration vivante, à droite du texte. Canevas fixe mis à l’échelle (comme la carte), pas de défilement interne. */
@font-face{font-family:"Jost";font-weight:500;font-display:swap;src:url(fonts/jost-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Jost";font-weight:700;font-style:italic;font-display:swap;src:url(fonts/jost-latin-700-italic.woff2) format("woff2")}
.hg-live{grid-column:6/13;margin:0}
.hg-live .cap{margin-top:12px}
.hgl-box{position:relative;width:100%;overflow:hidden;background:#000c16}
.hgl-frame{position:absolute;left:0;top:0;width:960px;height:640px;transform-origin:0 0;transform:scale(var(--s,1));background:#000c16;color:#fff;font-family:Jost,"Futura PT",ui-sans-serif,sans-serif;-webkit-font-smoothing:antialiased;overflow:hidden}
.hgl-bg{position:absolute;left:-60px;top:-40px;width:1300px;pointer-events:none;opacity:1}
.hgl-bg img{display:block;width:100%;height:auto}
.hgl-head{position:absolute;left:64px;top:52px}
.hgl-sur{margin:0;color:#00babc;font:500 14px/20px Jost,sans-serif;letter-spacing:4px;text-transform:uppercase}
.hgl-filet{display:block;width:28px;height:3px;background:#00babc;margin-top:16px}
.hgl-titre{margin:16px 0 0;font:italic 700 30px/38px Jost,sans-serif;text-transform:uppercase}
.hgl-graph{position:absolute;left:40px;top:172px;width:440px;height:440px}
.hgl-graph svg{display:block;width:100%;height:100%;overflow:visible}
.hgl-graph .node,.hgl-graph .core,.hgl-graph .haloc{transform-box:fill-box;transform-origin:center}
.hgl-graph .lg-b{font:500 14px Jost,sans-serif;fill:#fff;text-anchor:middle}
.hgl-graph .lg-r{font:400 14px Jost,sans-serif;fill:#00babc;text-anchor:middle}
/* fenêtre de lecture : une colonne qui défile sous un fondu de bord, le bloc actif à 80 px du haut (y = 250 px, comme avant) */
.hgl-txt{position:absolute;left:540px;top:170px;width:360px;height:400px;overflow:hidden;--fh:18px;--fb:44px;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 var(--fh),#000 calc(100% - var(--fb)),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 var(--fh),#000 calc(100% - var(--fb)),transparent 100%)}
.hgl-blk{position:absolute;inset:0 0 auto;opacity:0;visibility:hidden;will-change:transform,opacity}
.hgl-blk.on{opacity:1;visibility:visible}
.hgl-h{margin:0;font:500 22px/30px Jost,sans-serif}
.hgl-blk p+p{margin:14px 0 0;font:400 17px/28px Jost,sans-serif;color:rgba(255,255,255,.86)}
/* mobile : canevas 390 de large, graphe au-dessus du texte */
.hg-live.m .hgl-frame{width:390px;height:720px}
.hg-live.m .hgl-head{left:20px;top:32px}
.hg-live.m .hgl-titre{font-size:24px;line-height:30px;max-width:320px}
.hg-live.m .hgl-graph{left:32px;top:150px;width:326px;height:326px}
.hg-live.m .hgl-txt{left:20px;top:470px;width:350px;height:240px;--fh:22px;--fb:22px}
.hg-live.m .hgl-h{font-size:19px;line-height:27px}
.hg-live.m .hgl-blk p+p{font-size:16px;line-height:26px;margin-top:10px}
/* étapes du texte : boutons qui pilotent la démo */
.hg-steps li{padding:0;display:block}
.hg-steps button{display:flex;gap:12px;align-items:center;width:100%;min-height:48px;padding:12px 0;background:none;border:0;color:inherit;font:inherit;text-align:left;cursor:pointer}
.hg-steps i{width:8px;height:8px;background:currentColor;flex:none;transition:transform .3s cubic-bezier(.23,1,.32,1)}
.hg-steps li.on{color:var(--stage-ink)}
.hg-steps li.cur i{background:#36f3b9;transform:scale(1.25)}
@media (hover:hover) and (pointer:fine){.hg-steps button:hover{color:var(--stage-ink)}}
.hg-steps button:focus-visible,.hg-replay:focus-visible{outline:2px solid #fff;outline-offset:2px}
.hg-replay{margin-top:18px;min-height:44px;padding:0 14px;background:none;border:1px solid var(--stage-line);color:var(--stage-ink);cursor:pointer}
@media (max-width:1180px){.hg-lay .hg-txt{grid-column:1/9!important}.hg-live{grid-column:1/-1!important;margin-top:40px}}
@media (max-width:860px){.hg-lay .hg-txt{grid-column:1/-1!important}.hg-live{margin-top:12px}}