/* Vue « recadrage » — toutes les classes sont préfixées .crop-.
   La vue force le thème sombre via data-theme="dark" posé sur sa racine (cf. js/ui/views/crop.js) :
   les jetons de base.css restent donc valides ici. */

.crop-view {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;   /* l'image occupe l'écran : rien ne défile */
}

/* --------------------------------------------------------- zone d'édition */

.crop-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  /* Paysage avec encoche : les poignées ne doivent pas tomber sous l'encoche ni les coins arrondis. */
  margin: 0 var(--safe-r) 0 var(--safe-l);
  overflow: hidden;
  background: var(--bg);
  touch-action: none;          /* le glisser des poignées ne doit jamais faire défiler */
  -webkit-user-select: none;
  user-select: none;
}

.crop-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--text-dim);
  font-size: 15px;
}

/* Position et taille posées en ligne par la vue (mise en page « contain » recalculée au resize). */
.crop-image {
  position: absolute;
  left: 0;
  top: 0;
  max-width: none;
}

.crop-overlay {
  position: absolute;
  left: 0;
  top: 0;
  max-width: none;
  pointer-events: none;
}

/* Extérieur du cadre assombri (rectangle plein écran percé du polygone par un masque SVG). */
.crop-scrim {
  fill: var(--bg);
  fill-opacity: .66;
}

.crop-poly {
  fill: var(--accent);
  fill-opacity: .08;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linejoin: round;
  transition: stroke .15s var(--ease);
}

.crop-overlay--invalid .crop-poly {
  stroke: var(--danger);
  fill: var(--danger);
}

/* Lignes de tiers : visibles seulement pendant un glisser. */
.crop-thirds {
  opacity: 0;
  transition: opacity .18s var(--ease);
}

.crop-thirds line {
  stroke: var(--on-accent);
  stroke-opacity: .4;
  stroke-width: 1;
}

.crop-overlay--dragging .crop-thirds {
  opacity: 1;
}

/* ---------------------------------------------------------------- poignées */

.crop-handles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Cible tactile de 48 px : le bouton est transparent, seul le point est visible. */
.crop-handle {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  border-radius: 50%;
  background: transparent;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  touch-action: none;
}

.crop-handle__dot {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2.5px var(--on-accent), var(--shadow);
  transition: transform .12s var(--ease);
}

.crop-handle--corner .crop-handle__dot {
  background: var(--accent);
}

.crop-handle--edge .crop-handle__dot {
  width: 14px;
  height: 14px;
  background: var(--on-accent);
  box-shadow: 0 0 0 3px var(--accent), var(--shadow);
}

.crop-handle--active .crop-handle__dot,
.crop-handle:active .crop-handle__dot {
  transform: scale(1.3);
}

.crop-handle:focus-visible {
  outline-offset: -6px;   /* l'anneau reste dans la cible de 48 px, au plus près du point */
}

/* Côté trop court : la poignée du milieu s'efface pour laisser les coins attrapables (clavier inchangé). */
.crop-handle--crowded {
  pointer-events: none;
}

.crop-handle--crowded .crop-handle__dot {
  opacity: 0;
}

/* ------------------------------------------------------------------- loupe */

.crop-loupe {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 2;
  width: 120px;
  height: 120px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--surface);
  /* Anneau en ombre et non en bordure : le canvas fait exactement 120 px CSS, donc
     120 × devicePixelRatio pixels réels, sans rééchantillonnage flou (Retina). */
  box-shadow: 0 0 0 2px var(--on-accent), var(--shadow);
  pointer-events: none;
}

.crop-loupe[hidden] {
  display: none;
}

.crop-loupe canvas {
  width: 100%;
  height: 100%;
  max-width: none;
}

/* -------------------------------------------------------- barre d'actions */

.crop-hint {
  padding: 8px calc(16px + var(--safe-r)) 0 calc(16px + var(--safe-l));
  color: var(--text-dim);
  font-size: 13px;
  text-align: center;
}

.crop-tools {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 8px calc(12px + var(--safe-r)) 0 calc(12px + var(--safe-l));
}

.crop-tool {
  flex: 0 1 auto;
  min-width: 108px;
  padding: 0 16px;
}

/* Paysage ou écran court : on rend la hauteur à l'image. */
@media (max-height: 560px) {
  .crop-hint {
    display: none;
  }

  .crop-tools {
    padding-top: 6px;
  }
}