/* Prix au kilo / au litre et comparateur de prix unitaires : styles propres à l'outil. */
.o-prix-unitaire [hidden] { display: none !important; }
.o-prix-unitaire input[aria-invalid="true"] { border-color: var(--erreur-texte); outline: 1px solid var(--erreur-texte); }
.o-prix-unitaire input:focus-visible, .o-prix-unitaire select:focus-visible { outline: 3px solid var(--marque); outline-offset: 0; }
.o-prix-unitaire-haut, .o-prix-unitaire-eco { padding-bottom: 6px; }
.o-prix-unitaire-haut label, .o-prix-unitaire-eco label { max-width: 260px; }

.o-prix-unitaire-produits { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; margin-top: 12px; }
.o-prix-unitaire-produit { margin: 0; padding: 10px 12px 12px; border: 1px solid var(--bord); border-radius: var(--rayon-petit); background: var(--surface); min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.o-prix-unitaire-produit legend { padding: 0 4px; font-weight: 700; }
.o-prix-unitaire-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
.o-prix-unitaire-grille label { display: flex; flex-direction: column; gap: 3px; font-size: .9rem; color: var(--texte-2); min-width: 0; }
.o-prix-unitaire-grille input, .o-prix-unitaire-grille select { width: 100%; box-sizing: border-box; min-width: 0; padding: 7px 8px; border: 1px solid var(--bord); border-radius: var(--rayon-petit); background: var(--surface); color: var(--texte); font: 400 1rem var(--police); }
.o-prix-unitaire-grille input[inputmode] { font-family: var(--mono); }
.o-prix-unitaire-nom, .o-prix-unitaire-promo { grid-column: 1 / -1; }
.o-prix-unitaire-ligne { margin: 0; font-size: .92rem; font-weight: 600; color: var(--texte); }
.o-prix-unitaire-ligne:empty { display: none; }
.o-prix-unitaire .o-prix-unitaire-erreur { color: var(--erreur-texte); font-weight: 400; }
.o-prix-unitaire-retirer { align-self: flex-start; }

.o-prix-unitaire-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0; }
.o-prix-unitaire-note { margin: 10px 0 0; font-size: .85rem; color: var(--texte-2); }
.o-prix-unitaire-actions .o-prix-unitaire-note { margin: 0; }

.o-prix-unitaire-resultat { display: block; margin-top: 14px; padding: 16px 18px; border-radius: var(--rayon-petit); background: var(--surface-2); }
.o-prix-unitaire-attente { color: var(--texte-2); }
.o-prix-unitaire-bloc { display: flex; flex-direction: column; gap: 8px; }
.o-prix-unitaire-gagnant { font: 700 clamp(1.25rem, 4.5vw, 1.7rem)/1.2 var(--police); overflow-wrap: anywhere; }
.o-prix-unitaire-titre { font-size: .9rem; font-weight: 600; color: var(--texte-2); }
.o-prix-unitaire-melange { font-size: .92rem; color: var(--texte-2); }
.o-prix-unitaire-melange:empty { display: none; }
.o-prix-unitaire-groupes, .o-prix-unitaire-groupe { display: flex; flex-direction: column; gap: 8px; }
.o-prix-unitaire-sous-titre { font-weight: 700; }
.o-prix-unitaire-liste { margin: 0; padding-left: 1.6em; display: flex; flex-direction: column; gap: 6px; }
.o-prix-unitaire-liste li { padding: 6px 8px; border-radius: var(--rayon-petit); }
.o-prix-unitaire-liste li.o-prix-unitaire-top { background: var(--ok-fond); color: var(--ok-texte); }
.o-prix-unitaire-tete { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; }
.o-prix-unitaire-nom-r { overflow-wrap: anywhere; }
.o-prix-unitaire-prix { font-family: var(--mono); }
.o-prix-unitaire-sous { display: block; font-size: .88rem; opacity: .85; }
.o-prix-unitaire-eco-texte { padding-top: 8px; border-top: 1px solid var(--bord); font-weight: 600; }

@media (max-width: 400px) {
  .o-prix-unitaire-produit { padding: 8px 8px 10px; }
  .o-prix-unitaire-grille { gap: 8px; }
}