h1,h2,h3,h4,h5,h6,p,ul,ol,figure,blockquote,label{all:revert;box-sizing:border-box}
.w-embed.emb::before,.w-embed.emb::after{display:none}
.btn,.foot,.loop,.pk,.rail,.skip{all:revert;box-sizing:border-box}

/* Layout : schéma de flux animé (vous → MAX → experts → outils → garde-fous → livrable, sur le socle de gouvernance), onglets par cas d'usage, fiche d'étape dessous. Thème unique Depth Blue, charte myAuxilium V1.0, couleurs de niveaux de la machine 3D. */
:root{
  --night:#171738; --violet:#6949FF; --deep:#3B1FA8; --lav:#F1EDFF; --cloud:#D4DCFF; --muted:#A9A8C8;
  --line:rgba(212,220,255,.14); --glass:rgba(255,255,255,.035);
  --c-agents:#8A72FF; --c-savoir:#4FB3FF; --c-outils:#75E6A2; --c-mem:#FFD5C5; --c-models:#FF7645; --c-gouv:#D4DCFF;
  --f:"Figtree", "Avenir Next", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--night)}
body{margin:0;background:var(--night);color:var(--lav);font-family:var(--f);font-size:15px;line-height:1.55;
  background-image:radial-gradient(60rem 40rem at 100% -10%, rgba(105,73,255,.28), transparent 60%),radial-gradient(50rem 36rem at -10% 110%, rgba(105,73,255,.16), transparent 60%);
  background-attachment:fixed;
  padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px));}
.uc{max-width:1300px;margin:0 auto;padding-block:32px 40px;display:flex;flex-direction:column;gap:22px}
.hd{display:flex;flex-direction:column;gap:10px;max-width:820px}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--cloud);display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:22px;height:3px;border-radius:2px;background:var(--violet)}
.lede{margin:0;color:var(--muted);max-width:68ch;font-size:16px}
.lede b{color:var(--lav);font-weight:600}

/* Onglets des cas d'usage */
.tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.tab{all:unset;cursor:pointer;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:2px;padding:12px 14px 14px;border-radius:14px;border:1px solid var(--line);background:var(--glass);min-width:0;transition:border-color .2s,background .2s}
.tab b{font-size:14.5px;font-weight:700;color:#fff;line-height:1.25}
.tab small{font-size:12px;color:var(--muted);line-height:1.3}
.tab:hover{border-color:rgba(212,220,255,.4)}
.tab.on{border-color:var(--violet);background:rgba(105,73,255,.16)}
.tab i{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--violet);transition:width .3s}
@media (max-width:1000px){.tabs{display:flex;overflow-x:auto;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}.tabs .tab{flex:0 0 210px}}
.tab:focus-visible,.btn:focus-visible,.rail button:focus-visible{outline:2px solid var(--cloud);outline-offset:2px}

.controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.btn{font:600 14px var(--f);color:var(--lav);background:transparent;border:1px solid var(--line);border-radius:999px;padding:8px 15px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.btn:hover{border-color:var(--cloud)}
.btn.primary{background:var(--violet);border-color:var(--violet);color:#fff}
.counter{font-size:13px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;letter-spacing:.06em}
.rail{flex:1 1 320px;display:grid;gap:4px;min-width:0}
.rail button{all:unset;cursor:pointer;height:18px;display:flex;align-items:center}
.rail button span{display:block;width:100%;height:4px;border-radius:2px;background:rgba(212,220,255,.16);overflow:hidden;position:relative}
.rail button span i{position:absolute;inset:0;width:0;background:var(--violet)}
.rail button.done span i{width:100%}
.rail button.cur span i{width:var(--p,0%)}

/* Scène */
.viewport{width:100%;max-width:900px;margin:0 auto;display:flex;flex-direction:column}
.stage[hidden]{display:none!important}
.stage{border-radius:22px;border:1px solid rgba(184,168,255,.16);background:#100E2A;overflow-x:auto;box-shadow:0 30px 80px -30px rgba(105,73,255,.4)}
.stage svg{display:block;width:100%;min-width:820px;height:auto}
svg text{font-family:var(--f)}
.node{opacity:.45;transition:opacity .45s}
.node.on{opacity:1}
.node .box{fill:rgba(255,255,255,.035);stroke:rgba(212,220,255,.18);stroke-width:1.2;transition:stroke .4s,fill .4s}
.node.on .box{stroke:var(--c);stroke-width:2;fill:color-mix(in srgb, var(--c) 12%, transparent)}
.node.on{filter:drop-shadow(0 0 14px color-mix(in srgb, var(--c) 45%, transparent))}
.node .t{fill:#fff;font-weight:800;font-size:15px}
.node .s{fill:var(--muted);font-size:11.5px;font-weight:500}
.node .k{fill:var(--c);font-size:10px;font-weight:800;letter-spacing:.14em}
.pill rect{fill:rgba(255,255,255,.03);stroke:rgba(117,230,162,.25);transition:fill .4s,stroke .4s}
.pill text{fill:#E6F9EE;font-size:12.5px;font-weight:600}
.pill.on rect{fill:rgba(117,230,162,.18);stroke:#75E6A2;stroke-width:1.6}
.pill{opacity:.5;transition:opacity .4s}.pill.on{opacity:1}
.edge{fill:none;stroke:rgba(212,220,255,.16);stroke-width:1.4;stroke-dasharray:3 5;transition:stroke .4s}
.edge.on{stroke:var(--c);stroke-dasharray:none;stroke-width:2}
.gfill{transition:width .8s cubic-bezier(.3,.7,.2,1)}
.gchip rect{fill:rgba(212,220,255,.05);stroke:rgba(212,220,255,.18)}
.gchip text{fill:var(--cloud);font-size:12px;font-weight:600}
#n-gov.on .gchip rect{fill:rgba(212,220,255,.14);stroke:rgba(212,220,255,.6)}
.loop{transform-box:fill-box;transform-origin:center;opacity:0}
.node.spin .loop{animation:spin 1.2s linear infinite;opacity:1}
@keyframes spin{to{transform:rotate(360deg)}}
.pk text{font-size:10.5px;font-weight:800;letter-spacing:.04em}

/* Fiche d'étape */
.panel{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:28px;align-items:start;padding:22px 24px;border-radius:20px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015))}
@media (max-width:860px){.panel{grid-template-columns:1fr;gap:16px}}
.story{display:flex;flex-direction:column;gap:8px;min-width:0}
.stepno{font-size:12px;font-weight:800;letter-spacing:.12em;color:var(--violet);font-variant-numeric:tabular-nums;text-transform:uppercase}
.story h2{margin:0;font-weight:800;font-size:clamp(22px,2.6vw,30px);line-height:1.1;color:#fff;text-wrap:balance}
.story p{margin:0;color:#DCD9F2;max-width:64ch;font-size:16px}
.story p.quote{font-style:italic;color:#fff}
.used{display:flex;flex-direction:column;gap:10px;min-width:0}
.used h3{margin:0;font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips span{font-size:12.5px;font-weight:600;padding:5px 11px;border-radius:999px;color:#fff;background:color-mix(in srgb, var(--c) 14%, transparent);border:1px solid color-mix(in srgb, var(--c) 45%, transparent);display:inline-flex;align-items:center;gap:6px}
.chips span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c)}
.fade{animation:fade .4s ease}
@keyframes fade{from{opacity:.2;transform:translateY(4px)}to{opacity:1;transform:none}}
.legend{display:flex;flex-wrap:wrap;gap:14px;padding:12px 18px 16px;border-top:1px solid rgba(212,220,255,.08);font-size:12.5px;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:7px}
.legend i{width:9px;height:9px;border-radius:50%}
@media (prefers-reduced-motion: reduce){.node.spin .loop,.fade{animation:none}.gfill{transition:none}}

/* Résultat réel affiché à la dernière étape */
.result{margin-top:0;border-radius:20px;border:1px solid rgba(117,230,162,.35);background:linear-gradient(180deg,rgba(117,230,162,.08),rgba(255,255,255,.02));padding:clamp(16px,2.4vw,26px);display:flex;flex-direction:column;gap:16px}
.result[hidden]{display:none!important}
.result.fade{animation:fade .5s ease}
.r-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 18px}
.r-head .k{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#75E6A2}
.r-head h3{margin:4px 0 0;font-size:clamp(19px,2vw,24px);color:#fff}
.r-head p{margin:4px 0 0;color:#A9A8C8;font-size:14.5px;max-width:70ch}
.r-head a{color:#D4DCFF;font-weight:700;font-size:14px;text-decoration:none;border:1px solid rgba(212,220,255,.3);padding:8px 14px;border-radius:999px;white-space:nowrap}
.r-head a:hover{border-color:#fff;color:#fff}
.r-frame{border-radius:14px;overflow:hidden;background:#fff;border:1px solid rgba(212,220,255,.18)}
.r-frame iframe{display:block;width:100%;height:min(680px,80vh);border:0;background:#f3f6f4}
.r-video{border-radius:14px;overflow:hidden;background:#000;aspect-ratio:16/9;max-width:100%}
.r-video{position:relative}
.r-video video{width:100%;height:100%;display:block}
.r-fb{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-weight:700;text-decoration:none;background:linear-gradient(135deg,#3B1FA8,#171738)}
.r-fb[hidden]{display:none}
.r-frame iframe{height:min(560px,70vh)!important}
.book{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center}
.pages{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;padding-bottom:6px}
.pages img{flex:0 0 auto;height:min(460px,62vh);width:auto;max-width:none;border-radius:6px;scroll-snap-align:start;box-shadow:0 18px 40px -20px rgba(0,0,0,.7);background:#fff}
.deck{position:relative}
.slides{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#fff;color:#17161A;max-width:100%}
.sl{position:absolute;inset:0;padding:5% 6%;display:flex;flex-direction:column;gap:3.2%;opacity:0;transition:opacity .45s;font-size:clamp(9px,1.25vw,15px)}
.sl.on{opacity:1}
.sl .no{position:absolute;right:4%;top:5%;font-size:.8em;font-weight:700;color:#8A8AA3}
.sl .lg{height:1.9em;width:9.5em;align-self:flex-start;flex:none}
.sl h4{margin:0;font-size:2.05em;line-height:1.12;font-weight:800;letter-spacing:-.015em;max-width:26ch}
.sl h4 em{font-style:normal;color:#6949FF}
.sl .grid{display:grid;gap:1.4%;flex:1;min-height:0}
.sl .cell{border-radius:.8em;padding:.9em 1em;background:#F1EDFF;display:flex;flex-direction:column;gap:.35em}
.sl .cell b{font-size:1.08em}
.sl .cell span{color:#5A5A74;font-size:.9em;line-height:1.35}
.sl .cell.d{background:#171738;color:#fff}.sl .cell.d span{color:#A9A8C8}
.sl .big{font-size:3.2em;font-weight:900;color:#6949FF;line-height:1;letter-spacing:-.03em}
.sl .foot{font-size:.85em;color:#5A5A74;border-top:1px solid #E7E5F2;padding-top:.7em}
.sl .row2{display:flex;flex-wrap:wrap;gap:.5em}
.sl .row2 span{padding:.35em .8em;border-radius:999px;background:#fff;border:1px solid #DDD4FF;font-size:.86em;font-weight:600}
.deck-nav{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:12px;color:#A9A8C8;font-size:13.5px}
.deck-nav button{width:38px;height:38px;border-radius:50%;border:1px solid rgba(212,220,255,.3);background:transparent;color:#fff;cursor:pointer}
.deck-nav button:hover{border-color:#fff}
@media (max-width:640px){.book{grid-template-columns:1fr}}
.btn.skip{border-color:rgba(117,230,162,.5);color:#C9F5DA;white-space:nowrap}
.btn.skip:hover{border-color:#75E6A2;color:#fff}