:root { --studio-radius: .75rem; }
body { -webkit-tap-highlight-color: transparent; padding-bottom: env(safe-area-inset-bottom); }
.navbar { padding-top: max(.5rem, env(safe-area-inset-top)); }

/* Zone de dépôt des images de référence */
.dropzone {
  border: 2px dashed var(--bs-border-color);
  border-radius: var(--studio-radius);
  transition: background-color .15s, border-color .15s;
}
.dropzone.is-over { border-color: var(--bs-primary); background: var(--bs-primary-bg-subtle); }

.ref-thumb { position: relative; width: 72px; height: 72px; }
.ref-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: .5rem; }
.ref-thumb .btn-close {
  position: absolute; top: -6px; right: -6px; padding: .3rem;
  background-color: var(--bs-body-bg); border: 1px solid var(--bs-border-color);
  border-radius: 50%; opacity: 1;
}

/* Grilles d'images */
.image-grid { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.image-grid a, .image-grid button { display: block; padding: 0; border: 0; background: none; position: relative; }
.image-grid img {
  width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--studio-radius);
  background: var(--bs-secondary-bg);
}
.image-grid .badge { position: absolute; left: .4rem; bottom: .4rem; }
/* width/height auto : les attributs HTML ne servent qu'à réserver la place ; les deux plafonds
   réduisent alors l'image en conservant ses proportions. */
.result-image {
  display: block; margin: 0 auto;
  width: auto; height: auto; max-width: 100%; max-height: 80vh;
  border-radius: var(--studio-radius);
}
/* Damier discret derrière les images transparentes */
.checker {
  background-image: conic-gradient(var(--bs-secondary-bg) 25%, transparent 0 50%, var(--bs-secondary-bg) 0 75%, transparent 0);
  background-size: 20px 20px;
}

/* Bouton d'envoi toujours accessible au pouce sur téléphone */
@media (max-width: 767.98px) {
  .sticky-submit {
    position: sticky; bottom: 0; z-index: 10; margin: 0 -.75rem; padding: .75rem;
    padding-bottom: calc(.75rem + env(safe-area-inset-bottom));
    background: var(--bs-body-bg); border-top: 1px solid var(--bs-border-color);
  }
  .image-grid { grid-template-columns: repeat(3, 1fr); gap: .25rem; }
  .image-grid img { border-radius: .4rem; }
}
.htmx-request .htmx-hide { display: none; }
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline-block; }
[x-cloak] { display: none !important; }