/* DA 2027 (#362) : médias des pages éditoriales (photos moyennes, galeries, vidéos, graphiques variés). Chargé par core/visuels_357.py sur les seules pages qui en reçoivent ; propriétés logiques (LTR et RTL), jetons de la DA, aucun appel extérieur. */
html.da27 .vz-moyenne { margin: 0; max-width: 640px; }
html.da27 .vz-moyenne__cadre { aspect-ratio: 3 / 2; border-radius: var(--r-lg, 16px); overflow: hidden; background: var(--brand-100, #E4ECF2); }
html.da27 .vz-moyenne__cadre img { width: 100%; height: 100%; object-fit: cover; display: block; }
html.da27 .vz-moyenne figcaption { margin-block-start: 8px; }

/* galerie : mosaïque de vignettes carrées (4 à 8) */
html.da27 .vz-galerie { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1080px; }
html.da27 .vz-galerie > li { margin: 0; min-width: 0; }
html.da27 .vz-galerie .vz-vignette__legende { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html.da27 .vz-galerie .vz-credit { display: block; }
@media (min-width: 640px) { html.da27 .vz-galerie { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { html.da27 .vz-galerie { grid-template-columns: repeat(4, minmax(0, 1fr)); } html.da27 .vz-galerie--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } html.da27 .vz-galerie--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* vidéos dans le texte (façade du site : vignette locale, lecteur créé au clic) */
html.da27 .vz-video { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
html.da27 .vz-video--grande { max-width: 960px; }
html.da27 .vz-video--moyenne { max-width: 640px; }
html.da27 .vz-video--vignettes { max-width: 1080px; }
@media (min-width: 640px) { html.da27 .vz-video--vignettes { grid-template-columns: repeat(var(--vz-colonnes, 2), minmax(0, 1fr)); } }
html.da27 .vz-video .da-video { margin: 0; }

/* graphiques 362 */
html.da27 .g362 { margin-block: 0; }
html.da27 .g362__svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font-sans, inherit); }
html.da27 .g362__svg .ax { fill: var(--c-text-2, #4A5A68); font-size: 10px; }
html.da27 .g362__svg .v { fill: var(--c-text, #1F2D3A); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
html.da27 .g362__svg .g { stroke: var(--viz-grille, #E2E8F0); stroke-width: 1; }
html.da27 .g362__svg .s1 { fill: var(--viz-1); }
html.da27 .g362__svg .s2 { fill: var(--viz-2); }
html.da27 .g362__svg .sn { fill: var(--viz-neutre); }
html.da27 .g362__svg .l { fill: none; stroke: var(--viz-1); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
html.da27 .g362__svg .aire { fill: color-mix(in srgb, var(--viz-1) 22%, transparent); stroke: none; }
html.da27 .g362__svg .pt { stroke: var(--c-surface, #fff); stroke-width: 1.5; }
html.da27 .g362__svg--nuage .pt { fill-opacity: .72; }
html.da27 .g362__svg--jauge { max-width: 340px; margin-inline: auto; }
html.da27 .g362__svg .piste { fill: none; stroke: var(--viz-vide, #E2E8F0); stroke-width: 14; stroke-linecap: round; }
html.da27 .g362__svg .val { fill: none; stroke: var(--viz-1); stroke-width: 14; stroke-linecap: round; }
html.da27 .g362__svg .rep { stroke: var(--c-text, #1F2D3A); stroke-width: 2.5; stroke-linecap: round; }
html.da27 .g362__svg .gv { fill: var(--c-text, #1F2D3A); font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
html.da27 .g362__defs { position: absolute; width: 0; height: 0; overflow: hidden; }

html.da27 .g362__legende { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 0; padding: 0; list-style: none; font-size: .8125rem; color: var(--c-text-2, #4A5A68); }
html.da27 .g362__legende i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-inline-end: 6px; vertical-align: baseline; }
html.da27 .g362__legende i.rp { width: 3px; height: 14px; border-radius: 1px; background: var(--c-text, #1F2D3A); vertical-align: -2px; }
html.da27 .g362 .c1 { background: var(--viz-1); } html.da27 .g362 .c2 { background: var(--viz-2); } html.da27 .g362 .c3 { background: var(--viz-3); } html.da27 .g362 .c4 { background: var(--viz-4); }
html.da27 .g362 .c5 { background: var(--viz-5); } html.da27 .g362 .c6 { background: var(--viz-6); } html.da27 .g362 .c7 { background: var(--viz-7); } html.da27 .g362 .c8 { background: var(--viz-8); }
html.da27 .g362 .cn { background: var(--viz-neutre); } html.da27 .g362 .pa { background: var(--viz-neutre); border-radius: 50%; } html.da27 .g362 .pb { background: var(--viz-1); border-radius: 50%; }

/* haltères : deux repères par ligne */
html.da27 .g362__halteres { display: grid; grid-template-columns: fit-content(40%) minmax(0, 1fr) max-content; gap: 14px 12px; align-items: center; margin: 0; padding: 0; list-style: none; font-size: .875rem; }
html.da27 .g362__halteres li { display: contents; }
html.da27 .g362__halteres .piste { position: relative; display: block; height: 14px; border-radius: 7px; background: var(--viz-vide, #E2E8F0); }
html.da27 .g362__halteres .lien { position: absolute; top: 5px; height: 4px; background: var(--viz-axe, #CBD5E1); }
html.da27 .g362__halteres i { position: absolute; top: 0; width: 14px; height: 14px; margin-inline-start: -7px; border-radius: 50%; }
html.da27 .g362__halteres i.a { background: var(--viz-neutre); } html.da27 .g362__halteres i.b { background: var(--viz-1); }
html.da27 .g362__halteres .v { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 479.98px) { html.da27 .g362__halteres { grid-template-columns: minmax(0, 1fr) max-content; } html.da27 .g362__halteres .n { grid-column: 1 / -1; margin-bottom: -8px; } }

/* papillon : deux côtés autour d'un axe */
html.da27 .g362__papillon { display: grid; gap: 8px; font-size: .8125rem; }
html.da27 .g362__papillon .tete, html.da27 .g362__papillon .ligne { display: grid; grid-template-columns: minmax(0, 1fr) minmax(88px, 30%) minmax(0, 1fr); gap: 8px; align-items: center; }
html.da27 .g362__papillon .tete { font-weight: 700; color: var(--c-text, #1F2D3A); }
html.da27 .g362__papillon .tete span:first-child { text-align: end; }
html.da27 .g362__papillon .n { text-align: center; color: var(--c-text-2, #4A5A68); line-height: 1.25; }
html.da27 .g362__papillon .g, html.da27 .g362__papillon .dr { display: flex; align-items: center; gap: 6px; min-width: 0; }
html.da27 .g362__papillon .g { justify-content: flex-end; }
html.da27 .g362__papillon .b { display: block; height: 16px; min-width: 2px; }
html.da27 .g362__papillon .g .b { border-radius: 4px 0 0 4px; } html.da27 .g362__papillon .dr .b { border-radius: 0 4px 4px 0; }
html.da27 .g362__papillon .v { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
html.da27 .g362__papillon .g { flex-direction: row; }

/* treemap : tuiles proportionnelles, texte sombre sur teinte claire (contraste) */
html.da27 .g362__treemap { position: relative; width: 100%; aspect-ratio: 100 / 62; min-height: 240px; border-radius: 10px; overflow: hidden; }
html.da27 .g362__treemap .tm { position: absolute; box-sizing: border-box; padding: 6px 8px; overflow: hidden; border: 2px solid var(--c-surface, #fff); border-radius: 6px; color: var(--c-text, #1F2D3A); font-size: .75rem; line-height: 1.25; display: flex; flex-direction: column; gap: 2px; }
html.da27 .g362__treemap .tm .tn { font-weight: 600; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
html.da27 .g362__treemap .tm .tv { font-variant-numeric: tabular-nums; }
html.da27 .g362__treemap .tm.petit .tn { display: none; }
html.da27 .g362__treemap .tm.c1 { background: color-mix(in srgb, var(--viz-1) 22%, var(--c-surface, #fff)); }
html.da27 .g362__treemap .tm.c2 { background: color-mix(in srgb, var(--viz-2) 22%, var(--c-surface, #fff)); }
html.da27 .g362__treemap .tm.c3 { background: color-mix(in srgb, var(--viz-3) 22%, var(--c-surface, #fff)); }
html.da27 .g362__treemap .tm.c4 { background: color-mix(in srgb, var(--viz-4) 22%, var(--c-surface, #fff)); }
html.da27 .g362__treemap .tm.c5 { background: color-mix(in srgb, var(--viz-5) 22%, var(--c-surface, #fff)); }
html.da27 .g362__treemap .tm.c6 { background: color-mix(in srgb, var(--viz-6) 22%, var(--c-surface, #fff)); }
html.da27 .g362__treemap .tm.c7 { background: color-mix(in srgb, var(--viz-7) 22%, var(--c-surface, #fff)); }
html.da27 .g362__treemap .tm.c8 { background: color-mix(in srgb, var(--viz-8) 22%, var(--c-surface, #fff)); }
html.da27 .g362__treemap .tm.petit { padding: 2px; align-items: center; justify-content: center; font-size: .6875rem; }

/* choroplèthes : cinq teintes d'une même couleur, du clair au foncé */
html.da27 .g362__svg--carte use { stroke: var(--c-surface, #fff); stroke-width: .6; stroke-linejoin: round; }
html.da27 .g362__svg--carte .q0, html.da27 .g362__echelle .q0 { fill: var(--viz-vide, #E2E8F0); background: var(--viz-vide, #E2E8F0); }
html.da27 .g362__svg--carte .q1, html.da27 .g362__echelle .q1 { fill: color-mix(in srgb, var(--viz-1) 14%, var(--c-surface, #fff)); background: color-mix(in srgb, var(--viz-1) 14%, var(--c-surface, #fff)); }
html.da27 .g362__svg--carte .q2, html.da27 .g362__echelle .q2 { fill: color-mix(in srgb, var(--viz-1) 34%, var(--c-surface, #fff)); background: color-mix(in srgb, var(--viz-1) 34%, var(--c-surface, #fff)); }
html.da27 .g362__svg--carte .q3, html.da27 .g362__echelle .q3 { fill: color-mix(in srgb, var(--viz-1) 56%, var(--c-surface, #fff)); background: color-mix(in srgb, var(--viz-1) 56%, var(--c-surface, #fff)); }
html.da27 .g362__svg--carte .q4, html.da27 .g362__echelle .q4 { fill: color-mix(in srgb, var(--viz-1) 78%, var(--c-surface, #fff)); background: color-mix(in srgb, var(--viz-1) 78%, var(--c-surface, #fff)); }
html.da27 .g362__svg--carte .q5, html.da27 .g362__echelle .q5 { fill: var(--viz-1); background: var(--viz-1); }
html.da27 .g362__svg--carte { max-width: 560px; margin-inline: auto; }
html.da27 .g362__echelle { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0 0; padding: 0; list-style: none; font-size: .75rem; color: var(--c-text-2, #4A5A68); font-variant-numeric: tabular-nums; }
html.da27 .g362__echelle li { display: flex; align-items: center; gap: 6px; }
html.da27 .g362__echelle i { width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--viz-axe, #CBD5E1); }

/* barres en perspective isométrique (3D) */
html.da27 .g362__svg--iso { max-width: 440px; margin-inline: auto; }
html.da27 .g362__svg--iso .f1 { fill: var(--viz-1); }
html.da27 .g362__svg--iso .f2 { fill: color-mix(in srgb, var(--viz-1) 70%, #000); }
html.da27 .g362__svg--iso .f3 { fill: color-mix(in srgb, var(--viz-1) 68%, #fff); }
html.da27 .g362__svg--iso .rg { fill: var(--c-text-2, #4A5A68); font-size: 10px; font-weight: 700; }
html.da27 .g362__rang { display: grid; gap: 4px 20px; margin: 10px 0 0; padding-inline-start: 1.6em; font-size: .8125rem; color: var(--c-text-2, #4A5A68); }
@media (min-width: 640px) { html.da27 .g362__rang { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
html.da27 .g362__rang strong { color: var(--c-text, #1F2D3A); font-variant-numeric: tabular-nums; white-space: nowrap; }

html.da27 .vz-piece > .g362, html.da27 .vz-piece > .ui-chart { max-width: 720px; }
html.da27 .vz-piece > .g362--carte, html.da27 .vz-piece > .g362--treemap { max-width: 760px; }
html.da27 .vz-groupe { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { html.da27 .vz-groupe--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { html.da27 .vz-vignette__cadre img { transition: none; } }
@media print { html.da27 .vz-moyenne, html.da27 .vz-galerie, html.da27 .vz-video, html.da27 .g362 { break-inside: avoid; } }
html.da27 .g362__svg--iso .v3d { font-size: 12px; paint-order: stroke; stroke: var(--c-surface, #fff); stroke-width: 3px; }
/* hors écran, les cartes (183 formes chacune) ne sont ni mises en page ni peintes avant d'approcher : TBT et LCP préservés */
html.da27 .g362--carte, html.da27 .g362--treemap, html.da27 .g362--iso { content-visibility: auto; contain-intrinsic-size: auto 460px; }

/* #362 : tailles maîtrisées, groupes de petits graphiques, style 2026 */
html.da27 .vz-piece > .g362, html.da27 .vz-piece > .ui-chart { max-width: 560px; }
html.da27 .vz-piece > .g362--carte { max-width: 640px; }
html.da27 .vz-groupe { max-width: 1080px; }
html.da27 .vz-groupe > .ui-chart, html.da27 .vz-groupe > .g362 { max-width: none; margin: 0; }
@media (min-width: 640px) { html.da27 .vz-groupe--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } html.da27 .vz-groupe--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
html.da27 .vz-groupe--3 .g362__svg--jauge { max-width: 220px; }
html.da27 .g362__svg--jauge { max-width: 240px; }
html.da27 .g362__svg--iso { max-width: 360px; }
html.da27 .g362__svg--aire { max-height: 190px; }
html.da27 .g362__svg .ac, html.da27 .g362__svg .pt.ac { fill: var(--viz-1); }
html.da27 .g362__svg .gr { fill: color-mix(in srgb, var(--viz-neutre, #78879D) 38%, var(--c-surface, #fff)); }
html.da27 .g362__svg .gr2 { fill: color-mix(in srgb, var(--viz-neutre, #78879D) 20%, var(--c-surface, #fff)); }
html.da27 .g362 .cn2 { background: color-mix(in srgb, var(--viz-neutre, #78879D) 20%, var(--c-surface, #fff)); }
html.da27 .g362__svg .l { stroke-width: 2.6; }
html.da27 .g362__svg .zone { fill: transparent; stroke: none; cursor: pointer; }
html.da27 .g362__svg .zone:hover, html.da27 .g362__svg .zone:focus-visible { fill: color-mix(in srgb, var(--viz-1) 22%, transparent); outline: none; }
html.da27 .g362__svg rect[data-tip]:hover, html.da27 .g362__svg rect[data-tip]:focus-visible { filter: brightness(.92); outline: none; }
html.da27 .g362__svg .pt.fin { stroke: var(--c-surface, #fff); stroke-width: 2; }
html.da27 .g362 { position: relative; }
html.da27 .g362__tip { position: absolute; z-index: 5; pointer-events: none; padding: 5px 9px; border-radius: 8px; background: var(--c-text, #1F2D3A); color: #fff; font-size: .75rem; line-height: 1.3; white-space: nowrap; transform: translate(-50%, -120%); }
html.da27 .g362__svg--carte { max-width: 520px; }
html.da27 .g362__treemap { min-height: 200px; }
@media (prefers-reduced-motion: no-preference) {
  html.da27 .g362__svg .trace { stroke-dasharray: 1; stroke-dashoffset: 0; animation: g362-trace 1.1s cubic-bezier(.3,.6,.2,1) both; }
  html.da27 .g362__svg .aire { animation: g362-fond .9s ease-out .3s both; }
  html.da27 .g362__svg rect.ac, html.da27 .g362__svg rect.gr, html.da27 .g362__svg rect.gr2 { transform-box: fill-box; transform-origin: bottom; animation: g362-monte .6s cubic-bezier(.2,.7,.2,1) both; }
  html.da27 .g362__svg .pt.fin { animation: g362-fond .3s ease-out 1s both; }
}
@keyframes g362-trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes g362-fond { from { opacity: 0; } to { opacity: 1; } }
@keyframes g362-monte { from { transform: scaleY(0); } to { transform: scaleY(1); } }