/**
 * SDC QrCodeDisplay — styles scoped.
 *
 * Pas d @layer, pas de !important, pas de Tailwind dans le Twig (regles
 * absolues 4, 6, 10 du CLAUDE.md du theme).
 *
 * Sizes :
 *  - sm  160px (encart lateral)
 *  - md  200px (recommande, RM-M1-05 backlog)
 *  - lg  256px (modale ou hero)
 *
 * Modale <dialog> : style minimal, focus visible, backdrop assombri.
 */

.previensmoi-qr-code-display {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--previensmoi-space-3);
  margin: 0;
  padding: var(--previensmoi-space-4);
  background-color: var(--previensmoi-color-paper-0);
  border: 1px solid var(--previensmoi-color-paper-200);
  border-radius: var(--previensmoi-radius-lg);
  font-family: var(--previensmoi-font-sans);
  color: var(--previensmoi-color-ink-700);
}

.previensmoi-qr-code-display__media {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--previensmoi-space-2);
  background-color: var(--previensmoi-color-paper-0);
  border-radius: var(--previensmoi-radius-md);
}

.previensmoi-qr-code-display__image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Sizes — controlent la largeur de l image rendue. */
.previensmoi-qr-code-display--sm .previensmoi-qr-code-display__image {
  width: 10rem;
  height: 10rem;
}

.previensmoi-qr-code-display--md .previensmoi-qr-code-display__image {
  width: 12.5rem;
  height: 12.5rem;
}

.previensmoi-qr-code-display--lg .previensmoi-qr-code-display__image {
  width: 16rem;
  height: 16rem;
}

.previensmoi-qr-code-display__caption {
  margin: 0;
  font-size: var(--previensmoi-fontsize-sm);
  font-weight: var(--previensmoi-fontweight-medium);
  color: var(--previensmoi-color-ink-600);
  text-align: center;
}

/* Bouton "Afficher en grand" — secondaire discret. */
.previensmoi-qr-code-display__zoom-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: var(--previensmoi-space-2) var(--previensmoi-space-4);
  background-color: transparent;
  border: 1px solid var(--previensmoi-color-ink-700);
  border-radius: var(--previensmoi-radius-md);
  color: var(--previensmoi-color-ink-700);
  font-family: var(--previensmoi-font-sans);
  font-size: var(--previensmoi-fontsize-sm);
  font-weight: var(--previensmoi-fontweight-semibold);
  cursor: pointer;
  transition:
    background-color var(--previensmoi-motion-fast) var(--previensmoi-motion-easing),
    color            var(--previensmoi-motion-fast) var(--previensmoi-motion-easing);
}

.previensmoi-qr-code-display__zoom-trigger:hover {
  background-color: var(--previensmoi-color-paper-100);
}

.previensmoi-qr-code-display__zoom-trigger:focus-visible {
  outline: var(--previensmoi-focus-ring-width) solid var(--previensmoi-focus-ring-color);
  outline-offset: var(--previensmoi-focus-ring-offset);
}

/* Modale <dialog> native — pattern showModal/close. */
.previensmoi-qr-code-display__dialog {
  border: 0;
  border-radius: var(--previensmoi-radius-lg);
  padding: 0;
  background-color: var(--previensmoi-color-paper-0);
  color: var(--previensmoi-color-ink-800);
  max-width: 90vw;
  max-height: 90vh;
}

.previensmoi-qr-code-display__dialog::backdrop {
  background-color: oklch(0% 0 0deg / 0.6);
  backdrop-filter: blur(4px);
}

.previensmoi-qr-code-display__dialog-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--previensmoi-space-4);
  padding: var(--previensmoi-space-6);
}

.previensmoi-qr-code-display__dialog-image {
  display: block;
  width: 16rem;
  max-width: 100%;
  height: auto;
}

.previensmoi-qr-code-display__dialog-caption {
  margin: 0;
  font-size: var(--previensmoi-fontsize-base);
  text-align: center;
  color: var(--previensmoi-color-ink-700);
}

.previensmoi-qr-code-display__dialog-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: var(--previensmoi-space-3) var(--previensmoi-space-6);
  background-color: var(--previensmoi-color-primary-600);
  border: 2px solid var(--previensmoi-color-primary-600);
  border-radius: var(--previensmoi-radius-md);
  color: var(--previensmoi-color-paper-0);
  font-family: var(--previensmoi-font-sans);
  font-size: var(--previensmoi-fontsize-base);
  font-weight: var(--previensmoi-fontweight-semibold);
  cursor: pointer;
  transition:
    background-color var(--previensmoi-motion-fast) var(--previensmoi-motion-easing);
}

.previensmoi-qr-code-display__dialog-close:hover {
  background-color: var(--previensmoi-color-primary-700);
  border-color: var(--previensmoi-color-primary-700);
}

.previensmoi-qr-code-display__dialog-close:focus-visible {
  outline: var(--previensmoi-focus-ring-width) solid var(--previensmoi-focus-ring-color);
  outline-offset: var(--previensmoi-focus-ring-offset);
}