/* Découpe à distance — réutilise les jetons de couleur, boutons et focus de
 * dashboard.css (même serveur, même origine) ; seules les règles propres à
 * cette page (aperçu 3D, groupes de réglages) sont ajoutées ici. */
@import url("/dashboard.css");

.avertissement {
  margin: 0 0 1rem;
  padding: .7rem 1rem;
  border-radius: 10px;
  background: var(--attention-fond);
  color: var(--attention);
  font-weight: 600;
}

.champ-groupe { border: none; margin: 0 0 1.25rem; padding: 0; }
.champ-groupe legend { font-weight: 700; margin-bottom: .5rem; padding: 0; }
.champ-groupe .option-radio { display: flex; align-items: center; gap: .5rem; font-weight: 500; margin: .35rem 0; }
.champ-groupe .option-radio input { width: 1.15rem; height: 1.15rem; }

#liste-recettes { display: grid; gap: .35rem; }
#liste-recettes label { display: flex; align-items: flex-start; gap: .5rem; font-weight: 500; }
#liste-recettes input { width: 1.15rem; height: 1.15rem; margin-top: .2rem; }
#liste-recettes .recette-details { display: block; color: var(--texte-2); font-size: .9rem; font-weight: 400; }

.champ-nombre { max-width: 16rem; }
.champ-nombre input[type="number"] {
  width: 100%;
  font: inherit;
  padding: .55rem .75rem;
  border: 1px solid var(--bord);
  border-radius: 10px;
  background: var(--surface);
  color: var(--texte);
}

.apercu-conteneur {
  margin-top: 1rem;
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface-2);
  aspect-ratio: 16 / 10;
}
#apercu-canvas { display: block; width: 100%; height: 100%; }

.pastille[data-etat="pilotage"] { background: var(--bon-fond); color: var(--bon); }
.pastille[data-etat="lecture"] { background: var(--attention-fond); color: var(--attention); }

#section-resultat h2:focus { outline: none; }

@media (max-width: 40rem) {
  .apercu-conteneur { aspect-ratio: 4 / 3; }
}