/* Waweat — styles de l'app et du panneau. Couleurs, rayons et espacements : uniquement via tokens.css. */

@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("../fonts/dm-sans-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("../fonts/dm-sans-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("../fonts/dm-sans-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; min-height: 100dvh; background: var(--creme); color: var(--cacao); font: 400 16px/24px var(--font-sans); }
h1, h2, h3, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button, input { font: inherit; color: inherit; }
svg { display: block; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.muted { color: var(--cacao-muted); }

/* Mise en page : une colonne de 480 px max, zones sûres, barre d'actions fixe en bas. */
.page {
  max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-6);
  padding: calc(var(--space-6) + env(safe-area-inset-top)) calc(var(--space-4) + env(safe-area-inset-right))
    calc(var(--space-8) + env(safe-area-inset-bottom)) calc(var(--space-4) + env(safe-area-inset-left));
}
.page:focus { outline: none; }
.page.with-actions { padding-bottom: calc(190px + env(safe-area-inset-bottom)); }
.stack { display: flex; flex-direction: column; gap: var(--space-2); }
.top { display: flex; align-items: center; gap: var(--space-2); }
.top .title { flex: 1; }
.title { font: 600 28px/32px var(--font-display); }

.actions {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; background: var(--creme);
  padding: var(--space-3) calc(var(--space-4) + env(safe-area-inset-right)) calc(var(--space-4) + env(safe-area-inset-bottom)) calc(var(--space-4) + env(safe-area-inset-left));
}
.actions-inner { max-width: 448px; margin: 0 auto; display: grid; gap: var(--space-2); }

/* Icônes */
.icon { width: 24px; height: 24px; fill: currentColor; flex: none; }

/* Boutons : verbe d'abord, 52 px, un seul principal par écran. */
.btn {
  min-height: 52px; width: 100%; padding: var(--space-2) var(--space-6); border-radius: var(--radius-md); border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font: 600 16px/20px var(--font-sans); text-align: center;
}
.btn-primary { background: var(--tomate-strong); color: var(--on-tomate); }
.btn-secondary { background: transparent; color: var(--cacao); border: 1.5px solid var(--cacao-muted); }
.btn-quiet { background: transparent; color: var(--tomate-strong); width: auto; min-height: 44px; padding: 0 var(--space-3); }
.btn-quiet.left { align-self: flex-start; margin-left: calc(-1 * var(--space-3)); }
.icon-btn {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center; cursor: pointer;
  border-radius: var(--radius-full); border: 1.5px solid var(--cacao-muted); background: transparent; color: var(--cacao);
}
.icon-btn.ghost { border-color: transparent; color: var(--cacao-muted); }

/* Puces : choix rapides */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chips.three { display: grid; grid-template-columns: repeat(3, minmax(56px, max-content)); }
.chip {
  min-height: 44px; min-width: 44px; padding: 0 var(--space-4); border-radius: var(--radius-full); cursor: pointer;
  border: 1.5px solid var(--cacao-muted); background: transparent; color: var(--cacao); font: 600 16px/20px var(--font-sans);
}
.chip.small { padding: 0 var(--space-3); }
.chip[aria-pressed="true"] { background: var(--cacao); border-color: var(--cacao); color: var(--creme); }
.question { font: 500 13px/18px var(--font-sans); color: var(--cacao-muted); padding: 0; margin-bottom: var(--space-2); }
.plain { border: 0; padding: 0; margin: 0; min-width: 0; }

/* Cartes, listes, badges */
.card { background: var(--surface-raised); box-shadow: var(--shadow-card); border-radius: var(--radius-lg); padding: var(--space-4); }
.list { background: var(--surface-raised); box-shadow: var(--shadow-card); border-radius: var(--radius-lg); }
.row { display: flex; align-items: center; gap: var(--space-2); min-height: 60px; padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4); }
.row + .row, .edit + .edit { border-top: 1px solid var(--line); }
.row-main {
  flex: 1; min-width: 0; min-height: 44px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 2px;
  padding: 0; border: 0; background: none; text-align: left; cursor: pointer; border-radius: var(--radius-sm);
}
.row-name { font: 600 16px/20px var(--font-sans); overflow-wrap: anywhere; }
.row-qty { font: 500 13px/18px var(--font-sans); color: var(--cacao-muted); text-decoration: underline dotted; text-underline-offset: 3px; }
.row.editing > .icon-btn { display: none; }
.qty-edit { display: flex; align-items: center; gap: var(--space-2); }
.section { font: 600 20px/26px var(--font-display); }
.group { display: flex; flex-direction: column; gap: var(--space-2); }
.badge { align-self: flex-start; border-radius: var(--radius-sm); padding: var(--space-1) var(--space-3); font: 500 13px/18px var(--font-sans); background: var(--creme-deep); color: var(--cacao-muted); }

/* Champs */
.field { display: flex; flex-direction: column; gap: var(--space-1); }
.field > span { font: 600 16px/20px var(--font-sans); }
.input {
  min-height: 48px; width: 100%; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  background: var(--creme-deep); border: 1.5px solid var(--cacao-muted); color: var(--cacao);
}
.input.qty { width: 80px; flex: none; }
.input::placeholder { color: var(--cacao-muted); }
.check { width: 24px; height: 24px; accent-color: var(--cacao); flex: none; margin: 0; }
.check-wrap { width: 44px; height: 44px; display: grid; place-items: center; flex: none; cursor: pointer; margin-left: calc(-1 * var(--space-2)); }

/* Écran de vérification et de confirmation */
.edit { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4); }
.edit-head, .edit-qty { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.edit-head .input:not(.qty) { flex: 1; min-width: 0; }
.edit.off .input, .edit.off .row-name { color: var(--cacao-muted); text-decoration: line-through; }
.grow { flex: 1; min-width: 0; }
.unit { font: 500 13px/18px var(--font-sans); color: var(--cacao-muted); }

/* Choix d'ajout */
.choice { display: flex; gap: var(--space-4); align-items: flex-start; }
.choice .icon { width: 32px; height: 32px; color: var(--cacao); }
.choice-body { display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
label.btn { position: relative; }
label.btn:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }

/* États : vide, chargement, messages */
.empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); text-align: center; padding: var(--space-8) var(--space-4); }
.illustration { width: 96px; height: 96px; fill: var(--tomate); }
.loading { display: flex; flex-direction: column; align-items: center; gap: var(--space-6); text-align: center; padding-top: var(--space-8); }
.spinner { width: 48px; height: 48px; border-radius: 50%; border: 4px solid var(--moutarde-soft); border-top-color: var(--moutarde); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.notice, .alert { display: flex; gap: var(--space-2); align-items: flex-start; border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.notice { background: var(--moutarde-soft); color: var(--moutarde-ink); }
.alert { background: var(--alerte-soft); color: var(--alerte); }
.ok { color: var(--basilic); }
.toast {
  position: fixed; z-index: 20; left: 50%; transform: translateX(-50%); top: calc(var(--space-4) + env(safe-area-inset-top));
  width: max-content; max-width: min(448px, calc(100% - 2 * var(--space-4))); display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); border-radius: var(--radius-md); box-shadow: var(--shadow-card);
  background: var(--cacao); color: var(--creme); font: 600 16px/20px var(--font-sans);
}
.toast button { min-height: 44px; padding: 0 var(--space-3); border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }

/* Compte */
.divider { display: flex; align-items: center; gap: var(--space-3); color: var(--cacao-muted); font: 500 13px/18px var(--font-sans); }
.divider::before, .divider::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.input.code { font: 600 24px/32px var(--font-sans); letter-spacing: 0.25em; }
.status { display: flex; align-items: center; gap: var(--space-2); }
.btn-danger { background: transparent; color: var(--alerte); border: 1.5px solid var(--alerte); }
.btn-quiet.danger { color: var(--alerte); }

/* Recette */
.meta { display: flex; flex-wrap: wrap; gap: var(--space-4); color: var(--cacao-muted); }
.meta span { display: inline-flex; align-items: center; gap: var(--space-1); }
.ingredients li { display: flex; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--line); }
.ingredients .amount { min-width: 88px; font-weight: 600; }
.steps { counter-reset: step; display: flex; flex-direction: column; gap: var(--space-4); }
.steps li { counter-increment: step; display: flex; gap: var(--space-3); font: 500 22px/32px var(--font-sans); }
.steps li::before {
  content: counter(step); flex: none; width: 32px; height: 32px; border-radius: var(--radius-full); display: grid; place-items: center;
  background: var(--moutarde); color: var(--on-moutarde); font: 600 16px/20px var(--font-sans);
}

/* Panneau d'administration */
.admin .page { max-width: 960px; }
.admin .actions-inner { max-width: 928px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-2); }
.kpi { display: flex; flex-direction: column; gap: var(--space-1); }
.kpi strong { font: 600 24px/32px var(--font-sans); }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: var(--space-2); border-bottom: 1px solid var(--line); white-space: nowrap; }
th { font: 600 13px/18px var(--font-sans); color: var(--cacao-muted); }
td.num, th.num { text-align: right; }
.chart { width: 100%; height: 140px; }
.chart .bar { fill: var(--tomate); }
.chart .axis { fill: var(--cacao-muted); font: 500 13px/18px var(--font-sans); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-3); }
.toggle { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; font-weight: 600; cursor: pointer; }
.task { display: flex; flex-direction: column; gap: var(--space-4); }
.inline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.inline .btn { width: auto; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}