/* repas.css -- LES ECRANS DU REPAS (lot DN-05 : A1, A2, A3, B1 a B4), declaree par `registre.style_page("css/repas.css")`.
 *
 * La forme des maquettes Dîners v1 (index.html, blocs A et B), mobile d'abord (390 px sans defilement de cote ; cibles
 * de 44 px au moins). Chargee APRES socle.css. AUCUNE couleur litterale : que des var() des jetons.
 */

.repas { display: flex; flex-direction: column; gap: var(--dv-px-12); min-width: 0; }
.repas ul, .repas-a1 ul { list-style: none; margin: 0; padding: 0; }
.repas h2 { margin: 0; }

.repas__tete { display: flex; align-items: center; gap: var(--dv-px-8); }
.repas__retour { display: inline-flex; align-items: center; gap: var(--dv-px-6); min-height: var(--m-cible); min-width: 0;
  color: var(--texte); font-weight: var(--dv-graisse-700); font-size: var(--dv-pt-16); text-decoration: none; }
.repas__retour span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.repas__tete .pastille { margin-left: auto; }

.repas__sous { display: flex; justify-content: space-between; align-items: center; gap: var(--dv-px-8);
  font-size: var(--dv-pt-12); font-weight: var(--dv-graisse-700); color: var(--texte-doux); text-transform: uppercase;
  letter-spacing: 0.03em; }

/* ---- les cartes ---------------------------------------------------------------------------------------------- */
.repas__carte { display: flex; flex-direction: column; gap: var(--dv-px-8); padding: var(--dv-px-10) var(--dv-px-12);
  background: var(--fond); border: 1px solid var(--bordure); border-radius: var(--m-rayon); min-width: 0; }
.repas__carte--atteint { border-color: var(--succes); box-shadow: inset var(--dv-px-4) 0 0 var(--succes); }
.repas__carte--vive { box-shadow: inset var(--dv-px-3) 0 0 var(--lem-filet); }
.repas__ligne { display: flex; align-items: center; gap: var(--dv-px-8); min-width: 0; }
.repas__nom { flex: 1; min-width: 0; font-weight: var(--dv-graisse-600); overflow-wrap: anywhere; }
.repas__rang { flex: none; width: var(--dv-px-24); height: var(--dv-px-24); border-radius: var(--dv-px-999);
  display: inline-flex; align-items: center; justify-content: center; font-size: var(--dv-pt-12);
  font-weight: var(--dv-graisse-700); background: var(--fond-inactif); color: var(--texte-moyen); }
.repas__rang:empty { background: var(--fond); border: 1px solid var(--bordure-forte); }

.repas__jauge { width: 100%; height: var(--dv-px-6); appearance: none; border: 0; border-radius: var(--dv-px-999);
  background: var(--fond-inactif); overflow: hidden; }
.repas__jauge::-webkit-progress-bar { background: var(--fond-inactif); border-radius: var(--dv-px-999); }
.repas__jauge::-webkit-progress-value { background: var(--primaire); border-radius: var(--dv-px-999); }
.repas__jauge::-moz-progress-bar { background: var(--primaire); border-radius: var(--dv-px-999); }
.repas__carte--atteint .repas__jauge::-webkit-progress-value { background: var(--succes); }
.repas__carte--atteint .repas__jauge::-moz-progress-bar { background: var(--succes); }

.repas__avatars { display: flex; flex: 1; min-width: 0; flex-wrap: wrap; gap: var(--dv-px-2); }
.repas__avatars .initiales { width: var(--dv-px-28); height: var(--dv-px-28); }
.repas__champion { background: var(--alerte-fond); color: var(--alerte-texte); }
.repas__champion .ic { width: var(--m-px-14); height: var(--m-px-14); }

.repas__main { margin: 0; flex: none; }
.repas__bouton-main { width: var(--m-cible); height: var(--m-cible); border-radius: var(--dv-px-999); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; background: var(--fond); color: var(--primaire-fonce);
  border: 2px solid var(--bordure-forte); }
.repas__bouton-main[aria-pressed="true"] { background: var(--primaire); color: var(--texte-inverse); border-color: var(--primaire); }

/* ---- A2 : la liste des restos, les puces ----------------------------------------------------------------------- */
.repas__liste { display: flex; flex-direction: column; background: var(--fond); border: 1px solid var(--bordure);
  border-radius: var(--m-rayon); overflow: hidden; }
.repas__liste li + li { border-top: 1px solid var(--bordure-fine); }
.repas__rangee { width: 100%; min-height: var(--m-px-52); display: flex; align-items: center; gap: var(--dv-px-10);
  padding: 0 var(--dv-px-12); background: var(--fond); color: var(--texte); border: 0; font: inherit; text-align: left;
  cursor: pointer; }
.repas__rangee[aria-pressed="true"] { background: var(--fond-survol); }
.repas__rangee[aria-pressed="true"] .repas__rang { background: var(--primaire); color: var(--texte-inverse); border: 0; }
.repas__voies { display: inline-flex; gap: var(--dv-px-6); color: var(--texte-doux); flex: none; }
.repas__voies .ic { width: var(--dv-px-16); height: var(--dv-px-16); }
.repas .puces .puce { min-width: var(--m-cible); justify-content: center; }
.repas__suggestion { border-style: dashed; }
.repas__suggestion[aria-pressed="true"] { border-style: solid; }

.repas__pied { margin-top: var(--dv-px-8); }
.repas__pied form { margin: 0; }

/* ---- B1 : le commandeur, mon plat, les plats ------------------------------------------------------------------ */
.repas__changer { display: flex; gap: var(--dv-px-8); margin: 0; }
.repas__changer .btn { width: auto; flex: none; }
.repas__champ { min-height: var(--m-cible); min-width: 0; width: 100%; font-size: var(--dv-pt-16); }
.repas__plat { display: flex; flex-direction: column; gap: var(--dv-px-10); margin: 0; }
.repas__libre { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 7rem); gap: var(--dv-px-8); }
.repas__libre[hidden] { display: none; }
.repas__lignes { gap: 0; padding: var(--dv-px-2) var(--dv-px-12); }
.repas__rangee-fixe { display: flex; align-items: center; gap: var(--dv-px-10); min-height: var(--m-cible); min-width: 0; }
.repas__rangee-fixe + .repas__rangee-fixe { border-top: 1px solid var(--bordure-fine); }
.repas__montant { font-variant-numeric: tabular-nums; font-weight: var(--dv-graisse-700); text-align: right; flex: none; }
.repas__montant--gros { font-size: var(--dv-pt-22); }

/* ---- B2 : je commande ----------------------------------------------------------------------------------------- */
.repas__consignes { margin: 0; color: var(--texte-moyen); font-size: var(--dv-pt-13); overflow-wrap: anywhere; white-space: pre-line; }
.repas__deux { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--dv-px-8); }
.repas__deux .btn { width: 100%; min-width: 0; }
.repas__copier { width: var(--m-cible); height: var(--m-cible); display: inline-flex; align-items: center; justify-content: center;
  background: var(--fond); color: var(--lien); border: 1px solid var(--bordure); border-radius: var(--m-rayon); cursor: pointer; }

/* ---- B3 : le reçu --------------------------------------------------------------------------------------------- */
.repas__photo { position: relative; overflow: hidden; }
.repas__fichier { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.repas__etat:empty, .repas__refus:empty { display: none; }
.repas__etat, .repas__refus { margin: 0; }
.repas__refus { color: var(--danger); font-weight: var(--dv-graisse-600); }
.repas__champs { gap: 0; padding: var(--dv-px-2) var(--dv-px-12); margin: 0; }
.repas__champ-recu { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 8rem); align-items: center;
  gap: var(--dv-px-10); min-height: var(--m-px-52); }
.repas__champ-recu + .repas__champ-recu { border-top: 1px solid var(--bordure-fine); }
.repas__champ-recu--total { font-weight: var(--dv-graisse-700); }
.repas__champ-recu .repas__champ { text-align: right; }
.repas__champ-recu .repas__champ[data-cents=""] { background: var(--alerte-fond); }
/* Un champ vide ou en écart (amendement 22) : orange (le filet LEM), `aria-invalid` posé par la vue et par repas.js. */
.repas__champ-recu .repas__champ[aria-invalid="true"] { background: var(--alerte-fond); border-color: var(--lem-filet);
  box-shadow: inset 0 0 0 1px var(--lem-filet); }
.repas__apercu { display: block; width: 100%; max-height: 14rem; object-fit: contain; background: var(--fond-inactif);
  border: 1px solid var(--bordure); border-radius: var(--m-rayon); }
.repas__apercu[hidden] { display: none; }
.repas__alertes { display: flex; flex-direction: column; gap: var(--dv-px-6); }
.repas__alertes li { display: flex; align-items: center; gap: var(--dv-px-8); padding: var(--dv-px-8) var(--dv-px-10);
  border-radius: var(--m-rayon); background: var(--alerte-fond); color: var(--alerte-texte); font-weight: var(--dv-graisse-600); }
.repas__alertes:empty { display: none; }

/* ---- A1 : le bloc d'accueil ----------------------------------------------------------------------------------- */
.repas-a1 { display: flex; flex-direction: column; gap: var(--dv-px-10); }
.repas-a1 .repas__resume .puce { height: auto; min-height: var(--dv-px-28); cursor: default; }

@media (min-width: 640px) {
  .repas { max-width: 560px; margin: 0 auto; width: 100%; }
}