/* ============================================================
   Ocleiria Toolbox  Recadrer une image
   Complément à style.css + audio.css + img.css.
   ============================================================ */

/* La scène doit pouvoir accueillir la boîte de sélection en
   coordonnées absolues sur l'image affichée. */
#stage { user-select:none; }
#stage #preview { touch-action:none; }

/* Boîte de recadrage : extérieur assombri (grâce à overflow:hidden de la scène),
   grille des tiers, et 8 poignées (4 coins + 4 côtés). */
#crop {
  touch-action:none;
  background:transparent;                       /* on voit l'image telle quelle */
  box-shadow:0 0 0 9999px rgba(20,19,15,.45);   /* assombrit tout l'extérieur */
  /* grille des tiers */
  background-image:
    linear-gradient(rgba(255,255,255,.4),rgba(255,255,255,.4)),
    linear-gradient(rgba(255,255,255,.4),rgba(255,255,255,.4)),
    linear-gradient(rgba(255,255,255,.4),rgba(255,255,255,.4)),
    linear-gradient(rgba(255,255,255,.4),rgba(255,255,255,.4));
  background-repeat:no-repeat;
  background-size:100% 1px,100% 1px,1px 100%,1px 100%;
  background-position:0 33.333%,0 66.666%,33.333% 0,66.666% 0;
}

/* Poignées */
.crop-h {
  position:absolute; box-sizing:border-box; z-index:2;
  background:var(--accent); border:2px solid var(--card-bg);
  border-radius:3px; touch-action:none;
}
/* Coins (redimensionnement diagonal) */
.crop-h[data-h="nw"],.crop-h[data-h="ne"],
.crop-h[data-h="sw"],.crop-h[data-h="se"] { width:15px; height:15px; }
.crop-h[data-h="nw"] { left:-8px;  top:-8px;    cursor:nwse-resize; }
.crop-h[data-h="ne"] { right:-8px; top:-8px;    cursor:nesw-resize; }
.crop-h[data-h="sw"] { left:-8px;  bottom:-8px; cursor:nesw-resize; }
.crop-h[data-h="se"] { right:-8px; bottom:-8px; cursor:nwse-resize; }
/* Côtés (barres) */
.crop-h[data-h="n"],.crop-h[data-h="s"] {
  width:26px; height:11px; left:50%; transform:translateX(-50%); cursor:ns-resize;
}
.crop-h[data-h="n"] { top:-6px; }
.crop-h[data-h="s"] { bottom:-6px; }
.crop-h[data-h="w"],.crop-h[data-h="e"] {
  width:11px; height:26px; top:50%; transform:translateY(-50%); cursor:ew-resize;
}
.crop-h[data-h="w"] { left:-6px; }
.crop-h[data-h="e"] { right:-6px; }

/* Lecture en direct de la taille du recadrage */
.crop-size {
  font-family:var(--font-mono); font-size:1rem; font-weight:500;
  padding:8px 12px; border:1px solid var(--border-color);
  border-radius:var(--radius); background:var(--card-bg);
  display:inline-block; min-width:140px; text-align:center;
}