@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Lora:wght@500;600&family=Work+Sans:wght@400;500;600&display=swap');

:root {
  --parchment: #F1EAD9; --card: #FBF6EA; --ink: #2B2A1F; --thyme: #5F7350; --apple-green: #4CAF50;
  --turmeric: #C2872B; --rust: #B14A32; --stone: #8C8570; --line: #E1D6BE; --wood-1: #9C7350; --wood-2: #7A5638;
  --recipe-blue: #3B6EA0;
  --font-body: 'Work Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-course-list-title: 'Fraunces', Georgia, serif;
  --font-store-label: 'Lora', Georgia, serif;
  --font-course-recipe-group: 'Lora', Georgia, serif;
  --font-course-item-name: 'Work Sans', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { font-size: 17px; -webkit-text-size-adjust: 100%; }
html, body { margin: 0; height: 100%; background: var(--parchment); }
body { font-family: var(--font-body); color: var(--ink); -webkit-tap-highlight-color: transparent; overscroll-behavior-y: contain; }
[hidden] { display: none !important; }
button, input, select, textarea { font-family: inherit; color: inherit; }

/* Écran unique : l'en-tête et la pile restent en haut, seuls les produits défilent. */
.app { max-width: 480px; margin: 0 auto; height: 100vh; height: 100dvh; display: flex; flex-direction: column; gap: 12px;
  padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
.manual-shopping-list { display: flex; flex-direction: column; flex: 1; min-height: 0; }

.panel-head { display: flex; justify-content: space-between; align-items: center; }
.panel-head h1 { font-family: var(--font-course-list-title); font-weight: 600; font-size: 1.35rem; margin: 0; }
.panel-head-actions { display: flex; align-items: center; gap: 4px; }
.icon-btn { background: none; border: none; cursor: pointer; color: var(--ink); padding: 8px; display: inline-flex; align-items: center; }
.help-q-btn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-left: 10px; padding: 0; border-radius: 50%; border: 1.5px solid var(--rust); background: transparent; color: var(--rust); font-size: 0.78rem; font-weight: 700; line-height: 1; cursor: pointer; vertical-align: middle; }
.help-q-btn[aria-expanded="true"] { background: var(--rust); color: #fff; }
.list-help-text { margin: 0; padding: 9px 12px; font-size: 0.8rem; line-height: 1.4; color: var(--stone); background: var(--card); border: 1px solid var(--line); border-radius: 8px; }
.list-help-text p { margin: 0 0 6px; }
.list-help-text p:last-child { margin-bottom: 0; }

.mini-btn { background: var(--card); border: 1px solid var(--thyme); color: var(--thyme); padding: 8px 12px; border-radius: 7px; font-size: 0.82rem; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.mini-btn:active { background: rgba(95,115,80,0.12); }
.mini-btn.active { background: rgba(177,74,50,0.08); border-color: var(--rust); color: var(--rust); }
.shopping-list-card .ghost-badge { margin-top: 5px; }
.ghost-badge { background: var(--rust); color: #fff; font-size: 0.68rem; font-weight: 600; border-radius: 999px; padding: 1px 7px; line-height: 1.4; }
.undo-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; background: var(--ink); color: #fff; border-radius: 8px; font-size: 0.85rem; }
.undo-bar .mini-btn { background: #fff; color: var(--ink); border-color: #fff; font-weight: 600; }
.delete-selection-btn { color: var(--rust); border-color: var(--rust); }
.share-status { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 0.82rem; color: var(--thyme); }
.share-raw { width: 100%; min-height: 110px; border: 1px solid var(--line); border-radius: 8px; padding: 8px; background: var(--card); font-size: 0.8rem; }

.tool-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.group-select { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); font-size: 16px; }

/* Pile de 3 cartes : position absolue + décalage vertical, la carte du dessus est entièrement visible. */
.shopping-list-stack { position: relative; margin: 2px 0 6px; flex-shrink: 0; }
.shopping-list-card { position: absolute; left: 0; right: 0; display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; height: 38px; align-items: flex-start; font-size: 0.88rem; color: var(--ink); cursor: pointer; box-shadow: 0 2px 5px rgba(46,35,26,0.1); transition: top 0.2s ease; }
.shopping-list-card.active { border-color: var(--rust); background: linear-gradient(rgba(177,74,50,0.08), rgba(177,74,50,0.08)), var(--card); }
.shopping-list-card-name { line-height: 28px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shopping-list-card-controls { height: 28px; display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.shopping-list-card-move { background: none; border: none; color: var(--stone); cursor: pointer; padding: 3px; display: inline-flex; border-radius: 5px; }
.shopping-list-card-move:disabled { opacity: 0.3; cursor: default; }
.shopping-list-card-rename { display: inline-flex; align-items: center; color: var(--stone); padding: 3px; border-radius: 5px; cursor: pointer; }
.shopping-list-card-editing { display: flex; align-items: center; gap: 6px; flex: 1; height: 38px; }
.shopping-list-card-editing input { flex: 1; min-width: 0; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 16px; background: #fff; }

.manual-list-add-row { display: flex; gap: 8px; margin-bottom: 10px; }
.manual-list-add-row input { flex: 1; min-width: 0; padding: 9px 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 16px; background: #fff; }
.manual-list-add-row input.manual-price-field { flex: 0 0 68px; width: 68px; text-align: right; }
.manual-row-right { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
.manual-price-input { width: 64px; padding: 5px 6px; border: 1px solid var(--line); border-radius: 5px; font-size: 16px; text-align: right; background: var(--card); }
.manual-list-total { display: flex; justify-content: space-between; align-items: center; padding: 10px 4px 2px; margin-top: 8px; border-top: 2px solid var(--line); font-size: 0.98rem; flex-shrink: 0; }
.manual-item-checked { text-decoration: line-through; color: var(--stone); }
.manual-list-clear { margin: 16px 0 6px; }

.list-items { display: flex; flex-direction: column; }
.list-scroll-area { overflow-y: auto; flex: 1; min-height: 0; padding-right: 4px; -webkit-overflow-scrolling: touch; }
.list-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 2px; border-bottom: 1px solid var(--line); font-size: 0.9rem; }
.list-row:last-child { border-bottom: none; }
.list-row .course-item-name { font-family: var(--font-course-item-name); overflow-wrap: anywhere; }
.list-empty { font-size: 0.88rem; color: var(--stone); text-align: center; padding: 24px 0; }
.list-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 14px 0 2px; }
.list-group:first-child .list-group-head { margin-top: 2px; }
.list-group-label { margin: 0; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.4px; color: var(--stone); font-weight: 800; -webkit-text-stroke: 0.4px currentColor; text-decoration: underline; text-underline-offset: 2px; font-family: var(--font-store-label); }
.list-group-label-recipe { color: var(--recipe-blue); font-family: var(--font-course-recipe-group); }
.list-group-total { font-size: 0.74rem; font-weight: 600; white-space: nowrap; margin-left: auto; }
.list-row-price { font-weight: 600; font-size: 0.82rem; }
.list-row-remove { background: none; border: none; color: var(--stone); cursor: pointer; padding: 6px; display: inline-flex; align-items: center; }
.list-row-remove:active { color: var(--rust); }
.list-group-select, .list-row-select { display: flex; gap: 9px; cursor: pointer; min-width: 0; }
.list-group-select { align-items: baseline; }
.list-row-select { align-items: center; }
.list-group-select input[type="checkbox"], .list-row-select input[type="checkbox"] { margin: 0; width: 19px; height: 19px; cursor: pointer; flex-shrink: 0; accent-color: var(--thyme); }
.move-selection-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; background: rgba(177,74,50,0.06); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.move-selection-label { font-size: 0.8rem; color: var(--stone); width: 100%; }
.move-selection-btn { border-color: var(--rust); color: var(--rust); font-weight: 600; }
.move-selection-btn:active { background: var(--rust); color: #fff; }

@media (min-width: 700px) { .app { padding-top: 28px; } }