/* Visuels des offres et de l'annuaire des entreprises (#263) : situation SVG, chiffres clés avec pictogramme, histogrammes. */

/* --- Mini-carte de situation (SVG, contour du Val-d'Oise défini une fois par page) --- */
.vo-sit { display: block; width: 100%; height: auto; max-height: 100%; }
.vo-sit__dep { fill: #E6EEF9; stroke: #7C9CCB; stroke-width: 6; stroke-linejoin: round; }
.vo-sit__halo { fill: rgba(24, 83, 162, .18); }
.vo-sit__pt { fill: #1853A2; stroke: #fff; stroke-width: 8; }

/* --- Fiche d'offre sans photo du bien : situation (et photo libre de la commune quand elle existe) --- */
.vo-substitut { position: relative; flex-direction: column; gap: 12px; padding: 16px; background: linear-gradient(180deg, #F1F5FB, #E6EEF9); }
.vo-substitut--photo { padding: 0; background: var(--c-bg-2); }
.vo-substitut > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vo-situation { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 0; max-height: 100%; max-width: 100%; color: var(--c-text); font-size: 14px; line-height: 20px; font-weight: 600; }
.vo-situation .vo-sit { width: auto; max-width: 100%; height: min(300px, 52vw); }
.vo-situation figcaption { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.vo-substitut--photo .vo-situation { position: absolute; right: 12px; bottom: 36px; width: 168px; padding: 8px; background: rgba(255, 255, 255, .94); border-radius: var(--r-md); box-shadow: 0 4px 16px rgba(15, 23, 42, .18); font-size: 12px; line-height: 16px; }
.vo-substitut--photo .vo-situation .vo-sit { height: auto; width: 100%; }
.vo-substitut__note { margin: 0; max-width: 46ch; text-align: center; font-size: 13px; line-height: 18px; font-weight: 400; color: var(--c-text-2); }
@media (max-width: 1023.98px) { .vo-situation .vo-sit { height: min(160px, 44vw); } }

/* --- Caractéristiques en pastilles avec pictogramme --- */
.vo-caracs .ui-badge { display: inline-flex; align-items: center; gap: 6px; }
.vo-caracs .ui-icon { flex: none; }

/* --- Chiffres clés avec pictogramme (même apparence que .sp-chiffres des pages S'implanter) --- */
.vo-chiffres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 24px 0 0; padding: 0; list-style: none; }
@media (min-width: 1024px) { .vo-chiffres { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; } }
.vo-chiffres .sp-chiffre { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 16px; background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-md); box-shadow: 0 2px 8px rgba(15, 23, 42, .06); }
.vo-chiffres .sp-chiffre__n { font-size: 24px; line-height: 1.2; font-weight: 700; color: var(--c-text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.vo-chiffres .vo-chiffre__n--txt { font-size: 18px; line-height: 26px; }
.vo-chiffres .vo-chiffre__u { font-size: 15px; line-height: 20px; font-weight: 600; color: var(--c-text-2); }
.vo-chiffres .sp-chiffre__l { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--c-text-2); }
.vo-chiffre__picto { width: 24px; height: 24px; color: var(--c-brand, #1853A2); margin-bottom: 4px; }
@media (min-width: 1024px) { .vo-chiffres .sp-chiffre__n { font-size: 28px; } .vo-chiffres .vo-chiffre__n--txt { font-size: 20px; } }

/* --- Annuaire : histogrammes de liste --- */
.vo-graphiques { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin: 0 0 24px; }
@media (min-width: 1024px) { .vo-graphiques--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vo-graphiques .ui-chart { margin: 0; height: 100%; }

/* --- Annuaire : fiche d'entreprise (logo plus grand, chiffres clés, situation, photo libre) --- */
.an-logo { width: 280px; height: 150px; max-width: 100%; padding: 16px; }
.vo-ent-chiffres { margin: 0 0 24px; }
.vo-ent-chiffres .vo-chiffres { margin-top: 12px; }
.vo-ent-situation { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: center; }
@media (min-width: 640px) { .vo-ent-situation { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); } }
.vo-ent-situation .vo-sit { width: 100%; max-width: 320px; height: auto; margin: 0 auto; }
.vo-ent-situation figcaption { font-size: 13px; line-height: 18px; color: var(--c-text-2); }
.vo-ent-photo { margin: 0 0 16px; }
.vo-ent-photo img { display: block; width: 100%; height: auto; border-radius: var(--r-md); background: var(--c-bg-2); }
.vo-ent-photo figcaption { margin-top: 6px; font-size: 13px; line-height: 18px; color: var(--c-text-2); overflow-wrap: anywhere; }
.vo-graphiques { margin-top: 24px; }
.act-hero + .act-fiche { margin-top: 24px; }
.vo-ent-photo figcaption a { text-decoration: underline; text-underline-offset: 2px; }