/* MAG-UNE 03/10: the cover of a Mag' article is shown whole (Romain: photos entières, jamais coupées), 4 px corners,
   light head. Body class mgu (single articles only), option canape_mgu_off. */

/* 1. Old layout (single.php). */
.mgu .guide__tete--image .guide__vignette { aspect-ratio: auto; border-radius: 4px; overflow: hidden; }
.mgu .guide__tete--image .guide__vignette img { display: block; width: 100%; height: auto; aspect-ratio: auto; max-height: min(60vh, 40rem); object-fit: contain; }
.mgu .guide__tete--image .guide__titraille { display: contents; }
@media (min-width: 961px) {
  /* The picture beside the title, its top on the kicker; the reading tools run under both. */
  .mgu .guide__tete--image { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(2rem, 4vw, 4rem); row-gap: 0; align-items: start; }
  .mgu .guide__tete--image .guide__titraille > * { grid-column: 1; }
  .mgu .guide__tete--image .guide__titraille > :is(.ariane, .outils-lecture) { grid-column: 1 / -1; }
  .mgu .guide__tete--image .guide__vignette { grid-column: 2; grid-row: 2 / span 4; align-self: start; max-width: none; }
}
@media (max-width: 960px) {
  /* Phones and tablets: kicker, title, picture, then the standfirst. */
  .mgu .guide__tete--image { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .mgu .guide__tete--image .guide__titraille > :is(.chapeau, .article__meta, .outils-lecture) { order: 1; }
  .mgu .guide__tete--image .guide__vignette { max-width: none; margin: 0.4rem 0 1.2rem; }
}

/* 2. The 4 magazine templates (guide, liste, deco, entretien). The width follows the capped height (covers are 16:9),
   object-fit contain keeps any other shape whole. */
.mgu .dz-article .dz-une { --mgu-l: min(100%, calc(min(60vh, 40rem) * 16 / 9)); width: var(--mgu-l); margin-inline: auto; }
.mgu .dz-article .dz-une img { display: block; width: 100%; height: auto; aspect-ratio: auto; max-height: min(60vh, 40rem); object-fit: contain; border-radius: 4px; }
.mgu .dz-article--deco .dz-une { --mgu-l: min(100vw, calc(min(60vh, 40rem) * 16 / 9)); margin-left: calc(50% - var(--mgu-l) / 2); margin-right: 0; }
.mgu .dz-article--deco .dz-une figcaption { max-width: none; padding-inline: 0; }
@media (max-width: 900px) {
  .mgu .dz-article--deco .dz-une img { border-radius: 0; }
  .mgu .dz-article--deco .dz-une figcaption { padding-inline: var(--gutter); }
}