/* outils.css : éléments communs des outils (dépôt, réglages, résultat). */
.zone-depot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--espace-1);
  min-height: var(--zone-depot-hauteur);
  padding: var(--tuile-marge-interieure);
  border: var(--trait-epais) dashed var(--bordure);
  border-radius: var(--rayon-grand);
  background: var(--fond-page);
  color: var(--texte-secondaire);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--duree-courte), background var(--duree-courte);
}
.zone-depot:hover, .zone-depot.survol, .zone-depot:focus-within {
  border-color: var(--bleu-lien);
  background: var(--fond-survol);
}
.zone-texte { font-weight: var(--graisse-semi); color: var(--texte-principal); }
.zone-etat { font-size: var(--taille-petite); }

.reglages { display: flex; flex-direction: column; gap: var(--espace-2); }
.reglage { display: flex; flex-direction: column; gap: var(--espace-1); }
.reglage-entete { display: flex; justify-content: space-between; gap: var(--espace-1); font-weight: var(--graisse-semi); }
.reglage-valeur { color: var(--texte-secondaire); font-variant-numeric: tabular-nums; font-weight: var(--graisse-normale); }
.reglage input[type="range"] { width: 100%; height: var(--curseur-hauteur); accent-color: var(--bleu-marque); }
.reglage select, .reglage input[type="text"], .reglage input[type="number"] {
  min-height: var(--bouton-hauteur);
  padding: var(--bouton-marge-interieure);
  border: var(--trait) solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--fond-bloc);
  color: var(--texte-principal);
  font: inherit;
}
.choix { display: flex; flex-wrap: wrap; gap: var(--espace-1); }
.choix label {
  display: inline-flex;
  align-items: center;
  min-height: var(--pilule-hauteur);
  padding: var(--bouton-marge-interieure);
  border: var(--trait) solid var(--bordure);
  border-radius: var(--rayon-rond);
  cursor: pointer;
}
.choix input { position: absolute; opacity: 0; pointer-events: none; }
.choix label:has(input:checked) { background: var(--bleu-marque); border-color: var(--bleu-marque); color: var(--texte-sur-marque); }
.choix label:has(input:focus-visible) { outline: var(--trait-focus) solid var(--focus); outline-offset: var(--trait-epais); }

.action { width: 100%; }
.resultat { display: flex; flex-direction: column; gap: var(--espace-2); }
.resultat .bouton { width: 100%; }
.apercus { display: grid; gap: var(--espace-1); }
.apercus.multiples { grid-template-columns: repeat(auto-fill, minmax(min(var(--zone-depot-hauteur), 100%), 1fr)); }
.apercu { margin: 0; text-align: center; }
.apercu img {
  display: block;
  max-width: 100%;
  max-height: var(--apercu-hauteur-max);
  margin-inline: auto;
  border: var(--trait) solid var(--bordure);
  border-radius: var(--rayon);
  background: repeating-conic-gradient(var(--damier-a) 0 25%, var(--damier-b) 0 50%) 0 0 / var(--espace-2) var(--espace-2);
}
.apercu figcaption, .detail { color: var(--texte-secondaire); font-size: var(--taille-petite); margin-top: var(--espace-1); }

/* --- Aperçu en direct, listes, boutons-icônes ---------------------------- */
.apercu-direct, .pipette-toile, .recadrage-image {
  display: block;
  max-width: 100%;
  max-height: var(--apercu-hauteur-max);
  margin-inline: auto;
  border-radius: var(--rayon);
}
.bouton-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--pilule-hauteur);
  height: var(--pilule-hauteur);
  flex: none;
  border: var(--trait) solid var(--bordure);
  border-radius: var(--rayon-rond);
  background: var(--fond-bloc);
  color: var(--bleu-marque);
  cursor: pointer;
}
.bouton-icone:disabled { color: var(--texte-desactive); cursor: default; }
.liste-ordre { display: flex; flex-direction: column; gap: var(--espace-1); margin: 0; padding-left: var(--espace-3); }
.liste-ordre:empty { display: none; }
.liste-ordre li { display: flex; align-items: center; gap: var(--espace-1); }
.liste-nom { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Recadrer ------------------------------------------------------------ */
.recadrage { position: relative; width: fit-content; max-width: 100%; margin-inline: auto; touch-action: none; }
.recadrage-cadre {
  position: absolute;
  left: var(--x); top: var(--y); width: var(--w); height: var(--h);
  border: var(--trait-epais) solid var(--texte-sur-marque);
  box-shadow: 0 0 0 var(--voile-etendue) var(--voile);
  cursor: move;
}
.recadrage { overflow: hidden; }
.recadrage-poignee {
  position: absolute;
  right: calc(var(--espace-1) * -1);
  bottom: calc(var(--espace-1) * -1);
  width: var(--espace-3);
  height: var(--espace-3);
  border-radius: var(--rayon-rond);
  background: var(--texte-sur-marque);
  border: var(--trait-epais) solid var(--bleu-marque);
  cursor: nwse-resize;
}

/* --- Comparer ------------------------------------------------------------ */
.comparaison { position: relative; width: fit-content; max-width: 100%; margin-inline: auto; overflow: hidden; border-radius: var(--rayon); }
.comparaison canvas { display: block; max-width: 100%; max-height: var(--apercu-hauteur-max); }
.comparaison-apres { position: absolute; inset: 0; width: 100%; height: 100%; clip-path: inset(0 0 0 var(--coupe, 50%)); }
.comparaison-ligne {
  position: absolute; top: 0; bottom: 0; left: var(--coupe, 50%);
  width: var(--trait-focus); transform: translateX(-50%);
  background: var(--texte-sur-marque);
  box-shadow: 0 0 var(--trait-focus) var(--voile);
}

/* --- Pipette ------------------------------------------------------------- */
.pipette-toile { cursor: crosshair; touch-action: none; }
.pipette-lecture { display: flex; align-items: center; gap: var(--espace-2); }
.pipette-valeurs { display: flex; flex-direction: column; flex: 1; }
.pastille-couleur {
  width: var(--pastille-couleur); height: var(--pastille-couleur); flex: none;
  border-radius: var(--rayon);
  border: var(--trait) solid var(--bordure);
  background: var(--couleur, var(--fond-page));
}
.valeur-couleur {
  border: 0; background: transparent; padding: 0;
  font-family: var(--police-mono); font-size: var(--taille-intertitre); font-weight: var(--graisse-semi);
  color: var(--texte-principal);
}

/* --- Planche d'identité -------------------------------------------------- */
.planche-cadrage { display: flex; flex-direction: column; gap: var(--espace-2); }
.cadre-identite {
  position: relative;
  width: 100%;
  max-width: var(--cadre-identite-largeur);
  aspect-ratio: var(--cadre-identite-ratio);
  margin-inline: auto;
  overflow: hidden;
  border: var(--trait) solid var(--bordure);
  background: var(--fond-bloc);
  touch-action: none;
  user-select: none;
  cursor: grab;
}
.cadre-identite canvas { display: block; width: 100%; height: 100%; }
.repere { position: absolute; pointer-events: none; background: var(--repere-couleur); box-shadow: 0 0 var(--trait) var(--repere-ombre); }
.repere-axe { top: 0; bottom: 0; left: var(--repere-axe); width: var(--repere-epaisseur); }
.repere-sommet, .repere-menton-haut, .repere-menton-bas { left: 0; right: 0; height: var(--repere-epaisseur); }
.repere-sommet { top: var(--repere-sommet); }
.repere-menton-haut { top: var(--repere-menton-haut); }
.repere-menton-bas { top: var(--repere-menton-bas); }
.zoom-fin { display: flex; align-items: center; gap: var(--espace-1); }
.zoom-fin input { flex: 1; height: var(--curseur-hauteur); accent-color: var(--bleu-marque); }