/* =========================================================================
   photo-glucides.css — styles du module détachable « Photo -> glucides ».
   Toutes les classes sont préfixées `pg-` pour ne jamais entrer en collision
   avec le reste de l'app. Supprimer ce fichier + la ligne <link> dans
   index.html suffit à retirer entièrement ces styles.
   ========================================================================= */

.pg-bloc {
  margin: 4px 0 2px;
  padding: 10px 12px;
  border: 1px dashed var(--couleur-bordure-forte);
  border-radius: 10px;
  background: var(--couleur-primaire-fond);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pg-btn {
  background: var(--couleur-primaire-fond);
  color: var(--couleur-primaire-fonce);
  border: 1px solid var(--couleur-bordure-forte);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: var(--texte-base);
  font-weight: var(--poids-fort);
  cursor: pointer;
}
.pg-btn.pg-btn-sec { background: var(--couleur-carte); }
.pg-btn:active { background: var(--couleur-primaire-fond); }
.pg-btn:disabled { opacity: 0.6; cursor: default; }

.pg-etat {
  font-size: var(--texte-sm);
  color: var(--couleur-primaire);
  display: flex;
  align-items: center;
  gap: 8px;
}
.pg-etat.pg-erreur { color: var(--couleur-danger-fonce); }

.pg-spin {
  width: 14px; height: 14px;
  border: 2px solid var(--couleur-bordure-forte);
  border-top-color: var(--couleur-primaire);
  border-radius: 50%;
  animation: pg-tourne 0.8s linear infinite;
  flex: 0 0 auto;
}
@keyframes pg-tourne { to { transform: rotate(360deg); } }

.pg-aliments {
  font-size: var(--texte-sm);
  color: var(--couleur-texte-clair);
}

.pg-questions { display: flex; flex-direction: column; gap: 10px; }
.pg-question { display: flex; flex-direction: column; gap: 6px; }
.pg-question-texte { font-size: var(--texte-sm); font-weight: var(--poids-fort); color: var(--couleur-texte); }
.pg-choix { display: flex; flex-wrap: wrap; gap: 6px; }
.pg-choix button {
  border: 1px solid var(--couleur-bordure-forte);
  background: var(--couleur-carte);
  color: var(--couleur-primaire-fonce);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: var(--texte-sm);
  cursor: pointer;
}
.pg-choix button.pg-choisi { background: var(--couleur-primaire); border-color: var(--couleur-primaire); color: var(--couleur-texte-inverse); }

.pg-resultat {
  font-size: var(--texte-sm);
  color: var(--couleur-texte);
  background: var(--couleur-carte);
  border: 1px solid var(--couleur-primaire-fond);
  border-radius: 8px;
  padding: 8px 10px;
}
.pg-resultat strong { color: var(--couleur-primaire-fonce); }
.pg-resultat .pg-note { display: block; margin-top: 4px; color: var(--couleur-texte-clair); font-size: var(--texte-sm); }

.pg-recommencer {
  align-self: flex-start;
  background: none;
  border: none;
  color: var(--couleur-texte-clair);
  font-size: var(--texte-sm);
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}

[hidden] { display: none !important; }