/* Trouver mon liquide (la roue guidée) — comptoir tactile (48 px),
   teintes de magasin.css seulement. */

.comptoir-outil [hidden] { display: none !important; }
.rl-barre { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.rl-magasin { display: grid; gap: 4px; font-size: 0.9em; color: var(--gris-fonce); }
.rl-choisis { margin-top: 10px; color: var(--texte); }
.rl-etape { margin-top: 12px; }
.rl-titre { font-size: 1.1em; margin-bottom: 10px; }
.rl-choix-liste { display: flex; flex-wrap: wrap; gap: 10px; }
.rl-choix { min-height: 48px; }
.rl-choix.choisi { outline: 3px solid var(--accent); outline-offset: 2px; }
.rl-n { opacity: 0.7; font-size: 0.85em; margin-left: 6px; }
.rl-cherche { width: 100%; margin-bottom: 10px; }
.rl-plus { margin-top: 10px; }
.rl-produit { margin-top: 12px; }
.rl-nom { font-size: 1.2em; font-weight: 700; }
.rl-gout { margin-top: 6px; color: var(--texte); }
.rl-stocks, .rl-details { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.rl-stock {
  border: 1px solid var(--vert); border-radius: 999px; background: var(--vert-pale);
  padding: 4px 12px; font-size: 0.95em; color: var(--vert);
}
.rl-zero { border-color: var(--bordure); background: var(--fond-clair); color: var(--gris-fonce); }
.rl-detail {
  border: 1px solid var(--bordure); border-radius: 999px;
  padding: 4px 12px; font-size: 0.9em; color: var(--gris-fonce);
}
/* Les illustrations : le bouton devient une tuile, image au-dessus du mot.
   Réglage « roue_images » (engrenage) : à 0, seuls les mots restent. */
.rl-avec-image {
  flex-direction: column; gap: 6px; min-height: 148px; width: 148px;
  padding: 10px; text-align: center; line-height: 1.2;
}
.rl-image { width: 84px; height: 84px; object-fit: contain; }
.rl-mot { display: block; }