/* ---------------------------------------------------------------
   Styles complémentaires à Tailwind.
   Volontairement minimal : le design s'efface derrière les images.
   --------------------------------------------------------------- */

:root {
  --mur: #ffffff;
  --encre: #0e0e0e;
  --gris: #767470;
  --trait: #e2e0db;
  --repere: #c8321e; /* rouge repère de pellicule */
}

body { -webkit-font-smoothing: antialiased; }

/* L'en-tête est clair au-dessus du hero, sombre une fois scrollé */
[data-header] { color: #fff; mix-blend-mode: difference; }
[data-header].is-solid {
  color: var(--encre);
  mix-blend-mode: normal;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--trait);
}
[data-header].is-inverted { color: var(--encre); mix-blend-mode: normal; }

/* Focus visible et sobre */
:focus-visible { outline: 2px solid var(--repere); outline-offset: 3px; }

/* Grille : évite le saut de mise en page pendant le filtrage AJAX */
[data-grid] { transition: opacity .25s ease; }
[data-grid].is-loading { opacity: .35; }

/* Lightbox */
#lightbox img, #lightbox video { max-height: 100%; max-width: 100%; object-fit: contain; }
#lightbox.is-open { display: block; }

/* Drag & drop back-office */
.sortable-ghost { opacity: .35; }
.sortable-drag  { cursor: grabbing; }
.is-dragover    { border-color: var(--repere); background: #fbf4f2; }

/* Barre de progression d'upload */
.progress-bar { transition: width .2s linear; }

/* Respect des préférences d'animation */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Impression : uniquement les images */
@media print {
  header, footer, [data-filters] { display: none !important; }
}