/* 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; } }

/* #362 : graphiques compacts, une couleur d'accent, grilles discrètes (tous les graphiques sous la DA 2027, y compris ceux de simplanter_visuels) */
html.da27 main .ui-chart { max-width: 560px; padding: 16px 18px; border-radius: 18px; box-shadow: none; border-color: var(--c-border, #E2E8F0); }
html.da27 main .ui-chart__titre { font-size: 1rem; line-height: 1.35; font-weight: 650; letter-spacing: -.01em; text-wrap: balance; }
html.da27 main .ui-chart__barres { gap: 8px 10px; }
html.da27 main .ui-chart__barres .t { height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--viz-vide, #E2E8F0) 70%, transparent); }
html.da27 main .ui-chart__barres .b { border-radius: 999px; transform-origin: left center; }
html.da27 main .ui-chart__svg .g { stroke: color-mix(in srgb, var(--viz-grille, #E2E8F0) 60%, transparent); }
html.da27 main .ui-chart__zone { height: 150px; }
html.da27 main .ui-chart__anneau .ui-chart__svg { width: 132px; }
html.da27 main .ui-chart .ui-chart__donnees summary { font-size: .8125rem; }
html.da27 main .ui-chart .ui-source { font-size: .75rem; }
html.da27 main .ui-chart--courbe, html.da27 main .ui-chart--barres:has(.ui-chart__barres li:nth-child(8)) { max-width: 640px; }
@media (prefers-reduced-motion: no-preference) {
  html.da27 main .ui-chart__barres .b { animation: g362-barre .7s cubic-bezier(.2,.7,.2,1) both; }
}
@keyframes g362-barre { from { transform: scaleX(0); } to { transform: scaleX(1); } }