.demo{background-color:var(--fond-2);color:var(--texte);border:1px solid var(--noeud-bord);border-radius:var(--rayon-panneau);background-image:radial-gradient(var(--trame) 1.1px, transparent 1.1px);background-size:18px 18px;padding:clamp(18px,2.4vw,28px)}.demo__tete{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px 16px;display:flex}.demo__titre{color:var(--texte-2);font-size:.9rem}.demo__legende{font-family:var(--police-mono);color:var(--texte-2);font-size:.74rem}.demo__onglets{flex-wrap:wrap;gap:8px;margin-top:12px;display:flex}.demo__onglets[hidden]{display:none}.demo__onglets button{font:inherit;cursor:pointer;background:var(--noeud-fond);color:var(--texte);border:1px solid var(--noeud-bord);border-radius:10px;padding:8px 14px;font-size:.9rem;font-weight:500;transition:background-color .15s,color .15s}.demo__onglets button[aria-selected=true]{background:var(--onglet-actif);color:var(--sur-onglet-actif);border-color:var(--onglet-actif)}.demo__panneaux{margin-top:18px;display:grid}.demo__panneau{grid-area:1/1;min-width:0}.demo__panneau[hidden]{visibility:hidden;display:block}.demo__nom{letter-spacing:-.02em;margin-bottom:12px;font-weight:700}.demo.est-animee .demo__nom{display:none}.demo__flux{isolation:isolate;display:grid}.noeud{background:var(--noeud-fond);border:1px solid var(--noeud-bord);border-radius:var(--rayon-noeud);grid-template-columns:8rem minmax(0,1fr);align-items:baseline;gap:2px 16px;margin-left:22px;padding:11px 16px;transition:opacity .3s,border-color .3s,background-color .3s,transform .3s,box-shadow .3s;display:grid;position:relative}.noeud+.noeud{margin-top:10px}.noeud:before{content:"";background:var(--accent);border:2px solid var(--accent);border-radius:50%;width:11px;height:11px;margin-top:-6px;transition:background-color .3s,border-color .3s;position:absolute;top:50%;left:-22px}.noeud+.noeud:after{content:"";background:var(--cable);z-index:-1;width:2px;height:calc(100% + 10px);position:absolute;bottom:50%;left:-17.5px}.noeud__etiquette{font-family:var(--police-mono);color:var(--texte-2);grid-row:span 2;font-size:.74rem}.noeud__titre{font-weight:600;line-height:1.3}.noeud__detail{color:var(--texte-2);font-size:.88rem;line-height:1.4}.noeud[data-genre=personne]{border-color:var(--humain)}.noeud[data-genre=personne]:before{background:var(--humain);border-color:var(--humain)}.demo.est-animee .noeud{opacity:.45;border-color:var(--noeud-bord)}.demo.est-animee .noeud:before{background:var(--noeud-fond);border-color:var(--cable)}.demo.est-animee .noeud.est-active{opacity:1;border-color:var(--accent);background:var(--noeud-fond-actif);box-shadow:0 0 0 3px var(--noeud-anneau);transform:translate(4px)}.demo.est-animee .noeud.est-faite{opacity:1}.demo.est-animee .noeud.est-active:before,.demo.est-animee .noeud.est-faite:before{background:var(--accent);border-color:var(--accent)}.demo.est-animee .noeud[data-genre=personne].est-active,.demo.est-animee .noeud[data-genre=personne].est-faite{border-color:var(--humain)}.demo.est-animee .noeud[data-genre=personne].est-active:before,.demo.est-animee .noeud[data-genre=personne].est-faite:before{background:var(--humain);border-color:var(--humain)}.demo__pied{justify-content:space-between;align-items:center;gap:16px;min-height:30px;margin-top:16px;display:flex}.demo__pied[hidden]{display:none}.demo__etat{font-family:var(--police-mono);color:var(--texte-2);font-size:.78rem}.demo__rejouer{font:inherit;cursor:pointer;color:var(--texte);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:.2em;background:0 0;border:0;flex:none;padding:4px 0;font-size:.85rem}@media (width<=560px){.noeud{grid-template-columns:1fr}.noeud__etiquette{grid-row:auto}}.flux3d{background:var(--fond);color:var(--texte);position:relative}.flux3d[data-scene=active][data-pilote=oui] .flux3d-cadre{--part:calc(var(--plongee,0) * 100%);--texte:color-mix(in srgb, var(--plongee-texte) var(--part), var(--f-texte));--texte-2:color-mix(in srgb, var(--plongee-texte-2) var(--part), var(--f-texte-2));--accent:color-mix(in srgb, var(--plongee-accent) var(--part), var(--f-accent));--humain:color-mix(in srgb, var(--plongee-humain) var(--part), var(--f-humain));--fond-fondu:color-mix(in srgb, var(--plongee-fond) var(--part), var(--f-fond));--filet-fondu:color-mix(in srgb, var(--plongee-bord) var(--part), var(--filet));background:var(--fond-fondu);color:var(--texte)}.flux3d{--f-fond:var(--fond);--f-texte:var(--texte);--f-texte-2:var(--texte-2);--f-accent:var(--accent);--f-humain:var(--humain)}.flux3d-textes{width:100%;max-width:1200px;padding:clamp(32px, 6vw, 72px) var(--marge);margin-inline:auto}.flux3d-scene{display:none}.flux3d h1{font-family:var(--police-titre);letter-spacing:-.035em;max-width:none;margin:0;font-size:clamp(2.3rem,4.6vw,4rem);font-weight:800;line-height:.98}.flux3d-titre{text-wrap:balance;max-width:13ch;display:block}.flux3d-mot-cle{background:var(--accent-pale);width:fit-content;color:var(--accent);font-family:var(--police-texte);letter-spacing:0;text-wrap:wrap;border-radius:999px;margin:0 0 18px;padding:6px 12px;font-size:.82rem;font-weight:600;line-height:1.55;display:block}.flux3d-chapeau{max-width:42ch;color:var(--texte-2);margin:22px 0 0;font-size:clamp(1.05rem,1.4vw,1.2rem);line-height:1.5}.flux3d-actions{flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:28px;display:flex}.flux3d-bouton{border-radius:var(--rayon-bouton);background:var(--accent);min-height:48px;color:var(--sur-accent);align-items:center;padding:0 24px;font-weight:600;text-decoration:none;display:inline-flex}.flux3d-bouton:hover{background:var(--accent-fonce);color:var(--sur-accent)}.flux3d-lien{text-decoration-color:var(--accent);text-underline-offset:.22em;font-weight:500;text-decoration-thickness:2px}.flux3d-invitation{font-family:var(--police-mono);color:var(--texte-2);margin:34px 0 0;font-size:.8rem}.flux3d-etapes{gap:22px;max-width:30rem;margin:40px 0 0;padding:0;list-style:none;display:grid}.flux3d-etapes h2{font-family:var(--police-titre);letter-spacing:-.03em;margin:0;font-size:clamp(1.6rem,2.6vw,2.3rem);font-weight:800;line-height:1.05}.flux3d-etapes p{color:var(--texte-2);margin:10px 0 0}.flux3d-rang{font-family:var(--police-mono);font-size:.78rem;color:var(--accent)!important;margin:0 0 8px!important}.flux3d-etapes li[data-genre=personne] .flux3d-rang{color:var(--humain)!important}.flux3d-legende{color:var(--texte-2);margin:26px 0 0;font-size:.82rem;font-style:italic}.flux3d-suite{background:var(--fond-2);color:var(--texte);padding-block:clamp(56px,8vw,110px)}.flux3d-suite p{color:var(--texte-2);margin-top:10px}.flux3d[data-scene=active][data-pilote=oui]{height:calc(100svh * (1.6 + var(--nombre-d-etapes) * .85))}.flux3d[data-scene=active][data-pilote=oui] .flux3d-cadre{height:100svh;position:sticky;top:0;overflow:hidden}.flux3d[data-scene=active] .flux3d-scene{display:block;position:absolute;inset:0}@media (width>=1101px){.flux3d[data-scene=active] .flux3d-scene{-webkit-mask-image:linear-gradient(90deg,#0000 0 44%,#000 58%);mask-image:linear-gradient(90deg,#0000 0 44%,#000 58%)}}.flux3d[data-scene=active][data-pilote=oui] .flux3d-textes{pointer-events:none;height:100%;padding-block:0;position:relative}.flux3d[data-scene=active][data-pilote=oui] .flux3d-textes a{pointer-events:auto}.flux3d[data-scene=active][data-pilote=oui] .flux3d-ouverture,.flux3d[data-scene=active][data-pilote=oui] .flux3d-etapes li{left:var(--marge);max-width:min(27rem,33vw);transition:opacity .4s,transform .4s;position:absolute;top:50%;transform:translateY(-50%)}.flux3d[data-scene=active][data-pilote=oui] .flux3d-etapes{max-width:none;margin:0;display:block}@media (width>=1101px){.flux3d[data-scene=active][data-pilote=oui] .flux3d-ouverture{max-width:min(34rem,44vw)}}.flux3d[data-scene=active][data-pilote=oui] .flux3d-etapes li{opacity:0;transform:translateY(calc(18px - 50%))}.flux3d[data-scene=active][data-pilote=oui] .flux3d-etapes li.est-active{opacity:1;transform:translateY(-50%)}.flux3d[data-scene=active][data-pilote=oui]:not([data-etape-active="-1"]) .flux3d-ouverture{opacity:0;pointer-events:none;transform:translateY(calc(-50% - 18px))}.flux3d[data-scene=active][data-pilote=oui]:not([data-etape-active="-1"]) .flux3d-ouverture a{pointer-events:none}.flux3d[data-scene=active][data-pilote=oui] .flux3d-legende{left:var(--marge);margin:0;position:absolute;bottom:22px}@media (width<=1100px){.flux3d[data-scene=active][data-pilote=oui]{height:calc(100svh * (1.3 + var(--nombre-d-etapes) * .7))}.flux3d[data-scene=active] .flux3d-scene{opacity:var(--plongee,0);inset:0}.flux3d[data-scene=active][data-pilote=oui] .flux3d-ouverture{max-width:none;padding:84px var(--marge) 40px;flex-direction:column;justify-content:center;align-items:flex-start;display:flex;inset:0;transform:none}.flux3d[data-scene=active][data-pilote=oui]:not([data-etape-active="-1"]) .flux3d-ouverture{transform:translateY(-14px)}.flux3d[data-scene=active][data-pilote=oui] .flux3d-etapes li{border:1px solid var(--filet-fondu);background:color-mix(in srgb, var(--fond-fondu) 88%, transparent);backdrop-filter:blur(8px);border-radius:14px;max-width:34rem;margin-inline:auto;padding:12px 16px;inset:auto 12px 44px;transform:translateY(10px)}.flux3d[data-scene=active][data-pilote=oui] .flux3d-etapes li.est-active{transform:none}.flux3d[data-scene=active][data-pilote=oui] .flux3d-etapes li>.flux3d-rang,.flux3d[data-scene=active][data-pilote=oui] .flux3d-etapes li>h2{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden;margin:-1px!important}.flux3d[data-scene=active][data-pilote=oui] .flux3d-etapes li>p:last-child{color:var(--texte);margin:0;font-size:clamp(.95rem,2.2vw,1.15rem);line-height:1.4}.flux3d[data-scene=active][data-pilote=oui] .flux3d-legende{white-space:nowrap;z-index:2;background:color-mix(in srgb, var(--fond-fondu) 88%, transparent);border-radius:999px;padding:3px 12px;font-size:.72rem;bottom:9px;left:50%;right:auto;transform:translate(-50%)}.flux3d h1{font-size:clamp(2.2rem,8.6vw,3.6rem)}.flux3d-titre{max-width:14ch}}