/* Calculateur VSP : pages client (calculateur, analyse, questionnaire). Charte : #792525 bordeaux, #011936 marine, #f2d5dc rose, #b39084 taupe */
.vspc-front { --vb: #792525; --vm: #011936; --vr: #f2d5dc; --vt: #b39084; --vl: #fbf4f5; --vg: #5f5a60; color: #222; max-width: 820px; margin: 0 auto; font-size: 16px; line-height: 1.55; }
.vspc-front *, .vspc-front *::before, .vspc-front *::after { box-sizing: border-box; }
.vspc-front h2 { color: var(--vb); font-size: 1.35em; margin: 0 0 .6em; }
.vspc-front h3 { color: var(--vm); font-size: 1.12em; margin: 1.2em 0 .5em; }
.vspc-front h4 { color: var(--vm); font-size: 1em; margin: 0 0 .3em; }
.vspc-card { background: #fff; border: 1px solid #ead9dd; border-radius: 12px; padding: 18px 20px; margin: 0 0 16px; }
.vspc-codebar { background: var(--vr); border-radius: 12px; padding: 12px 16px; margin: 0 0 16px; }
.vspc-codebar p { margin: 0; }
.vspc-codeform { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.vspc-codeform label { font-weight: 600; color: var(--vm); }
.vspc-codeform input { flex: 1 1 160px; max-width: 220px; text-transform: uppercase; letter-spacing: 1px; }
.vspc-code-msg { flex-basis: 100%; font-size: .9em; color: var(--vb); min-height: 1em; }
.vspc-front input[type=text], .vspc-front input[type=date], .vspc-front select, .vspc-front textarea { width: 100%; padding: 9px 11px; border: 1px solid #cdbfc3; border-radius: 8px; font: inherit; background: #fff; color: #222; }
.vspc-front input:focus, .vspc-front select:focus, .vspc-front textarea:focus { outline: 2px solid var(--vb); outline-offset: 1px; }
.vspc-btn { background: var(--vb); color: #fff; border: 0; border-radius: 8px; padding: 10px 18px; font: inherit; font-weight: 600; cursor: pointer; }
.vspc-btn:hover, .vspc-btn:focus-visible { background: #5f1c1c; }
.vspc-btn:disabled { opacity: .5; cursor: not-allowed; }
.vspc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0 16px; }
.vspc-grid-6 { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.vspc-field { margin: 0 0 14px; }
.vspc-label { display: block; font-weight: 600; color: var(--vm); margin: 0 0 5px; font-size: .95em; }
.vspc-help { display: block; color: var(--vg); font-size: .88em; margin-top: 4px; }
.vspc-unit { color: var(--vg); }
.vspc-req { color: var(--vb); }
.vspc-choices { display: flex; flex-wrap: wrap; gap: 6px; }
.vspc-choices label { position: relative; cursor: pointer; }
.vspc-choices input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vspc-choices span { display: inline-block; padding: 7px 13px; border: 1px solid #cdbfc3; border-radius: 99px; background: #fff; font-size: .93em; }
.vspc-choices small { display: block; color: var(--vg); font-size: .78em; }
.vspc-choices input:checked + span { background: var(--vb); border-color: var(--vb); color: #fff; }
.vspc-choices input:checked + span small { color: var(--vr); }
.vspc-choices input:focus-visible + span { outline: 2px solid var(--vm); outline-offset: 2px; }
.vspc-choices:not(.is-buttons) span { border-radius: 8px; }
.vspc-check { display: block; margin: 4px 0 14px; }
.vspc-result { border: 2px solid var(--vb); }
.vspc-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0 0 12px; }
.vspc-figures div { background: var(--vl); border-radius: 10px; padding: 10px 12px; }
.vspc-figures span { display: block; color: var(--vg); font-size: .82em; }
.vspc-figures b { font-size: 1.5em; color: var(--vb); font-variant-numeric: tabular-nums; }
.vspc-notes { background: #fff8e6; border-radius: 8px; padding: 10px 14px 10px 30px; }
.vspc-cta { text-align: center; }
.vspc-cta a { color: var(--vb); font-weight: 600; }
.vspc-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.vspc-tabs button { border: 1px solid var(--vb); background: #fff; color: var(--vb); border-radius: 99px; padding: 6px 14px; cursor: pointer; font: inherit; }
.vspc-tabs button[aria-selected=true] { background: var(--vb); color: #fff; }
.vspc-analyse { margin-bottom: 10px; }
.vspc-table { width: 100%; border-collapse: collapse; margin: 0 0 10px; font-variant-numeric: tabular-nums; }
.vspc-table th, .vspc-table td { text-align: left; padding: 7px 10px; border-bottom: 1px solid #eee2e5; }
.vspc-table td { text-align: right; white-space: nowrap; }
.vspc-conseil { border-left: 4px solid var(--vt); padding: 4px 0 2px 12px; margin: 0 0 12px; }
.vspc-conseil p { margin: 0 0 .5em; }
.vspc-mentions { color: var(--vg); font-size: .82em; font-style: italic; margin-top: 16px; }
.vspc-guide { margin-top: 12px; border-top: 1px solid #eee2e5; padding-top: 10px; }
.vspc-guide summary { cursor: pointer; font-weight: 600; color: var(--vb); }
.vspc-msg, .vspc-ok, .vspc-alert { border-radius: 10px; padding: 12px 16px; }
.vspc-msg { background: var(--vl); }
.vspc-ok { background: #e7f4ea; color: #1f5a2d; font-weight: 600; }
.vspc-alert { background: #fff3e6; border: 1px solid #f0c08a; }
.vspc-loading { color: var(--vg); }
.vspc-q .vspc-lead { margin: 0 0 14px; }
.vspc-q .vspc-animal { border: 1px solid #ead9dd; border-radius: 12px; padding: 12px 18px; margin: 0 0 16px; }
.vspc-q legend { color: var(--vb); font-weight: 700; font-size: 1.15em; padding: 0 6px; }
.vspc-q .vspc-qtext { color: var(--vm); }
.vspc-patho { display: block; background: var(--vr); border-radius: 10px; padding: 12px 14px; margin: 0 0 12px; font-weight: 600; }
@media (max-width: 480px) { .vspc-card { padding: 14px; } .vspc-figures b { font-size: 1.3em; } }
/* Calcul de ration (formulaire commun) */
.vspc-nec-img { margin: 0 0 8px; }
.vspc-nec-img summary { cursor: pointer; color: var(--vb); font-size: .9em; margin-bottom: 6px; }
.vspc-nec-img img { display: block; max-width: 100%; border-radius: 8px; border: 1px solid #ead9dd; }
.vspc-nec-btns span { min-width: 2.6em; text-align: center; font-weight: 700; }
.vspc-ideal-txt { background: var(--vl); border-radius: 8px; padding: 8px 12px; margin: 0 0 12px; }
.vspc-be .vspc-figures { margin-top: 6px; }
.vspc-custom { background: var(--vl); border-radius: 10px; padding: 10px 12px 2px; margin: 0 0 12px; }
.vspc-treat { align-items: end; }
.vspc-link { background: none; border: 0; padding: 0; color: var(--vb); text-decoration: underline; cursor: pointer; font: inherit; margin: 0 0 12px; }
.vspc-alerts-list { list-style: none; padding: 0; margin: 10px 0; }
.vspc-alerts-list li { border-radius: 8px; padding: 8px 12px; margin: 0 0 6px; background: #fff8e6; }
.vspc-alerts-list li.is-bad { background: #fbeaea; color: #8c1f24; }
.vspc-alerts-list li.is-info { background: #eef3f8; color: #23415f; }
.vspc-table thead th { color: var(--vg); font-weight: 600; font-size: .85em; }
/* Ration maison */
.vspc-recipe td { padding: 4px 6px; vertical-align: middle; }
.vspc-recipe td:first-child { width: 60%; }
.vspc-recipe .vspc-g { max-width: 90px; }
.vspc-recipe .vspc-kcal { color: var(--vg); font-variant-numeric: tabular-nums; }
.vspc-recipe .vspc-link { margin: 0; }
.vspc-nutri td, .vspc-nutri th { text-align: left; white-space: normal; }
.vspc-nutri td { font-variant-numeric: tabular-nums; }
.vspc-st { display: inline-block; padding: 1px 8px; border-radius: 99px; font-size: .78em; font-weight: 600; }
.vspc-st.is-ok { background: #e7f4ea; color: #1f5a2d; }
.vspc-st.is-warn { background: #fff3d6; color: #7a5200; }
.vspc-st.is-bad { background: #fbeaea; color: #8c1f24; }
.vspc-st.is-na { background: #eef0f2; color: #555; }
.vspc-nutri tr.is-bad th { color: #8c1f24; }
.vspc-figures small { color: var(--vg); font-size: .75em; }
.vspc-ref { display: block; color: var(--vg); font-size: .78em; margin-top: 2px; }
.vspc-save-food { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 8px 0 4px; }
.vspc-save-msg.is-ok { color: #1f5a2d; font-weight: 600; }
.vspc-save-msg.is-err { color: #8c1f24; }
.vspc-btn-small { background: #fff; color: var(--vb); border: 1px solid var(--vb); border-radius: 6px; padding: 4px 12px; font: inherit; font-size: .88em; cursor: pointer; }
.vspc-btn-small:disabled { opacity: .45; cursor: not-allowed; }
.vspc-btn-small.is-saved { background: #e7f4ea; border-color: #1f5a2d; color: #1f5a2d; opacity: 1; cursor: default; }
.vspc-front input[type=search] { width: 100%; padding: 9px 11px; border: 1px solid #cdbfc3; border-radius: 8px; font: inherit; background: #fff; color: #222; }
.vspc-ecart { font-weight: 600; white-space: nowrap; }
.vspc-ecart.is-moins { color: #8c1f24; }
.vspc-ecart.is-plus { color: #23415f; }
.vspc-ecart.is-ok { color: #1f5a2d; }
.vspc-alerts-list li.is-rdv { background: var(--vr); color: var(--vb); font-weight: 600; border-left: 4px solid var(--vb); }

/* Graphiques du compte rendu : camembert de l'origine de l'énergie, barres */
.vspc-visuels { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin: 10px 0 14px; align-items: start; }
.vspc-visuels h4 { margin: 0 0 8px; font-size: .95em; color: var(--vm, #011936); }
.vspc-pie-wrap { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.vspc-pie { width: 120px; height: 120px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.vspc-legend { list-style: none; margin: 0; padding: 0; }
.vspc-legend li { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.vspc-legend i { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.vspc-legend b { font-variant-numeric: tabular-nums; }
.vspc-bars { margin: 0; }
.vspc-brow { display: grid; grid-template-columns: minmax(7em, 13em) 1fr minmax(4.5em, auto); grid-template-areas: "l b v"; gap: 4px 10px; align-items: center; padding: 4px 0; }
.vspc-brow > .l { grid-area: l; font-size: .9em; }
.vspc-brow > .b { grid-area: b; display: grid; gap: 3px; }
.vspc-brow > .v { grid-area: v; text-align: right; font-size: .85em; font-variant-numeric: tabular-nums; line-height: 1.35; }
.vspc-track { position: relative; height: 10px; background: #eceae6; border-radius: 99px; }
.vspc-track > span { display: block; height: 100%; border-radius: 99px; background: var(--vb, #792525); min-width: 2px; }
.vspc-track > span.is-avant { background: #b9b4ad; }
.vspc-track > span.is-ok { background: #3d8b5a; }
.vspc-track > span.is-warn { background: #d98a1c; }
.vspc-track > span.is-bad { background: #b3261e; }
.vspc-track > span.is-na { background: #c9c9c9; }
.vspc-track > i { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--vm, #011936); }
.vspc-bars-key { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .8em; color: #555; margin: 2px 0 6px; }
.vspc-bars-key i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
@media (max-width: 520px) { .vspc-brow { grid-template-columns: 1fr auto; grid-template-areas: "l v" "b b"; } }
.vspc-detail summary { cursor: pointer; color: var(--vg, #5f5a60); font-size: .85em; margin: 4px 0; }
.vspc-pdf { margin: 10px 0 14px; } a.vspc-btn { display: inline-block; text-decoration: none; } a.vspc-btn:hover, a.vspc-btn:focus-visible { color: #fff; }
.vspc-front a.vspc-btn, .vspc-front a.vspc-btn:hover, .vspc-front a.vspc-btn:focus-visible { color: #fff; text-decoration: none; }

/* Analyse de la ration proposée (bilan) : tableau inversé, vert = repère respecté, orange = hors repère */
.vspc-compo th, .vspc-compo td { text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vspc-compo tbody th { text-align: left; }
.vspc-compo td.is-vert { background: #dff1e3; color: #1f5a2d; }
.vspc-compo td.is-orange { background: #fde3c4; color: #7a4300; font-weight: 600; }
.vspc-compo-com { margin: 8px 0 0; padding-left: 1.2em; }
.vspc-compo-com li { margin: 4px 0; padding: 6px 10px; background: #fff5e8; border-left: 3px solid #d98a1c; border-radius: 4px; list-style: none; }
.vspc-front .vspc-plancher { color: #7a4300; }
.vspc-cuit { color: #5f5a60; white-space: nowrap; }

/* Encadré « Sa ration du jour » : une carte par aliment */
.vspc-front ul.vspc-ration { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.vspc-front .vspc-ration li { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "t q" "n q"; align-items: center; gap: 2px 16px; margin: 0; padding: 12px 16px; background: var(--vl); border-radius: 10px; border-left: 5px solid var(--vb); }
.vspc-ration li.is-pat { border-left-color: var(--vt); }
.vspc-ration li.is-fri { border-left-color: #d9a3b1; background: #fdf8f9; }
.vspc-ration-type { grid-area: t; font-size: .74em; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--vg); }
.vspc-ration-nom { grid-area: n; font-weight: 600; color: var(--vm); line-height: 1.3; }
.vspc-ration-q { grid-area: q; text-align: right; color: var(--vb); white-space: nowrap; font-weight: 600; }
.vspc-ration-q b { font-size: 1.75em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.vspc-ration-q small { display: block; color: var(--vg); font-size: .72em; font-weight: 400; }
.vspc-ration li.is-fri .vspc-ration-q b { font-size: 1.35em; }
@media (max-width: 420px) { .vspc-front .vspc-ration li { padding: 10px 12px; gap: 2px 10px; } .vspc-ration-q b { font-size: 1.45em; } }
.vspc-front ul.vspc-alerts-list { margin-left: 0; padding-left: 0; }
.vspc-result > .vspc-help:last-child { border-top: 1px solid #eee2e5; padding-top: 10px; margin-top: 12px; }

/* Listes de recherche (assets/combo.js) : flèche pour ouvrir la liste, liste maison */
.vspc-combo { position: relative; display: block; }
.vspc-combo > input { padding-right: 36px !important; }
.vspc-combo-btn { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #792525; cursor: pointer; }
.vspc-combo-btn:hover, .vspc-combo-btn:focus-visible { background: #f2d5dc; }
.vspc-combo-list { position: fixed; z-index: 100000; margin: 0; padding: 4px 0; list-style: none; background: #fff; border: 1px solid #cdbfc3; border-radius: 8px; box-shadow: 0 8px 24px rgba(1, 25, 54, .15); overflow-y: auto; font-size: 14px; line-height: 1.35; color: #222; }
.vspc-combo-list li { margin: 0; padding: 7px 12px; cursor: pointer; }
.vspc-combo-list li small { color: #5f5a60; margin-left: 6px; font-size: .85em; }
.vspc-combo-list li:hover, .vspc-combo-list li.is-active { background: #fbf4f5; color: #792525; }
.vspc-combo-list li.is-empty, .vspc-combo-list li.is-more { color: #5f5a60; font-style: italic; cursor: default; background: none; }