/* ClicksVecto — accessibilité : cibles tactiles >= 44 px, fiche des raccourcis */

/* 1. Zone de clic d'au moins 44 × 44 px autour des petites commandes, sans changer
      leur dessin (pseudo-élément invisible centré). */
.tb-btn,.vc-btn,.vc-zoom,.l-btn,.l-add,.sw,.gstop,.seg button,.pal-chips button,.color-tabs button,.pbtn,.mbtn,.cvc-btn{position:relative;} /* .modal-x est déjà en absolute */
:is(.tb-btn,.vc-btn,.vc-zoom,.l-btn,.l-add,.sw,.gstop,.seg button,.pal-chips button,.color-tabs button,.pbtn,.mbtn,.cvc-btn,.modal-x)::before{
  content:""; position:absolute; left:50%; top:50%; width:max(100%,44px); height:max(100%,44px); transform:translate(-50%,-50%); border-radius:inherit;
}
/* les puces de palettes défilent : on leur laisse la place verticale de la zone de clic */
.pal-chips{padding-block:10px; margin-block:calc(.2rem - 10px) calc(.5rem - 10px);}
.layers-list{padding-block:8px;}

/* 2. Écrans tactiles : les commandes grandissent pour de vrai. */
@media (pointer:coarse){
  .tb-btn{height:44px;}
  .tb-btn.icon-only{width:44px;}
  .vc-btn{width:44px; height:44px;}
  .vc-zoom{min-height:44px;}
  .l-btn{width:40px; height:40px;}
  .seg button{height:40px;}
  .pbtn,.mbtn{min-height:44px;}
  .pal-chips button{min-height:36px;}
  .swatches{grid-template-columns:repeat(auto-fill,minmax(40px,1fr)); gap:6px;}
  .sw{min-width:40px;}
  .color-tabs button{min-height:40px;}
}

/* 3. Fiche des raccourcis */
.modal-card.kb-modal{width:min(900px,100%);}
.kb-head{display:flex; align-items:center; gap:.8rem; margin-bottom:.8rem;}
.kb-head h2{margin:0;}
.kb-head p{margin:.1rem 0 0; color:var(--ink-soft); font-weight:700;}
.kb-ico{display:grid; place-items:center; width:52px; height:52px; border-radius:16px; font-size:1.7rem; background:linear-gradient(135deg,#5a5478,var(--sky)); box-shadow:var(--shadow); animation:kbPop .5s cubic-bezier(.3,1.6,.5,1);}
@keyframes kbPop{from{transform:scale(.4) rotate(-12deg); opacity:0;}}
.kb-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:.7rem; max-height:min(64vh,640px); overflow:auto; padding:.15rem;}
.kb-sec{border-radius:16px; padding:.7rem .8rem; background:var(--field); border-top:4px solid var(--c); animation:kbIn .45s calc(var(--i) * 70ms) cubic-bezier(.2,.9,.25,1.15) backwards;}
.kb-tools{grid-row:span 2;}
@keyframes kbIn{from{opacity:0; transform:translateY(12px) scale(.97);}}
.kb-sec h3{display:flex; align-items:center; gap:.45rem; margin:0 0 .45rem; font-family:'Fredoka',sans-serif; font-size:1.02rem; color:var(--ink);}
.kb-sec h3::before{content:""; width:.7rem; height:.7rem; border-radius:50%; background:var(--c); box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 25%,transparent);}
.kb-sec ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.3rem;}
.kb-sec li{display:flex; align-items:center; justify-content:space-between; gap:.6rem; font-weight:700; font-size:.86rem;}
.kb-sec li > span:first-child{display:inline-flex; align-items:center; gap:.4rem; min-width:0;}
.kb-sec li .ico{width:18px; height:18px; color:var(--c);}
.kb-sec li.kb-off{opacity:.45;}
.kb-keys{display:inline-flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; gap:.15rem;}
.kb-sec kbd{display:inline-grid; place-items:center; min-width:1.7em; height:1.7em; padding:0 .4em; border-radius:7px; font:800 .76rem/1 ui-monospace,Consolas,monospace;
  color:var(--ink); background:var(--panel-solid); border:1px solid var(--field-line); box-shadow:0 2px 0 var(--field-line);}
.kb-sec i{font-style:normal; color:var(--ink-soft); font-size:.75rem;}
.kb-sec b{color:var(--ink-soft); margin:0 .15rem;}
.kb-sec small{color:var(--ink-soft);}
@media (prefers-reduced-motion:reduce){ .kb-ico,.kb-sec{animation:none;} }