/* Mon Panier — composants partagés, présentation seulement, 2026-09-19.1.
   Charger tokens.css avant ce fichier. Aucun style global du prototype.
   Les classes historiques mp-ui-* et les signatures JS restent compatibles. */
:where([class^="mp-ui-"],[class*=" mp-ui-"]) { box-sizing:border-box; }
.mp-ui-brand { display:flex;align-items:center;gap:var(--mp-ui-space-2);min-width:0;text-decoration:none;color:var(--mp-ui-ink); }
.mp-ui-brand .home-a4-brand-mark,.mp-ui-brand .home-a4-brand-image { display:block;width:var(--mp-ui-brand-size);height:var(--mp-ui-brand-size);flex:0 0 var(--mp-ui-brand-size);object-fit:contain; }
.mp-ui-brand .home-a4-brand-wordmark { font:var(--mp-ui-weight-heading) 21px/1.2 var(--mp-ui-font-display);letter-spacing:-.035em;white-space:nowrap; }
.app-header.mp-ui-header-shell { height:auto;flex:0 0 auto;min-height:0;display:block;padding:calc(var(--mp-ui-space-2) + env(safe-area-inset-top,0px)) var(--mp-ui-page-gutter) var(--mp-ui-space-2);background:var(--mp-ui-bg);border:0;backdrop-filter:none; }
.mp-ui-header { display:grid;gap:var(--mp-ui-space-2); }
.mp-ui-header-top { display:flex;align-items:center;justify-content:space-between;gap:var(--mp-ui-space-2);min-height:var(--mp-ui-touch); }
.mp-ui-actions,.mp-ui-header-context { display:flex;align-items:center;gap:var(--mp-ui-space-2);min-width:0; }
.mp-ui-actions { flex-shrink:0; }
.mp-ui-header-title,.mp-ui-title { margin:0;color:var(--mp-ui-ink);font:var(--mp-ui-weight-heading) var(--mp-ui-title-size)/var(--mp-ui-line-title) var(--mp-ui-font-display);letter-spacing:-.035em;overflow-wrap:anywhere; }
.mp-ui-header-subtitle,.mp-ui-muted { color:var(--mp-ui-muted);font:var(--mp-ui-weight-body) var(--mp-ui-label-size)/var(--mp-ui-line-body) var(--mp-ui-font-body); }
.mp-ui-header-back { display:inline-flex;align-items:center;gap:var(--mp-ui-space-1);min-height:var(--mp-ui-touch);padding:0 var(--mp-ui-space-2);border:0;border-radius:var(--mp-ui-radius-pill);background:transparent;color:var(--mp-ui-green);font:var(--mp-ui-weight-label) var(--mp-ui-body-size)/1 var(--mp-ui-font-body);cursor:pointer; }
.mp-ui-icon { width:var(--mp-ui-icon);height:var(--mp-ui-icon);flex:none;vertical-align:middle;stroke-width:var(--mp-ui-icon-stroke); }
.mp-ui-action { display:inline-flex;align-items:center;justify-content:center;gap:var(--mp-ui-space-2);min-width:var(--mp-ui-touch);min-height:var(--mp-ui-control-height);padding:var(--mp-ui-space-3) var(--mp-ui-space-4);border:var(--mp-ui-border) solid var(--mp-ui-stroke);border-radius:var(--mp-ui-radius-pill);background:var(--mp-ui-surface);color:var(--mp-ui-ink);font:var(--mp-ui-weight-label) var(--mp-ui-body-size)/1.25 var(--mp-ui-font-body);text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background var(--mp-ui-motion-fast) var(--mp-ui-easing),transform var(--mp-ui-motion-fast) var(--mp-ui-easing); }
.mp-ui-action svg { width:var(--mp-ui-icon-small);height:var(--mp-ui-icon-small);flex:none; }
.mp-ui-action--accent { background:var(--mp-ui-green);border-color:var(--mp-ui-green);color:var(--mp-ui-on-accent); }
.mp-ui-action--coral { background:var(--mp-ui-coral);border-color:var(--mp-ui-coral);color:var(--mp-ui-on-accent); }
.mp-ui-action--quiet { background:transparent;border-color:transparent;color:var(--mp-ui-green); }
.mp-ui-action--danger { background:var(--mp-ui-danger-soft);color:var(--mp-ui-danger);border-color:transparent; }
.mp-ui-action--block { width:100%; }
.mp-ui-action--icon { width:var(--mp-ui-control-height);height:var(--mp-ui-control-height);padding:var(--mp-ui-space-3);flex:none; }
.mp-ui-action:disabled,.mp-ui-action[aria-disabled="true"] { opacity:.5;cursor:not-allowed;transform:none; }
.mp-ui-action[aria-busy="true"] { cursor:progress; }
.mp-ui-action[aria-pressed="true"] { color:var(--mp-ui-green);background:var(--mp-ui-action-soft);border-color:var(--mp-ui-green); }
.mp-ui-action:not(:disabled):not([aria-disabled="true"]):active { transform:translateY(1px); }
@media (hover:hover) { .mp-ui-action--accent:not(:disabled):hover { background:var(--mp-ui-green-hover); }.mp-ui-action--coral:not(:disabled):hover { background:var(--mp-ui-coral-hover); }.mp-ui-choice:hover { border-color:var(--mp-ui-control-stroke); } }
:where(.mp-ui-action,.mp-ui-header-back,.mp-ui-choice,.mp-ui-nav .nav-item,.mp-ui-tab,.mp-ui-stepper button,.mp-ui-recipe-open,.mp-ui-home-card):focus-visible { outline:2px solid var(--mp-ui-green);outline-offset:3px;box-shadow:var(--mp-ui-ring); }
.mp-ui-action-row { display:flex;flex-wrap:wrap;gap:var(--mp-ui-space-2);margin:var(--mp-ui-space-3) 0; }
.mp-ui-action-row .mp-ui-action { flex:1 1 auto; }
.mp-ui-surface { border:var(--mp-ui-border) solid var(--mp-ui-stroke);border-radius:var(--mp-ui-radius);background:var(--mp-ui-surface);box-shadow:var(--mp-ui-shadow); }
.mp-ui-surface--md { border-radius:var(--mp-ui-radius-md); }.mp-ui-surface--sm { border-radius:var(--mp-ui-radius-sm); }
.mp-ui-surface--mint { background:var(--mp-ui-mint);border-color:transparent;box-shadow:none; }.mp-ui-surface--flat { box-shadow:none; }
.mp-ui-section-head { display:flex;align-items:center;gap:var(--mp-ui-space-2);width:100%;min-height:var(--mp-ui-touch);padding:var(--mp-ui-space-2) 0;border:0;background:transparent;color:var(--mp-ui-ink);font:var(--mp-ui-weight-heading) var(--mp-ui-body-size)/1.3 var(--mp-ui-font-body);text-align:left;cursor:pointer; }
.mp-ui-section-icon { display:grid;place-items:center;width:26px;height:26px;flex:none;color:var(--mp-ui-green); }.mp-ui-section-count { color:var(--mp-ui-muted);font-weight:var(--mp-ui-weight-label); }.mp-ui-section-chevron { margin-left:auto;color:var(--mp-ui-muted); }
.mp-ui-tile { display:grid;place-items:center;flex:none;width:var(--mp-ui-thumb-size);height:var(--mp-ui-thumb-size);border-radius:var(--mp-ui-radius-sm);background:var(--mp-ui-mint);color:var(--mp-ui-green);overflow:hidden; }.mp-ui-tile img { width:100%;height:100%;object-fit:contain; }.mp-ui-tile svg { width:var(--mp-ui-icon);height:var(--mp-ui-icon); }
.mp-ui-chip { display:inline-flex;align-items:center;gap:var(--mp-ui-space-1);min-height:28px;padding:var(--mp-ui-space-1) var(--mp-ui-space-2);border:var(--mp-ui-border) solid var(--mp-ui-stroke);border-radius:var(--mp-ui-radius-pill);background:var(--mp-ui-surface);color:var(--mp-ui-ink);font:var(--mp-ui-weight-label) var(--mp-ui-meta-size)/1.3 var(--mp-ui-font-body); }
.mp-ui-chip--mint { border-color:transparent;background:var(--mp-ui-mint);color:var(--mp-ui-green); }
.mp-ui-chip--warning { background:var(--mp-ui-warning-soft);border-color:transparent;color:var(--mp-ui-warning); }
.mp-ui-field { display:grid;gap:var(--mp-ui-space-2);font:var(--mp-ui-weight-label) var(--mp-ui-label-size)/1.4 var(--mp-ui-font-body);color:var(--mp-ui-ink); }
.mp-ui-input { width:100%;min-width:0;min-height:var(--mp-ui-control-height);padding:var(--mp-ui-space-3) var(--mp-ui-space-4);border:var(--mp-ui-border) solid var(--mp-ui-control-stroke);border-radius:var(--mp-ui-radius-sm);background:var(--mp-ui-surface);color:var(--mp-ui-ink);font:var(--mp-ui-weight-body) 16px/1.4 var(--mp-ui-font-body); }
.mp-ui-input::placeholder { color:var(--mp-ui-muted);opacity:1; }.mp-ui-input:focus { outline:2px solid var(--mp-ui-green);outline-offset:2px; }.mp-ui-input[aria-invalid="true"] { border-color:var(--mp-ui-danger); }.mp-ui-field-error { color:var(--mp-ui-danger); }.mp-ui-input:disabled { opacity:.5;cursor:not-allowed; }
.mp-ui-tabs { display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:var(--mp-ui-space-1);padding:var(--mp-ui-space-1);border-radius:var(--mp-ui-radius-pill);background:var(--mp-ui-track); }
.mp-ui-tab { min-width:0;min-height:var(--mp-ui-touch);padding:var(--mp-ui-space-2);border:0;border-radius:var(--mp-ui-radius-pill);background:transparent;color:var(--mp-ui-ink);font:var(--mp-ui-weight-label) var(--mp-ui-label-size)/1.3 var(--mp-ui-font-body);cursor:pointer;overflow-wrap:anywhere; }
.mp-ui-tab[aria-selected="true"] { background:var(--mp-ui-green);color:var(--mp-ui-on-accent);box-shadow:var(--mp-ui-shadow); }
.mp-ui-stepper { display:inline-grid;grid-template-columns:var(--mp-ui-touch) minmax(44px,1fr) var(--mp-ui-touch);align-items:center;gap:var(--mp-ui-space-1);border:var(--mp-ui-border) solid var(--mp-ui-stroke);border-radius:var(--mp-ui-radius-pill);background:var(--mp-ui-bg);font:var(--mp-ui-weight-label) var(--mp-ui-body-size)/1.2 var(--mp-ui-font-body); }
.mp-ui-stepper button { width:var(--mp-ui-touch);height:var(--mp-ui-touch);padding:0;border:0;border-radius:var(--mp-ui-radius-pill);background:transparent;color:var(--mp-ui-ink);font:inherit;font-size:22px;cursor:pointer; }.mp-ui-stepper button:disabled { opacity:.4;cursor:not-allowed; }.mp-ui-stepper output { text-align:center;font-variant-numeric:tabular-nums; }
.mp-ui-choice { display:flex;align-items:center;gap:var(--mp-ui-space-3);width:100%;min-height:72px;padding:var(--mp-ui-space-3);border:var(--mp-ui-border) solid var(--mp-ui-stroke);border-radius:var(--mp-ui-radius-md);background:var(--mp-ui-surface);color:var(--mp-ui-ink);text-align:left;font:var(--mp-ui-weight-label) var(--mp-ui-body-size)/1.35 var(--mp-ui-font-body);text-decoration:none;cursor:pointer; }
.mp-ui-choice-copy { flex:1;min-width:0;overflow-wrap:anywhere; }.mp-ui-choice-copy strong { display:block;font-weight:var(--mp-ui-weight-label); }.mp-ui-choice-copy small { display:block;margin-top:var(--mp-ui-space-1);color:var(--mp-ui-muted);font-weight:var(--mp-ui-weight-body);line-height:1.4; }
.mp-ui-choice--warm .mp-ui-tile { background:var(--mp-ui-coral-soft);color:var(--mp-ui-coral); }.mp-ui-choice > .mp-ui-icon { width:var(--mp-ui-icon-small); }
.mp-ui-choice[aria-pressed="true"] { border-color:var(--mp-ui-green);background:var(--mp-ui-action-soft); }
.mp-ui-ingredient { display:flex;align-items:center;gap:var(--mp-ui-space-2);min-height:64px;padding:var(--mp-ui-space-2) 0;border-bottom:var(--mp-ui-border) solid var(--mp-ui-stroke);font:var(--mp-ui-weight-body) var(--mp-ui-body-size)/1.4 var(--mp-ui-font-body); }
.mp-ui-check { display:grid;place-items:center;width:var(--mp-ui-touch);min-height:var(--mp-ui-touch);flex:none;cursor:pointer; }
.mp-ui-check input { appearance:none;-webkit-appearance:none;display:grid;place-content:center;width:22px;height:22px;margin:0;border:1.5px solid var(--mp-ui-control-stroke);border-radius:7px;background:var(--mp-ui-surface);cursor:pointer; }
.mp-ui-check input:checked { background:var(--mp-ui-green);border-color:var(--mp-ui-green); }.mp-ui-check input:checked::after { content:"";width:9px;height:5px;border-left:2px solid var(--mp-ui-on-accent);border-bottom:2px solid var(--mp-ui-on-accent);transform:rotate(-45deg) translateY(-1px); }.mp-ui-check input:focus-visible { outline:2px solid var(--mp-ui-green);outline-offset:4px; }
.mp-ui-ingredient-copy { flex:1;min-width:0;overflow-wrap:anywhere; }.mp-ui-ingredient-copy small { display:block;color:var(--mp-ui-muted);font-size:var(--mp-ui-meta-size); }.mp-ui-ingredient-amount { margin-left:auto;flex:none;font-weight:var(--mp-ui-weight-label);font-size:var(--mp-ui-label-size);font-variant-numeric:tabular-nums; }
.mp-ui-ingredient:has(input:checked) .mp-ui-ingredient-copy { color:var(--mp-ui-muted);text-decoration:line-through; }.mp-ui-ingredient:last-child { border-bottom:0; }
.mp-ui-notice { display:flex;align-items:flex-start;gap:var(--mp-ui-space-2);padding:var(--mp-ui-space-4);border-radius:var(--mp-ui-radius-sm);background:var(--mp-ui-mint);color:var(--mp-ui-green);font:var(--mp-ui-weight-body) var(--mp-ui-label-size)/var(--mp-ui-line-body) var(--mp-ui-font-body); }
.mp-ui-notice strong { display:block;font-weight:var(--mp-ui-weight-heading); }.mp-ui-notice--error { color:var(--mp-ui-danger);background:var(--mp-ui-danger-soft); }.mp-ui-notice--warning { color:var(--mp-ui-warning);background:var(--mp-ui-warning-soft); }
.mp-ui-progress { position:relative;display:block;width:100%;height:6px;border:0;border-radius:var(--mp-ui-radius-pill);background:var(--mp-ui-track);overflow:hidden;accent-color:var(--mp-ui-green); }.mp-ui-progress i { display:block;height:100%;border-radius:inherit;background:var(--mp-ui-green); }.mp-ui-progress::-webkit-progress-bar { background:var(--mp-ui-track);border-radius:inherit; }.mp-ui-progress::-webkit-progress-value { background:var(--mp-ui-green);border-radius:inherit; }.mp-ui-progress::-moz-progress-bar { background:var(--mp-ui-green);border-radius:inherit; }
.mp-ui-empty { display:grid;justify-items:center;gap:var(--mp-ui-space-3);padding:var(--mp-ui-space-6) var(--mp-ui-space-4);text-align:center;color:var(--mp-ui-ink);font:var(--mp-ui-weight-body) var(--mp-ui-body-size)/var(--mp-ui-line-body) var(--mp-ui-font-body); }.mp-ui-empty h3 { margin:0;font:var(--mp-ui-weight-heading) var(--mp-ui-subtitle-size)/1.2 var(--mp-ui-font-display); }.mp-ui-empty p { margin:0;color:var(--mp-ui-muted); }
.mp-ui-recipe { position:relative;min-width:0;overflow:hidden;border:var(--mp-ui-border) solid var(--mp-ui-stroke);border-radius:var(--mp-ui-radius-md);background:var(--mp-ui-surface); }
.mp-ui-recipe-open { display:block;width:100%;padding:0;border:0;background:transparent;color:var(--mp-ui-ink);text-align:left;cursor:pointer; }.mp-ui-recipe-photo { display:block;width:100%;aspect-ratio:var(--mp-ui-media-ratio);object-fit:cover;background:var(--mp-ui-mint); }.mp-ui-recipe-copy { display:grid;gap:var(--mp-ui-space-2);padding:var(--mp-ui-space-3); }.mp-ui-recipe-title { font:var(--mp-ui-weight-heading) 18px/1.16 var(--mp-ui-font-display);letter-spacing:-.025em;overflow-wrap:anywhere; }.mp-ui-recipe-meta { display:flex;flex-wrap:wrap;gap:var(--mp-ui-space-2);font:var(--mp-ui-weight-body) var(--mp-ui-meta-size)/1.4 var(--mp-ui-font-body);color:var(--mp-ui-muted); }
.mp-ui-recipe-favorite { position:absolute;top:var(--mp-ui-space-1);right:var(--mp-ui-space-1);width:var(--mp-ui-touch);height:var(--mp-ui-touch);min-height:var(--mp-ui-touch);padding:var(--mp-ui-space-2); }.mp-ui-recipe-favorite[aria-pressed="true"] svg { fill:currentColor; }
.mp-ui-home-card { position:relative;isolation:isolate;display:flex;align-items:center;min-height:164px;width:100%;padding:var(--mp-ui-space-5);border:0;border-radius:var(--mp-ui-radius);background:var(--mp-ui-green);color:var(--mp-ui-on-accent);text-align:left;cursor:pointer;overflow:hidden; }
.mp-ui-home-card--plan { background:var(--mp-ui-peach);color:var(--mp-ui-ink); }.mp-ui-home-card--import { background:var(--mp-ui-coral-soft);color:var(--mp-ui-ink); }
.mp-ui-home-copy { position:relative;z-index:1;width:62%;min-width:0; }.mp-ui-home-copy strong { display:block;font:var(--mp-ui-weight-heading) 26px/1.08 var(--mp-ui-font-display);letter-spacing:-.035em;white-space:pre-line;overflow-wrap:anywhere; }.mp-ui-home-copy small { display:block;margin-top:var(--mp-ui-space-3);font:var(--mp-ui-weight-body) var(--mp-ui-label-size)/1.45 var(--mp-ui-font-body);white-space:pre-line; }
.mp-ui-home-art { position:absolute;right:0;bottom:0;width:36%;height:100%;object-fit:cover;border-radius:45% 0 0 0;pointer-events:none; }
.mp-ui-home-arrow { position:absolute;z-index:2;right:var(--mp-ui-space-3);bottom:var(--mp-ui-space-3);display:grid;place-items:center;width:var(--mp-ui-touch);height:var(--mp-ui-touch);border-radius:var(--mp-ui-radius-pill);background:var(--mp-ui-surface);color:var(--mp-ui-ink); }
.mp-ui-nav { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--mp-ui-space-1);padding:var(--mp-ui-space-2) var(--mp-ui-space-2) calc(var(--mp-ui-space-2) + env(safe-area-inset-bottom,0px));border-top:var(--mp-ui-border) solid var(--mp-ui-stroke);background:var(--mp-ui-bg);min-height:var(--mp-ui-nav-height); }
.mp-ui-nav .nav-item { position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--mp-ui-space-1);min-width:0;min-height:var(--mp-ui-touch);padding:var(--mp-ui-space-2) var(--mp-ui-space-1);border:0;border-radius:var(--mp-ui-radius-sm);box-shadow:none;background:transparent;color:var(--mp-ui-muted);font:var(--mp-ui-weight-label) 11px/1.3 var(--mp-ui-font-body);text-decoration:none;cursor:pointer; }
.mp-ui-nav .nav-item svg { width:var(--mp-ui-icon);height:var(--mp-ui-icon); }.mp-ui-nav .nav-item.active,.mp-ui-nav .nav-item[aria-current="page"] { color:var(--mp-ui-green);background:transparent; }.mp-ui-nav .nav-item.active::before,.mp-ui-nav .nav-item[aria-current="page"]::before { content:"";position:absolute;z-index:-1;top:var(--mp-ui-space-1);width:var(--mp-ui-space-7);height:30px;border-radius:var(--mp-ui-radius-pill);background:var(--mp-ui-action-soft); }.mp-ui-nav .badge-count { position:absolute;top:0;right:var(--mp-ui-space-2);min-width:18px;padding:2px 4px;border-radius:var(--mp-ui-radius-pill);background:var(--mp-ui-green);color:var(--mp-ui-on-accent);font:var(--mp-ui-weight-label) 11px/1.3 var(--mp-ui-font-body); }
.mp-ui-dialog { width:min(calc(100% - 2 * var(--mp-ui-page-gutter)),var(--mp-ui-page-max));max-height:calc(100dvh - 2 * var(--mp-ui-page-gutter));padding:0;border:0;border-radius:var(--mp-ui-radius);background:var(--mp-ui-bg);color:var(--mp-ui-ink);box-shadow:var(--mp-ui-shadow-overlay);overflow:auto; }
.mp-ui-dialog::backdrop { background:var(--mp-ui-overlay); }.mp-ui-dialog-head { display:flex;align-items:center;justify-content:space-between;gap:var(--mp-ui-space-3);padding:var(--mp-ui-space-4); }.mp-ui-dialog-head h2 { margin:0;font:var(--mp-ui-weight-heading) var(--mp-ui-subtitle-size)/1.2 var(--mp-ui-font-display); }.mp-ui-dialog-body { padding:0 var(--mp-ui-space-4) var(--mp-ui-space-4); }.mp-ui-dialog-footer { position:sticky;bottom:0;padding:var(--mp-ui-space-3) var(--mp-ui-space-4) calc(var(--mp-ui-space-3) + env(safe-area-inset-bottom,0px));background:var(--mp-ui-bg);border-top:var(--mp-ui-border) solid var(--mp-ui-stroke); }
.mp-ui-stack { display:grid;gap:var(--mp-ui-space-3); }.mp-ui-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--mp-ui-space-3); }.mp-ui-sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0; }
@media (prefers-reduced-motion:reduce) { :where([class^="mp-ui-"],[class*=" mp-ui-"]) { scroll-behavior:auto!important;animation:none!important;transition:none!important; } }

/* Contrôle petit écran : les actions ne peuvent jamais recouvrir la marque. */
.mp-ui-header-top { flex-wrap:wrap; }
.mp-ui-header-top > .mp-ui-brand { flex:0 0 auto; }
.mp-ui-header-top > .mp-ui-actions { margin-left:auto; }
.mp-ui-action-row .mp-ui-action--icon { flex:0 0 var(--mp-ui-control-height); }
.mp-ui-recipe-open:focus-visible { outline-offset:-3px; }
.mp-ui-nav .nav-item > span { white-space:nowrap; }