/* ClicksVecto — mode « Petits artistes » (5-7 ans) : gros boutons, gros textes, pas de réglages */

body.kids-mode .canvas-area{grid-template-columns:0 minmax(0,1fr); grid-template-rows:0 minmax(0,1fr);}
body.kids-mode .ruler,body.kids-mode .ruler-corner,body.kids-mode .status,body.kids-mode .layers,
body.kids-mode #levelSeg,body.kids-mode #btnChallenge,body.kids-mode .menu-wrap,body.kids-mode #tgGeo,body.kids-mode #tgSnap,
body.kids-mode #tgRulers,body.kids-mode #tgGrid,body.kids-mode .badge-free,body.kids-mode .defi-chip,body.kids-mode .at-chip,
body.kids-mode .tuto-card,body.kids-mode #mobileDock{display:none !important;}
body.kids-mode .workspace{grid-template-columns:104px minmax(0,1fr) 330px; grid-template-rows:minmax(0,1fr);}
body.kids-mode .toolbar{grid-row:1; gap:12px; padding:14px 0; justify-content:center;}
body.kids-mode .tool{width:76px; height:76px; border-radius:24px;}
body.kids-mode .tool .ico{width:40px; height:40px;}
body.kids-mode .tool .kbd{display:none;}
body.kids-mode .props{grid-row:1; padding:1rem; background:linear-gradient(160deg,color-mix(in srgb,var(--sun) 16%,var(--panel-solid)),color-mix(in srgb,var(--pink) 10%,var(--panel-solid)));}
body.kids-mode .canvas-area{background-color:color-mix(in srgb,var(--sun) 10%,var(--desk));}
body.kids-mode .ov-hover{stroke-width:3;}

.pa-panel{display:flex; flex-direction:column; gap:.8rem; animation:riseIn .4s both;}
.pa-head{display:flex; align-items:center; gap:.6rem;}
.pa-emoji{font-size:2.8rem; line-height:1; animation:heroBob 3s ease-in-out infinite;}
.pa-head h2{margin:0; font-size:1.5rem;}
.pa-listen{display:flex; align-items:center; gap:.7rem; padding:.8rem; border:0; border-radius:20px; text-align:start; color:var(--ink); background:var(--panel-solid); box-shadow:var(--shadow); transition:transform .2s;}
.pa-listen:hover{transform:translateY(-2px);}
.pa-listen span{flex:none; width:56px; height:56px; border-radius:50%; display:grid; place-items:center; font-size:1.8rem; background:linear-gradient(135deg,var(--sky),var(--turquoise)); box-shadow:0 8px 16px -8px var(--sky); animation:paPulse 2.4s ease-in-out infinite;}
@keyframes paPulse{0%,100%{transform:scale(1);} 50%{transform:scale(1.08);}}
.pa-listen b{font-family:'Fredoka',sans-serif; font-weight:500; font-size:1.05rem; line-height:1.35;}
.pa-progress{position:relative; height:30px; border-radius:15px; background:var(--panel-solid); overflow:hidden; box-shadow:inset 0 0 0 2px var(--panel-line);}
.pa-progress i{position:absolute; inset:0 auto 0 0; background:linear-gradient(90deg,var(--sun),var(--emerald)); border-radius:15px; transition:width .5s cubic-bezier(.3,1.4,.5,1);}
.pa-progress span{position:relative; display:block; text-align:center; line-height:30px; font-family:'Fredoka',sans-serif; font-weight:600; font-size:1.05rem;}
.pa-done{display:flex; flex-direction:column; align-items:center; gap:.4rem; padding:1rem; border-radius:22px; text-align:center; background:linear-gradient(135deg,color-mix(in srgb,var(--sun) 30%,var(--panel-solid)),color-mix(in srgb,var(--emerald) 22%,var(--panel-solid))); animation:modalIn .5s cubic-bezier(.3,1.5,.5,1) both;}
.pa-done b{font-family:'Fredoka',sans-serif; font-size:1.35rem;}
.pa-stars{display:flex; gap:.3rem; font-size:2.4rem;}
.pa-stars span{animation:starPop .6s cubic-bezier(.3,1.8,.5,1) both;}
.pa-stars span:nth-child(2){animation-delay:.15s;} .pa-stars span:nth-child(3){animation-delay:.3s;}
.pa-palette{display:grid; grid-template-columns:repeat(4,1fr); gap:10px;}
.pa-sw{aspect-ratio:1; border-radius:50%; border:4px solid var(--panel-solid); box-shadow:0 0 0 2px var(--field-line),0 6px 12px -6px rgba(0,0,0,.4); cursor:pointer; transition:transform .2s cubic-bezier(.3,1.6,.5,1), box-shadow .2s;}
.pa-sw:hover{transform:scale(1.1);}
.pa-sw.on{transform:scale(1.14); box-shadow:0 0 0 4px var(--ink),0 8px 16px -6px rgba(0,0,0,.5);}
.pa-model{display:flex; flex-direction:column; align-items:center; gap:.3rem; padding:.6rem; border-radius:18px; background:var(--panel-solid);}
.pa-model span{font-weight:800; color:var(--ink-soft); font-size:.85rem;}
.pa-model svg{width:120px; height:120px;}
.pa-actions{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.pa-big{display:flex; align-items:center; justify-content:center; gap:.4rem; min-height:58px; padding:.5rem; border:0; border-radius:18px; font-family:'Fredoka',sans-serif; font-weight:600; font-size:1rem; color:var(--ink); background:var(--panel-solid); box-shadow:var(--shadow-sm); transition:transform .18s;}
.pa-big:hover{transform:translateY(-2px);}
.pa-big:active{transform:scale(.95);}
.pa-big.hot{color:#fff; background:linear-gradient(120deg,var(--orange),var(--pink)); min-height:52px; padding:0 1.4rem;}
.pa-big.quit{color:var(--rose); font-size:.85rem;}

/* catalogue */
.pa-modal{width:min(900px,100%) !important;}
.pa-tabs button{font-size:1rem !important; padding:.6rem !important;}
.pa-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:.8rem; max-height:58vh; overflow:auto; padding:4px; margin-top:.8rem;}
.pa-card{position:relative; display:flex; flex-direction:column; align-items:center; gap:.4rem; padding:.7rem; border:3px solid transparent; border-radius:24px; background:var(--field); transition:transform .25s cubic-bezier(.3,1.6,.5,1), border-color .2s, box-shadow .2s; animation:chipIn .4s calc(var(--i) * 30ms) both;}
.pa-card:hover{transform:translateY(-5px) rotate(-2deg); border-color:var(--sun); box-shadow:0 14px 26px -14px var(--orange);}
.pa-thumb{display:block; width:100%; aspect-ratio:1; border-radius:18px; background:#fff; overflow:hidden;}
.pa-thumb svg{width:100%; height:100%;}
.pa-thumb.line svg *{fill:#fff !important; stroke-width:2.2 !important;}
.pa-thumb.free{display:grid; place-items:center; font-size:4rem; background:linear-gradient(135deg,#fff5ba,#ffd1dc,#b5e3f7);}
.pa-name{font-family:'Fredoka',sans-serif; font-weight:600; font-size:.95rem; text-align:center; line-height:1.2;}
.pa-card.locked .pa-thumb{filter:grayscale(.8); opacity:.6;}
.pa-badge{position:absolute; top:10px; inset-inline-end:10px; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:var(--panel-solid); color:var(--orange); box-shadow:var(--shadow-sm);}
.pa-badge.star{font-size:1.1rem;}

@media (max-width:860px){
  body.kids-mode .workspace{grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto auto;}
  body.kids-mode .canvas-area{grid-row:1;}
  body.kids-mode .toolbar{grid-row:2; flex-direction:row; justify-content:center; padding:8px;}
  body.kids-mode .tool{width:60px; height:60px;}
  body.kids-mode .tool .ico{width:32px; height:32px;}
  body.kids-mode .props{position:static; transform:none; grid-row:3; grid-column:1; max-height:38dvh; animation:none;}
  body.kids-mode .props::before{display:none;}
  body.kids-mode #sheetScrim{display:none !important;}
  .pa-palette{grid-template-columns:repeat(6,1fr); gap:8px;}
  .pa-model,.pa-head .pa-emoji{display:none;}
  .pa-head h2{font-size:1.15rem;}
  .pa-listen span{width:44px; height:44px; font-size:1.4rem;}
  .pa-listen b{font-size:.92rem;}
  .pa-big{min-height:48px; font-size:.9rem;}
  .pa-actions{grid-template-columns:repeat(4,1fr);}
  .pa-actions .pa-big span{display:none;}
}

/* ---------- variante « Explorateurs » (8-10 ans) : règles, grille et mesures visibles ---------- */
body.kids-mode.explorer-mode .canvas-area{grid-template-columns:24px minmax(0,1fr); grid-template-rows:24px minmax(0,1fr); background-color:var(--desk);}
body.kids-mode.explorer-mode .ruler,body.kids-mode.explorer-mode .ruler-corner{display:block !important;}
body.kids-mode.explorer-mode #tgGrid,body.kids-mode.explorer-mode #tgSnap{display:grid !important;}
body.kids-mode.explorer-mode .status{display:flex !important;}
body.kids-mode.explorer-mode .workspace{grid-template-columns:88px minmax(0,1fr) 320px;}
body.kids-mode.explorer-mode .tool{width:62px; height:62px; border-radius:20px;}
body.kids-mode.explorer-mode .tool .ico{width:30px; height:30px;}
body.kids-mode.explorer-mode .props{background:linear-gradient(160deg,color-mix(in srgb,var(--emerald) 12%,var(--panel-solid)),color-mix(in srgb,var(--turquoise) 10%,var(--panel-solid)));}
.ex-panel .pa-emoji{font-size:2.3rem;}
.ex-panel .pa-head h2{font-size:1.25rem;}
.ex-panel .pa-listen b{font-size:.92rem;}
.ex-panel .pa-listen span{width:46px; height:46px; font-size:1.4rem;}
.ex-mission{margin:0; padding:.6rem .8rem; border-radius:14px; background:var(--panel-solid); font-weight:800; line-height:1.4; border-inline-start:5px solid var(--emerald);}
.ex-crit li{font-size:.9rem;}
.ex-msg{margin:0; font-weight:800; color:var(--orange); text-align:center;}
.ex-verify{width:100%; min-height:54px; font-size:1.1rem;}
.ex-palette{grid-template-columns:repeat(6,1fr); gap:7px;}
.ex-palette .pa-sw{border-width:3px;}
.ex-axis{stroke:#e53935; stroke-width:3; stroke-dasharray:12 7; vector-effect:non-scaling-stroke;}
.ex-hint{fill:rgba(244,169,59,.35); stroke:var(--orange); stroke-width:2.5; stroke-dasharray:6 4; vector-effect:non-scaling-stroke; animation:exHint 1s ease-in-out 3;}
@keyframes exHint{50%{fill:rgba(244,169,59,.7);}}
.ex-mes-thumb{display:grid; place-items:center; width:100%; height:100%; font-size:3.4rem; background:repeating-linear-gradient(0deg,transparent 0 19px,rgba(62,124,177,.18) 19px 20px),repeating-linear-gradient(90deg,transparent 0 19px,rgba(62,124,177,.18) 19px 20px),#fff;}
@media (max-width:860px){
  body.kids-mode.explorer-mode .workspace{grid-template-columns:minmax(0,1fr);}
  body.kids-mode.explorer-mode .canvas-area{grid-template-columns:18px minmax(0,1fr); grid-template-rows:18px minmax(0,1fr);}
  body.kids-mode.explorer-mode .tool{width:52px; height:52px;}
  .ex-mission{font-size:.85rem; padding:.45rem .6rem;}
  .ex-palette{grid-template-columns:repeat(12,1fr); gap:4px;}
}

/* ---------- « Créateurs » (11-12 ans) : carte de mission sur la feuille ---------- */
.cr-card{position:absolute; z-index:8; top:34px; right:12px; width:min(340px,calc(100% - 48px)); max-height:calc(100% - 110px); overflow:auto; padding:.7rem; border-radius:20px; background:var(--panel-solid); box-shadow:var(--shadow-lg); border:2px solid color-mix(in srgb,var(--indigo) 35%,transparent); animation:riseIn .45s cubic-bezier(.3,1.3,.5,1) both;}
.canvas-area.no-rulers .cr-card{top:12px;}
.cr-head{display:flex; align-items:center; gap:.5rem;}
.cr-e{font-size:2rem; line-height:1;}
.cr-tt{flex:1; min-width:0;}
.cr-tt small{display:block; font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--indigo);}
.cr-tt b{display:block; font-family:'Fredoka',sans-serif; font-weight:600; font-size:1.05rem; line-height:1.2;}
.cr-ic{width:32px; height:32px; border:0; border-radius:10px; background:var(--field); display:grid; place-items:center; font-weight:900; color:var(--ink-soft);}
.cr-body{display:flex; flex-direction:column; gap:.55rem; margin-top:.55rem;}
.cr-desc{margin:0; font-weight:700; font-size:.86rem; line-height:1.45; color:var(--ink-soft);}
.cr-trial{margin:0; font-size:.76rem; font-weight:800; color:var(--violet); background:color-mix(in srgb,var(--violet) 10%,transparent); padding:.4rem .6rem; border-radius:10px;}
.cr-tip{margin:0; font-size:.82rem; font-weight:800; color:var(--orange); line-height:1.4;}
.cr-like{height:24px;}
.cr-like span{line-height:24px; font-size:.82rem;}
.cr-done{padding:.7rem;}
.cr-done .pa-stars{font-size:1.8rem;}
.cr-done b{font-size:1.05rem;}
.cr-actions{display:grid; grid-template-columns:1fr 1fr; gap:6px;}
.cr-actions .mbtn{height:38px; padding:0 .6rem; font-size:.8rem; justify-content:center;}
.cr-card.min{width:auto; cursor:pointer;}
.cr-card.min .cr-body{display:none;}
.cr-ghost{fill:rgba(91,110,225,.12); stroke:rgba(91,110,225,.75); stroke-width:2; stroke-dasharray:8 5; vector-effect:non-scaling-stroke;}
.cr-thumb{font-size:3rem;}
.pa-thumb svg path{vector-effect:non-scaling-stroke;}
@media (max-width:860px){
  .cr-card{top:40px; left:8px; width:calc(100% - 16px); max-height:45%;}
  .cr-actions{grid-template-columns:repeat(4,1fr);}
  .cr-actions .mbtn{font-size:.7rem; padding:0 .3rem;}
}

/* ---------- « Designers » : repères des transformations (centre O, vecteur u, axe d) ---------- */
.ms-pt{fill:#e53935; stroke:#fff; stroke-width:2; vector-effect:non-scaling-stroke;}
.ms-lbl{font:700 16px 'Fredoka',sans-serif; fill:#e53935; paint-order:stroke; stroke:#fff; stroke-width:4px;}
.ms-vec{stroke:#e53935; stroke-width:3; vector-effect:non-scaling-stroke;}
.ms-vech{fill:#e53935;}
.ms-axis{stroke:#e53935; stroke-width:2.5; stroke-dasharray:12 7; vector-effect:non-scaling-stroke;}
.cr-card.lv-designers{border-color:color-mix(in srgb,var(--pink) 40%,transparent);}
.cr-card.lv-designers .cr-tt small{color:var(--pink);}