/* La valeur intrinsèque (src/valeur-ecran.js), dans le style des autres onglets de l'espace foncier.
   Henri, 10/10/2026 : « le style de l'onglet Valeurs n'est pas cohérent avec le reste ». La première charte
   (fond blanc forcé, Inter, titres en capitales, en-têtes de tableau noirs) est abandonnée : l'écran prend
   les panneaux, segments, champs, tableaux et chiffres de src/instrument.css, dans les deux thèmes, par les
   classes communes posées dans le HTML (.pg-reglages, .pg-seg, .fc-resultats, .fc-synthese, .fc-table,
   .fc-option, .fc-case, .note, .fc-aide). Cette feuille ne règle que ce qui est propre à la valeur, avec les
   jetons --i-* de l'Instrument ; aucune couleur d'interface, le rouge ne marque qu'une donnée (surévaluée,
   risque à écarter), comme la zone rouge du PPRN dans le tableau des parcelles. */

/* ── La colonne de gauche ── */
.pg.vi .vi-vues { flex-shrink: 0; }
.pg.vi .pg-reglages > *, .pg.vi .vi-corps > * { flex-shrink: 0; }
.pg.vi .vi-cherche, .pg.vi .vi-corps { display: flex; flex-direction: column; gap: 8px; }
.pg.vi .vi-cherche[hidden] { display: none; }
.pg.vi .pg-reglages h2:first-child { margin-top: 10px; }
/* La recherche : la capsule de la carte (.recherche-carte), à la largeur du panneau */
.pg.vi .vi-recherche { flex: none; max-width: none; height: 40px; padding: 0 6px 0 12px; gap: 6px; color: var(--i-lib, var(--encre-3)); }
.pg.vi .vi-recherche > svg { flex: none; width: 16px; height: 16px; }
html[data-theme] .page-app .pg.vi .vi-recherche input { height: 38px; padding: 0 4px; border: 0; border-radius: 0; background: transparent; box-shadow: none; font-size: var(--t-14); }
html[data-theme] .page-app .pg.vi .vi-recherche input:focus { box-shadow: none; }
html[data-theme] .page-app .pg.vi .vi-recherche .suggestions { top: calc(100% + 6px); left: 0; right: 0; z-index: 40; background: var(--i-panneau); }
.pg.vi .vi-recherche .suggestions a span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Plusieurs parcelles, les hypothèses : des volets repliés, leur titre comme un libellé de réglage */
.pg.vi :is(.vi-plusieurs, .vi-hyp, .vi-details) > summary { display: flex; align-items: center; gap: 6px; min-height: 30px; color: var(--i-lib, var(--encre-3)); font-size: var(--t-12); cursor: pointer; list-style: none; }
.pg.vi :is(.vi-plusieurs, .vi-hyp, .vi-details) > summary::-webkit-details-marker { display: none; }
.pg.vi :is(.vi-plusieurs, .vi-hyp, .vi-details) > summary::before { content: ''; width: 5px; height: 5px; margin: 0 3px 0 1px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform 0.15s; }
.pg.vi :is(.vi-plusieurs, .vi-hyp, .vi-details)[open] > summary::before { transform: rotate(45deg); }
.pg.vi :is(.vi-plusieurs, .vi-hyp, .vi-details) > summary:hover { color: var(--i-encre, var(--encre)); }
.pg.vi .vi-hyp summary small { margin-left: auto; font-size: var(--t-12); }
.pg.vi .vi-plusieurs[open] { display: flex; flex-direction: column; gap: 8px; }
.pg.vi .vi-plusieurs textarea { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 0; border-radius: var(--r-bouton); background: var(--i-seg, var(--survol)); box-shadow: var(--i-filet, none); color: var(--i-encre, var(--encre)); font: var(--t-13)/1.45 ui-monospace, "SF Mono", Menlo, monospace; resize: vertical; }
.pg.vi .vi-plusieurs textarea:focus { outline: none; box-shadow: inset 0 0 0 1px var(--i-encre-2, var(--encre-2)); }
.pg.vi .vi-hyp { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--i-trait, var(--filet)); }
.pg.vi .vi-hyp[open] { display: flex; flex-direction: column; }
.pg.vi .vi-hyp .bouton { margin-top: 10px; }
.pg.vi .bouton-primaire { width: 100%; margin-top: 6px; }
/* Une valeur suivie de son unité, sur une ligne */
.pg.vi .vi-unite { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 10px; }
.pg.vi .vi-unite span { color: var(--i-lib, var(--encre-3)); font-size: var(--t-12); }
/* Les communes : des interrupteurs (.fc-option), dans un cadre qui défile */
.pg.vi .vi-communes { max-height: 248px; overflow-y: auto; padding: 4px; border-radius: var(--r-moyen); box-shadow: inset 0 0 0 1px var(--i-trait, var(--filet)); scrollbar-width: thin; }
.pg.vi .fc-case { min-height: 30px; }
/* Une hypothèse par ligne : libellé, champ compact, unité */
.pg.vi .vi-champ { display: grid; grid-template-columns: minmax(0, 1fr) 128px; gap: 8px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--i-trait, var(--filet)); color: var(--i-encre-2, var(--encre-2)); font-size: var(--t-12); }
.pg.vi .vi-champ > span:last-child { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 6px; align-items: center; }
html[data-theme] .page-app .pg.vi .vi-champ input { height: 28px; padding: 0 6px; border-radius: var(--r-pastille); font-size: var(--t-12); text-align: right; font-variant-numeric: tabular-nums; }
.pg.vi .vi-champ small { overflow: hidden; color: var(--i-lib, var(--encre-3)); font-size: var(--t-11); text-overflow: ellipsis; white-space: nowrap; }
.pg.vi .vi-champ i { margin-left: 4px; color: var(--i-lib, var(--encre-3)); font-size: var(--t-11); font-style: normal; }

/* ── Le panneau de droite (.fc-resultats) ── */
.pg.vi .vi-plateau { min-width: 0; min-height: 0; overflow-y: auto; }
.pg.vi .vi-plateau > .note:not(:only-child) { margin: 0 0 12px; padding: 8px 12px; border-radius: var(--r-moyen); background: var(--i-seg, var(--survol)); color: var(--i-encre-2, var(--encre-2)); font-size: var(--t-13); }
.pg.vi .vi-fiche + .vi-fiche { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--i-trait, var(--filet)); }
.pg.vi .vi-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.pg.vi .vi-tete h3 { margin: 0; color: var(--i-encre, var(--encre)); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; }
.pg.vi .vi-tete .fc-synthese-note { margin: 4px 0 0; }
.pg.vi .vi-verdict { display: grid; justify-items: end; gap: 4px; text-align: right; }
.pg.vi .vi-verdict .fc-aide { margin: 0; }
.pg.vi .vi-badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--r-pastille); background: var(--i-seg, var(--survol)); color: var(--i-encre, var(--encre)); font-size: var(--t-12); font-weight: 500; white-space: nowrap; }
.pg.vi .vi-b-sous { background: var(--i-plein, var(--encre)); color: var(--i-sur-plein, var(--fond)); }
.pg.vi .vi-b-sur::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #B23A2E; }
.pg.vi .vi-b-nd { color: var(--i-lib, var(--encre-3)); }
.pg.vi .fc-synthese dd { overflow: hidden; text-overflow: ellipsis; }
.pg.vi .vi-motif { margin: 0 0 6px; color: var(--i-encre, var(--encre)); font-size: var(--t-13); }
.pg.vi .vi-etat { margin: 6px 0; padding: 2px 0 2px 10px; box-shadow: inset 2px 0 0 var(--i-encre, var(--encre)); color: var(--i-encre-2, var(--encre-2)); font-size: var(--t-13); }
.pg.vi h4 { display: flex; align-items: baseline; gap: 8px; margin: 22px 0 8px; color: var(--i-encre, var(--encre)); font-size: var(--t-14); font-weight: 600; }
.pg.vi h4 small { color: var(--i-lib, var(--encre-3)); font-size: var(--t-12); font-weight: 400; }
.pg.vi .fc-aide { line-height: 1.45; }
.pg.vi .vi-pied { margin-top: 16px; }
.pg.vi .vi-compte { margin: 0 0 10px; color: var(--i-encre-2, var(--encre-2)); font-size: var(--t-13); }
.pg.vi .vi-compte b { color: var(--i-encre, var(--encre)); font-weight: 600; }

/* Les tableaux : ceux des parcelles et des permis (.fc-table), sans le tri ni le clic de ligne, sauf le
   classement des sous-évaluées qui ouvre une fiche */
.pg.vi .fc-table-cadre { margin-bottom: 8px; }
.pg.vi .fc-table thead th { padding: 0 10px; }
.pg.vi .fc-table tbody tr { cursor: default; }
.pg.vi .fc-table tbody tr:hover > * { background: var(--surface); }
.pg.vi .vi-classement tbody tr { cursor: pointer; }
.pg.vi .vi-classement tbody tr:hover > * { background: linear-gradient(var(--i-survol, var(--survol)), var(--i-survol, var(--survol))), var(--surface); }
.pg.vi .fc-table td small { color: var(--i-lib, var(--encre-3)); font-size: var(--t-11); }
.pg.vi .fc-table tbody th small { display: block; color: var(--i-lib, var(--encre-3)); font-size: var(--t-11); font-weight: 400; white-space: normal; }
.pg.vi .vi-postes tbody th { height: auto; padding-top: 6px; padding-bottom: 6px; font-weight: 400; white-space: normal; }
.pg.vi .fc-table .vi-fort > * { color: var(--i-encre, var(--encre)); font-weight: 600; }
.pg.vi .fc-table td.vi-src { min-width: 320px; padding-top: 6px; padding-bottom: 6px; color: var(--i-lib, var(--encre-3)); white-space: normal; line-height: 1.4; }
.pg.vi .vi-fia { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: var(--r-pastille); background: var(--i-seg, var(--survol)); color: var(--i-encre-2, var(--encre-2)); font-size: var(--t-12); white-space: nowrap; }
.pg.vi .vi-fia-v { box-shadow: inset 0 0 0 1px var(--i-encre-2, var(--encre-2)); color: var(--i-encre, var(--encre)); }
.pg.vi .vi-fia-s { background: none; box-shadow: inset 0 0 0 1px var(--i-trait, var(--filet)); color: var(--i-lib, var(--encre-3)); }

/* Les listes (notes, risques, catalyseurs) : des lignes à filets, comme les listes de la feuille */
.pg.vi .vi-liste { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--i-trait, var(--filet)); color: var(--i-encre-2, var(--encre-2)); font-size: var(--t-13); }
.pg.vi .vi-liste li { padding: 7px 0; border-bottom: 1px solid var(--i-trait, var(--filet)); line-height: 1.45; }
.pg.vi .vi-liste li b { display: inline-block; min-width: 76px; margin-right: 8px; color: var(--i-encre, var(--encre)); font-size: var(--t-12); font-weight: 500; }
.pg.vi .vi-liste small { color: var(--i-lib, var(--encre-3)); }
.pg.vi .vi-liste a { color: inherit; text-decoration: underline; text-decoration-color: var(--i-trait, var(--filet)); text-underline-offset: 2px; }
.pg.vi .vi-r-e b::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #B23A2E; vertical-align: 1px; }
.pg.vi .vi-r-n, .pg.vi .vi-r-n b, .pg.vi .vi-r-i b { color: var(--i-lib, var(--encre-3)); }
.pg.vi .vi-details { margin-top: 12px; }
.pg.vi .vi-details[open] > summary { margin-bottom: 6px; }
.pg.vi .vi-actions { margin-top: 14px; }
/* Le suivi d'une parcelle du portefeuille, sur une ligne du tableau */
.pg.vi .vi-suivi { display: flex; align-items: center; gap: 4px; min-width: 380px; }
html[data-theme] .page-app .pg.vi .vi-suivi :is(select, input) { height: 28px; padding: 0 6px; border-radius: var(--r-pastille); font-size: var(--t-12); }
.pg.vi .vi-suivi input[type="number"] { width: 90px; }
html[data-theme] .page-app .pg.vi .vi-suivi .bouton { height: 28px; min-height: 28px; padding: 0 10px; }

@media (max-width: 899px) {
  .pg.vi > .pg-appli { grid-template-columns: minmax(0, 1fr); grid-auto-rows: max-content; overflow-y: auto; }
  .pg.vi .vi-plateau { overflow: visible; }
  .pg.vi .vi-tete { flex-wrap: wrap; }
  .pg.vi .vi-verdict { justify-items: start; text-align: left; }
}
/* Dans la barre latérale de 340 px (Henri, 08/11/2026 : « Commercialisation » et « d'aménagement » coupés en pleine colonne) : le libellé prend toute la largeur, le champ et son unité passent dessous, l'unité retourne à la ligne au lieu d'être tronquée */
@media (min-width: 900px) {
  html.sc-actif .pg.vi .vi-champ { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 8px 0; }
  html.sc-actif .pg.vi .vi-champ > span:last-child { grid-template-columns: 104px minmax(0, 1fr); }
  html.sc-actif .pg.vi .vi-champ small { overflow: visible; text-overflow: clip; white-space: normal; }
}