/* ClicksVecto — studio de dessin vectoriel (Outils enseignant ClicksSchool) */

:root{
  --coral:#e85d4c; --marigold:#f4a93b; --leaf:#4c9a6a; --sky:#3e7cb1;
  --violet:#8b5fbf; --pink:#e8547f; --turquoise:#2ec4c6; --orange:#f4732b;
  --indigo:#5b6ee1; --sun:#f0b90b; --emerald:#3bb273; --rose:#d1495b;

  --ink:#241f3d; --ink-soft:#5a5478; --ink-faint:#6b6585;
  --bg1:#e6f0ff; --bg2:#efe7ff; --bg3:#e2f7f2;
  --panel:rgba(255,255,255,.78); --panel-solid:#ffffff; --panel-line:rgba(36,31,61,.09);
  --field:#f3f2fa; --field-line:rgba(36,31,61,.12);
  --desk:#e4e8f3; --desk-dot:rgba(36,31,61,.09);
  --ruler-bg:#f6f6fb; --ruler-ink:#6d6890; --ruler-page:rgba(255,255,255,.75);
  --shadow-sm:0 2px 8px -2px rgba(36,31,61,.16);
  --shadow:0 10px 30px -10px rgba(36,31,61,.28);
  --shadow-lg:0 24px 60px -18px rgba(36,31,61,.42);
  --sel:#3e7cb1; --sel-soft:rgba(62,124,177,.14);
  --radius:18px;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --ink:#f1efff; --ink-soft:#bdb7da; --ink-faint:#9a94bd;
  --bg1:#141327; --bg2:#1b1636; --bg3:#10222a;
  --panel:rgba(32,29,58,.8); --panel-solid:#211e3d; --panel-line:rgba(255,255,255,.08);
  --field:#2a2650; --field-line:rgba(255,255,255,.1);
  --desk:#17152e; --desk-dot:rgba(255,255,255,.06);
  --ruler-bg:#1d1a38; --ruler-ink:#a49fca; --ruler-page:rgba(255,255,255,.07);
  --shadow-sm:0 2px 10px -2px rgba(0,0,0,.5);
  --shadow:0 12px 30px -10px rgba(0,0,0,.6);
  --shadow-lg:0 24px 60px -18px rgba(0,0,0,.75);
  --sel:#6aa8ff; --sel-soft:rgba(106,168,255,.16);
  color-scheme:dark;
}

*{box-sizing:border-box;}
[hidden]{display:none !important;}
html,body{margin:0; height:100%;}
body{
  font-family:'Nunito',ui-rounded,'Segoe UI',system-ui,sans-serif; color:var(--ink);
  height:100dvh; display:flex; flex-direction:column; overflow:hidden;
  background:linear-gradient(125deg,var(--bg1),var(--bg2),var(--bg3),var(--bg1));
  background-size:400% 400%; animation:bgflow 26s ease infinite;
  -webkit-tap-highlight-color:transparent;
}
:root[dir="rtl"] body{font-family:'Nunito','Amiri',system-ui,sans-serif;}
@keyframes bgflow{0%{background-position:0% 50%;}50%{background-position:100% 50%;}100%{background-position:0% 50%;}}
button,select,input,textarea{font:inherit; color:inherit;}
button{cursor:pointer;}
:focus-visible{outline:3px solid var(--sky); outline-offset:2px;}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);}
.ico{display:block; flex:none;}
[data-ico]{display:inline-flex;}
h1,h2,h3,.font-round{font-family:'Fredoka',ui-rounded,'Segoe UI',sans-serif;}

/* ============ Splash ============ */
.splash{
  position:fixed; inset:0; z-index:100; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.4rem;
  background:radial-gradient(circle at 30% 20%,#ffffff 0%,#eef2ff 45%,#f3e8ff 100%);
  animation:splashOut .55s 1.55s cubic-bezier(.6,0,.4,1) forwards;
}
:root[data-theme="dark"] .splash{background:radial-gradient(circle at 30% 20%,#2a2556 0%,#17152e 60%,#120f24 100%);}
.splash-logo{width:120px; height:120px;}
.splash-curve{fill:none; stroke:url(#splashG); stroke-width:9; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; animation:drawLine .9s .1s cubic-bezier(.6,0,.2,1) forwards;}
.splash-handle{stroke:#8b5fbf; stroke-width:2.5; stroke-dasharray:4 4; opacity:0; animation:fadeIn .3s .55s forwards;}
.splash-h{fill:#fff; stroke:#e8547f; stroke-width:3; transform-box:fill-box; transform-origin:center; transform:scale(0); animation:popIn .35s .65s cubic-bezier(.3,1.6,.5,1) forwards;}
.splash-n{fill:#3e7cb1; transform-box:fill-box; transform-origin:center; transform:scale(0); animation:popIn .35s .45s cubic-bezier(.3,1.6,.5,1) forwards;}
.splash-word{font-family:'Fredoka',sans-serif; font-weight:700; font-size:2.4rem; letter-spacing:-.01em; color:var(--ink); opacity:0; animation:riseIn .5s .55s cubic-bezier(.2,.9,.25,1.2) forwards;}
.splash-word span,.brand b span{background:linear-gradient(90deg,var(--violet),var(--pink),var(--orange)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.splash-sub{font-weight:800; color:var(--ink-soft); opacity:0; animation:riseIn .5s .75s ease forwards;}
@keyframes splashOut{to{opacity:0; visibility:hidden; transform:scale(1.04);}}
@keyframes drawLine{to{stroke-dashoffset:0;}}
@keyframes fadeIn{to{opacity:1;}}
@keyframes popIn{to{transform:scale(1);}}
@keyframes riseIn{from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:none;}}

/* ============ Barre du haut ============ */
.topbar{
  flex:none; position:relative; z-index:20; display:flex; align-items:center; gap:.55rem;
  padding:.55rem .8rem; padding-top:max(.55rem,env(safe-area-inset-top));
  animation:riseIn .6s .2s both;
}
.brand{display:flex; align-items:center; gap:.55rem; text-decoration:none; color:var(--ink); margin-inline-end:.4rem; flex:none;}
.brand .mark{
  width:40px; height:40px; border-radius:13px; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--sky),var(--violet) 55%,var(--pink));
  box-shadow:0 8px 18px -6px rgba(139,95,191,.6); transition:transform .3s cubic-bezier(.3,1.6,.5,1);
}
.brand:hover .mark{transform:rotate(-8deg) scale(1.06);}
.brand b{font-family:'Fredoka',sans-serif; font-size:1.18rem; display:block; line-height:1.05;}
.brand small{display:block; font-size:.64rem; color:var(--ink-soft); font-weight:800; letter-spacing:.06em; text-transform:uppercase;}

.tb-cluster{display:flex; gap:2px; padding:3px; border-radius:14px; background:var(--panel); box-shadow:var(--shadow-sm); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);}
.tb-btn{
  display:inline-flex; align-items:center; gap:.4rem; height:38px; padding:0 .75rem; border:0; border-radius:11px;
  background:transparent; font-weight:800; font-size:.86rem; color:var(--ink); text-decoration:none; white-space:nowrap;
  transition:background .18s, transform .18s, box-shadow .18s, opacity .18s;
}
.tb-btn.icon-only{width:38px; padding:0; justify-content:center;}
.tb-btn:hover{background:var(--sel-soft); transform:translateY(-1px);}
.tb-btn:active{transform:translateY(0) scale(.96);}
.tb-btn:disabled{opacity:.35; pointer-events:none;}
#btnExport,.tb-btn.back{background:var(--panel); box-shadow:var(--shadow-sm); backdrop-filter:blur(12px);}
.tb-btn.cta{
  color:#fff; background:linear-gradient(120deg,var(--orange),var(--pink),var(--violet)); background-size:200% 100%;
  box-shadow:0 8px 18px -8px rgba(232,84,127,.75); animation:ctaShift 6s ease infinite;
}
.tb-btn.cta:hover{background:linear-gradient(120deg,var(--orange),var(--pink),var(--violet)); background-size:200% 100%; box-shadow:0 12px 24px -8px rgba(232,84,127,.85); transform:translateY(-2px);}
@keyframes ctaShift{0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}}

.seg{position:relative; display:flex; padding:3px; border-radius:14px; background:var(--panel); box-shadow:var(--shadow-sm); backdrop-filter:blur(12px); flex:none;}
.seg button{position:relative; z-index:1; border:0; background:none; height:34px; padding:0 .8rem; border-radius:11px; font-weight:800; font-size:.84rem; color:var(--ink-soft); display:inline-flex; align-items:center; gap:.3rem; transition:color .25s;}
.seg button[aria-checked="true"]{color:#fff;}
.seg-glider{position:absolute; z-index:0; top:3px; bottom:3px; left:3px; width:0; border-radius:11px; background:linear-gradient(120deg,var(--sky),var(--indigo)); box-shadow:0 6px 14px -6px rgba(91,110,225,.8); transition:transform .35s cubic-bezier(.3,1.3,.5,1), width .35s cubic-bezier(.3,1.3,.5,1);}
.seg-lock .ico{width:14px; height:14px;}

.tb-right{margin-inline-start:auto; display:flex; align-items:center; gap:.45rem;}
.badge-free{font-size:.72rem; font-weight:800; padding:.3rem .65rem; border-radius:999px; color:var(--orange); background:rgba(244,115,43,.13); white-space:nowrap;}
.lang-pick select{
  height:38px; border:0; border-radius:12px; padding:0 .55rem; font-weight:800; background:var(--panel); box-shadow:var(--shadow-sm); cursor:pointer;
}
#btnTheme{background:var(--panel); box-shadow:var(--shadow-sm);}
#btnTheme .th-moon{display:none;}
:root[data-theme="dark"] #btnTheme .th-sun{display:none;}
:root[data-theme="dark"] #btnTheme .th-moon{display:inline-flex;}
#btnTheme .th-sun{color:var(--marigold);} #btnTheme .th-moon{color:#c9b8ff;}
#btnTheme:hover .ico{animation:spinOnce .6s ease;}
@keyframes spinOnce{to{transform:rotate(360deg);}}

/* ============ Espace de travail ============ */
.workspace{
  flex:1; min-height:0; display:grid; gap:10px; padding:0 10px 10px;
  padding-bottom:max(10px,env(safe-area-inset-bottom));
  grid-template-columns:76px minmax(0,1fr) 304px;
  grid-template-rows:minmax(0,1fr) auto;
}

/* ---- Outils ---- */
.toolbar{
  grid-column:1; grid-row:1 / 3; display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:10px 0; border-radius:var(--radius); background:var(--panel); box-shadow:var(--shadow);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); overflow-y:auto; overflow-x:hidden; scrollbar-width:none;
}
.toolbar::-webkit-scrollbar{display:none;}
.tool-sep{width:34px; height:2px; border-radius:2px; background:var(--panel-line); margin:3px 0; flex:none;}
.tool{
  --c1:var(--sky); --c2:var(--indigo);
  position:relative; flex:none; width:52px; height:52px; border:0; border-radius:16px; display:grid; place-items:center;
  color:var(--c1); background:color-mix(in srgb,var(--c1) 12%,transparent);
  transition:transform .25s cubic-bezier(.3,1.5,.5,1), background .2s, color .2s, box-shadow .25s;
  animation:toolIn .5s calc(.35s + var(--i,0) * 45ms) cubic-bezier(.2,.9,.25,1.25) both;
}
.tool .ico{width:26px; height:26px; transition:transform .25s cubic-bezier(.3,1.5,.5,1);}
.tool:hover{transform:translateY(-2px) scale(1.06); background:color-mix(in srgb,var(--c1) 20%,transparent); box-shadow:0 8px 16px -8px var(--c1);}
.tool:hover .ico{transform:rotate(-6deg);}
.tool:active{transform:scale(.92);}
.tool[aria-pressed="true"]{
  color:#fff; background:linear-gradient(140deg,var(--c1),var(--c2));
  box-shadow:0 10px 20px -8px var(--c2), 0 0 0 3px color-mix(in srgb,var(--c1) 25%,transparent);
  transform:scale(1.04);
}
.tool[aria-pressed="true"]::after{
  content:""; position:absolute; inset-inline-start:-10px; top:14px; bottom:14px; width:4px; border-radius:4px;
  background:linear-gradient(var(--c1),var(--c2)); animation:fadeIn .3s both;
}
.tool .kbd{position:absolute; bottom:3px; inset-inline-end:5px; font-size:.58rem; font-weight:800; opacity:.55;}
.tool[aria-pressed="true"] .kbd{opacity:.8;}
@keyframes toolIn{from{opacity:0; transform:translateX(-14px) scale(.7);} to{opacity:1; transform:none;}}
:root[dir="rtl"] .tool{animation-name:toolInRtl;}
@keyframes toolInRtl{from{opacity:0; transform:translateX(14px) scale(.7);} to{opacity:1; transform:none;}}

/* ---- Zone de dessin ---- */
.canvas-area{
  grid-column:2; grid-row:1; position:relative; min-width:0; min-height:0; direction:ltr;
  display:grid; grid-template-columns:24px minmax(0,1fr); grid-template-rows:24px minmax(0,1fr);
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
  background-color:var(--desk);
  background-image:radial-gradient(var(--desk-dot) 1.2px,transparent 1.3px); background-size:18px 18px;
  animation:riseIn .6s .3s both;
}
.canvas-area.no-rulers{grid-template-columns:0 minmax(0,1fr); grid-template-rows:0 minmax(0,1fr);}
.canvas-area.no-rulers .ruler,.canvas-area.no-rulers .ruler-corner{display:none;}
.ruler-corner{grid-column:1; grid-row:1; background:var(--ruler-bg); border-right:1px solid var(--panel-line); border-bottom:1px solid var(--panel-line);}
.ruler{display:block; width:100%; height:100%; background:var(--ruler-bg);}
.ruler-top{grid-column:2; grid-row:1; border-bottom:1px solid var(--panel-line);}
.ruler-left{grid-column:1; grid-row:2; border-right:1px solid var(--panel-line);}
.stage-wrap{grid-column:2; grid-row:2; position:relative; min-width:0; min-height:0; overflow:hidden;}
#stage{position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; user-select:none; -webkit-user-select:none;}
#pageBg{fill:#fff;}
#gridMinor{stroke:rgba(62,124,177,.16); stroke-width:.6;}
#gridMajor{stroke:rgba(62,124,177,.36); stroke-width:1;}
#gridRect{opacity:0; transition:opacity .3s;}
.show-grid #gridRect{opacity:1;}

/* curseurs selon l'outil */
.stage-wrap[data-tool="select"] #stage{cursor:default;}
.stage-wrap[data-tool="nodes"] #stage{cursor:default;}
.stage-wrap[data-tool="text"] #stage{cursor:text;}
.stage-wrap[data-tool="rect"] #stage,.stage-wrap[data-tool="ellipse"] #stage,.stage-wrap[data-tool="tri"] #stage,
.stage-wrap[data-tool="poly"] #stage,.stage-wrap[data-tool="star"] #stage,.stage-wrap[data-tool="line"] #stage,
.stage-wrap[data-tool="arrow"] #stage,.stage-wrap[data-tool="pen"] #stage,.stage-wrap[data-tool="pencil"] #stage{cursor:crosshair;}
.stage-wrap[data-tool="bucket"] #stage,.stage-wrap[data-tool="picker"] #stage{cursor:cell;}
.stage-wrap[data-tool="eraser"] #stage{cursor:none;}
.stage-wrap.panning #stage{cursor:grabbing !important;}
.stage-wrap.space #stage{cursor:grab;}

/* calque d'aide (sélection, poignées, noeuds) */
.ov-box{fill:none; stroke:var(--sel); stroke-width:1.5; stroke-dasharray:6 4; animation:marching 1s linear infinite;}
@keyframes marching{to{stroke-dashoffset:-20;}}
.ov-sub{fill:none; stroke:var(--sel); stroke-width:1; stroke-dasharray:3 3; opacity:.7;}
.ov-hover{fill:none; stroke:var(--turquoise); stroke-width:1.5; opacity:.9;}
.ov-handle{fill:#fff; stroke:var(--sel); stroke-width:2; cursor:pointer; transition:r .15s;}
.ov-handle:hover{fill:var(--sel);}
.ov-rot-line{stroke:var(--sel); stroke-width:1.5;}
.ov-rot{fill:url(#ovRotGrad); stroke:#fff; stroke-width:2; cursor:grab;}
.ov-rot-ico{fill:none; stroke:#fff; stroke-width:1.8; stroke-linecap:round; pointer-events:none;}
.ov-pop{transform-box:fill-box; transform-origin:center; animation:ovPop .28s cubic-bezier(.3,1.7,.5,1) both;}
@keyframes ovPop{from{transform:scale(0);} to{transform:scale(1);}}
.ov-marquee{fill:var(--sel-soft); stroke:var(--sel); stroke-width:1; stroke-dasharray:4 3;}
.ov-path{fill:none; stroke:var(--turquoise); stroke-width:1.5;}
.ov-node{fill:#fff; stroke:var(--indigo); stroke-width:2; cursor:move;}
.ov-node.sel{fill:var(--indigo);}
.ov-node.first{stroke:var(--emerald); stroke-width:3;}
.ov-hline{stroke:var(--ink-faint); stroke-width:1.2; stroke-dasharray:3 2;}
.ov-hin{fill:var(--pink); stroke:#fff; stroke-width:1.5; cursor:move;}
.ov-hout{fill:var(--turquoise); stroke:#fff; stroke-width:1.5; cursor:move;}
.ov-eraser{fill:rgba(232,84,127,.1); stroke:var(--pink); stroke-width:2;}
.ov-erase-trail{fill:none; stroke:rgba(232,84,127,.45); stroke-linecap:round; stroke-linejoin:round;}
.guide-axis{stroke:var(--violet); stroke-width:1.5; stroke-dasharray:10 6; opacity:.65; vector-effect:non-scaling-stroke;}
.guide-center{fill:var(--violet); opacity:.8;}
.preview-path{fill:none; stroke:var(--sel); stroke-width:1.5; stroke-dasharray:5 4; vector-effect:non-scaling-stroke;}

.text-editor{
  position:absolute; z-index:5; margin:0; padding:2px 4px; border:2px dashed var(--sky); border-radius:6px;
  background:rgba(255,255,255,.85); outline:none; resize:none; overflow:hidden; white-space:pre; line-height:1.2;
  min-width:60px; box-shadow:0 8px 24px -10px rgba(62,124,177,.6); transform-origin:0 0;
}

/* ---- contrôles de vue ---- */
.view-ctrl{
  position:absolute; right:12px; bottom:12px; z-index:4; display:flex; align-items:center; gap:2px; padding:4px;
  border-radius:14px; background:var(--panel); box-shadow:var(--shadow); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.vc-btn{width:36px; height:36px; border:0; border-radius:10px; background:none; display:grid; place-items:center; color:var(--ink-soft); transition:background .18s,color .18s,transform .18s;}
.vc-btn:hover{background:var(--sel-soft); color:var(--ink); transform:translateY(-1px);}
.vc-btn[aria-pressed="true"]{color:#fff; background:linear-gradient(140deg,var(--turquoise),var(--sky));}
.vc-btn .ico{width:20px; height:20px;}
.vc-zoom{min-width:58px; height:36px; border:0; border-radius:10px; background:var(--field); font-weight:800; font-size:.82rem; font-variant-numeric:tabular-nums;}
.vc-sep{width:1px; height:22px; background:var(--panel-line); margin:0 4px;}
.status{
  position:absolute; left:36px; bottom:12px; z-index:4; display:flex; gap:.6rem; align-items:center; padding:.42rem .8rem;
  border-radius:12px; background:var(--panel); box-shadow:var(--shadow-sm); backdrop-filter:blur(12px);
  font-size:.78rem; font-weight:700; color:var(--ink-soft); font-variant-numeric:tabular-nums; max-width:calc(100% - 330px);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.canvas-area.no-rulers .status{left:12px;}
.status b{color:var(--ink);}

/* ---- Calques ---- */
.layers{
  grid-column:2; grid-row:2; display:flex; align-items:center; gap:.5rem; padding:.5rem .6rem; min-width:0;
  border-radius:var(--radius); background:var(--panel); box-shadow:var(--shadow); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  animation:riseIn .6s .4s both;
}
.layers-title{display:flex; align-items:center; gap:.4rem; font-family:'Fredoka',sans-serif; font-weight:600; font-size:.95rem; padding:0 .3rem; flex:none; color:var(--violet);}
.layers-list{display:flex; gap:.45rem; overflow-x:auto; flex:1; min-width:0; padding:3px 2px; scrollbar-width:thin;}
.layer-chip{
  position:relative; flex:none; display:flex; align-items:center; gap:.2rem; padding:.25rem .3rem .25rem .7rem; border-radius:13px;
  background:var(--field); border:2px solid transparent; cursor:pointer; transition:border-color .2s, background .2s, transform .2s, box-shadow .2s;
  animation:chipIn .4s cubic-bezier(.3,1.4,.5,1) both;
}
.layer-chip:hover{transform:translateY(-1px);}
.layer-chip.active{border-color:var(--violet); background:color-mix(in srgb,var(--violet) 12%,var(--field)); box-shadow:0 6px 14px -8px var(--violet);}
.layer-chip.is-hidden .layer-name{opacity:.45; text-decoration:line-through;}
.layer-dot{width:10px; height:10px; border-radius:50%; flex:none; margin-inline-end:.2rem;}
.layer-name{font-weight:800; font-size:.84rem; max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.layer-name input{width:110px; font-weight:800; font-size:.84rem; border:0; border-radius:6px; padding:1px 4px; background:var(--panel-solid);}
.layer-top{font-size:.66rem; font-weight:800; color:var(--ink-faint); text-transform:uppercase;}
.l-btn{width:28px; height:28px; border:0; border-radius:8px; background:none; display:grid; place-items:center; color:var(--ink-soft); transition:background .15s,color .15s;}
.l-btn:hover{background:var(--panel-solid); color:var(--ink);}
.l-btn .ico{width:17px; height:17px;}
.l-btn.on{color:var(--coral);}
.layers-actions{display:flex; gap:2px; flex:none;}
.l-add{display:inline-flex; align-items:center; gap:.3rem; height:34px; padding:0 .7rem; border:0; border-radius:11px; font-weight:800; font-size:.82rem; color:#fff; background:linear-gradient(130deg,var(--violet),var(--pink)); box-shadow:0 6px 14px -6px rgba(139,95,191,.7); transition:transform .2s, opacity .2s;}
.l-add:hover{transform:translateY(-1px) scale(1.03);}
.l-add:disabled{opacity:.4; transform:none; cursor:not-allowed;}
.l-add .ico{width:16px; height:16px;}
@keyframes chipIn{from{opacity:0; transform:scale(.8) translateY(6px);} to{opacity:1; transform:none;}}

/* ---- Propriétés ---- */
.props{
  grid-column:3; grid-row:1 / 3; min-height:0; overflow-y:auto; padding:.8rem .8rem 1.2rem;
  border-radius:var(--radius); background:var(--panel); box-shadow:var(--shadow); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  scrollbar-width:thin; animation:riseIn .6s .35s both;
}
.props-head{display:flex; align-items:center; gap:.6rem; padding:.2rem .2rem .7rem;}
.props-head .kind-ico{width:40px; height:40px; border-radius:13px; display:grid; place-items:center; color:#fff; background:linear-gradient(140deg,var(--sky),var(--indigo)); box-shadow:0 8px 16px -8px var(--indigo); flex:none;}
.props-head h2{margin:0; font-size:1.06rem; font-weight:600;}
.props-head p{margin:.1rem 0 0; font-size:.76rem; color:var(--ink-soft); font-weight:700;}
.psec{
  padding:.75rem .75rem .8rem; margin-bottom:.6rem; border-radius:15px; background:var(--panel-solid);
  border:1px solid var(--panel-line); animation:secIn .4s calc(var(--i,0) * 55ms) cubic-bezier(.2,.9,.25,1.15) both;
}
.props.no-anim .psec{animation:none;}
@keyframes secIn{from{opacity:0; transform:translateY(10px) scale(.98);} to{opacity:1; transform:none;}}
.psec h3{margin:0 0 .55rem; font-size:.82rem; font-weight:600; letter-spacing:.02em; text-transform:uppercase; color:var(--ink-soft); display:flex; align-items:center; gap:.4rem;}
.psec h3::before{content:""; width:8px; height:8px; border-radius:3px; background:var(--accent,var(--sky));}
.prow{display:flex; align-items:center; gap:.5rem; margin-top:.5rem;}
.prow > label,.plabel{font-size:.78rem; font-weight:800; color:var(--ink-soft); min-width:78px;}
.prow .grow{flex:1; min-width:0;}
.pgrid2{display:grid; grid-template-columns:1fr 1fr; gap:.45rem;}
.pgrid3{display:grid; grid-template-columns:repeat(3,1fr); gap:.4rem;}
.pgrid4{display:grid; grid-template-columns:repeat(4,1fr); gap:.35rem;}

.num{display:flex; align-items:center; border-radius:10px; background:var(--field); border:1px solid var(--field-line); overflow:hidden; transition:border-color .15s, box-shadow .15s;}
.num:focus-within{border-color:var(--sky); box-shadow:0 0 0 3px var(--sel-soft);}
.num span{font-size:.7rem; font-weight:800; color:var(--ink-faint); padding:0 .45rem; white-space:nowrap;}
.num input{width:100%; min-width:0; border:0; background:none; padding:.42rem .2rem .42rem .5rem; font-weight:800; font-size:.86rem; font-variant-numeric:tabular-nums; outline:none;}
.num input::-webkit-inner-spin-button{opacity:.5;}

input[type=range]{-webkit-appearance:none; appearance:none; width:100%; height:26px; background:none; cursor:pointer; --p:50%;}
input[type=range]::-webkit-slider-runnable-track{height:8px; border-radius:8px; background:linear-gradient(90deg,var(--accent,var(--sky)) var(--p),var(--field) var(--p)); border:1px solid var(--field-line);}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:20px; height:20px; margin-top:-7px; border-radius:50%; background:#fff; border:3px solid var(--accent,var(--sky)); box-shadow:0 3px 8px -2px rgba(0,0,0,.3); transition:transform .15s;}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.2);}
input[type=range]::-moz-range-track{height:8px; border-radius:8px; background:var(--field); border:1px solid var(--field-line);}
input[type=range]::-moz-range-progress{height:8px; border-radius:8px; background:var(--accent,var(--sky));}
input[type=range]::-moz-range-thumb{width:16px; height:16px; border-radius:50%; background:#fff; border:3px solid var(--accent,var(--sky));}
.rval{min-width:44px; text-align:end; font-weight:800; font-size:.8rem; font-variant-numeric:tabular-nums;}

.swatches{display:grid; grid-template-columns:repeat(8,1fr); gap:5px;}
.sw{
  position:relative; aspect-ratio:1; border-radius:9px; border:2px solid rgba(0,0,0,.06); padding:0; cursor:pointer;
  transition:transform .18s cubic-bezier(.3,1.6,.5,1), box-shadow .18s;
}
.sw:hover{transform:scale(1.15); z-index:1; box-shadow:0 4px 10px -3px rgba(0,0,0,.35);}
.sw.on{box-shadow:0 0 0 2px var(--panel-solid),0 0 0 4px var(--ink); transform:scale(1.05);}
.sw.none{background:repeating-conic-gradient(#e5e3ef 0 25%,#fff 0 50%) 0 0/10px 10px;}
.sw.none::after{content:""; position:absolute; inset:2px; background:linear-gradient(to top right,transparent calc(50% - 1.5px),var(--coral) calc(50% - 1.5px),var(--coral) calc(50% + 1.5px),transparent calc(50% + 1.5px));}
.sw.custom{background:conic-gradient(red,yellow,lime,cyan,blue,magenta,red); overflow:hidden;}
.sw.custom input{position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%;}
.color-tabs{display:flex; gap:4px; margin-bottom:.55rem; padding:3px; border-radius:11px; background:var(--field);}
.color-tabs button{flex:1; display:flex; align-items:center; justify-content:center; gap:.35rem; border:0; border-radius:8px; padding:.38rem .3rem; background:none; font-weight:800; font-size:.78rem; color:var(--ink-soft); transition:background .2s,color .2s;}
.color-tabs button[aria-selected="true"]{background:var(--panel-solid); color:var(--ink); box-shadow:var(--shadow-sm);}
.chip-prev{width:16px; height:16px; border-radius:5px; border:2px solid rgba(0,0,0,.12);}
.chip-prev.ring{background:transparent !important; border-width:4px;}

.pbtn{
  display:flex; align-items:center; justify-content:center; gap:.35rem; min-height:36px; padding:.35rem .5rem; border:0; border-radius:10px;
  background:var(--field); font-weight:800; font-size:.76rem; color:var(--ink); text-align:center; line-height:1.15;
  transition:background .18s, transform .18s, box-shadow .18s, color .18s;
}
.pbtn:hover{background:color-mix(in srgb,var(--accent,var(--sky)) 16%,var(--field)); transform:translateY(-1px);}
.pbtn:active{transform:scale(.96);}
.pbtn:disabled{opacity:.38; pointer-events:none;}
.pbtn.on{color:#fff; background:linear-gradient(135deg,var(--accent,var(--sky)),color-mix(in srgb,var(--accent,var(--sky)) 60%,#000));}
.pbtn.danger{color:var(--rose);}
.pbtn.wide{grid-column:1 / -1;}
.pbtn .ico{width:17px; height:17px;}
.pbtn svg.mini{width:20px; height:20px; flex:none;}
.pgrid4 .pbtn{font-size:.68rem; padding:.3rem .15rem;}
.pbtn.stack{flex-direction:column; gap:.15rem; font-size:.7rem; min-height:50px;}
.bool-btn{flex-direction:column; min-height:70px; gap:.25rem; font-size:.74rem;}
.bool-btn svg{width:38px; height:26px;}
.hint{font-size:.74rem; color:var(--ink-soft); font-weight:700; margin:.45rem 0 0; line-height:1.35;}
.select{width:100%; padding:.45rem .5rem; border-radius:10px; border:1px solid var(--field-line); background:var(--field); font-weight:800; font-size:.84rem;}
.textarea{width:100%; min-height:62px; padding:.5rem; border-radius:10px; border:1px solid var(--field-line); background:var(--field); font-weight:700; resize:vertical;}
.check{display:flex; align-items:center; gap:.45rem; font-weight:800; font-size:.8rem; cursor:pointer; margin-top:.5rem;}
.check input{width:18px; height:18px; accent-color:var(--sky);}
.legend{display:flex; flex-direction:column; gap:.4rem; margin-top:.2rem;}
.legend div{display:flex; align-items:center; gap:.5rem; font-size:.76rem; font-weight:700; color:var(--ink-soft);}
.legend i{width:14px; height:14px; border-radius:50%; flex:none; border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.15);}
.legend i.sq{border-radius:3px;}

/* ---- Infobulle d'outil ---- */
.tooltip{
  position:fixed; z-index:60; width:236px; padding:.6rem; border-radius:16px; pointer-events:none;
  background:var(--panel-solid); box-shadow:var(--shadow-lg); border:1px solid var(--panel-line);
  animation:tipIn .25s cubic-bezier(.3,1.4,.5,1) both;
}
@keyframes tipIn{from{opacity:0; transform:translateX(-8px) scale(.95);} to{opacity:1; transform:none;}}
.tooltip .demo{display:block; width:100%; height:auto; border-radius:11px; background:linear-gradient(135deg,color-mix(in srgb,var(--c1) 14%,var(--panel-solid)),color-mix(in srgb,var(--c2) 18%,var(--panel-solid)));}
.tip-head{display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin:.5rem .15rem .2rem;}
.tip-head b{font-family:'Fredoka',sans-serif; font-size:1rem;}
.tip-head kbd{font:800 .72rem 'Nunito',sans-serif; padding:.12rem .45rem; border-radius:6px; background:var(--field); border:1px solid var(--field-line); border-bottom-width:2px;}
.tooltip p{margin:0 .15rem; font-size:.78rem; font-weight:700; color:var(--ink-soft); line-height:1.35;}
.tip-lock{margin:.4rem .15rem 0 !important; color:var(--orange) !important;}

/* mini-démos */
.demo .dm-sheet{fill:#fff; opacity:.75;}
.demo .dm-draw{stroke:var(--ink); stroke-width:3; stroke-linejoin:round; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; animation:dmDraw 2.8s ease-in-out infinite;}
.demo .dm-fill-coral{fill:var(--coral);} .demo .dm-fill-turq{fill:var(--turquoise);} .demo .dm-fill-sun{fill:var(--sun);}
.demo .dm-fill-violet{fill:var(--violet);} .demo .dm-fill-sky{fill:var(--sky);} .demo .dm-fill-ink{fill:var(--ink);}
.demo .dm-draw[class*="dm-fill"]{fill-opacity:0; animation:dmDraw 2.8s ease-in-out infinite, dmFill 2.8s ease-in-out infinite;}
.demo .dm-stroke{fill:none; stroke:var(--ink); stroke-width:3; stroke-linecap:round;}
.demo .dm-stroke-thick{fill:none; stroke:var(--coral); stroke-width:6; stroke-linecap:round;}
.demo .dm-stroke-pink{fill:none; stroke:var(--pink); stroke-width:4; stroke-linecap:round; stroke-linejoin:round;}
.demo .dm-dot{fill:var(--coral);}
.demo .dm-pop{transform-box:fill-box; transform-origin:center; animation:dmPop 2.8s ease-in-out infinite;}
.demo .dm-selbox{fill:none; stroke:var(--sky); stroke-width:1.5; stroke-dasharray:4 3;}
.demo .dm-cursor-shape{fill:var(--ink); stroke:#fff; stroke-width:1.2;}
.demo .dm-move{animation:dmMove 2.8s ease-in-out infinite;}
.demo .dm-node{fill:#fff; stroke:var(--indigo); stroke-width:2;}
.demo .dm-node-smooth{fill:var(--indigo); stroke:#fff; stroke-width:2;}
.demo .dm-node-move{animation:dmNode 2.8s ease-in-out infinite;}
.demo .dm-morph{animation:dmMorph 2.8s ease-in-out infinite;}
.demo .dm-handle{stroke:var(--ink-faint); stroke-width:1.5; stroke-dasharray:3 3; opacity:0; animation:dmLate 2.8s ease-in-out infinite;}
.demo .dm-h-in{fill:var(--pink); opacity:0; animation:dmLate 2.8s ease-in-out infinite;}
.demo .dm-h-out{fill:var(--turquoise); opacity:0; animation:dmLate 2.8s ease-in-out infinite;}
.demo .dm-text{font:700 38px 'Fredoka',sans-serif; fill:var(--violet); clip-path:inset(0 100% 0 0); animation:dmType 2.8s steps(3,end) infinite;}
.demo .dm-caret{fill:var(--sky); animation:dmBlink .7s steps(1) infinite;}
.demo .dm-flood{fill:var(--marigold); transform-box:fill-box; transform-origin:center; animation:dmFlood 2.8s ease-in-out infinite;}
.demo .dm-fill-violet-static{fill:var(--violet);}
.demo .dm-recolor{animation:dmRecolor 2.8s ease-in-out infinite;}
.demo .dm-pick{animation:dmPick 2.8s ease-in-out infinite;}
.demo .dm-erase-hole{transform-box:fill-box; transform-origin:center; animation:dmErase 2.8s ease-in-out infinite;}
.demo .dm-erase-ring{fill:rgba(232,84,127,.12); stroke:var(--pink); stroke-width:2; animation:dmEraseRing 2.8s ease-in-out infinite;}
.demo .dm-spin{transform-box:fill-box; transform-origin:center;}
@keyframes dmDraw{0%{stroke-dashoffset:1;} 45%,100%{stroke-dashoffset:0;}}
@keyframes dmFill{0%,45%{fill-opacity:0;} 65%,92%{fill-opacity:1;} 100%{fill-opacity:0;}}
@keyframes dmPop{0%,40%{transform:scale(0);} 55%{transform:scale(1.25);} 65%,100%{transform:scale(1);}}
@keyframes dmMove{0%,15%{transform:translate(0,0);} 50%,70%{transform:translate(42px,-6px);} 100%{transform:translate(0,0);}}
@keyframes dmNode{0%,15%{transform:translate(0,0);} 50%,70%{transform:translate(0,30px);} 100%{transform:translate(0,0);}}
@keyframes dmMorph{0%,15%{d:path("M22 70 C 50 20, 100 20, 138 62");} 50%,70%{d:path("M22 70 C 50 80, 100 80, 138 62");} 100%{d:path("M22 70 C 50 20, 100 20, 138 62");}}
@keyframes dmLate{0%,45%{opacity:0;} 60%,100%{opacity:1;}}
@keyframes dmType{0%{clip-path:inset(0 100% 0 0);} 70%,100%{clip-path:inset(0 0 0 0);}}
@keyframes dmBlink{50%{opacity:0;}}
@keyframes dmFlood{0%,20%{transform:scale(0);} 70%,100%{transform:scale(1);}}
@keyframes dmRecolor{0%,45%{fill:#d9d6e8;} 60%,100%{fill:var(--violet);}}
@keyframes dmPick{0%{transform:translate(70px,30px);} 30%,45%{transform:translate(50px,48px);} 75%,100%{transform:translate(112px,48px);}}
@keyframes dmErase{0%{transform:translateX(-60px) scaleX(.2);} 60%,100%{transform:translateX(0) scaleX(1.6);}}
@keyframes dmEraseRing{0%{transform:translateX(-60px);} 60%{transform:translateX(0);} 100%{transform:translateX(50px);}}

/* ---- Toasts ---- */
.toasts{position:fixed; z-index:70; left:50%; bottom:calc(84px + env(safe-area-inset-bottom)); transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:.4rem; pointer-events:none;}
.toast{
  padding:.6rem 1.1rem; border-radius:999px; font-weight:800; font-size:.86rem; color:#fff; white-space:nowrap; max-width:90vw; overflow:hidden; text-overflow:ellipsis;
  background:linear-gradient(120deg,#2b2650,#463e7c); box-shadow:var(--shadow-lg);
  animation:toastIn .35s cubic-bezier(.3,1.5,.5,1) both;
}
.toast.warn{background:linear-gradient(120deg,var(--orange),var(--pink));}
.toast.ok{background:linear-gradient(120deg,var(--emerald),var(--turquoise));}
.toast.out{animation:toastOut .3s ease forwards;}
@keyframes toastIn{from{opacity:0; transform:translateY(16px) scale(.9);} to{opacity:1; transform:none;}}
@keyframes toastOut{to{opacity:0; transform:translateY(8px) scale(.95);}}

/* ---- Modale ---- */
.modal-back{position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:1rem; background:rgba(20,17,40,.42); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); animation:fadeIn .2s both; opacity:0;}
.modal-card{
  position:relative; width:min(460px,100%); max-height:86vh; overflow:auto; padding:1.4rem 1.3rem 1.2rem; border-radius:22px;
  background:var(--panel-solid); box-shadow:var(--shadow-lg); animation:modalIn .35s cubic-bezier(.3,1.4,.5,1) both;
}
@keyframes modalIn{from{opacity:0; transform:translateY(18px) scale(.94);} to{opacity:1; transform:none;}}
.modal-card h2{margin:0 0 .5rem; font-size:1.3rem;}
.modal-card p{margin:0 0 1rem; color:var(--ink-soft); font-weight:700; line-height:1.45;}
.modal-x{position:absolute; top:.8rem; inset-inline-end:.8rem; width:34px; height:34px; border:0; border-radius:10px; background:var(--field); display:grid; place-items:center;}
.modal-x .ico{width:18px; height:18px;}
.modal-hero{width:72px; height:72px; border-radius:22px; display:grid; place-items:center; color:#fff; margin-bottom:.8rem; background:linear-gradient(135deg,var(--orange),var(--pink),var(--violet)); box-shadow:0 14px 28px -12px rgba(232,84,127,.8); animation:heroBob 3s ease-in-out infinite;}
.modal-hero .ico{width:38px; height:38px;}
.modal-hero{font-size:2.4rem;}
@keyframes heroBob{0%,100%{transform:translateY(0) rotate(-3deg);} 50%{transform:translateY(-5px) rotate(3deg);}}
.modal-actions{display:flex; gap:.5rem; justify-content:flex-end; flex-wrap:wrap; margin-top:.4rem;}
.mbtn{display:inline-flex; align-items:center; gap:.4rem; height:42px; padding:0 1.1rem; border:0; border-radius:12px; font-weight:800; font-size:.9rem; background:var(--field); text-decoration:none; color:var(--ink); transition:transform .18s, box-shadow .18s;}
.mbtn:hover{transform:translateY(-1px);}
.mbtn.primary{color:#fff; background:linear-gradient(120deg,var(--sky),var(--indigo)); box-shadow:0 8px 18px -8px rgba(91,110,225,.8);}
.mbtn.hot{color:#fff; background:linear-gradient(120deg,var(--orange),var(--pink)); box-shadow:0 8px 18px -8px rgba(232,84,127,.8);}
.mfield{width:100%; height:44px; padding:0 .8rem; border-radius:12px; border:1px solid var(--field-line); background:var(--field); font-weight:800; margin-bottom:1rem;}
.export-opts{display:grid; gap:.6rem; margin-bottom:.4rem;}
.export-opt{display:flex; align-items:center; gap:.8rem; padding:.8rem; border-radius:15px; border:2px solid var(--panel-line); background:var(--field); text-align:start; transition:border-color .2s, transform .2s;}
.export-opt:hover{border-color:var(--sky); transform:translateY(-2px);}
.export-opt .eo-ico{width:46px; height:46px; border-radius:13px; display:grid; place-items:center; color:#fff; font:700 .8rem 'Fredoka',sans-serif; flex:none;}
.export-opt b{display:block; font-size:.95rem;} .export-opt small{color:var(--ink-soft); font-weight:700;}
.saved-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:.6rem; margin-bottom:1rem;}
.saved-item{position:relative; border-radius:14px; overflow:hidden; border:2px solid var(--panel-line); background:var(--field); cursor:pointer; transition:transform .2s, border-color .2s; animation:chipIn .35s calc(var(--i,0)*50ms) both;}
.saved-item:hover{transform:translateY(-3px); border-color:var(--sky);}
.saved-item img{display:block; width:100%; aspect-ratio:1.41; object-fit:contain; background:#fff;}
.saved-item span{display:block; padding:.35rem .5rem; font-weight:800; font-size:.78rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.saved-item .del{position:absolute; top:5px; inset-inline-end:5px; width:28px; height:28px; border:0; border-radius:8px; background:rgba(255,255,255,.9); color:var(--rose); display:grid; place-items:center; opacity:0; transition:opacity .2s;}
.saved-item:hover .del,.saved-item:focus-within .del{opacity:1;}
.saved-item .del .ico{width:16px; height:16px;}
.empty{display:flex; flex-direction:column; align-items:center; gap:.4rem; padding:1.2rem; color:var(--ink-soft); font-weight:800; text-align:center;}
.empty .ico{width:44px; height:44px; color:var(--violet); opacity:.7;}

/* ---- Mobile ---- */
.mobile-dock{display:none;}
.sheet-scrim{display:none;}

@media (max-width:1180px){
  .workspace{grid-template-columns:72px minmax(0,1fr) 262px;}
  .tb-btn .lbl{display:none;}
  .tb-btn{width:38px; padding:0; justify-content:center;}
  .tb-btn.cta{width:auto; padding:0 .7rem;}
  .tb-btn.cta .lbl{display:inline;}
}
@media (max-width:860px){
  .topbar{gap:.4rem; padding:.45rem .5rem; overflow-x:auto; scrollbar-width:none;}
  .topbar::-webkit-scrollbar{display:none;}
  .brand-txt small{display:none;}
  .brand .mark{width:36px; height:36px;}
  .tb-btn.cta .lbl{display:none;}
  .tb-btn.cta{width:38px; padding:0;}
  .badge-free{display:none;}
  .tb-right{margin-inline-start:0;}
  .workspace{grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto auto; gap:8px; padding:0 8px 8px; padding-bottom:max(8px,env(safe-area-inset-bottom));}
  .canvas-area{grid-column:1; grid-row:1;}
  .toolbar{grid-column:1; grid-row:3; flex-direction:row; padding:6px 8px; overflow-x:auto; overflow-y:hidden; gap:5px;}
  .tool{width:48px; height:48px;}
  .tool[aria-pressed="true"]::after{inset-inline-start:14px; inset-inline-end:14px; top:auto; bottom:-5px; width:auto; height:4px;}
  .tool-sep{width:2px; height:30px; margin:0 3px;}
  .mobile-dock{grid-column:1; grid-row:2; display:flex; gap:8px;}
  .mobile-dock button{flex:1; display:flex; align-items:center; justify-content:center; gap:.45rem; height:40px; border:0; border-radius:13px; font-weight:800; font-size:.86rem; background:var(--panel); box-shadow:var(--shadow-sm); backdrop-filter:blur(12px);}
  .mobile-dock button .ico{width:19px; height:19px;}
  .mobile-dock button[aria-expanded="true"]{color:#fff; background:linear-gradient(130deg,var(--sky),var(--violet));}
  .props,.layers{
    position:fixed; z-index:40; left:8px; right:8px; bottom:8px; grid-column:auto; grid-row:auto; animation:none;
    max-height:68dvh; transform:translateY(calc(100% + 24px)); transition:transform .38s cubic-bezier(.3,1.15,.5,1);
    background:var(--panel-solid); padding-bottom:max(1rem,env(safe-area-inset-bottom));
  }
  .layers{flex-wrap:wrap; max-height:none;}
  .layers .layers-list{flex-basis:100%; order:3; flex-wrap:wrap;}
  .props.open,.layers.open{transform:none;}
  .props::before,.layers::before{content:""; display:block; width:44px; height:5px; border-radius:5px; background:var(--panel-line); margin:-.2rem auto .5rem; flex-basis:100%;}
  .sheet-scrim{display:block; position:fixed; inset:0; z-index:39; background:rgba(20,17,40,.3); animation:fadeIn .2s both; opacity:0;}
  .status{left:8px; bottom:auto; top:8px; max-width:calc(100% - 16px); font-size:.72rem; padding:.3rem .6rem;}
  .canvas-area.no-rulers .status{left:8px;}
  .view-ctrl{right:8px; bottom:8px;}
  .vc-btn{width:34px; height:34px;}
  .canvas-area{grid-template-columns:18px minmax(0,1fr); grid-template-rows:18px minmax(0,1fr);}
  .toasts{bottom:calc(150px + env(safe-area-inset-bottom));}
}
@media (max-width:560px){
  .brand-txt{display:none;}
  .brand{margin-inline-end:0;}
  .topbar{gap:.3rem; flex-wrap:wrap; overflow:visible; row-gap:.35rem;}
  .tb-right{margin-inline-start:auto;}
  .seg{order:10;}
  .tb-cluster{padding:2px;}
  .tb-btn,.tb-btn.icon-only,.tb-btn.cta{width:32px; height:34px;}
  .tb-btn .ico{width:19px; height:19px;}
  .tb-btn.back{display:none;}
  .seg button{padding:0 .5rem; height:30px; font-size:.74rem;}
  .lang-pick select{height:34px; padding:0 .3rem;}
  #tgRulers{display:none;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.001s !important;}
  .splash{display:none;}
}
.badge-free{cursor:pointer;}
.badge-free.promo{color:#fff; background:linear-gradient(120deg,#f0b90b,#f4732b,#e8547f); background-size:200% 100%; box-shadow:0 6px 16px -8px rgba(232,84,127,.7); animation:ctaShift 6s ease-in-out infinite;}
@media (prefers-reduced-motion:reduce){ .badge-free.promo{animation:none;} }