/* ============================================
   FICHE ŒUVRE (page dédiée /oeuvre/xxx.html)
   Reprend à l'identique le « cartel » de la fenêtre d'œuvre
   (styles.css : .modal-overlay.cartel) mais en page normale.
============================================ */
.modal-overlay.oeuvre-fiche {
  position: static;
  inset: auto;
  opacity: 1;
  pointer-events: all;
  overflow: visible;
  z-index: auto;
  padding-top: 72px;               /* hauteur de l'en-tête fixe */
  background: #fff;
}
.oeuvre-fiche .modal-inner { min-height: calc(100vh - 72px); }
.modal-overlay.cartel.oeuvre-fiche .modal-img-side {
  position: sticky;
  top: 72px;
  height: calc(100vh - 72px);
}
.oeuvre-fiche .lightbox-main { cursor: zoom-in; }
.oeuvre-fiche .lightbox-main img { background: #fff; }

/* Fil d'Ariane discret au-dessus du nom de l'artiste */
.oeuvre-crumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 0.55rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--mid-gray); margin-bottom: 18px;
}
.oeuvre-crumb a { color: var(--dark-gray); transition: color var(--transition); }
.oeuvre-crumb a:hover { color: var(--ink); }
.oeuvre-crumb [aria-current] { color: var(--ink); }

/* Titre : h1 mais même aspect que l'ancien h2 de la fenêtre */
.oeuvre-fiche h1.modal-title { margin-top: -18px; }
.oeuvre-fiche .modal-desc { white-space: pre-line; }
.oeuvre-note { font-size: 0.62rem; letter-spacing: 0.04em; color: var(--dark-gray); max-width: 46ch; }
.oeuvre-note a { border-bottom: 1px solid var(--mid-gray); }
.oeuvre-fiche .modal-actions .btn-cart[hidden] { display: none; }
.oeuvre-fiche a.btn-rdv { display: inline-block; }

/* Boutons de taille (photographies en plusieurs formats) */
.oeuvre-fiche .modal-price { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.size-options { display: flex; flex-wrap: wrap; gap: 8px; }
.size-btn { padding: 7px 12px; border: 1px solid #111; background: transparent; color: #111;
  font-size: .7rem; letter-spacing: .06em; cursor: pointer; transition: all .2s; font-family: inherit; }
.size-btn:hover { background: #e8e8e8; }
.size-btn.active { background: #111; color: #fff; }

/* À voir aussi */
.oeuvre-voir-aussi { padding: 100px 0 60px; background: var(--white); }
.oeuvre-voir-aussi .artwork-grid { padding: 48px 72px 0; max-width: 1400px; margin: 0 auto; }
.artwork-card-img > a { display: block; width: 100%; height: 100%; }

@media (max-width: 1024px) {
  .modal-overlay.cartel.oeuvre-fiche .modal-img-side { top: 72px; height: calc(100vh - 72px); }
  .oeuvre-voir-aussi .artwork-grid { padding: 40px 40px 0; }
}
@media (max-width: 700px) {
  .modal-overlay.cartel.oeuvre-fiche .modal-img-side { position: relative; top: 0; height: 80vw; }
  .oeuvre-voir-aussi .artwork-grid { padding: 32px 24px 0; grid-template-columns: 1fr; gap: 28px; }
}