/* ClicksVecto — parties 4 à 6 : couleurs, modules créatifs, fichiers */

.plabel.block{display:block; margin:.6rem 0 .35rem; min-width:0;}
.fill-modes{margin-bottom:.55rem;}
.fm-prev{width:16px; height:16px; border-radius:5px; flex:none; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);}
.grad-row{display:flex; align-items:center; gap:.4rem; margin-bottom:.4rem;}
.grad-bar{flex:1; height:26px; border-radius:9px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);}
.gstop{width:30px; height:30px; border-radius:50%; border:3px solid var(--panel-solid); box-shadow:0 0 0 1px var(--field-line); display:grid; place-items:center; color:#fff; font-size:.7rem; transition:transform .18s, box-shadow .18s;}
.gstop b{text-shadow:0 1px 2px rgba(0,0,0,.6);}
.gstop.on{box-shadow:0 0 0 2px var(--ink); transform:scale(1.12);}
.gswap{width:34px; min-height:30px; padding:0; font-size:1rem;}
.pal-chips{display:flex; gap:4px; overflow-x:auto; margin:.2rem 0 .5rem; padding-bottom:2px; scrollbar-width:none;}
.pal-chips::-webkit-scrollbar{display:none;}
.pal-chips button{flex:none; display:flex; align-items:center; gap:.3rem; border:0; border-radius:999px; padding:.3rem .6rem; font-weight:800; font-size:.72rem; background:var(--field); color:var(--ink-soft); transition:background .2s, color .2s, transform .2s;}
.pal-chips button i{width:22px; height:9px; border-radius:5px;}
.pal-chips button:hover{transform:translateY(-1px);}
.pal-chips button[aria-selected="true"]{color:#fff; background:linear-gradient(130deg,var(--coral),var(--pink));}
.recent{margin-top:.55rem;}
.recent .plabel{display:block; margin-bottom:.3rem; min-width:0;}
.recent-sw{grid-template-columns:repeat(12,1fr); gap:3px;}
.sw.sm{border-radius:6px; border-width:1.5px;}
.lesson-link{display:flex; align-items:center; gap:.4rem; width:100%; margin-top:.65rem; padding:.5rem .6rem; border:1.5px dashed color-mix(in srgb,var(--orange) 60%,transparent); border-radius:11px; background:color-mix(in srgb,var(--orange) 8%,transparent); color:var(--ink); font-weight:800; font-size:.76rem; text-align:start; transition:background .2s, transform .2s;}
.lesson-link:hover{background:color-mix(in srgb,var(--orange) 16%,transparent); transform:translateY(-1px);}

/* barre du haut : sauvegarde auto + menu Créer */
.save-chip{display:inline-flex; align-items:center; gap:.2rem; padding:0 .55rem; font-size:.72rem; font-weight:800; color:var(--emerald); white-space:nowrap;}
.save-chip.flash{animation:chipFlash .9s ease;}
@keyframes chipFlash{0%{transform:scale(.8); opacity:.3;} 40%{transform:scale(1.08); opacity:1;} 100%{transform:none;}}
.menu-wrap{position:relative; flex:none;}
.tb-btn.create{background:var(--panel); box-shadow:var(--shadow-sm); color:var(--violet);}
.tb-btn.create .caret{font-size:.7rem; opacity:.7;}
.tb-btn.create[aria-expanded="true"]{color:#fff; background:linear-gradient(130deg,var(--violet),var(--indigo));}
.menu{position:fixed; z-index:65; width:300px; padding:.4rem; border-radius:18px; background:var(--panel-solid); box-shadow:var(--shadow-lg); border:1px solid var(--panel-line); animation:menuIn .25s cubic-bezier(.3,1.4,.5,1) both; transform-origin:top left;}
@keyframes menuIn{from{opacity:0; transform:translateY(-6px) scale(.96);} to{opacity:1; transform:none;}}
.menu-item{display:flex; align-items:center; gap:.65rem; width:100%; padding:.5rem; border:0; border-radius:13px; background:none; text-align:start; transition:background .15s, transform .15s; animation:riseIn .3s calc(var(--i) * 35ms) both;}
.menu-item:hover,.menu-item:focus-visible{background:var(--field); transform:translateX(2px);}
.mi-ico{width:40px; height:40px; border-radius:12px; display:grid; place-items:center; font-size:1.25rem; flex:none; box-shadow:0 6px 14px -8px rgba(0,0,0,.5);}
.mi-txt{flex:1; min-width:0;}
.mi-txt b{display:block; font-family:'Fredoka',sans-serif; font-weight:600; font-size:.92rem;}
.mi-txt small{display:block; font-size:.72rem; font-weight:700; color:var(--ink-soft);}
.menu-item.locked{opacity:.75;}
.mi-lock{color:var(--orange);}
.mi-switch{width:34px; height:20px; border-radius:999px; background:var(--field-line); position:relative; flex:none; transition:background .2s;}
.mi-switch::after{content:""; position:absolute; top:3px; left:3px; width:14px; height:14px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:transform .25s cubic-bezier(.3,1.5,.5,1);}
.mi-switch.on{background:var(--emerald);}
.mi-switch.on::after{transform:translateX(14px);}

/* chargement */
.is-busy{position:relative; color:transparent !important;}
.is-busy::after{content:""; position:absolute; left:50%; top:50%; margin:-10px 0 0 -10px; width:20px; height:20px; border-radius:50%; border:3px solid rgba(255,255,255,.45); border-top-color:#fff; animation:spin .8s linear infinite;}
.export-opt.is-busy::after,.mbtn:not(.primary):not(.hot).is-busy::after{border-color:var(--field-line); border-top-color:var(--sky);}
.spinner{display:inline-block; width:26px; height:26px; border-radius:50%; border:3px solid var(--field-line); border-top-color:var(--sky); animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* modales élargies, export, galerie */
.modal-card.wide{width:min(760px,100%);}
.modal-actions.split{justify-content:space-between; align-items:center;}
.modal-actions .grow{flex:1;}
.export-opt.as-group{cursor:default;}
.export-opt .grow{flex:1; display:flex; flex-direction:column; gap:.35rem;}
.res-pick{display:flex; gap:.35rem; flex-wrap:wrap; margin:.25rem 0;}
.res-pick label{cursor:pointer; position:relative;}
.res-pick input,.dest-pick input{position:absolute; opacity:0; pointer-events:none;}
.res-pick span{display:flex; flex-direction:column; padding:.35rem .6rem; border-radius:10px; border:2px solid var(--field-line); background:var(--panel-solid); transition:border-color .2s, background .2s;}
.res-pick span b{font-size:.8rem;}
.res-pick span small{font-size:.66rem;}
.res-pick input:checked + span{border-color:var(--sky); background:var(--sel-soft);}
.res-pick input:focus-visible + span,.dest-pick input:focus-visible + span{outline:3px solid var(--sky);}
.export-opt .mbtn{align-self:flex-start;}
.dest-pick{display:grid; grid-template-columns:1fr 1fr; gap:.5rem; margin-bottom:1rem;}
.dest-pick label{cursor:pointer; position:relative;}
.dest-pick span{display:flex; flex-direction:column; gap:.15rem; height:100%; padding:.7rem; border-radius:14px; border:2px solid var(--field-line); background:var(--field); transition:border-color .2s, transform .2s;}
.dest-pick span small{font-size:.72rem; color:var(--ink-soft); font-weight:700;}
.dest-pick input:checked + span{border-color:var(--sky); background:var(--sel-soft); transform:translateY(-2px);}
.dest-pick input:disabled + span{opacity:.6; cursor:not-allowed;}
.gal-tabs{margin-bottom:.8rem;}
.gal-body{min-height:150px;}
.gal-count{margin:0 0 .5rem; font-size:.78rem; font-weight:800; color:var(--ink-soft);}
.saved-item span small{display:block; font-size:.66rem; color:var(--ink-faint);}
.saved-item.is-loading{opacity:.5; pointer-events:none;}
.empty .mbtn{margin-top:.4rem;}

/* roue des couleurs */
.wheel-pop{position:fixed; z-index:90; width:264px; padding:.8rem; border-radius:20px; background:var(--panel-solid); box-shadow:var(--shadow-lg); border:1px solid var(--panel-line); animation:menuIn .25s cubic-bezier(.3,1.4,.5,1) both;}
.wheel-pop.out{animation:fadeOut .18s forwards;}
@keyframes fadeOut{to{opacity:0; transform:scale(.96);}}
.wp-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem;}
.wp-head b{font-family:'Fredoka',sans-serif;}
.wp-prev{display:flex; border-radius:9px; overflow:hidden; box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);}
.wp-prev i{width:26px; height:22px;}
.wp-disc{position:relative; width:220px; height:220px; margin:0 auto .5rem; touch-action:none;}
.wp-disc canvas{width:220px; height:220px; border-radius:50%; cursor:crosshair; box-shadow:0 8px 20px -10px rgba(0,0,0,.5);}
.wp-knob{position:absolute; width:22px; height:22px; margin:-11px 0 0 -11px; border-radius:50%; border:3px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.3),0 3px 8px rgba(0,0,0,.35); pointer-events:none;}
.wp-row{display:flex; align-items:center; gap:.5rem; margin:.35rem 0; font-size:.75rem; font-weight:800; color:var(--ink-soft);}
.wp-row span{min-width:52px;}
.wp-light{-webkit-appearance:none; appearance:none; flex:1; height:12px; border-radius:8px;}
.wp-light::-webkit-slider-runnable-track{background:transparent; border:0;}
.wp-light::-webkit-slider-thumb{-webkit-appearance:none; width:18px; height:18px; margin-top:-3px; border-radius:50%; background:#fff; border:2px solid var(--ink);}
.wp-hex{flex:1; min-width:0; height:32px; border-radius:9px; border:1px solid var(--field-line); background:var(--field); padding:0 .5rem; font-weight:800; font-family:ui-monospace,monospace;}
.wp-actions{display:flex; justify-content:flex-end; gap:.4rem; margin-top:.5rem;}
.wp-actions .mbtn{height:36px; padding:0 .9rem;}

/* leçon des couleurs */
.lesson-grid{display:grid; grid-template-columns:minmax(0,260px) 1fr; gap:1.2rem; align-items:center;}
.lw-wheel{width:100%; height:auto; overflow:visible;}
.lw-seg{stroke:var(--panel-solid); stroke-width:2; cursor:pointer; transform-origin:0 0; transition:opacity .35s, transform .35s cubic-bezier(.3,1.4,.5,1); animation:segIn .5s calc(var(--i) * 40ms) cubic-bezier(.3,1.4,.5,1) backwards;}
@keyframes segIn{from{opacity:0; transform:scale(.6) rotate(-20deg);} to{opacity:1; transform:none;}}
.mode-warm .lw-seg.cool,.mode-cool .lw-seg.warm,.lw-seg.dim{opacity:.18;}
.mode-warm .lw-seg.warm,.mode-cool .lw-seg.cool{transform:scale(1.06);}
.lw-seg:hover{transform:scale(1.05);}
.lw-center{fill:var(--panel-solid); stroke:var(--field-line); transition:fill .3s;}
.lw-link{stroke:var(--ink); stroke-width:3; stroke-linecap:round; stroke-dasharray:200; stroke-dashoffset:200;}
.lw-link.show{animation:linkDraw .6s ease forwards;}
@keyframes linkDraw{to{stroke-dashoffset:0;}}
.lesson-txt{font-weight:700; color:var(--ink-soft); line-height:1.5; margin:.8rem 0;}
.lesson-pair{font-weight:800; font-size:1.05rem;}
.lesson-body .color-tabs{margin-bottom:.6rem;}
.quiz{text-align:center;}
.qz-progress{height:8px; border-radius:8px; background:var(--field); overflow:hidden; margin-bottom:.8rem;}
.qz-progress i{display:block; height:100%; background:linear-gradient(90deg,var(--orange),var(--pink)); transition:width .4s;}
.qz-q{font-weight:800; font-size:1.02rem;}
.qz-swatch{width:110px; height:110px; margin:.4rem auto 1rem; border-radius:28px; box-shadow:0 14px 28px -14px rgba(0,0,0,.5); animation:popIn2 .4s cubic-bezier(.3,1.6,.5,1) both;}
@keyframes popIn2{from{transform:scale(.4) rotate(-12deg); opacity:0;} to{transform:none; opacity:1;}}
.qz-col{height:64px; border:0; border-radius:16px; cursor:pointer; transition:transform .2s;}
.qz-col:hover{transform:translateY(-3px);}
.qz-a.right{box-shadow:0 0 0 4px var(--emerald) !important; animation:okPop .4s;}
.qz-a.wrong{box-shadow:0 0 0 4px var(--rose) !important; animation:shake .4s;}
@keyframes okPop{50%{transform:scale(1.08);}}
@keyframes shake{20%,60%{transform:translateX(-6px);} 40%,80%{transform:translateX(6px);}}
.qz-next{margin-top:1rem;}
.quiz-end{text-align:center; padding:1rem 0;}
.qz-stars,.dr-stars{display:flex; justify-content:center; gap:.4rem;}
.qz-star,.d-star{color:var(--field-line); display:inline-flex;}
.qz-star.on,.d-star.on{color:var(--sun); animation:starPop .5s calc(var(--i) * 140ms) cubic-bezier(.3,1.8,.5,1) both;}
@keyframes starPop{from{transform:scale(0) rotate(-90deg);} to{transform:none;}}

/* Mode Géomètre */
.geo-pill rect{fill:var(--emerald); opacity:.95;}
.geo-pill.ang rect{fill:var(--violet);}
.geo-pill text{fill:#fff; font:800 11px 'Nunito',sans-serif;}
.geo-dot{fill:#fff; stroke:var(--emerald); stroke-width:2.5;}
.geo-letter{font:700 15px 'Fredoka',sans-serif; fill:var(--emerald); paint-order:stroke; stroke:var(--panel-solid); stroke-width:4px;}
.geo-arc{fill:color-mix(in srgb,var(--violet) 22%,transparent); stroke:var(--violet); stroke-width:1.5;}
.geo-right{fill:none; stroke:var(--violet); stroke-width:2;}
.geo-radius{stroke:var(--emerald); stroke-width:2; stroke-dasharray:6 4;}
.geo-fig{display:inline-block; padding:.25rem .7rem; border-radius:999px; font-family:'Fredoka',sans-serif; font-weight:600; color:#fff; background:linear-gradient(130deg,var(--emerald),var(--turquoise)); margin-bottom:.5rem;}
.geo-list{margin:0; display:grid; gap:.35rem;}
.geo-list dt{font-size:.72rem; font-weight:800; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.03em;}
.geo-list dd{margin:0; font-size:.85rem; font-weight:700; font-variant-numeric:tabular-nums;}
.geo-list dd b{color:var(--emerald);}
.geo-coords{display:flex; flex-wrap:wrap; gap:.3rem .6rem; margin-top:.55rem; font-size:.76rem; font-weight:700; font-variant-numeric:tabular-nums;}
.geo-coords .plabel{flex-basis:100%; min-width:0;}
.geo-coords b{color:var(--emerald);}

/* Défis */
.defi-head{margin:-.3rem 0 .7rem;}
.defi-date{font-weight:800; font-size:.8rem; color:var(--orange);}
.defi-card{display:flex; gap:1rem; align-items:flex-start; padding:1rem; border-radius:20px; background:linear-gradient(135deg,color-mix(in srgb,var(--orange) 10%,var(--panel-solid)),color-mix(in srgb,var(--pink) 10%,var(--panel-solid))); animation:riseIn .4s both;}
.defi-emoji{font-size:3rem; line-height:1; animation:heroBob 3s ease-in-out infinite;}
.defi-main{flex:1; min-width:0;}
.defi-kicker{font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft);}
.defi-exp{color:var(--violet);}
.defi-main h3{margin:.15rem 0 .3rem; font-size:1.3rem;}
.defi-main p{margin:0 0 .6rem; color:var(--ink-soft); font-weight:700;}
.defi-crit{list-style:none; margin:0; padding:0; display:grid; gap:.35rem;}
.defi-crit li{display:flex; align-items:center; gap:.5rem; font-weight:800; font-size:.86rem; padding:.4rem .6rem; border-radius:11px; background:var(--panel-solid); animation:riseIn .35s calc(var(--i) * 70ms) both;}
.dc-ico{width:22px; height:22px; border-radius:50%; display:grid; place-items:center; flex:none; background:var(--field); color:var(--ink-faint); font-weight:900;}
.defi-crit li.ok .dc-ico{background:var(--emerald); color:#fff; animation:okPop .4s;}
.defi-crit li.ko .dc-ico{background:color-mix(in srgb,var(--rose) 20%,transparent); color:var(--rose);}
.defi-best{margin-top:.6rem; font-size:.75rem; font-weight:800; color:var(--ink-soft); display:flex; align-items:center; gap:.3rem;}
.defi-result{text-align:center; margin-top:.8rem; padding:.8rem; border-radius:16px; background:var(--field); animation:riseIn .35s both;}
.defi-result.s3{background:linear-gradient(135deg,color-mix(in srgb,var(--sun) 25%,var(--panel-solid)),color-mix(in srgb,var(--emerald) 18%,var(--panel-solid)));}
.defi-result p{margin:.4rem 0 .2rem; font-weight:800;}
.defi-result small{font-weight:700; color:var(--ink-soft);}
.defi-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:.5rem; max-height:52vh; overflow:auto; padding:2px;}
.defi-tile{display:flex; flex-direction:column; align-items:center; gap:.2rem; padding:.6rem .4rem; border:2px solid var(--panel-line); border-radius:15px; background:var(--field); text-align:center; transition:transform .2s, border-color .2s; animation:chipIn .35s calc(var(--i) * 18ms) both;}
.defi-tile:hover{transform:translateY(-3px); border-color:var(--orange);}
.defi-tile.today{border-color:var(--orange); box-shadow:0 8px 18px -10px var(--orange);}
.defi-tile.done{background:color-mix(in srgb,var(--sun) 12%,var(--field));}
.defi-tile.locked{opacity:.6;}
.dt-e{font-size:1.6rem;}
.dt-t{font-weight:800; font-size:.74rem; line-height:1.2;}
.dt-s{display:flex; color:var(--orange);}
.defi-chip,.at-chip{position:absolute; z-index:6; left:50%; top:34px; transform:translateX(-50%); display:flex; align-items:center; gap:.35rem; padding:.3rem; border-radius:16px; background:var(--panel-solid); box-shadow:var(--shadow); border:1px solid var(--panel-line); max-width:calc(100% - 24px); animation:chipDrop .45s cubic-bezier(.3,1.4,.5,1) both;}
.defi-chip:not([hidden]) ~ .at-chip{top:96px;}
@keyframes chipDrop{from{opacity:0; transform:translate(-50%,-16px);} to{opacity:1; transform:translate(-50%,0);}}
.dch-main{display:flex; align-items:center; gap:.5rem; border:0; background:none; text-align:start; padding:.1rem .3rem; min-width:0;}
.dch-e{font-size:1.5rem;}
.dch-main small{display:block; font-size:.62rem; font-weight:800; text-transform:uppercase; color:var(--orange);}
.dch-main b{display:block; font-family:'Fredoka',sans-serif; font-weight:600; font-size:.88rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:220px;}
.dch-stars{display:flex; color:var(--orange);}
.dch-verify,.atc-btn{border:0; border-radius:11px; height:34px; padding:0 .8rem; font-weight:800; font-size:.8rem; color:#fff; background:linear-gradient(120deg,var(--orange),var(--pink)); white-space:nowrap;}
.dch-x,.atc-x{width:30px; height:30px; border:0; border-radius:9px; background:var(--field); display:grid; place-items:center; color:var(--ink-soft);}
.confetti{position:fixed; inset:0; z-index:100; pointer-events:none;}

/* Atelier */
.at-tabs{margin-bottom:.8rem;}
.at-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(128px,1fr)); gap:.6rem; max-height:56vh; overflow:auto; padding:2px;}
.at-tile{position:relative; display:flex; flex-direction:column; align-items:center; gap:.3rem; padding:.55rem; border:2px solid var(--panel-line); border-radius:16px; background:var(--field); transition:transform .2s, border-color .2s, box-shadow .2s; animation:chipIn .35s calc(var(--i) * 30ms) both;}
.at-tile svg{width:100%; aspect-ratio:1; background:#fff; border-radius:12px;}
.at-tile:hover{transform:translateY(-4px) rotate(-1deg); border-color:var(--marigold); box-shadow:0 12px 22px -14px var(--orange);}
.at-tile.locked svg{filter:grayscale(.85); opacity:.6;}
.at-name{font-weight:800; font-size:.76rem; text-align:center; line-height:1.2;}
.at-lock,.at-done{position:absolute; top:8px; inset-inline-end:8px; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:var(--panel-solid); color:var(--orange); box-shadow:var(--shadow-sm);}
.at-done{color:var(--sun);}
.at-detail{display:grid; grid-template-columns:minmax(0,300px) 1fr; gap:1.2rem; align-items:center;}
.at-big svg{width:100%; aspect-ratio:1; background:#fff; border-radius:18px; box-shadow:var(--shadow);}
.at-side h2{margin-bottom:.2rem;}
.at-side .color-tabs{margin:.7rem 0;}
.at-choice{display:flex; flex-direction:column; align-items:flex-start; gap:.15rem; width:100%; margin-top:.5rem; padding:.75rem .9rem; border-radius:15px; border:2px solid var(--panel-line); background:var(--field); text-align:start; transition:transform .2s, border-color .2s;}
.at-choice:hover{transform:translateY(-2px); border-color:var(--sky);}
.at-choice.hot{color:#fff; border-color:transparent; background:linear-gradient(130deg,var(--orange),var(--pink));}
.at-choice small{font-weight:700; opacity:.85;}
.ghost-piece{fill:rgba(139,95,191,.08); stroke:rgba(139,95,191,.6); stroke-width:1.5; stroke-dasharray:6 4; vector-effect:non-scaling-stroke;}
.ghost-piece.hint{animation:ghostHint 1.8s ease 2;}
@keyframes ghostHint{50%{fill:rgba(244,169,59,.55); stroke:var(--orange);}}
.atc-e{font-size:1.5rem; padding-inline-start:.3rem;}
.atc-txt{display:flex; flex-direction:column; min-width:120px;}
.atc-txt b{font-family:'Fredoka',sans-serif; font-weight:600; font-size:.88rem;}
.atc-txt small{font-size:.7rem; font-weight:800; color:var(--ink-soft);}
.atc-bar{display:block; height:6px; border-radius:6px; background:var(--field); overflow:hidden; margin-top:2px;}
.atc-bar i{display:block; height:100%; background:linear-gradient(90deg,var(--marigold),var(--emerald)); transition:width .4s cubic-bezier(.3,1.4,.5,1);}
.atc-btn{background:linear-gradient(120deg,var(--marigold),var(--orange));}
.atc-ok{color:var(--sun); animation:starPop .5s both;}

/* Rejouer */
.modal-card.rp-card{width:min(900px,100%);}
.rp-stage{position:relative; border-radius:16px; overflow:hidden; box-shadow:var(--shadow); background:#fff;}
.rp-svg{display:block; width:100%; height:auto;}
.rp-new{transform-box:fill-box; transform-origin:center; animation:rpGrow .45s cubic-bezier(.3,1.6,.5,1) both;}
@keyframes rpGrow{from{transform:scale(.2); opacity:0;} to{transform:none; opacity:1;}}
.rp-end{position:absolute; left:50%; bottom:12px; transform:translateX(-50%); padding:.4rem 1rem; border-radius:999px; color:#fff; font-weight:800; background:linear-gradient(120deg,var(--pink),var(--violet)); animation:fadeIn .4s both;}
.rp-ctrl{display:flex; align-items:center; gap:.6rem; margin-top:.8rem; flex-wrap:wrap;}
.rp-play{width:48px; height:48px; border:0; border-radius:50%; display:grid; place-items:center; color:#fff; background:linear-gradient(130deg,var(--pink),var(--violet)); box-shadow:0 10px 20px -10px var(--violet); transition:transform .2s;}
.rp-play:hover{transform:scale(1.08);}
.rp-ctrl input[type=range]{flex:1; min-width:140px; --accent:var(--pink);}
.rp-count{font-weight:800; font-size:.8rem; color:var(--ink-soft); font-variant-numeric:tabular-nums; min-width:96px;}
.rp-speed{display:flex; gap:2px; padding:3px; border-radius:11px; background:var(--field);}
.rp-speed button{border:0; border-radius:8px; padding:.3rem .55rem; font-weight:800; font-size:.78rem; background:none; color:var(--ink-soft);}
.rp-speed button[aria-pressed="true"]{background:var(--panel-solid); color:var(--ink); box-shadow:var(--shadow-sm);}

/* Motifs */
.mo-types{display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.7rem;}
.mo-types .pbtn[aria-pressed="true"]{color:#fff; background:linear-gradient(135deg,var(--indigo),var(--turquoise));}
.mo-preview{border-radius:16px; overflow:hidden; box-shadow:var(--shadow); background:#fff;}
.mo-preview svg{display:block; width:100%; height:auto;}
.mo-sliders{display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; margin-top:.7rem;}
.mo-sliders label{display:flex; flex-direction:column; gap:.1rem; font-size:.74rem; font-weight:800; color:var(--ink-soft); --accent:var(--indigo);}
.mo-sliders b{color:var(--ink); font-variant-numeric:tabular-nums;}
.hint.warn{color:var(--rose);}
.mo-open.locked{opacity:.75;}

/* Zelli */
.zelli{position:absolute; z-index:5; left:32px; bottom:50px; display:flex; align-items:flex-end; gap:.4rem; pointer-events:none;}
.canvas-area.no-rulers .zelli{left:10px;}
.zelli > *{pointer-events:auto;}
.zelli-owl{width:66px; height:72px; border:0; padding:0; background:none; cursor:pointer; filter:drop-shadow(0 8px 10px rgba(36,31,61,.3)); animation:zBob 3.2s ease-in-out infinite; transition:transform .2s;}
.zelli-owl:hover{transform:scale(1.08) rotate(-4deg);}
.zelli-svg{width:100%; height:100%;}
@keyframes zBob{0%,100%{translate:0 0;} 50%{translate:0 -5px;}}
.z-lids rect{animation:zBlink 4.5s infinite;}
@keyframes zBlink{0%,94%,100%{height:0;} 96%{height:28px;}}
.z-wing{transform-box:fill-box;}
.z-wl{transform-origin:right top;}
.z-wr{transform-origin:left top;}
.zelli.talking .z-wl{animation:zFlapL .35s ease-in-out 4;}
.zelli.talking .z-wr{animation:zFlapR .35s ease-in-out 4;}
@keyframes zFlapL{50%{transform:rotate(18deg);}}
@keyframes zFlapR{50%{transform:rotate(-18deg);}}
.z-zellige{transform-box:fill-box; transform-origin:center; animation:spinOnce 6s linear infinite;}
.zelli-bubble{position:relative; order:2; max-width:280px; margin-bottom:46px; padding:.7rem .8rem .55rem; border-radius:18px 18px 18px 4px; background:var(--panel-solid); box-shadow:var(--shadow-lg); border:2px solid color-mix(in srgb,var(--violet) 35%,transparent);}
.zelli-bubble.pop{animation:bubbleIn .4s cubic-bezier(.3,1.6,.5,1) both;}
@keyframes bubbleIn{from{opacity:0; transform:scale(.6) translateY(10px);} to{opacity:1; transform:none;}}
.zelli-bubble p{margin:0 0 .35rem; font-weight:700; font-size:.84rem; line-height:1.4;}
.zb-actions{display:flex; justify-content:space-between; align-items:center; gap:.3rem;}
.zb-mute{border:0; background:none; font-size:.68rem; font-weight:800; color:var(--ink-faint); padding:0;}
.zb-mute:hover{color:var(--rose);}
.zb-x{width:24px; height:24px; border:0; border-radius:7px; background:var(--field); display:grid; place-items:center; color:var(--ink-soft);}

/* Tutoriel */
.tuto-card{position:absolute; z-index:7; right:12px; bottom:62px; width:min(380px,calc(100% - 24px)); padding:.7rem; border-radius:20px; background:var(--panel-solid); box-shadow:var(--shadow-lg); border:1px solid var(--panel-line); animation:riseIn .45s cubic-bezier(.3,1.3,.5,1) both;}
.tuto-card.cheer{animation:cheer .6s cubic-bezier(.3,1.6,.5,1);}
@keyframes cheer{30%{transform:scale(1.04) rotate(-1deg);} 60%{transform:scale(.99) rotate(.5deg);}}
.tu-head{display:flex; align-items:center; gap:.4rem; margin-bottom:.5rem;}
.tu-step{font-weight:800; font-size:.72rem; color:var(--sky); text-transform:uppercase; letter-spacing:.04em; white-space:nowrap;}
.tu-dots{display:flex; gap:3px; flex:1; justify-content:center;}
.tu-dots i{width:8px; height:8px; border-radius:50%; background:var(--field-line); transition:background .3s, transform .3s;}
.tu-dots i.ok{background:var(--emerald);}
.tu-dots i.cur{background:var(--sky); transform:scale(1.35);}
.tu-icon{width:26px; height:26px; border:0; border-radius:8px; background:var(--field); display:grid; place-items:center; color:var(--ink-soft); font-weight:900;}
.tu-gif{border-radius:14px; overflow:hidden; background:var(--field); aspect-ratio:480/300; cursor:zoom-in;}
.tu-gif img{display:block; width:100%; height:100%; object-fit:contain;}
.tu-gif.zoom{position:fixed; inset:5vh 5vw; z-index:95; aspect-ratio:auto; background:rgba(20,17,40,.88); border-radius:20px; cursor:zoom-out; padding:1rem;}
.tu-text h3{margin:.55rem 0 .2rem; font-size:1.08rem;}
.tu-text p{margin:0 0 .3rem; font-weight:700; font-size:.84rem; color:var(--ink-soft); line-height:1.4;}
.tu-text p.tu-status{display:flex; align-items:center; gap:.3rem; color:var(--sky); font-weight:800;}
.tu-text p.tu-status.ok{color:var(--emerald); animation:okPop .4s;}
.tu-actions{display:flex; gap:.4rem; align-items:center; margin-top:.4rem;}
.tu-actions .grow{flex:1;}
.tu-actions .mbtn{height:36px; padding:0 .9rem; font-size:.82rem;}
.tu-actions .mbtn:disabled{opacity:.4;}
.tuto-card.min .tu-body,.tuto-card.min .tu-actions{display:none;}
.tuto-card.min{width:auto; cursor:pointer;}
.tuto-card.min .tu-head{margin:0;}
.tu-finish{text-align:center; padding:.6rem;}
.tu-medal{font-size:3.2rem; animation:heroBob 2.4s ease-in-out infinite;}
.tu-finish .tu-actions{justify-content:center;}

/* calque modèle */
.trace-ico{font-size:.85rem;}
.trace-op{width:70px; height:20px; --accent:var(--ink-faint);}
.l-trace{cursor:pointer; font-size:1rem;}

@media (max-width:860px){
  .lesson-grid,.at-detail{grid-template-columns:1fr;}
  .lw-wheel{max-width:240px; margin:auto; display:block;}
  .at-big svg{max-width:240px; margin:auto; display:block;}
  .tuto-card{left:8px; right:8px; bottom:56px; width:auto;}
  .tu-gif{max-height:30vh;}
  .zelli{left:8px; bottom:52px;}
  .zelli-owl{width:50px; height:54px;}
  .zelli-bubble{max-width:220px; margin-bottom:34px;}
  .defi-chip,.at-chip{top:44px;}
  .dch-main b{max-width:120px;}
  .dch-stars{display:none;}
  .mo-sliders{grid-template-columns:1fr;}
  .dest-pick{grid-template-columns:1fr;}
  .menu{width:min(300px,calc(100vw - 16px));}
  .tb-btn.create .lbl,.tb-btn.create .caret{display:none;}
  .tb-btn.create{width:38px; padding:0; justify-content:center;}
  .save-chip{display:none;}
}

.layer-chip .layer-name{flex:none;}
.geo-list dd,.geo-coords span{direction:ltr; unicode-bidi:isolate;}
:root[dir="rtl"] .geo-list dd{text-align:right;}