.jsonlab{margin-top:24px}.jsonlab .bar small{font-size:9px;letter-spacing:1px;color:#df7764;background:#fff0eb;padding:5px 8px;margin-left:10px;border-radius:5px}#jsonState{font-size:10px}.jsonintro{padding:17px 20px 0;font-size:12px;line-height:1.8;color:#778497}.jsonactions{display:flex;flex-wrap:wrap;gap:8px;padding:16px 20px}.jsonactions label{cursor:pointer;margin:0}.jsonlayout{display:grid;grid-template-columns:minmax(0,1fr) 250px;border-top:1px solid #e8edf4}.editorwrap{background:#172234;display:flex;height:430px;overflow:hidden}#lineNumbers{color:#64738c;background:#131e2e;text-align:right;min-width:48px;margin:0;padding:18px 10px;line-height:20px;font:12px/20px monospace;overflow:hidden;user-select:none}#jsonEditor{display:block;resize:vertical;min-height:430px;width:100%;border:0;border-radius:0;background:#172234;color:#c5def1;padding:18px 15px;white-space:pre;tab-size:2;font:12px/20px monospace;outline-offset:-3px}#jsonEditor:focus{outline:2px solid #fc8a72}.jsonhelp{padding:20px;background:#fbfcfe}.jsonhelp button{background:transparent;border:0;border-bottom:1px solid #e8edf4;text-align:left;padding:10px 0;display:block;width:100%}.jsonhelp b{color:#dc725f;font:12px monospace;display:block;margin-bottom:5px}.jsonhelp span,.jsonhelp p{font-size:11px;line-height:1.7;color:#7e8b9e}.jsonhelp button:hover{background:#fff0eb}#jsonError{padding:0 20px 14px;color:#b25e53;font-size:12px;line-height:1.8;overflow-wrap:anywhere}.customNodes{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px;max-height:210px;overflow:auto;width:100%;padding:20px 0}.customNode{padding:18px;background:white;border:2px solid #fa826e;border-radius:12px;color:#596b82;max-width:170px;overflow-wrap:anywhere}.connectionList{width:100%;font-size:10px;line-height:1.8;color:#718096;overflow-wrap:anywhere;text-align:center}.code{max-height:210px;overflow:auto}@media(max-width:800px){.jsonlayout{grid-template-columns:1fr}.jsonhelp{display:grid;grid-template-columns:1fr 1fr;gap:10px}.jsonhelp .eyebrow,.jsonhelp p{grid-column:1/-1}.jsonlab .bar{align-items:flex-start;gap:12px}.jsonlab .bar small{display:none}.jsonactions{padding:12px}.editorwrap{height:360px}#jsonEditor{min-height:360px}}

/* THEME */
.hright{display:flex;align-items:center}
html[data-theme=dark]{color-scheme:dark;color:#dbe4f2;background:#0e1521}
html[data-theme=dark] body{background:#0e1521}
html[data-theme=dark] header,html[data-theme=dark] aside,html[data-theme=dark] .card{background:#161f2f;border-color:#263248}
html[data-theme=dark] header a{color:#aab6ca}
html[data-theme=dark] html[data-theme=dark] .brand,html[data-theme=dark] .course,html[data-theme=dark] h1,html[data-theme=dark] h2#title,html[data-theme=dark] .pane h3,html[data-theme=dark] .step strong{color:#f1f5fb}
html[data-theme=dark] .brand small,html[data-theme=dark] .eyebrow,html[data-theme=dark] .muted,html[data-theme=dark] .breadcrumb,html[data-theme=dark] .time,html[data-theme=dark] .status,html[data-theme=dark] .canvas-tag,html[data-theme=dark] .footer{color:#9aa8bf}
html[data-theme=dark] .intro,html[data-theme=dark] .pane p,html[data-theme=dark] .step p,html[data-theme=dark] .jsonintro,html[data-theme=dark] .jsonhelp span,html[data-theme=dark] .jsonhelp p,html[data-theme=dark] .connectionList{color:#b4c0d3}
html[data-theme=dark] .progress{background:#263248}
html[data-theme=dark] .nav{color:#aab6ca}
html[data-theme=dark] .nav.active{background:#2a1f27;color:#ff8f7c}
html[data-theme=dark] .num{border-color:#33415c}
html[data-theme=dark] .aside-note,html[data-theme=dark] .bar,html[data-theme=dark] .canvas-bottom,html[data-theme=dark] .tabs,html[data-theme=dark] .jsonlayout,html[data-theme=dark] .jsonhelp button{border-color:#263248}
html[data-theme=dark] .canvas{background-color:#121a29;background-image:radial-gradient(#26324a 1px,transparent 1px)}
html[data-theme=dark] .node,html[data-theme=dark] .customNode{background:#1d283b;border-color:#33415c;box-shadow:none}
html[data-theme=dark] .node.selected{border-color:#fb7b68;box-shadow:0 0 0 5px #3a2430}
html[data-theme=dark] .node.done{border-color:#60b590}
html[data-theme=dark] .node-label,html[data-theme=dark] .customNode{color:#d3dcea}
html[data-theme=dark] .wire{background:#3a4968}
html[data-theme=dark] .btn.secondary{background:#1d283b;color:#d3dcea;border-color:#33415c}
html[data-theme=dark] .tab{color:#9aa8bf}
html[data-theme=dark] .tab.active{color:#ff8f7c}
html[data-theme=dark] .code{background:#0f1726;border-color:#263248;color:#b9cdea}
html[data-theme=dark] .step i{background:#263248;color:#dbe4f2}
html[data-theme=dark] .tip{background:#2b2417;border-color:#4a3b1f}
html[data-theme=dark] .tip strong{color:#e6b96b}
html[data-theme=dark] .tip p{color:#d3bf96}
html[data-theme=dark] .pill{background:#173528;color:#7fd1a8}
html[data-theme=dark] .quiz button,html[data-theme=dark] .field{background:#1d283b;border-color:#33415c;color:#dbe4f2}
html[data-theme=dark] .jsonhelp{background:#131c2b}
html[data-theme=dark] .jsonhelp button:hover{background:#2a1f27}
html[data-theme=dark] .jsonlab .bar small{background:#2a1f27;color:#ff9a86}
html[data-theme=dark] .jsonhelp b{color:#ff9a86}
html[data-theme=dark] #jsonError{color:#ff9a86}
html[data-theme=dark] .notice{color:#7fd1a8}
html[data-theme=dark] button:focus-visible,html[data-theme=dark] a:focus-visible,html[data-theme=dark] textarea:focus-visible,html[data-theme=dark] label:focus-visible{outline-color:#7db0ff}

.theme-switch{position:relative;width:62px;height:34px;border-radius:34px;border:1px solid #f1c9bf;background:linear-gradient(135deg,#ffe3d9,#ffd0c2);margin-left:18px;padding:0;cursor:pointer;flex-shrink:0;transition:background .25s,border-color .25s}
.theme-switch .knob{position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;color:#f08a1d;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px #0003;transition:transform .25s,background .25s,color .25s}
.theme-switch .ic-moon{display:none}
html[data-theme=dark] .theme-switch{background:linear-gradient(135deg,#1d283b,#2a3550);border-color:#3a4968}
html[data-theme=dark] .theme-switch .knob{transform:translateX(28px);background:#0e1521;color:#ffd76a}
html[data-theme=dark] .theme-switch .ic-sun{display:none}
html[data-theme=dark] .theme-switch .ic-moon{display:block}
@media(max-width:700px){.theme-switch{margin-left:10px}}

/* ===== PRESENTATION PRO ===== */
html{scroll-behavior:smooth}
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px)}
html[data-theme=dark] header{background:rgba(22,31,47,.88)}
.topnav{display:flex;gap:6px;margin-right:8px}
.topnav a,.doclink{text-decoration:none;color:#4a566b;font-size:13px;font-weight:600;padding:8px 12px;border-radius:8px;transition:background .2s,color .2s}
.topnav a:hover,.doclink:hover{background:#fff0eb;color:#dc614f}
html[data-theme=dark] .topnav a,html[data-theme=dark] .doclink{color:#c3cee0}
html[data-theme=dark] .topnav a:hover,html[data-theme=dark] .doclink:hover{background:#2a1f27;color:#ff9a86}
#atelier,#parcours,#accueil{scroll-margin-top:90px}
.btn{transition:transform .18s,box-shadow .18s,filter .18s;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.btn:hover{transform:translateY(-1px);filter:brightness(1.04)}
.btn.big{padding:15px 24px;font-size:14px;border-radius:10px}
.kicker{display:inline-block;font-size:11px;font-weight:800;letter-spacing:1.8px;color:#dc614f;background:#fff0eb;padding:7px 12px;border-radius:30px}
html[data-theme=dark] .kicker{background:#2a1f27;color:#ff9a86}
.hero{max-width:1550px;margin:auto;padding:72px 65px 48px;display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;position:relative}
.hero:before{content:'';position:absolute;inset:0 0 auto 0;height:100%;background:radial-gradient(600px 300px at 15% 0,#ffe6df 0,transparent 70%),radial-gradient(500px 300px at 90% 30%,#e9efff 0,transparent 70%);z-index:-1;pointer-events:none}
html[data-theme=dark] .hero:before{background:radial-gradient(600px 300px at 15% 0,#3a2230 0,transparent 70%),radial-gradient(500px 300px at 90% 30%,#1a2a4a 0,transparent 70%)}
.hero-title{font-size:clamp(34px,5vw,58px);line-height:1.04;letter-spacing:-2px;margin:20px 0 18px;color:#1c2a40}
.hero-title span{color:#fa7561}
html[data-theme=dark] .hero-title{color:#f1f5fb}
.hero-lead{font-size:17px;line-height:1.75;color:#586579;max-width:610px;margin:0 0 28px}
html[data-theme=dark] .hero-lead{color:#b4c0d3}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.hero-facts{list-style:none;display:flex;flex-wrap:wrap;gap:12px 30px;padding:0;margin:34px 0 0;color:#657086;font-size:13px}
.hero-facts b{font-size:18px;color:#1c2a40;margin-right:4px}
html[data-theme=dark] .hero-facts{color:#9aa8bf}
html[data-theme=dark] .hero-facts b{color:#f1f5fb}
.hero-card{background:#fff;border:1px solid #e4e8ef;border-radius:20px;box-shadow:0 30px 60px -25px #27344a40;overflow:hidden}
html[data-theme=dark] .hero-card{background:#161f2f;border-color:#263248;box-shadow:0 30px 60px -25px #000a}
.hero-bar{display:flex;gap:7px;padding:14px 18px;border-bottom:1px solid #edf0f5}
html[data-theme=dark] .hero-bar{border-color:#263248}
.hero-bar span{width:10px;height:10px;border-radius:50%;background:#e4e8ef}
.hero-bar span:first-child{background:#ff9d8f}
html[data-theme=dark] .hero-bar span{background:#33415c}
html[data-theme=dark] .hero-bar span:first-child{background:#ff7864}
.hero-flow{display:flex;align-items:center;justify-content:center;padding:54px 20px 62px;background-color:#fbfcfe;background-image:radial-gradient(#d9dfe9 1px,transparent 1px);background-size:17px 17px}
html[data-theme=dark] .hero-flow{background-color:#121a29;background-image:radial-gradient(#26324a 1px,transparent 1px)}
.hero-flow .wire{width:44px}
.hero-flow .node{animation:floaty 5s ease-in-out infinite}
.hero-flow .node:nth-child(3){animation-delay:.6s}
.hero-flow .node:nth-child(5){animation-delay:1.2s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.hero-code{margin:18px;text-align:center}
.features{max-width:1550px;margin:auto;padding:16px 65px 40px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.features article{background:#fff;border:1px solid #e4e8ef;border-radius:16px;padding:26px;transition:transform .2s,box-shadow .2s}
.features article:hover{transform:translateY(-3px);box-shadow:0 18px 36px -22px #27344a55}
html[data-theme=dark] .features article{background:#161f2f;border-color:#263248}
.features i{font-style:normal;display:inline-flex;width:34px;height:34px;border-radius:10px;background:#fff0eb;color:#dc614f;font-size:12px;font-weight:800;align-items:center;justify-content:center}
html[data-theme=dark] .features i{background:#2a1f27;color:#ff9a86}
.features h3{margin:16px 0 8px;font-size:17px;color:#1c2a40}
html[data-theme=dark] .features h3{color:#f1f5fb}
.features p{margin:0;font-size:13px;line-height:1.75;color:#657086}
html[data-theme=dark] .features p{color:#b4c0d3}
.path{max-width:1550px;margin:auto;padding:30px 65px 60px}
.path-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.path-head h2{font-size:clamp(24px,3vw,34px);letter-spacing:-1px;margin:14px 0 0;color:#1c2a40;max-width:640px}
html[data-theme=dark] .path-head h2{color:#f1f5fb}
.path-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.path-card{text-align:left;background:#fff;border:1px solid #e4e8ef;border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:10px;color:inherit;transition:transform .2s,box-shadow .2s,border-color .2s}
.path-card:hover{transform:translateY(-4px);border-color:#fba797;box-shadow:0 20px 36px -22px #fa7561aa}
html[data-theme=dark] .path-card{background:#161f2f;border-color:#263248}
html[data-theme=dark] .path-card:hover{border-color:#ff7864}
.pc-num{align-self:flex-start;font-size:12px;font-weight:800;color:#fa7561;border:1px solid #fbc5ba;border-radius:8px;padding:5px 9px}
.path-card.done .pc-num{background:#60b590;border-color:#60b590;color:#fff}
.path-card strong{font-size:16px;letter-spacing:-.3px;color:#1c2a40}
html[data-theme=dark] .path-card strong{color:#f1f5fb}
.pc-intro{font-size:12px;line-height:1.7;color:#657086;flex:1}
html[data-theme=dark] .pc-intro{color:#b4c0d3}
.pc-foot{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#657086;margin-top:6px}
.pc-foot em{font-style:normal}
.pc-foot b{color:#dc614f}
html[data-theme=dark] .pc-foot{color:#9aa8bf}
html[data-theme=dark] .pc-foot b{color:#ff9a86}
.rv{opacity:0;transform:translateY(14px);transition:opacity .6s,transform .6s}
.rv.in{opacity:1;transform:none}
.sitefoot{border-top:1px solid #e8ebf1;background:#fff;padding:36px 65px;display:grid;grid-template-columns:1fr auto;gap:20px 40px;align-items:center}
html[data-theme=dark] .sitefoot{background:#161f2f;border-color:#263248}
.sf-brand p{margin:8px 0 0;font-size:13px;color:#657086}
html[data-theme=dark] .sf-brand p{color:#9aa8bf}
.sf-links{display:flex;flex-wrap:wrap;gap:6px 20px}
.sf-links a{font-size:13px;color:#4a566b;text-decoration:none}
.sf-links a:hover{color:#dc614f;text-decoration:underline}
html[data-theme=dark] .sf-links a{color:#c3cee0}
.sf-legal{grid-column:1/-1;font-size:11px;color:#5b6578;border-top:1px solid #edf0f5;padding-top:18px}
html[data-theme=dark] .sf-legal{color:#9aa8bf;border-color:#263248}
.sitefoot .brand{font-size:19px;color:#1c2a40}
html[data-theme=dark] .sitefoot .brand{color:#f1f5fb}
@media(max-width:1100px){.hero{grid-template-columns:1fr;padding:48px 36px 30px;gap:40px}.features,.path{padding-left:36px;padding-right:36px}.sitefoot{padding:32px 36px}}
@media(max-width:800px){.topnav{display:none}.doclink{display:none}}
@media(max-width:700px){.hero{padding:34px 16px 20px}.hero-lead{font-size:15px}.features{grid-template-columns:1fr;padding:10px 16px 30px}.path{padding:20px 16px 40px}.sitefoot{grid-template-columns:1fr;padding:28px 16px}.hero-flow .node{width:64px;height:64px;font-size:26px}.hero-flow .node-label{top:74px;font-size:9px}.hero-flow .wire{width:20px}.hero-facts{gap:10px 20px}}

/* ===== LANGUES + RTL ===== */
.langsw{display:inline-flex;direction:ltr;border:1px solid #e0e6ef;border-radius:20px;background:#fff;padding:3px;margin-left:16px;flex-shrink:0}
.langsw button{border:0;background:transparent;color:#4a566b;font-size:12px;font-weight:700;padding:6px 11px;border-radius:16px;transition:background .2s,color .2s}
.langsw button:hover{background:#fff0eb;color:#dc614f}
.langsw button[aria-pressed=true]{background:#ff7864;color:#fff}
html[data-theme=dark] .langsw{background:#1d283b;border-color:#33415c}
html[data-theme=dark] .langsw button{color:#c3cee0}
html[data-theme=dark] .langsw button:hover{background:#2a1f27;color:#ff9a86}
html[data-theme=dark] .langsw button[aria-pressed=true]{background:#ff7864;color:#fff}
html[lang=ar] *{letter-spacing:0!important}
html[lang=ar]{font-family:'Segoe UI',Tahoma,'Noto Sans Arabic','Noto Naskh Arabic',Arial,sans-serif}
html[dir=rtl] .theme-switch{margin-left:0;margin-right:16px}
html[dir=rtl] .langsw{margin-left:0;margin-right:16px}
html[dir=rtl] .topnav{margin-right:0;margin-left:8px}
html[dir=rtl] aside{border-right:0;border-left:1px solid #e8ebf1}
html[dir=rtl] .brand b{margin-right:0;margin-left:10px}
html[dir=rtl] .brand small{margin-left:0;margin-right:13px}
html[dir=rtl] .canvas-tag{left:auto;right:15px}
html[dir=rtl] .time{margin-left:0;margin-right:4px}
html[dir=rtl] .nav,html[dir=rtl] .path-card,html[dir=rtl] .quiz button,html[dir=rtl] .jsonhelp button{text-align:right}
html[dir=rtl] .canvas,html[dir=rtl] .hero-flow,html[dir=rtl] .customNodes,html[dir=rtl] .code,html[dir=rtl] .editorwrap,html[dir=rtl] #jsonEditor,html[dir=rtl] .hero-code,html[dir=rtl] .hero-card,html[dir=rtl] .connectionList{direction:ltr}
html[dir=rtl] .code,html[dir=rtl] #jsonEditor,html[dir=rtl] .hero-code{text-align:left}
html[dir=rtl] .field{text-align:right}
html[dir=rtl] .jsonactions label{margin:0}
@media(max-width:800px){.langsw{margin-left:8px}html[dir=rtl] .langsw{margin-right:8px}.theme-switch{margin-left:8px}html[dir=rtl] .theme-switch{margin-right:8px}}
@media(max-width:480px){.langsw button{padding:5px 8px;font-size:11px}header{padding:0 10px}}