/* v1.98.29 : bloc « Huile moteur conseillée » (fiche véhicule, réception) et Paramètres › Huile moteur — préfixe ho- */
.ho-card { border: 1px solid #e3e8f0; border-radius: 12px; background: #fff; overflow: hidden; box-shadow: inset 4px 0 0 #e11d24; }
.ho-hd { display: flex; gap: 12px; align-items: center; padding: 12px 16px; background: linear-gradient(90deg, #0f1b2f, #1a2b46); color: #fff; }
.ho-hd b { display: block; font-size: 14.5px; } .ho-hd small { color: #c3cddd; font-size: 12px; }
.ho-ic { width: 34px; height: 34px; border-radius: 9px; background: #e11d24; display: grid; place-items: center; flex: none; }
.ho-bd { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.ho-main { display: flex; gap: 16px; align-items: center; }
.ho-visc { flex: none; min-width: 112px; padding: 10px 12px; border-radius: 10px; text-align: center; border: 2px solid #0f1b2f; }
.ho-visc span { display: block; font: 800 26px/1.05 'Barlow Condensed', 'Barlow', sans-serif; letter-spacing: .02em; color: #0f1b2f; }
.ho-visc small { display: block; margin-top: 3px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.ho-visc.mk { background: #0f1b2f; } .ho-visc.mk span, .ho-visc.mk small { color: #fff; }
.ho-visc.gm { border-color: #1b7f3b; } .ho-visc.gm small { color: #1b7f3b; }
.ho-visc.rp, .ho-visc.no { border-style: dashed; border-color: #a9b3c4; } .ho-visc.rp small, .ho-visc.no small { color: #6b7688; }
.ho-why { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 13px; }
.ho-why b { font-size: 14px; color: #14223b; } .ho-why small { color: #4b566a; font-size: 12.5px; }
.ho-pend { color: #a15c00 !important; } .ho-diff { font-style: normal; color: #c62828; font-weight: 700; }
.ho-dist { display: flex; flex-direction: column; gap: 5px; }
.ho-bar { display: grid; grid-template-columns: 64px minmax(0, 1fr) 44px 52px; gap: 10px; align-items: center; font-size: 12.5px; }
.ho-bar b { font-family: 'Barlow Condensed', 'Barlow', sans-serif; font-size: 14px; color: #14223b; }
.ho-bar i { height: 8px; border-radius: 6px; background: #eef1f5; overflow: hidden; } .ho-bar s { display: block; height: 100%; background: #8a94a6; border-radius: 6px; }
.ho-bar.on s { background: #e11d24; } .ho-bar span { text-align: right; font-weight: 700; } .ho-bar small { color: #6b7688; }
.ho-note, .ho-ft { margin: 0; font-size: 11.5px; color: #6b7688; }
.ho-ft { padding: 0 16px 12px; } .ho-bd .ho-ft { padding: 0; }
.ho-warn { display: flex; gap: 10px; padding: 10px 12px; border-radius: 9px; background: #fff8eb; border: 1px solid #f1d9a8; font-size: 12.5px; color: #5c3a00; }
.ho-warn p { margin: 0 0 4px; } .ho-warn p:last-child { margin: 0; }
.ho-arts h5 { margin: 0 0 6px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: #6b7688; }
.ho-art { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid #eef1f5; }
.ho-art.on { background: #fff6f6; }
.ho-tag { font: 700 12px 'Barlow Condensed', 'Barlow', sans-serif; border: 1px solid #14223b; border-radius: 4px; padding: 1px 7px; white-space: nowrap; }
.ho-al { min-width: 0; } .ho-al b { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ho-al small { color: #6b7688; font-size: 12px; }
.ho-qty { width: 62px; height: 32px; border: 1px solid #d9dee7; border-radius: 7px; padding: 0 6px; font: inherit; }
.ho-btn { height: 32px; padding: 0 12px; border-radius: 7px; border: 0; background: #e11d24; color: #fff; font-weight: 700; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.ho-btn.on { background: #0f1b2f; } .ho-btn:disabled { opacity: .6; cursor: default; }
.ho-none { margin: 0; padding: 12px 16px; font-size: 13px; color: #6b7688; } .ho-bd .ho-none { padding: 0; }
@media (max-width: 640px) {
  .ho-main { flex-direction: column; align-items: stretch; }
  .ho-art { grid-template-columns: auto minmax(0, 1fr); } .ho-qty { grid-column: 1; } .ho-btn { grid-column: 2; justify-self: end; }
  .ho-bar { grid-template-columns: 58px minmax(0, 1fr) 40px; } .ho-bar small { display: none; }
}
/* Paramètres › Huile moteur */
.ho-set-row { display: grid; grid-template-columns: minmax(0, 1.4fr) 90px minmax(0, 1.6fr) minmax(0, 1.2fr) auto; gap: 12px; align-items: center; padding: 10px 16px; border-top: 1px solid #eef1f5; font-size: 13px; }
.ho-set-row small { color: #6b7688; } .ho-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.ho-chip { font-size: 11.5px; border-radius: 999px; padding: 1px 8px; background: #eef1f5; } .ho-chip.top { background: #0f1b2f; color: #fff; }
.ho-st { font-size: 11.5px; font-weight: 700; border-radius: 6px; padding: 2px 8px; } .ho-st.val { background: #e6f6ea; color: #1b7f3b; } .ho-st.pend { background: #fff3dc; color: #a15c00; } .ho-st.none { background: #eef1f5; color: #6b7688; }
@media (max-width: 760px) { .ho-set-row { grid-template-columns: 1fr; gap: 4px; } }
html[data-theme="dark"] .ho-card { background: #111825 !important; border-color: #32425d !important; }
html[data-theme="dark"] .ho-visc span, html[data-theme="dark"] .ho-why b, html[data-theme="dark"] .ho-bar b { color: #e6ecf5 !important; }
html[data-theme="dark"] .ho-visc { border-color: #8ba9da; } html[data-theme="dark"] .ho-why small { color: #a9b6ca !important; }
html[data-theme="dark"] .ho-art, html[data-theme="dark"] .ho-set-row { border-top-color: #273348 !important; } html[data-theme="dark"] .ho-art.on { background: #121a28 !important; }
html[data-theme="dark"] .ho-warn { background: #2a2111 !important; border-color: #5c4a22 !important; color: #f1d9a8 !important; }
html[data-theme="dark"] .ho-bar i { background: #1d2738; } html[data-theme="dark"] .ho-qty { background: #111825; color: #e6ecf5; border-color: #2b3850; }

/* v1.98.58 : norme d'huile et huiles conformes */
.ho-norm { border: 1px solid #d8dee8; border-left: 4px solid #8a94a6; border-radius: 9px; padding: 9px 12px; background: #f8fafc; }
.ho-norm.c-forte { border-left-color: #1b7a3a; } .ho-norm.c-bonne { border-left-color: #2f9e57; } .ho-norm.c-moyenne { border-left-color: #c98a00; } .ho-norm.c-faible { border-left-color: #c9141b; }
.ho-nh { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .ho-nh small { font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: #6b7688; }
.ho-nh b { font: 700 19px 'Barlow Condensed', 'Barlow', sans-serif; color: #14223b; }
.ho-norm p { margin: 4px 0 0; font-size: 12.5px; color: #4a5568; }
.ho-cat h5 { margin: 0 0 6px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: #6b7688; }
.ho-ci { display: flex; gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid #edf0f4; }
.ho-nb { display: inline-block; margin-top: 3px; font-style: normal; font-size: 11.5px; font-weight: 600; color: #6b7688; }
.ho-nb.ok { color: #1b7a3a; } .ho-nb.ko { color: #a15c00; }
html[data-theme="dark"] .ho-norm { background: #141e30 !important; border-color: #2a3a54 !important; } html[data-theme="dark"] .ho-nh b { color: #eef2f8 !important; } html[data-theme="dark"] .ho-norm p { color: #b6c0d0 !important; }
html[data-theme="dark"] .ho-ci { border-color: #2a3a54 !important; }