/* J5 : le graphe. Les huit outils sont des noeuds, les requetes courent vers la porte. */
:root{--cyan:#7cc4ff;--cyan-rgb:124,196,255;--or:#e7c27d;--trait:rgba(234,238,246,.12);--mx:50vw;--my:50vh}
.mono{font-family:var(--mono)}
.grille{position:fixed;inset:0;z-index:0;
  background-image:linear-gradient(rgba(var(--cyan-rgb),.16) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--cyan-rgb),.16) 1px,transparent 1px);
  background-size:24px 24px;
  -webkit-mask-image:radial-gradient(420px at var(--mx) var(--my),rgba(0,0,0,.9),rgba(0,0,0,.18) 70%);mask-image:radial-gradient(420px at var(--mx) var(--my),rgba(0,0,0,.9),rgba(0,0,0,.18) 70%)}
.graphe{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.graphe path{fill:none;stroke:rgba(var(--cyan-rgb),.28);stroke-width:1.2}
.graphe path.vive{stroke:rgba(var(--cyan-rgb),.7)}
.graphe circle.imp{fill:var(--cyan);filter:drop-shadow(0 0 6px rgba(var(--cyan-rgb),.9))}
.graphe circle.jeton{fill:var(--or);filter:drop-shadow(0 0 10px rgba(231,194,125,.9))}
.etat{font-size:13px;color:var(--dim);letter-spacing:.04em}

.noeuds{position:fixed;inset:0;z-index:2;pointer-events:none}
.noeud{position:absolute;transform:translate(-50%,-50%);display:grid;grid-template-columns:34px 1fr;column-gap:10px;align-items:center;width:212px;padding:9px 12px;background:rgba(11,15,23,.92);border:1px solid var(--trait);border-radius:6px;transition:border-color .3s,box-shadow .3s}
.noeud .gr{width:34px;height:34px;display:grid;place-items:center;border-radius:5px;background:rgba(var(--cyan-rgb),.1);color:var(--cyan);font:500 13px var(--mono)}
.noeud .nom{color:var(--ink);font-weight:500;font-size:14px;line-height:1.2}
.noeud .quoi{display:block;color:var(--dim);font:12.5px/1.3 var(--sans);margin-top:1px}
.noeud .code{position:absolute;top:-9px;right:10px;font:500 11px/1 var(--mono);letter-spacing:.06em;color:var(--dim);background:#090c13;padding:2px 5px;border:1px solid var(--trait);border-radius:3px}
.noeud.emet{border-color:rgba(var(--cyan-rgb),.55);box-shadow:0 0 22px rgba(var(--cyan-rgb),.12)}
.noeud.ok{border-color:rgba(231,194,125,.7);box-shadow:0 0 28px rgba(231,194,125,.18)}
.noeud.ok .code{color:var(--or);border-color:rgba(231,194,125,.5)}

.carte{position:fixed;left:50%;top:52%;transform:translate(-50%,-50%);z-index:3;width:420px;padding:36px 40px 30px;text-align:center;background:rgba(9,12,19,.92);border:1px solid rgba(var(--cyan-rgb),.3);border-radius:8px;box-shadow:0 0 0 1px rgba(var(--cyan-rgb),.06),0 30px 80px rgba(0,0,0,.5);transition:border-color .4s,box-shadow .4s}
.carte.ouvre{border-color:rgba(231,194,125,.8);box-shadow:0 0 0 1px rgba(231,194,125,.3),0 0 60px rgba(231,194,125,.18)}
.sur{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:12px}
h1{font-family:var(--serif);font-weight:400;font-size:48px;line-height:1;letter-spacing:-.015em;font-variation-settings:"opsz" 144;margin-bottom:12px}
.ligne{color:var(--mut);font-size:15px;margin-bottom:24px}
.ligne strong{color:var(--ink);font-weight:500}
.note{font-size:13px;color:var(--dim);margin-top:16px}

/* le bouton : un faisceau conique fait le tour du bord, en boucle lente */
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
.cta{position:relative;height:48px;padding:0 2px;border-radius:6px;background:transparent;color:var(--ink);font:600 15px/1 var(--sans);cursor:pointer;border:0;display:inline-flex;align-items:stretch}
.cta .bord{position:absolute;inset:0;border-radius:6px;padding:1.5px;background:conic-gradient(from var(--a),transparent 0 70%,var(--cyan) 85%,#fff 92%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;animation:tour 4s linear infinite}
@keyframes tour{to{--a:360deg}}
.cta .txt{display:inline-flex;align-items:center;gap:10px;padding:0 26px;border-radius:5px;background:rgba(var(--cyan-rgb),.1);border:1px solid rgba(var(--cyan-rgb),.25);margin:1.5px;transition:background .2s}
.cta .txt b{font-weight:600;color:var(--cyan)}
.cta:hover .txt,.cta:focus-visible .txt{background:rgba(var(--cyan-rgb),.2)}
.cta:focus-visible{outline:none}
.cta:disabled{cursor:default}
.cta:disabled .bord{animation-duration:.8s;background:conic-gradient(from var(--a),transparent 0 50%,var(--or) 80%,#fff 92%,transparent 100%)}

.voile{position:fixed;inset:0;z-index:9;display:grid;place-items:center;background:rgba(9,12,19,.94);animation:fondu .5s ease both}
.voile[hidden]{display:none}
.voile p{text-align:center;font-size:14px;color:var(--dim);letter-spacing:.12em;text-transform:uppercase}
.voile b{display:block;margin-top:14px;font:500 32px/1.2 var(--mono);letter-spacing:0;text-transform:none;color:var(--or)}
@keyframes fondu{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.cta .bord,.cta:disabled .bord,.voile{animation:none}.graphe circle.imp{display:none}}