/* AudioKit — poignées tactiles pour les sélections wavesurfer (RegionsPlugin)
   --------------------------------------------------------------------------
   Chargé par les outils à sélection de zone sur waveform (trim, loop-maker,
   medley). Rend les bords de la région saisissables AU DOIGT.

   Contexte technique (vérifié dans le vendor, wavesurfer 7.12.7) :
   - La waveform vit dans un shadow DOM ouvert et le plugin ajoute les
     régions DANS ce shadow → seul `::part()` les atteint depuis la page ;
     un sélecteur `[part*="…"]` est du CSS mort (c'était le cas des styles
     poignées historiques de trim/loop-maker/medley — les poignées réelles
     faisaient 6 px).
   - Le plugin pose `width: 6px` et un liseré sombre EN STYLE INLINE sur
     chaque poignée → `min-width` (jamais posé inline) est le levier fiable
     pour élargir la saisie sans guerre de spécificité (recette cover-video) ;
     le liseré se neutralise avec `border !important`.
   - `touch-action: none` sur la région ET les poignées est OBLIGATOIRE :
     sans lui, iOS interrompt le drag (pointerdown → pointercancel) pour
     s'approprier le geste et scroller la page (leçon cover-video).

   Design : la POIGNÉE (l'élément) est la zone de saisie — large et
   invisible ; le TRAIT visuel fin est peint dedans via un masque SVG
   arrondi sur fond var(--accent). Le masque n'affecte que la peinture,
   jamais le hit-testing, et var(--accent) suit les deux thèmes. */

:root {
  /* Barre arrondie pleine hauteur, étirée par mask-size (le léger
     étirement vertical des congés est invisible à cette échelle). */
  --ak-region-handle-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 100' preserveAspectRatio='none'%3E%3Crect width='12' height='100' rx='5' fill='white'/%3E%3C/svg%3E");
}

::part(region) {
  touch-action: none;
}

::part(region-handle) {
  touch-action: none;
  border: none !important;            /* liseré sombre inline du plugin */
  background: var(--accent);
  /* Trait visuel : 12 px, un peu plus court que la région, aligné sur le
     bord ; le reste de la poignée est transparent mais saisissable. */
  -webkit-mask: var(--ak-region-handle-mask) center / 12px calc(100% - 10px) no-repeat;
          mask: var(--ak-region-handle-mask) center / 12px calc(100% - 10px) no-repeat;
  /* Souris : confort discret (les 6 px historiques étaient déjà durs à
     viser au trackpad), manipulation inchangée. */
  min-width: 16px;
}

/* Le trait se colle au bord que la poignée contrôle (le plugin ancre la
   poignée gauche à left:0 et la droite à right:0, elles s'élargissent
   vers l'intérieur de la région). */
::part(region-handle-left) {
  -webkit-mask-position: left center;
          mask-position: left center;
}
::part(region-handle-right) {
  -webkit-mask-position: right center;
          mask-position: right center;
}

/* Tactile : zone de saisie ≥ 44 px (reco Apple HIG). Sur une région très
   étroite les deux poignées peuvent se recouvrir — les sliders de zoom
   des trois outils redonnent de la largeur en px si besoin. */
@media (pointer: coarse) {
  ::part(region-handle) {
    min-width: 44px;
  }
}