/* DA 2027 (#357) : vignettes carrées, image en regard du texte, graphique en encart, grande image. Chargé seulement avec da27 ; propriétés logiques (RTL). */
html.da27 .vz-piece { margin-block: clamp(24px, 3vw, 40px); }
html.da27 .vz-grande { max-width: 960px; margin-inline: 0; }
html.da27 .vz-grande .ui-figure { border-radius: var(--r-lg, 16px); overflow: hidden; }
html.da27 .vz-grande .ui-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
html.da27 .vz-credit, html.da27 .vz-vignette__legende { font-size: .75rem; line-height: 1.4; color: var(--c-texte-2, #4A5A68); }
html.da27 .vz-vignette__legende { display: block; font-weight: 600; color: var(--c-texte, #1F2D3A); margin-block-end: 2px; }
html.da27 .vz-credit a { color: inherit; text-decoration: underline; }

/* vignettes carrées, 2 à 4 de front */
html.da27 .vz-vignettes { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1080px; }
html.da27 .vz-vignettes > li { margin: 0; min-width: 0; }
html.da27 .vz-vignette { margin: 0; }
html.da27 .vz-vignette__cadre { aspect-ratio: 1 / 1; border-radius: var(--r-lg, 16px); overflow: hidden; background: var(--brand-100, #E4ECF2); }
html.da27 .vz-vignette__cadre img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease, ease); }
html.da27 .vz-vignette:hover .vz-vignette__cadre img { transform: scale(1.04); }
html.da27 .vz-vignette figcaption { margin-block-start: 8px; }
@media (min-width: 900px) {
  html.da27 .vz-vignettes--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html.da27 .vz-vignettes--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 640px) and (max-width: 899px) {
  html.da27 .vz-vignettes--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
}

/* image ou graphique en regard du texte : colonne étroite d'un côté, un à deux paragraphes de l'autre ; le sens suit la langue */
html.da27 .vz-duo { display: grid; gap: 16px 32px; align-items: start; margin-block: clamp(20px, 2.5vw, 32px); }
html.da27 .vz-duo > figure { margin: 0; min-width: 0; }
html.da27 .vz-duo__texte { min-width: 0; }
html.da27 .vz-duo__texte > p:first-child { margin-block-start: 0; }
html.da27 .vz-regard__cadre { aspect-ratio: 4 / 3; border-radius: var(--r-lg, 16px); overflow: hidden; background: var(--brand-100, #E4ECF2); }
html.da27 .vz-regard__cadre img { width: 100%; height: 100%; object-fit: cover; display: block; }
html.da27 .vz-regard figcaption { margin-block-start: 8px; }
html.da27 .vz-duo .ui-chart { margin: 0; padding: 16px; border-radius: var(--r-lg, 16px); background: var(--c-surface, #fff); border: 1px solid var(--c-border, #E2E8F0); font-size: .9em; }
@media (min-width: 768px) {
  html.da27 .vz-duo { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  html.da27 .vz-duo--fin { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  html.da27 .vz-duo--fin > figure { order: 2; }
}
@media print { html.da27 .vz-vignettes, html.da27 .vz-regard { break-inside: avoid; } }