:root {
  --bg: #1c120c;
  --card: #2a1a11;
  --card-2: #34211557;
  --crema: #c69a6d;
  --crema-light: #e8c79b;
  --text: #f3e7d9;
  --muted: #b39c87;
  --ok: #4caf72;
  --warn: #e0a52e;
  --over: #e0533a;
  --radius: 18px;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html, body {
  background: var(--bg);
  overscroll-behavior: none;            /* coupe le rebond / la "caméra qui bouge" iOS */
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  background: radial-gradient(120% 80% at 50% 0%, #3a2218 0%, var(--bg) 60%) no-repeat;
  background-attachment: fixed;
  color: var(--text);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;           /* supprime le zoom double-tap */
}

.app {
  max-width: 480px;
  margin: 0 auto;
  padding: max(env(safe-area-inset-top), 18px) 16px calc(env(safe-area-inset-bottom) + 24px);
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.top { display: flex; align-items: center; justify-content: space-between; }
h1 { font-size: 1.6rem; letter-spacing: -0.5px; display: flex; align-items: center; gap: 8px; }
.logo { width: 30px; height: 30px; border-radius: 8px; }
.section-title { font-size: 0.95rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }

/* Icônes SVG */
.ic { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.18em; }
.coffee-btn .ic, .history .ic { width: 22px; height: 22px; }

button { font: inherit; cursor: pointer; border: none; border-radius: 12px; color: inherit; }
.ghost { background: transparent; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; transition: background .15s; }
.ghost:hover { background: var(--card-2); }
.ghost.small { width: auto; height: auto; padding: 6px 12px; border-radius: 10px; font-size: .85rem; }
.primary { background: var(--crema); color: #2a1a11; font-weight: 700; padding: 0 18px; height: 46px; display: inline-flex; align-items: center; gap: 6px; }
.primary:hover { background: var(--crema-light); }

/* Jauge */
.gauge-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: 0 10px 30px #0006;
  text-align: center;
}
.gauge-head { display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.big { font-size: 3.2rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; transition: color .3s; }
.unit { color: var(--muted); font-size: 1rem; }

.bar-track {
  position: relative;
  height: 22px;
  background: #0003;
  border-radius: 999px;
  margin: 20px 0 14px;
  overflow: hidden;
  box-shadow: inset 0 2px 6px #0007;
}
.bar-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ok), var(--warn));
  transition: width .6s cubic-bezier(.4,0,.2,1), background .4s;
}
.bar-fill.over { background: linear-gradient(90deg, var(--warn), var(--over)); animation: pulse 1.3s ease-in-out infinite; }
@keyframes pulse { 50% { filter: brightness(1.25); } }
.bar-limit { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--crema-light); opacity: .55; }

.verdict { font-size: 1.1rem; font-weight: 700; margin-top: 4px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.verdict.ok { color: var(--ok); }
.verdict.warn { color: var(--warn); }
.verdict.over { color: var(--over); }
.sub { color: var(--muted); font-size: .85rem; margin-top: 6px; }

/* Boutons boissons */
.coffee-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.coffee-btn {
  background: var(--card); color: var(--text);
  padding: 14px 12px; border-radius: 14px; text-align: left;
  display: flex; align-items: center; gap: 10px;
  border: 1px solid #ffffff0f; transition: transform .08s, background .15s;
}
.coffee-btn:active { transform: scale(.96); background: var(--card-2); }
.coffee-btn .ic { color: var(--crema-light); }
.coffee-btn .txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.coffee-btn .name { font-weight: 600; font-size: .92rem; }
.coffee-btn .mg { color: var(--muted); font-size: .78rem; }

/* Ajouter une boisson */
.add-card { background: var(--card); border-radius: var(--radius); padding: 16px; }
.add-row { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.add-row:last-child { margin-bottom: 0; }
#drink-select, #time-input {
  font-size: 16px;                       /* 16px = pas de zoom auto au focus iOS */
  color: var(--text); background: #0003;
  border: 1px solid #ffffff1f; border-radius: 12px; padding: 12px; height: 46px;
}
#drink-select { flex: 1; min-width: 0; appearance: none; }
#drink-select:focus, #time-input:focus { outline: 2px solid var(--crema); }
#time-input { flex: 1; }
#now-btn { background: #0003; border-radius: 12px; width: 46px; height: 46px; }
#add-btn { white-space: nowrap; }

/* Historique */
.hist-head { display: flex; justify-content: space-between; align-items: center; }
.history { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.history li { background: var(--card-2); border-radius: 12px; padding: 10px 14px; display: flex; justify-content: space-between; align-items: center; font-size: .92rem; }
.history .h-left { display: flex; align-items: center; gap: 10px; }
.history .h-left .ic { color: var(--crema-light); }
.history .h-meta { color: var(--muted); font-size: .8rem; }
.history .del { background: transparent; color: var(--muted); padding: 4px; }
.empty { color: var(--muted); font-size: .9rem; text-align: center; padding: 14px; }

/* Dialog */
dialog {
  border: none; border-radius: var(--radius); padding: 22px;
  background: var(--card); color: var(--text);
  width: min(92vw, 380px); max-height: 88dvh; overflow-y: auto;
  margin: auto;                          /* recentrage fiable */
  box-shadow: 0 20px 60px #0009;
}
dialog::backdrop { background: #000a; backdrop-filter: blur(2px); }
dialog h2 { margin-bottom: 6px; }
.dlg-h3 { margin: 20px 0 4px; font-size: 1rem; }
.dlg-sub { color: var(--muted); font-size: .85rem; margin-bottom: 14px; }
dialog label { display: flex; flex-direction: column; gap: 6px; font-size: .9rem; color: var(--muted); margin-bottom: 14px; }
dialog input[type=number] {
  font-size: 16px; padding: 12px; border-radius: 12px;
  border: 1px solid #ffffff1f; background: #0003; color: var(--text);
}
dialog input:focus { outline: 2px solid var(--crema); }

/* Gestion des favoris */
.fav-manage { list-style: none; display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.fav-manage li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: #0002; border-radius: 10px; }
.fav-manage .ic { color: var(--crema-light); }
.fav-manage .fm-name { flex: 1; font-size: .9rem; min-width: 0; }
.fav-manage .fm-mg { color: var(--muted); font-size: .78rem; }
.fav-manage .fm-star { background: transparent; color: var(--muted); padding: 6px; border-radius: 8px; }
.fav-manage .fm-star.active { color: var(--crema-light); }
.fav-manage .fm-cat { font-size: .72rem; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin: 8px 0 2px; padding-left: 4px; }

.dlg-actions { display: flex; gap: 10px; margin-top: 16px; }
.dlg-actions .btn { flex: 1; height: 46px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; }
.dlg-actions .ghost.btn { background: #0003; color: var(--text); width: auto; }

.foot { text-align: center; color: var(--muted); font-size: .72rem; padding: 8px 16px calc(env(safe-area-inset-bottom) + 24px); max-width: 480px; margin: 0 auto; }