/* app.css — MyDiet App v1, palette "Marché Provençal" (brief) :
   fond #FFFFFF · texte brun #3E2E1E · basilic #5A8A5E · terracotta #E8845A · mimosa #F9E055 */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --brun: #3E2E1E;
  --basilic: #5A8A5E;
  --basilic-fonce: #4C784F;
  --terracotta: #E8845A;
  --mimosa: #F9E055;
  --sable: #F2EDE6;
  --bordure: #E5DED4;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  background: #FFFFFF; color: var(--brun);
  min-height: 100vh; display: flex; flex-direction: column; align-items: center;
}
.wrap { width: 100%; max-width: 480px; padding: 20px 24px 48px; flex: 1; }
.topbar { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.topbar a { color: var(--terracotta); text-decoration: none; font-size: 15px; font-weight: 600; }
.brand { text-align: center; margin: 14px 0 6px; font-weight: 700; letter-spacing: .12em;
         font-size: 13px; color: var(--basilic); }
.brand a { color: inherit; text-decoration: none; }
h1 { font-size: 24px; line-height: 1.3; margin: 18px 0 10px; }
h2 { font-size: 18px; line-height: 1.35; margin: 26px 0 10px; }
p { font-size: 15px; line-height: 1.6; margin-bottom: 12px; }
.muted { opacity: .7; font-size: 14px; }

.card {
  display: block; background: #FFFFFF; border: 2px solid var(--bordure); border-radius: 16px;
  padding: 20px 18px; margin-bottom: 14px; text-decoration: none; color: var(--brun);
}
.card:active { border-color: var(--basilic); background: #EFF5EF; }
.card.disabled { opacity: .55; }
.card.featured { border-color: var(--basilic); background: #F5FAF5; }
.card .titre { font-size: 17px; font-weight: 700; margin-bottom: 4px; }
.card .sous { font-size: 14px; opacity: .75; line-height: 1.5; }
.card .pastille { font-size: 26px; margin-bottom: 8px; display: block; }

.btn {
  display: block; width: 100%; text-align: center; font-family: inherit; cursor: pointer;
  background: var(--basilic); border: 2px solid var(--basilic); color: #FFFFFF;
  font-weight: 700; font-size: 16px; padding: 15px 18px; border-radius: 12px;
  text-decoration: none;
}
.btn:active { background: var(--basilic-fonce); }

.champ {
  width: 100%; font-family: inherit; font-size: 16px; color: var(--brun);
  border: 2px solid var(--bordure); border-radius: 12px; padding: 14px 16px;
  margin-bottom: 10px; background: #FFFFFF;
}
.champ:focus { outline: none; border-color: var(--basilic); }

.note-attente { background: var(--sable); border-radius: 12px; padding: 14px 16px;
                font-size: 14px; line-height: 1.55; }
.ok { color: var(--basilic); font-weight: 700; }
.famille {
  border-left: 6px solid var(--bordure); border-radius: 12px; background: #FFFFFF;
  border-top: 1px solid var(--bordure); border-right: 1px solid var(--bordure);
  border-bottom: 1px solid var(--bordure);
  padding: 16px 16px 12px; margin-bottom: 12px;
}
.famille h3 { font-size: 16px; margin-bottom: 6px; }
.famille p { font-size: 14px; margin-bottom: 4px; }
.fade { animation: fade .22s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }