/* Hypergol — Recettes (service). Jetons seulement. Lecture à 50-60 cm, lumière basse : doses en grands chiffres alignés,
   une seule teinte forte (l'orange de la marque) réservée à l'action et aux pastilles de méthode. */

body[data-onglet="recettes"] .corps { font-size: var(--taille-corps); }
body[data-onglet="recettes"] .corps button { font-size: var(--taille-bouton); }

/* ---------- Recherche et grille ---------- */
.recherche { padding: var(--espace-3) var(--espace-3) var(--espace-2); }
.recherche input {
  width: 100%; min-height: var(--cible-service); padding: 0 var(--espace-4); border-radius: var(--rayon-bouton);
  border: 1px solid var(--c-contour); background: var(--c-surface-2); color: var(--c-texte); font: inherit; font-size: var(--taille-corps-fort);
}
.recherche input::placeholder { color: var(--c-texte-3); }
.recherche input:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

.grille { flex: 1; min-height: 0; overflow-y: auto; padding: var(--espace-2) var(--espace-3) var(--espace-4); }
.rubrique + .rubrique { margin-top: var(--espace-4); }
.rubrique h3 { display: flex; align-items: center; gap: var(--espace-3); margin: 0 0 var(--espace-3) var(--espace-1); font-size: var(--taille-titre-3); }
.rubrique .nb {
  min-width: 28px; height: 26px; padding: 0 var(--espace-2); border-radius: var(--rayon-rond); background: var(--c-surface-active);
  color: var(--c-texte-2); font-size: var(--taille-meta); font-weight: 600; display: inline-flex; align-items: center; justify-content: center;
}
.tuiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--espace-3); }
.tuiles > li { display: flex; min-width: 0; }
.tuile {
  width: 100%; min-height: 92px; display: flex; align-items: center; gap: var(--espace-3); padding: var(--espace-3);
  border: 1px solid var(--c-filet); border-radius: var(--rayon-bouton); background: var(--c-surface-2); color: var(--c-texte); text-align: left;
}
.tuile:active { background: var(--c-surface-active); }
.tuile:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.tuile-texte { display: flex; flex-direction: column; align-items: flex-start; gap: var(--espace-1); min-width: 0; }
.tuile-nom { font-size: var(--taille-corps-fort); font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.tuile-meta { font-size: var(--taille-meta); color: var(--c-texte-3); }
.tuile .puce, .tete-fiche .puce { white-space: normal; }
.puce[data-ton="ambre"] { background: var(--c-ambre-fond); color: var(--c-ambre); }

/* Photo ou pastille de méthode : même carré, la pastille porte la teinte de la méthode */
.visuel { flex: none; width: 68px; height: 68px; border-radius: var(--rayon-bouton); overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: var(--c-surface-active); }
.visuel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.visuel svg { width: 34px; height: 34px; }
.pastille-methode { color: var(--c-texte); }
.pastille-methode[data-methode="secoue"] { background: var(--c-accent-fond); color: var(--c-accent); }
.pastille-methode[data-methode="remue"] { background: var(--c-bleu-fond); color: var(--c-bleu); }
.pastille-methode[data-methode="construit"] { background: var(--c-vert-fond); color: var(--c-vert); }
.pastille-methode[data-methode="melange"] { background: var(--c-ambre-fond); color: var(--c-ambre); }
.visuel-grand { width: 132px; height: 132px; }
.visuel-grand svg { width: 60px; height: 60px; }

/* ---------- Fiche en grand ---------- */
.fiche-bar {
  width: min(1100px, calc(100vw - var(--espace-5))); max-width: none; height: min(92vh, 900px); max-height: none; padding: 0;
  border: 1px solid var(--c-filet); border-radius: var(--rayon-panneau); background: var(--c-surface); color: var(--c-texte);
}
.fiche-bar[open] { display: flex; flex-direction: column; }
.fiche-bar::backdrop { background: rgb(0 0 0 / .7); }
.tete-fiche { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--espace-4); padding: var(--espace-4) var(--espace-4); border-bottom: 1px solid var(--c-filet); }
.tete-fiche .titres { display: flex; flex-direction: column; align-items: flex-start; gap: var(--espace-2); min-width: 0; }
.tete-fiche h2 { margin: 0; font-size: var(--taille-titre-1); line-height: 1.15; overflow-wrap: anywhere; }
.tete-fiche .btn { flex: none; }
.defile-fiche { flex: 1; min-height: 0; overflow-y: auto; padding: var(--espace-4) var(--espace-4) var(--espace-4); display: flex; flex-direction: column; gap: var(--espace-4); }

.haut-fiche { display: flex; align-items: center; gap: var(--espace-4); flex-wrap: wrap; }
.faits { margin: 0; display: flex; flex-wrap: wrap; gap: var(--espace-3) var(--espace-5); }
.faits > div { display: flex; flex-direction: column; min-width: 0; }
.faits dt { font-size: var(--taille-meta); color: var(--c-texte-3); }
.faits dd { margin: 0; font-size: var(--taille-titre-3); font-weight: 600; }

.deux-colonnes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--espace-5); align-items: start; }
.bloc h3 { margin: 0 0 var(--espace-3); font-size: var(--taille-titre-3); }
.bloc .sous-titre { margin-top: var(--espace-4); }
.vide { color: var(--c-texte-3); }

/* Ingrédients : la dose en grand, alignée à gauche, le nom et l'outil à côté */
.ingredients, .garniture, .etapes-bar, .puces-formats { list-style: none; margin: 0; padding: 0; }
.ingredient { display: grid; grid-template-columns: minmax(110px, auto) minmax(0, 1fr); align-items: center; gap: var(--espace-4); padding: var(--espace-3) 0; border-top: 1px solid var(--c-filet); }
.ingredient:first-child { border-top: 0; }
.ingredient .dose-grande { color: var(--c-accent); }
.ing-texte { display: flex; flex-direction: column; min-width: 0; }
.ing-nom { font-size: var(--taille-corps-fort); font-weight: 600; overflow-wrap: anywhere; }
.ing-outil, .ing-consigne { font-size: var(--taille-meta); color: var(--c-texte-3); }
.garniture li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--espace-4); padding: var(--espace-2) 0; border-top: 1px solid var(--c-filet); }
.garniture li:first-child { border-top: 0; }

.etapes-bar li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--espace-3); padding: var(--espace-3) 0; border-top: 1px solid var(--c-filet); }
.etapes-bar li:first-child { border-top: 0; }
.etapes-bar p { margin: 0; font-size: var(--taille-corps-fort); line-height: 1.45; }
.no-etape { width: 40px; height: 40px; border-radius: var(--rayon-rond); background: var(--c-surface-active); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-variant-numeric: tabular-nums; }

.puces-formats { display: flex; flex-wrap: wrap; gap: var(--espace-3); }
.format { display: inline-flex; align-items: baseline; gap: var(--espace-3); padding: var(--espace-2) var(--espace-4); border-radius: var(--rayon-bouton); background: var(--c-surface-2); font-size: var(--taille-corps-fort); }
.formats .aide { margin: var(--espace-4) 0 var(--espace-2); color: var(--c-texte-3); font-size: var(--taille-meta); }
.versions { display: flex; flex-wrap: wrap; gap: var(--espace-3); }
.versions .btn { max-width: 100%; white-space: normal; text-align: center; }

@media (max-width: 760px) {
  .corps { padding: var(--espace-2); }
  .recherche { padding: var(--espace-2); }
  .grille { padding: var(--espace-2) var(--espace-2) var(--espace-4); }
  .tuiles { grid-template-columns: minmax(0, 1fr); }
  /* Fiche plein écran sur téléphone, une seule colonne */
  .fiche-bar { width: 100vw; height: 100dvh; max-width: 100vw; max-height: 100dvh; border: 0; border-radius: 0; }
  .tete-fiche { padding: var(--espace-3) var(--espace-4); }
  .tete-fiche h2 { font-size: var(--taille-titre-2); }
  .defile-fiche { padding: var(--espace-3) var(--espace-4) var(--espace-4); gap: var(--espace-4); }
  .deux-colonnes { grid-template-columns: minmax(0, 1fr); gap: var(--espace-4); }
  .visuel-grand { width: 96px; height: 96px; }
  .ingredient { grid-template-columns: minmax(96px, auto) minmax(0, 1fr); gap: var(--espace-3); }
}