/* Style mobile-first, sobre et chaleureux. Couleurs douces, gros boutons. */

:root {
  --fond: #faf6f0;
  --texte: #3a342e;
  --doux: #6f675d;
  --accent: #c2703d;
  --accent-fonce: #a85a2c;
  --carte: #ffffff;
  --bordure: #ece3d8;
  --vert: #4c7a4c;
  --rouge: #b0492f;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--fond);
  color: var(--texte);
  line-height: 1.5;
}

a { color: var(--accent-fonce); }

.entete {
  padding: 1rem;
  text-align: center;
  border-bottom: 1px solid var(--bordure);
  background: var(--carte);
}

.entete h1 { margin: 0 0 .5rem; font-size: 1.4rem; }
.entete h1 a { color: var(--accent); text-decoration: none; }

.nav { display: flex; gap: 1rem; justify-content: center; }
.nav a { text-decoration: none; font-weight: 600; }

.contenu { max-width: 680px; margin: 0 auto; padding: 1rem; }

/* Boutons */
.bouton, .bouton-grand {
  display: inline-block;
  border: none;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  padding: .8rem 1.2rem;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}
.bouton:hover, .bouton-grand:hover { background: var(--accent-fonce); }
.bouton-grand { font-size: 1.15rem; padding: 1rem 1.6rem; width: 100%; }
.bouton-petit { padding: .5rem .9rem; font-size: .9rem; }
.bouton-clair {
  background: #fff;
  color: var(--accent-fonce);
  border: 2px solid var(--accent);
}
.bouton-clair:hover { background: #fff7f1; }

.barre-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: center;
  margin-bottom: 1.2rem;
}
.barre-actions form { margin: 0; }

/* Etat vide */
.vide { text-align: center; padding: 2rem 1rem; }
.vide p { color: var(--doux); margin-bottom: 1.5rem; }

/* Reglages (budget, envie) */
.reglages {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  margin-bottom: 1.2rem;
}
.reglages form { margin: 0; }

.champ-budget { display: block; font-weight: 600; color: var(--doux); font-size: .95rem; }
.ligne-budget { display: inline-flex; align-items: center; gap: .4rem; margin-top: .3rem; font-weight: 400; }
.champ-budget input,
.form-envie input[type="text"] {
  border: 1px solid var(--bordure);
  border-radius: 10px;
  padding: .6rem .7rem;
  font-size: 1rem;
  background: #fff;
}
.champ-budget input { width: 6rem; }

.form-generer { display: flex; flex-direction: column; gap: .6rem; align-items: flex-start; }
.form-generer .bouton, .form-generer .bouton-grand { align-self: stretch; }

.form-envie label { display: block; font-weight: 600; color: var(--doux); font-size: .95rem; margin-bottom: .3rem; }
.ligne-envie { display: flex; gap: .5rem; }
.ligne-envie input[type="text"] { flex: 1; }

/* Repas verrouille */
.repas-verrouille { background: #fffaf3; border-left-color: var(--accent) !important; }
.cadenas {
  font-size: .7rem;
  font-weight: 600;
  color: var(--accent-fonce);
  background: #fbe9da;
  border-radius: 999px;
  padding: .1rem .5rem;
  vertical-align: middle;
}
.actions-repas { display: flex; gap: .5rem; flex-wrap: wrap; }
.bouton-actif { background: var(--doux); color: #fff; border: 2px solid var(--doux); }
.bouton-actif:hover { background: #5a534a; }

/* Cartes repas */
.semaine { display: flex; flex-direction: column; gap: .9rem; }

.repas {
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-left: 6px solid var(--bordure);
  border-radius: 14px;
  padding: 1rem;
}
.repas.saison-oui { border-left-color: var(--vert); }
.repas.saison-partiel { border-left-color: #d6a44e; }

.repas-tete {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .3rem;
}
.jour { font-weight: 700; color: var(--accent-fonce); text-transform: capitalize; }
.badge-saison {
  font-size: .75rem;
  color: var(--doux);
  background: var(--fond);
  border-radius: 999px;
  padding: .15rem .6rem;
}

.plat { margin: .2rem 0; font-size: 1.15rem; }
.meta { margin: .2rem 0 .6rem; color: var(--doux); font-size: .95rem; }
.meta .sep { margin: 0 .15rem; }
.proteine { text-transform: capitalize; }

.ingredients { margin: .4rem 0 .8rem; }
.ingredients summary { cursor: pointer; color: var(--accent-fonce); font-size: .9rem; }
.ingredients ul { margin: .5rem 0 0; padding-left: 1.2rem; color: var(--doux); }

.form-repas { margin: 0; }

/* Bilan */
.bilan {
  margin-top: 1.4rem;
  padding: 1rem;
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: 14px;
  text-align: center;
}
.bilan-depasse { border-color: var(--rouge); }
.ok { color: var(--vert); margin: .3rem 0 0; }
.alerte { color: var(--rouge); font-weight: 600; }

/* Liste de courses */
.magasin { margin-bottom: 1.4rem; }
.magasin-titre {
  font-size: 1.2rem;
  color: var(--accent-fonce);
  border-bottom: 2px solid var(--bordure);
  padding-bottom: .3rem;
}
.courses { list-style: none; padding: 0; margin: .6rem 0; }
.courses li {
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: 10px;
  margin-bottom: .4rem;
}
.courses label {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem .8rem;
  cursor: pointer;
}
.courses input[type="checkbox"] { width: 1.2rem; height: 1.2rem; }
.article-nom { font-weight: 600; text-transform: capitalize; }
.article-qte { color: var(--doux); font-size: .9rem; }
.article-cout { margin-left: auto; color: var(--doux); font-size: .9rem; }
.sous-total { text-align: right; color: var(--doux); font-size: .9rem; margin: .2rem .2rem 0; }
.vide-magasin { color: var(--doux); font-style: italic; }

/* --- Favoris --- */
.liste-favoris { list-style: none; padding: 0; margin: .6rem 0; }
.liste-favoris li {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: 10px;
  padding: .7rem .8rem;
  margin-bottom: .4rem;
}
.favori-nom { font-weight: 600; text-transform: capitalize; flex: 1; }
.bouton-favori {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* --- Historique --- */
.liste-historique { list-style: none; padding: 0; margin: .6rem 0; }
.semaine-passee {
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: 12px;
  padding: .8rem .9rem;
  margin-bottom: .7rem;
}
.semaine-courante { border-color: var(--accent); border-width: 2px; }
.semaine-passee-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .4rem;
}
.semaine-date { font-weight: 600; }
.badge-courante {
  background: var(--accent);
  color: #fff;
  font-size: .75rem;
  padding: .1rem .5rem;
  border-radius: 999px;
}
.apercu-plats {
  list-style: none;
  padding: 0;
  margin: .3rem 0 .6rem;
  color: var(--doux);
  font-size: .9rem;
}
.apercu-plats li { padding: .1rem 0; text-transform: capitalize; }

/* --- Impression de la liste de courses --- */
@media print {
  .entete, .nav, .no-print, .bilan { display: none !important; }
  body { background: #fff; color: #000; }
  .contenu { padding: 0; }
  .courses li, .magasin { border: none; background: #fff; }
  .courses input[type="checkbox"] { -webkit-print-color-adjust: exact; }
  .magasin-titre { border-bottom: 1px solid #000; }
}

/* --- Overlay d'attente pendant la génération (appel IA, ~1 min) --- */
.overlay-attente {
  position: fixed;
  inset: 0;
  background: rgba(58, 52, 46, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 1.5rem;
}
.overlay-attente[hidden] { display: none; }
.overlay-carte {
  background: var(--carte);
  border-radius: 16px;
  padding: 1.6rem 1.4rem;
  max-width: 20rem;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.overlay-titre { font-size: 1.2rem; font-weight: 700; margin: 0 0 .4rem; }
.overlay-sous { color: var(--doux); margin: 0 0 1rem; }
.overlay-points { display: flex; gap: .4rem; justify-content: center; }
.overlay-points span {
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  background: var(--accent);
  animation: rebond 1s infinite ease-in-out;
}
.overlay-points span:nth-child(2) { animation-delay: .15s; }
.overlay-points span:nth-child(3) { animation-delay: .3s; }
@keyframes rebond {
  0%, 80%, 100% { transform: translateY(0); opacity: .4; }
  40% { transform: translateY(-.4rem); opacity: 1; }
}
button:disabled { opacity: .6; cursor: progress; }