/* =========================================================================
   SmartMuseum — M3-A1 Premium media system
   Art-aware image presentation, captions/credits, accessible lightbox.
   Loads AFTER smartmuseum-premium.css (single) / home-magazine.css (home),
   so its overrides win by source order. Self-contained; uses theme tokens.
   ========================================================================= */

/* ── Article hero — art-aware fitting ─────────────────────────────────── */
.sm-hero__figure{ margin:0; }
.sm-hero__img{ width:100%; height:100%; display:block; }

/* Cover : architecture / destination / paysage — cadrage cinématographique,
   point focal centré (jamais d'étirement). */
.sm-hero__visual--cover .sm-hero__img{ object-fit:cover; object-position:center; }

/* Contain : œuvre / document / portrait — l'image n'est JAMAIS recadrée ;
   fond éditorial (papier) + marge respirante autour de l'œuvre. */
.sm-hero__visual--contain{ background:var(--sm-paper); }
.sm-hero__visual--contain .sm-hero__img{
  object-fit:contain; object-position:center;
  padding:clamp(8px, 2.4vw, 28px); box-sizing:border-box;
}

/* Les œuvres/documents peuvent occuper un cadre un peu plus haut pour respecter
   les formats verticaux sans crop destructeur. */
.sm-hero__figure.sm-media--artwork .sm-hero__visual,
.sm-hero__figure.sm-media--document .sm-hero__visual{
  aspect-ratio:4 / 3; max-height:min(80vh, 860px);
}

/* Placeholder (aucune image hero) — classe au lieu de styles inline. */
.sm-hero__ph{
  width:100%; height:100%; min-height:240px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--sm-bg-alt), #e7dcc7);
}
.sm-hero__ph > span{
  font-family:var(--sm-serif); font-size:clamp(26px, 5vw, 52px);
  color:rgba(138,102,54,.42); padding:0 16px; text-align:center;
}

/* Légende + crédit + licence — rendus uniquement si des métadonnées réelles existent.
   (.sm-hero__caption porte déjà display:flex / justify-between via premium.css.) */
.sm-hero__caption{ flex-wrap:wrap; }
.sm-hero__caption .sm-media-cap{ font-style:italic; }
.sm-hero__caption .sm-media-credit{ font-style:normal; color:var(--sm-ink-3); }
.sm-hero__caption .sm-media-license{ font-style:normal; color:var(--sm-ink-3); }
.sm-hero__caption a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }

/* ── Affordance de zoom ───────────────────────────────────────────────── */
.sm-zoomable{ cursor:zoom-in; }
.sm-zoomable:focus-visible{ outline:2px solid var(--sm-accent-deep, #8a6636); outline-offset:3px; }

/* ── Cartes (homepage + related) — point focal + survol discret ───────── */
.sm-mag-img{ object-position:center; }
@media (hover:hover){
  .sm-mag-lead__media .sm-mag-img,
  .sm-mag-aside__media .sm-mag-img,
  .sm-mag-story__media .sm-mag-img{ transition:transform .5s ease; will-change:transform; }
  .sm-mag-lead__media:hover .sm-mag-img,
  .sm-mag-aside__media:hover .sm-mag-img,
  .sm-mag-story__media:hover .sm-mag-img{ transform:scale(1.035); }
}

/* ── Related cards (vignettes d'articles liés) — cadrage cohérent ─────── */
.sm-related-card__imgwrap{
  display:block; aspect-ratio:3 / 2; overflow:hidden;
  border-radius:var(--sm-radius, 4px); background:var(--sm-bg-alt);
}
.sm-related-card__imgwrap img{
  width:100%; height:100%; object-fit:cover; object-position:center; display:block;
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .sm-related-card__imgwrap img{ transition:transform .5s ease; }
  .sm-related-card:hover .sm-related-card__imgwrap img{ transform:scale(1.035); }
}

/* ── Lightbox accessible ──────────────────────────────────────────────── */
.sm-lb{
  position:fixed; inset:0; z-index:99999;
  display:flex; align-items:center; justify-content:center;
  padding:max(16px, 4vh) max(16px, 4vw);
  background:rgba(20,16,12,.92);
}
.sm-lb[hidden]{ display:none; }
.sm-lb__img{
  max-width:100%; max-height:84vh; object-fit:contain;
  border-radius:2px; background:#0c0a08; box-shadow:0 18px 60px rgba(0,0,0,.5);
}
.sm-lb__cap{
  position:absolute; left:0; right:0; bottom:max(10px, 2vh);
  text-align:center; color:#f3ece0; font-size:13px; padding:0 16px;
}
.sm-lb__cap:empty{ display:none; }
.sm-lb__credit{ color:#c9bda9; margin-inline-start:10px; }
.sm-lb__close{
  position:absolute; top:max(10px, 2vh); inset-inline-end:max(10px, 2vw);
  width:44px; height:44px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.14); color:#fff;
  font-size:22px; line-height:1; display:flex; align-items:center; justify-content:center;
}
.sm-lb__close:hover{ background:rgba(255,255,255,.24); }
.sm-lb__close:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

/* ── Responsive : œuvres/documents en mobile gardent un cadre raisonnable ─ */
@media (max-width:600px){
  .sm-hero__figure.sm-media--artwork .sm-hero__visual,
  .sm-hero__figure.sm-media--document .sm-hero__visual{ aspect-ratio:4 / 3; max-height:70vh; }
}

/* ── Mouvement réduit ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .sm-mag-lead__media .sm-mag-img,
  .sm-mag-aside__media .sm-mag-img,
  .sm-mag-story__media .sm-mag-img{ transition:none; }
  .sm-mag-lead__media:hover .sm-mag-img,
  .sm-mag-aside__media:hover .sm-mag-img,
  .sm-mag-story__media:hover .sm-mag-img{ transform:none; }
}
@media (prefers-reduced-motion:no-preference){
  .sm-lb{ animation:sm-lb-in .18s ease; }
  @keyframes sm-lb-in{ from{ opacity:0; } to{ opacity:1; } }
}