/* Cabas
   Idiome iOS natif : typo système, gris et séparateurs système, grands titres, barre d'onglets translucide.
   Le gris est la structure, la couleur un signal : vert = on peut agir, jaune = le prix le plus bas, rouge = promotion
   ou suppression, orange pâle = attention. Jetons en tête, typographie en rem (elle suit la taille du texte choisie),
   espacements, cibles et chrome en px (ils ne la suivent pas). */

/* ---------- jetons : couleurs, mode clair ---------- */
:root {
  color-scheme: light dark;
  /* fonds */
  --paper: #ffffff;
  --card: #ffffff;
  --group: #f2f2f7;
  --shelf: #e9e9ee;
  --fill: #e9e9ee;
  --fill-press: #dcdce2;
  --sep: #d8d8dd;
  --nav-bg: rgba(255, 255, 255, 0.88);
  --nav-bg-grouped: rgba(242, 242, 247, 0.88);
  --bar-bg: rgba(249, 249, 251, 0.94);
  --tab-line: rgba(0, 0, 0, 0.12);
  --sheet-bg: #ffffff;
  --scrim: rgba(0, 0, 0, 0.42);
  --toast-bg: #1c1c1e;
  --toast-link: #7ee2a8;
  --edge: rgba(0, 0, 0, 0.06);
  /* contour des commandes : invisible, sauf en contraste renforcé */
  --ctl-line: transparent;
  /* encres : --ink-2 tient 7:1 sur blanc, --group, --shelf et --brand-tint ; --ink-3 jamais pour un texte */
  --ink: #111114;
  --ink-2: #4c4c52;
  --ink-3: #767680;
  /* vert : l'action */
  --brand: #0a7a4a;
  --brand-press: #076038;
  --brand-ink: #05582f;
  --brand-text: var(--brand-ink);
  --brand-tint: #e3f2e9;
  --brand-tint-press: #d2eadc;
  --on-brand: #ffffff;
  --sw-on: var(--brand);
  --sw-off: #8a8a90;
  --mini-count: #085f3a;
  --focus: #0a7a4a;
  /* jaune : le prix le plus bas, rien d'autre */
  --sticker: #ffd60a;
  --sticker-ink: #111114;
  /* rouge : promotion (fiche) et suppression */
  --promo: #c41230;
  --promo-fill: #c41230;
  --on-promo: #ffffff;
  /* orange pâle : attention */
  --warn: #8a5200;
  --warn-bg: #fff4e0;
  /* chrome */
  --tab-off: #5f5f66;
  --mono-bg: #e9e9ee;
  --mono-ink: #111114;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --round: ui-rounded, "SF Pro Rounded", var(--sans);
  --st: env(safe-area-inset-top, 0px); --sb: env(safe-area-inset-bottom, 0px); --sl: env(safe-area-inset-left, 0px); --sr: env(safe-area-inset-right, 0px);
  --side: 0px;
  /* espacements, rayons, ombres */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px;
  --g: 16px;
  --gx: calc(var(--g) + var(--sl)); --gr: calc(var(--g) + var(--sr));
  --gap-card: 12px; --pad-card: 16px; --gap-section: 32px;
  --tap: 44px; --tap-lg: 48px;
  --r-s: 8px; --r-m: 14px; --r-l: 22px; --r-pill: 999px;
  --hair: 1px;
  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.06);
  --sh-2: 0 8px 24px rgba(0, 0, 0, 0.14), 0 1px 3px rgba(0, 0, 0, 0.10);
  --sh-3: 0 -8px 32px rgba(0, 0, 0, 0.18);
  /* durées et courbes */
  --t-1: 120ms; --t-2: 200ms; --t-3: 320ms; --t-4: 480ms;
  --e-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --e-in: cubic-bezier(0.4, 0, 1, 1);
  --e-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  /* le chrome grandit de 12 % au plus avec la taille du texte, et ne rétrécit jamais sous sa taille normale */
  --nav: clamp(44px, 2.75rem, 49px);
  --tab: clamp(56px, 3.5rem, 63px);
  --dock-h: clamp(62px, 3.875rem, 70px);
  --tab-fs: clamp(13px, 0.8125rem, 14.5px);
  --chrome-fs: clamp(17px, 1.0625rem, 19px);
}
/* ---------- mode sombre ----------
   Thème choisi dans les réglages (auto, clair, sombre) : boot.js pose html[data-theme] avant le premier rendu, d'après
   le réglage ou celui du téléphone. Le bloc dans @media sert de secours tant que le script n'a pas tourné ; il est
   identique au bloc html[data-theme="dark"] (tools/contrastcheck.py le vérifie). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #000000; --card: #1c1c1e; --group: #000000;
    --shelf: #2c2c2e; --fill: #2c2c2e; --fill-press: #3a3a3c; --sep: #3a3a3c;
    --nav-bg: rgba(28, 28, 30, 0.88); --nav-bg-grouped: rgba(0, 0, 0, 0.88);
    --bar-bg: rgba(22, 22, 24, 0.94); --tab-line: rgba(255, 255, 255, 0.12);
    --sheet-bg: #1c1c1e; --scrim: rgba(0, 0, 0, 0.58); --toast-bg: #3a3a3c; --toast-link: #7ee2a8;
    --edge: rgba(255, 255, 255, 0.08);
    --ink: #f5f5f7; --ink-2: #b9b9c0; --ink-3: #8e8e95;
    --brand: #0d7d4b; --brand-press: #0a6a3f; --brand-ink: #62d99b;
    --brand-tint: #123a27; --brand-tint-press: #1a4d34;
    --sw-on: var(--brand); --sw-off: #6c6c72;
    --mini-count: #0c683e; --focus: #62d99b;
    --sticker: #ffd60a; --sticker-ink: #111114;
    --promo: #ff6b6b; --promo-fill: #d61a38;
    --warn: #ffb340; --warn-bg: #3a2d08;
    --tab-off: #a0a0a8;
    --mono-bg: #3a3a3c; --mono-ink: #f5f5f7;
    --sh-1: 0 0 0 1px var(--edge), 0 2px 8px rgba(0, 0, 0, 0.5);
    --sh-2: 0 0 0 1px var(--edge), 0 8px 24px rgba(0, 0, 0, 0.6);
    --sh-3: 0 -1px 0 var(--edge), 0 -8px 32px rgba(0, 0, 0, 0.7);
  }
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #000000; --card: #1c1c1e; --group: #000000;
  --shelf: #2c2c2e; --fill: #2c2c2e; --fill-press: #3a3a3c; --sep: #3a3a3c;
  --nav-bg: rgba(28, 28, 30, 0.88); --nav-bg-grouped: rgba(0, 0, 0, 0.88);
  --bar-bg: rgba(22, 22, 24, 0.94); --tab-line: rgba(255, 255, 255, 0.12);
  --sheet-bg: #1c1c1e; --scrim: rgba(0, 0, 0, 0.58); --toast-bg: #3a3a3c; --toast-link: #7ee2a8;
  --edge: rgba(255, 255, 255, 0.08);
  --ink: #f5f5f7; --ink-2: #b9b9c0; --ink-3: #8e8e95;
  --brand: #0d7d4b; --brand-press: #0a6a3f; --brand-ink: #62d99b;
  --brand-tint: #123a27; --brand-tint-press: #1a4d34;
  --sw-on: var(--brand); --sw-off: #6c6c72;
  --mini-count: #0c683e; --focus: #62d99b;
  --sticker: #ffd60a; --sticker-ink: #111114;
  --promo: #ff6b6b; --promo-fill: #d61a38;
  --warn: #ffb340; --warn-bg: #3a2d08;
  --tab-off: #a0a0a8;
  --mono-bg: #3a3a3c; --mono-ink: #f5f5f7;
  --sh-1: 0 0 0 1px var(--edge), 0 2px 8px rgba(0, 0, 0, 0.5);
  --sh-2: 0 0 0 1px var(--edge), 0 8px 24px rgba(0, 0, 0, 0.6);
  --sh-3: 0 -1px 0 var(--edge), 0 -8px 32px rgba(0, 0, 0, 0.7);
}
/* ---------- contraste renforcé (réglage, ou « Augmenter le contraste » du téléphone) ----------
   Texte à 7:1 au moins sur tous les fonds, séparateurs et contours des commandes à 3:1 ; en sombre, les boutons pleins
   passent au vert clair avec un texte foncé, seul moyen de tenir 7:1 pour le texte et 3:1 contre le fond noir. */
:root[data-contrast="more"] {
  --ink: #000000; --ink-2: #2c2c31; --ink-3: #55555c;
  --sep: #6e6e76; --ctl-line: #55555c;
  --brand: #075c37; --brand-press: #054a2c; --brand-ink: #04462a; --brand-tint: #e3f2e9; --brand-tint-press: #d2eadc;
  --on-brand: #ffffff; --mini-count: #043b23; --focus: #04462a;
  --sw-on: var(--brand); --sw-off: #6e6e76;
  --promo: #9e0c25; --promo-fill: #9e0c25; --on-promo: #ffffff;
  --warn: #6b3c00; --warn-bg: #fff4e0;
  --tab-off: #3a3a40; --mono-bg: #e9e9ee; --mono-ink: #000000;
  --toast-bg: #1c1c1e; --toast-link: #8ff0be;
}
:root[data-theme="dark"][data-contrast="more"] {
  --ink: #ffffff; --ink-2: #dcdce2; --ink-3: #a8a8b0;
  --sep: #8e8e95; --ctl-line: #a8a8b0;
  --brand: #7ee2a8; --brand-press: #5fd492; --brand-ink: #8ff0be; --brand-tint: #0f3322; --brand-tint-press: #16452e;
  --on-brand: #00160b; --mini-count: #5fd492; --focus: #8ff0be;
  --sw-on: var(--brand); --sw-off: #8e8e95;
  --promo: #ff9e9e; --promo-fill: #ffb3b3; --on-promo: #2a0006;
  --warn: #ffc56b; --warn-bg: #3a2d08;
  --tab-off: #d0d0d6; --mono-bg: #3a3a3c; --mono-ink: #ffffff;
  --toast-bg: #3a3a3c; --toast-link: #8ff0be;
}
@media (forced-colors: active) { :focus-visible { outline: 3px solid Highlight; } .btn, .chip, .stepper, .box, .seg button, .add, .icbtn { border: 1px solid ButtonText; } }
@media (min-width: 600px) { :root { --g: 24px; } }
@media (min-width: 960px) { :root { --g: 32px; --side: 248px; --tab: 0px; } }
/* ---------- tailles de texte : cinq crans par la taille de police racine ---------- */
html[data-text="0.82"] { font-size: 82%; }
html[data-text="0.9"] { font-size: 90%; }
html[data-text="1.12"] { font-size: 112%; }
html[data-text="1.25"] { font-size: 125%; }
@media (prefers-reduced-motion: reduce) {
  :root { --t-1: 0ms; --t-2: 0ms; --t-3: 0ms; --t-4: 0ms; --e-spring: linear; }
  .enter-push, .enter-pop, .enter-tab, .bump, .stepper.pop, .sheet, .scrim, .toast, .dock.in, .empty .art, .sk, .skl { animation: none !important; }
}

/* ---------- base et conventions ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--paper); overflow-x: clip; scroll-padding-top: calc(var(--st) + var(--nav) + 8px); scroll-padding-bottom: calc(var(--sb) + var(--tab) + var(--dock-h) + 8px); }
body { overflow-x: clip; font: 400 1.0625rem/1.4 var(--sans); letter-spacing: -0.01em; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -webkit-tap-highlight-color: transparent; }
body.grouped, html:has(body.grouped) { background: var(--group); }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.nav, .tabbar, .side, .chips, .tile, .cat, .dock, .sheet-h, .lt, .badge, .sticker, .px { -webkit-user-select: none; user-select: none; }
a { color: inherit; touch-action: manipulation; -webkit-touch-callout: none; }
img { -webkit-user-drag: none; user-select: none; }
[hidden] { display: none !important; }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--paper); border-radius: var(--r-s); }
.row:focus-visible, .opt:focus-visible, .gi:focus-visible, .swr:focus-visible { outline-offset: -3px; box-shadow: none; }
/* la vue reçoit le focus seulement quand elle n'a pas de titre : jamais de cadre autour de tout l'écran */
.view:focus, .view:focus-visible { outline: none; box-shadow: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ic { width: 1.25rem; height: 1.25rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ic.fill { fill: currentColor; stroke: none; }
.num { font-variant-numeric: tabular-nums; }
.hit { position: relative; }
.hit::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, var(--tap)); height: max(100%, var(--tap)); transform: translate(-50%, -50%); }
.skip { position: fixed; z-index: 100; top: 8px; left: 8px; padding: 12px 16px; border-radius: var(--r-m); background: var(--brand); color: var(--on-brand); font-weight: 600; text-decoration: none; transform: translateY(-200%); }
.skip:focus-visible { transform: none; }

/* ---------- typographie : sept tailles de texte, quatre tailles de prix ---------- */
.lt { font-size: 2.125rem; line-height: 2.5rem; font-weight: 700; letter-spacing: -0.015em; text-wrap: balance; padding: 3px var(--gr) 8px var(--gx); }
.t1, .ph h1, .empty h2, .hero h1 { font-size: 1.5rem; line-height: 1.875rem; font-weight: 700; letter-spacing: -0.015em; text-wrap: balance; }
.sh h2, .gh.big { font-size: 1.25rem; line-height: 1.5rem; font-weight: 700; letter-spacing: -0.01em; text-wrap: balance; }
.t3, h3, .sheet-h h2, .oh h3 { font-size: 1.0625rem; line-height: 1.375rem; font-weight: 600; letter-spacing: -0.01em; }
.lt-sub, .pname, .item .it b, .empty p, .banner, .sheet-b > p { font-size: 0.9375rem; line-height: 1.33; }
.unit, .pfmt, .na, .gf, .gh, .foot, .row .rt small, .item .it small, .offer .os, .fresh, .count, .hint, .progl, .wq, .was, .hcard small, .oh small { font-size: 0.875rem; line-height: 1.1875rem; letter-spacing: 0; }
.badge, .bdg, .chip .n, .tag, .drop { font-size: 0.75rem; line-height: 1; font-weight: 600; letter-spacing: 0; }
.num, .px, .lp, .ap, .mp, .val, .stepper span, .progl, .ladder .num, .of .ln, .orow small, .sum .alt b { font-variant-numeric: tabular-nums; }
.prose, .gf, .lede, .sn, .sheet-b > p, .empty p { max-width: 62ch; }
.pname, .item .it b, .row .rt, .gi .gt b { hyphens: auto; overflow-wrap: anywhere; }
.lt-sub { color: var(--ink-2); padding: 0 var(--gr) 10px var(--gx); margin-top: -4px; }
/* une adresse (le nouveau domaine) ne se coupe pas à son trait d'union */
.host { white-space: nowrap; }
.pad { padding-left: var(--gx); padding-right: var(--gr); }
.count { color: var(--ink); padding: 0 var(--gx) 12px; font-size: 0.9375rem; }
.more { height: 1px; }
/* liens dans une phrase : soulignés, et 44 px de haut par leur zone de touche */
.gf a, .foot a, .sn a, .hint a, .trust a, .prose a { display: inline-block; padding: 15px 2px; margin: -15px -2px; color: var(--brand-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; border-radius: var(--r-s); }

/* ---------- barre de navigation ---------- */
.nav { position: fixed; z-index: 30; top: 0; left: var(--side); right: 0; padding-top: var(--st); transition: background-color var(--t-2), box-shadow var(--t-2); }
.nav.solid { background: var(--nav-bg); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
body.grouped .nav.solid { background: var(--nav-bg-grouped); }
.nav.show-t { box-shadow: 0 var(--hair) 0 var(--sep); }
.nav.flat { box-shadow: none; }
.nav-in { height: var(--nav); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; padding: 0 max(8px, var(--sr)) 0 max(8px, var(--sl)); }
.nav-l { justify-self: start; min-width: 0; max-width: 100%; display: flex; }
.nav-r { justify-self: end; display: flex; align-items: center; gap: 2px; }
.nav-t { font-size: var(--chrome-fs); font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 56vw; opacity: 0; transition: opacity var(--t-2); }
.nav.show-t .nav-t { opacity: 1; }
.back { display: inline-flex; align-items: center; gap: 2px; min-height: var(--tap); padding: 0 10px 0 4px; border-radius: var(--r-pill); color: var(--brand-ink); font-size: var(--chrome-fs); font-weight: 500; max-width: 100%; min-width: 0; }
.back .ic { width: 24px; height: 24px; stroke-width: 2.4; }
.back span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.back:active, .txtbtn:active, .icbtn:active { background: var(--fill); }
.icbtn { width: var(--tap); height: var(--tap); border-radius: var(--r-pill); display: grid; place-items: center; color: var(--brand-ink); flex: none; }
.icbtn .ic { width: 24px; height: 24px; }
.icbtn[aria-current="page"] { background: var(--brand-tint); }
.txtbtn { min-height: var(--tap); padding: 0 10px; border-radius: var(--r-pill); color: var(--brand-ink); font-size: var(--chrome-fs); }
.txtbtn.primary { font-weight: 600; }
.wordmark { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 0 6px; font-family: var(--round); font-weight: 800; font-size: 1.25rem; letter-spacing: -0.01em; text-decoration: none; color: var(--ink); border-radius: var(--r-s); }
.wordmark svg { width: 28px; height: 28px; border-radius: 7px; flex: none; }

/* ---------- barre d'onglets ---------- */
.tabbar { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, 1fr); padding: 0 var(--sr) var(--sb) var(--sl); background: var(--bar-bg); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: 0 -1px 0 var(--tab-line); }
.tab { position: relative; height: var(--tab); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding-top: 2px; color: var(--tab-off); text-decoration: none; }
.tab .ic { width: 26px; height: 26px; transition: transform var(--t-1) var(--e-out); }
.tab:active .ic { transform: translateY(1px); }
.tab span { font-size: var(--tab-fs); font-weight: 600; line-height: 1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab .on { display: none; }
.tab[aria-current="page"] { color: var(--brand-ink); }
.tab[aria-current="page"] .on { display: block; }
.tab[aria-current="page"] .off { display: none; }
.tab[aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 50%; width: 28px; height: 3px; border-radius: 0 0 3px 3px; background: var(--brand); transform: translateX(-50%); }
.bdg { position: absolute; top: 5px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill); background: var(--promo-fill); color: var(--on-promo); font: 700 0.75rem/18px var(--round); text-align: center; box-shadow: 0 0 0 2px var(--bar-bg); }
.bump { animation: bump var(--t-3) var(--e-spring); }
@keyframes bump { 40% { transform: scale(1.3); } }

/* ---------- vues ---------- */
.view { min-height: 100vh; padding-top: calc(var(--st) + var(--nav)); padding-bottom: calc(var(--sb) + var(--tab) + 28px); margin-left: var(--side); }
.view.docked { padding-bottom: calc(var(--sb) + var(--tab) + var(--dock-h) + 16px); }
.wrap { max-width: 1080px; margin: 0 auto; }
.enter-push { animation: push var(--t-3) var(--e-out); }
.enter-pop { animation: pop var(--t-2) var(--e-out); }
.enter-tab { animation: fade var(--t-2) var(--e-out); }
@keyframes push { from { transform: translateX(24px); opacity: 0.4; } }
@keyframes pop { from { transform: translateX(-16px); opacity: 0.5; } }
@keyframes fade { from { opacity: 0; } }
.sh { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; padding: var(--gap-section) var(--gr) 12px var(--gx); }
.sh h2 { flex: 1 1 12rem; min-width: 0; }
.sh .act { flex: none; margin: 0; }
.sh p { flex-basis: 100%; color: var(--ink-2); }
.sh + .rail, .sh + .grid, .sh + .group, .sh + .cats { margin-top: 0; }

/* ---------- boutons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; max-width: 480px; min-height: var(--tap-lg); padding: 10px 18px; border-radius: var(--r-m); background: var(--brand); color: var(--on-brand); font-size: 1.0625rem; font-weight: 600; line-height: 1.25; text-align: center; text-decoration: none; transition: background-color var(--t-1), transform var(--t-1) var(--e-out); }
.btn:active { background: var(--brand-press); transform: scale(0.985); }
.btn .ic { width: 20px; height: 20px; stroke-width: 2.3; flex: none; }
.btn .sub { font-family: var(--round); font-weight: 600; opacity: 0.9; }
.btn.tint { background: var(--brand-tint); color: var(--brand-ink); }
.btn.tint:active { background: var(--brand-tint-press); }
.btn.tint[aria-pressed="true"] { background: var(--brand); color: var(--on-brand); }
.btn.ghost { background: transparent; color: var(--brand-ink); box-shadow: inset 0 0 0 1.5px var(--sep); }
.btn.ghost:active { background: var(--fill); }
.btn.plain { background: var(--fill); color: var(--ink); }
.btn.plain:active { background: var(--fill-press); }
.btn.danger { background: var(--promo-fill); color: var(--on-promo); }
.btn.danger:active { filter: brightness(0.9); }
.btn.sm { width: auto; max-width: none; min-height: var(--tap); padding: 8px 16px; border-radius: var(--r-pill); font-size: 0.9375rem; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: default; transform: none; }
.btns { display: grid; gap: 10px; }
.btns.two { grid-template-columns: 1fr 1fr; }
.btns.two .btn { width: 100%; min-width: 0; padding-left: 10px; padding-right: 10px; }
.act { display: inline-flex; align-items: center; gap: 2px; min-height: var(--tap); padding: 0 6px; margin: -6px 0; border-radius: var(--r-s); color: var(--brand-ink); font-size: 0.9375rem; font-weight: 600; text-decoration: none; }
.act .ic { width: 16px; height: 16px; stroke-width: 2.4; }
.act:active { background: var(--fill); }

/* ---------- recherche, champs, zone de liste ---------- */
.search { display: flex; align-items: center; gap: 6px; min-height: var(--tap-lg); padding: 0 4px 0 12px; border-radius: var(--r-m); background: var(--fill); color: var(--ink-2); font-size: 1.0625rem; width: 100%; text-align: left; }
.search .ic { width: 20px; height: 20px; stroke-width: 2.2; }
.search input { flex: 1; min-width: 0; min-height: var(--tap); border: 0; background: none; color: var(--ink); font-size: 1.0625rem; -webkit-appearance: none; appearance: none; }
.search input::placeholder { color: var(--ink-2); }
.search input::-webkit-search-cancel-button { display: none; }
.search:focus-within { box-shadow: inset 0 0 0 2px var(--brand); }
.search input:focus-visible, .field input:focus-visible { outline: none; box-shadow: none; }
.search .clr { width: var(--tap); height: var(--tap); display: grid; place-items: center; color: var(--ink-2); border-radius: var(--r-pill); flex: none; }
.search .clr .ic { width: 22px; height: 22px; }
.srow { display: flex; align-items: center; gap: 8px; padding: 2px var(--gr) 10px var(--gx); }
.srow .icbtn { flex: none; margin-right: -8px; }
/* complétion sous la recherche : une rangée de pastilles de 44 px, qui défile sans barre */
.sugg { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 0 var(--gr) 8px var(--gx); margin-top: -2px; }
.sugg::-webkit-scrollbar { display: none; }
.sugg .chip { max-width: 72vw; }
.sugg .chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.field { display: block; padding: 0 var(--g) 12px; }
.field > span, .field > label { display: block; margin-bottom: 6px; font-size: 0.9375rem; font-weight: 600; }
.field .in { display: flex; align-items: center; min-height: var(--tap-lg); padding: 0 14px; border-radius: var(--r-m); background: var(--group); box-shadow: inset 0 0 0 1px var(--ink-3); transition: box-shadow var(--t-1); }
body.grouped .field .in, .sheet .field .in { background: var(--fill); }
.field .in:focus-within { box-shadow: inset 0 0 0 2px var(--brand); }
.field.err .in { box-shadow: inset 0 0 0 2px var(--warn); }
.field input { flex: 1; min-width: 0; min-height: var(--tap); border: 0; background: none; font-size: 1.0625rem; -webkit-appearance: none; appearance: none; }
.field input:focus { outline: none; }
.field input::placeholder { color: var(--ink-2); }
.field .suf { margin-left: 6px; color: var(--ink-2); }
.field small { display: flex; align-items: flex-start; gap: 6px; padding: 6px 4px 0; color: var(--ink-2); font-size: 0.875rem; line-height: 1.1875rem; }
.field small .ic { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.field.err small { color: var(--warn); font-weight: 500; }
.field small:empty { display: none; }
.row .field { padding: 0; width: 100%; }
.row .field .in { background: var(--fill); }
.wl { display: block; width: 100%; min-height: 13rem; padding: 12px 14px; border: 1px solid var(--sep); border-radius: var(--r-m); background: var(--card); font: inherit; font-size: 1.0625rem; line-height: 1.6; color: var(--ink); resize: vertical; -webkit-appearance: none; appearance: none; }
.wl::placeholder { color: var(--ink-2); }
.wl:focus { outline: none; border-color: transparent; box-shadow: inset 0 0 0 2px var(--brand); }
.fresh { display: flex; align-items: center; gap: 6px; margin: -2px var(--gr) 4px var(--gx); color: var(--ink-2); }
.fresh .ic { width: 16px; height: 16px; stroke-width: 2; color: var(--brand-ink); }
.fresh.old .ic { color: var(--warn); }

/* ---------- prix, pastilles, étiquettes ---------- */
.px { font-family: var(--round); font-weight: 700; font-size: 1.375rem; line-height: 1; letter-spacing: -0.01em; white-space: nowrap; }
.px .pc { display: inline-block; font-size: 0.6em; vertical-align: top; margin-top: 0.1em; margin-left: 0.04em; }
.px.lg { font-size: 2.25rem; letter-spacing: -0.02em; }
.px.sm { font-size: 1.0625rem; font-weight: 600; }
.px.sm .pc { font-size: 1em; vertical-align: baseline; margin: 0; }
.unit { color: var(--ink-2); white-space: nowrap; }
.sticker { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 5px; background: var(--sticker); color: var(--sticker-ink); font: 800 0.875rem/1 var(--round); white-space: nowrap; transform: rotate(-2.5deg); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12); font-variant-numeric: tabular-nums; }
.sticker.lg { height: 30px; font-size: 1rem; padding: 0 10px; }
.tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.tag.sim { box-shadow: inset 0 0 0 1px var(--ink-3); color: var(--ink-2); margin-left: 6px; }
.tag.low { background: var(--sticker); color: var(--sticker-ink); font-weight: 700; }
.tag.lg { height: 26px; padding: 0 9px; font-size: 0.875rem; }
.was { color: var(--ink-2); text-decoration: line-through; text-decoration-thickness: 1.5px; margin-left: 6px; }
.drop { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r-pill); background: var(--brand-tint); color: var(--brand-ink); font: 700 0.75rem/1 var(--round); margin-left: 6px; vertical-align: 2px; }
.badge { position: absolute; left: 8px; top: 8px; height: 24px; padding: 0 10px; border-radius: var(--r-pill); background: var(--card); color: var(--ink); font: 600 0.75rem/24px var(--sans); white-space: nowrap; box-shadow: 0 0 0 1px var(--edge); }
.badge.promo { background: var(--brand-tint); color: var(--brand-ink); box-shadow: none; }
.ret { font-weight: 600; color: var(--brand-ink); }
.mono { width: 36px; height: 36px; border-radius: var(--r-s); background: var(--mono-bg); color: var(--mono-ink); display: grid; place-items: center; font: 600 1rem/1 var(--sans); letter-spacing: 0; flex: none; }
.mono.sm { width: 28px; height: 28px; font-size: 0.8125rem; }
.mono.off { opacity: 0.45; }
.mono .ic { width: 20px; height: 20px; }

/* ---------- stepper et bouton « + » ---------- */
.add, .stepper { position: absolute; z-index: 2; right: 8px; bottom: 8px; height: var(--tap); border-radius: var(--r-pill); box-shadow: var(--sh-1); }
.add { width: var(--tap); display: grid; place-items: center; background: var(--card); color: var(--brand-ink); transition: transform var(--t-1) var(--e-out), background-color var(--t-1); }
.add .ic { width: 22px; height: 22px; stroke-width: 2.6; }
.add:active { background: var(--brand-tint); transform: scale(0.92); }
.add[aria-disabled="true"], .add:disabled { opacity: 0.45; }
.stepper { display: flex; align-items: center; min-width: 124px; background: var(--brand); color: var(--on-brand); }
.stepper button { width: var(--tap); height: var(--tap); display: grid; place-items: center; color: inherit; border-radius: var(--r-pill); transition: background-color var(--t-1); }
.stepper button .ic { width: 20px; height: 20px; stroke-width: 2.6; }
.stepper button:active { background: rgba(0, 0, 0, 0.16); }
.stepper span { flex: 1; min-width: 28px; text-align: center; font: 700 1.0625rem/1 var(--round); }
.stepper span.tick { animation: tick var(--t-1) var(--e-out); }
@keyframes tick { from { transform: translateY(-4px); opacity: 0.4; } }
.stepper.pop { animation: popin var(--t-3) var(--e-spring); transform-origin: right center; }
@keyframes popin { from { transform: scale(0.6); opacity: 0.4; } }
.stepper.flat, .add.flat { position: static; box-shadow: none; }
.add.flat { background: var(--brand); color: var(--on-brand); }
.stepper.soft { background: var(--fill); color: var(--ink); }
.stepper.soft button { color: var(--brand-ink); }
.stepper.soft button:active { background: var(--fill-press); }
.stepper .ic.trash, .stepper.soft .ic.trash { color: var(--promo); }

/* ---------- carte produit et grille ---------- */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px var(--gap-card); padding: 0 var(--gr) 0 var(--gx); }
@media (min-width: 600px) { .grid { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 32px 16px; } }
html[data-text="1.12"] .grid, html[data-text="1.25"] .grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); }
.card { position: relative; display: flex; flex-direction: column; min-width: 0; }
.tile { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: var(--r-m); background: var(--shelf); overflow: hidden; }
.tile .cover { position: absolute; inset: 0; display: block; }
.card .cover::after { content: ""; position: absolute; inset: 0; }
.tile img { position: absolute; left: 7%; top: 6%; width: 86%; height: 86%; transition: transform var(--t-1) var(--e-out); }
.card:active .tile img { transform: scale(0.97); }
.meta { display: block; text-decoration: none; padding: 8px 2px 0; }
.prow { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; }
.where { margin-top: 3px; font-size: 0.875rem; font-weight: 600; color: var(--brand-ink); }
.pname { margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-wrap: pretty; }
.pname b { font-weight: 600; }
.pfmt, .na { margin-top: 2px; color: var(--ink-2); }
.card.off .tile { opacity: 0.7; }

/* ---------- rails horizontaux et bons plans ---------- */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(156px, 42%); gap: var(--gap-card); overflow-x: auto; overscroll-behavior-x: contain; padding: 4px var(--gr) 8px var(--gx); scroll-snap-type: x proximity; scroll-padding: 0 var(--gx); scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
.rail.end { -webkit-mask-image: none; mask-image: none; }
.deals { grid-auto-columns: minmax(296px, 86%); }
.rails { grid-auto-columns: minmax(168px, 44%); }
@media (min-width: 600px) { .rail { grid-auto-columns: 176px; gap: 16px; } .deals { grid-auto-columns: 340px; } .rails { grid-auto-columns: 176px; } }
@media (min-width: 960px) { .rail { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); overflow: visible; -webkit-mask-image: none; mask-image: none; } .rail > :nth-child(n + 11) { display: none; } .deals { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } }
.deal { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: var(--r-m); background: var(--shelf); min-width: 0; }
.deal .dh { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 14px; align-items: center; }
.deal .di { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: var(--r-s); background: var(--card); }
.deal .dtx { min-width: 0; }
.deal .di img { position: absolute; inset: 5%; width: 90%; height: 90%; }
.deal .dt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: var(--tap); text-decoration: none; font-size: 0.9375rem; line-height: 1.33; }
.deal .dt b { font-weight: 600; }
.ladder { list-style: none; display: grid; background: var(--card); border-radius: var(--r-s); padding: 2px 12px; }
.ladder li { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.9375rem; color: var(--ink-2); min-height: 40px; }
.ladder li + li { box-shadow: 0 -1px 0 var(--sep); }
.ladder li.low { color: var(--ink); font-weight: 600; }
.ladder li.nr span:last-child { font-size: 0.875rem; color: var(--ink-2); }
.ladder .num { font-family: var(--round); font-weight: 600; }
.deal .df { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }
.deal .gap { font-size: 0.9375rem; font-weight: 600; }
.deal .gap span { color: var(--brand-ink); }
.df .dsh { margin-left: auto; margin-right: 2px; color: var(--ink-2); }

/* ---------- tuiles de rayon ---------- */
.cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: 16px 10px; padding: 0 var(--gr) 0 var(--gx); }
.cat { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; text-decoration: none; text-align: center; font-size: 0.875rem; font-weight: 600; line-height: 1.2; color: var(--ink); border-radius: var(--r-m); }
.cat .ct { position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: var(--r-m); background: var(--shelf); transition: transform var(--t-1) var(--e-out), background-color var(--t-1); }
.cat:active .ct { transform: scale(0.96); background: var(--fill-press); }
.cat .ct img { position: absolute; inset: 10%; width: 80%; height: 80%; }
.cat .ct.all { display: grid; place-items: center; color: var(--brand-ink); }
.cat .ct.all .ic { width: 30px; height: 30px; stroke-width: 1.8; }
.cat span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cats.big { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
@media (min-width: 600px) { .cats.big { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 960px) { .cats.big { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.cats.big .cat { align-items: stretch; text-align: left; }
.cats.big .cat .ct { aspect-ratio: 4 / 3; }
.cats.big .cat b { font-size: 0.9375rem; font-weight: 600; }
.cats.big .cat small { font-size: 0.875rem; font-weight: 400; color: var(--ink-2); }
.gh.big { scroll-margin-top: calc(var(--st) + var(--nav) + 56px); }

/* ---------- chips et filtres ---------- */
.chips { position: sticky; z-index: 12; top: calc(var(--st) + var(--nav)); display: flex; gap: 8px; overflow-x: auto; padding: 6px var(--gr) 12px var(--gx); background: var(--paper); scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
.chips.end { -webkit-mask-image: none; mask-image: none; }
.chips::-webkit-scrollbar { display: none; }
.chips.stuck { box-shadow: 0 var(--hair) 0 var(--sep); }
body.grouped .chips { background: var(--group); }
.chip { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--tap); min-width: var(--tap); padding: 0 16px; border-radius: var(--r-pill); background: var(--fill); color: var(--ink); font-size: 0.9375rem; font-weight: 500; white-space: nowrap; transition: background-color var(--t-1), color var(--t-1); }
.chip .ic { width: 18px; height: 18px; stroke-width: 2; }
.chip:active { background: var(--fill-press); }
.chip[aria-pressed="true"], .chip[aria-checked="true"] { background: var(--brand); color: var(--on-brand); }
.chip[aria-pressed="true"]::before, .chip[aria-checked="true"]::before { content: ""; width: 7px; height: 12px; margin-right: 2px; border: solid currentColor; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) translate(-1px, -2px); }
.chip .n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill); background: var(--brand); color: var(--on-brand); font: 700 0.75rem/20px var(--round); text-align: center; }
.chip[aria-pressed="true"] .n { background: var(--on-brand); color: var(--brand-ink); }
.tagset { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 var(--g); }
.hero .exrow .chip { background: var(--brand-tint); color: var(--brand-ink); font-weight: 600; }
.hero .exrow .chip:active { background: var(--brand-tint-press); }

/* ---------- contrôle segmenté ---------- */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 3px; border-radius: 12px; background: var(--fill); width: 100%; }
.seg button { min-height: var(--tap); padding: 4px 6px; border-radius: 9px; font-size: 0.9375rem; font-weight: 500; color: var(--ink); line-height: 1.2; transition: background-color var(--t-1); }
.seg button:active { background: var(--fill-press); }
.seg button[aria-checked="true"], .seg button[aria-pressed="true"] { background: var(--card); font-weight: 600; box-shadow: var(--sh-1), 0 0 0 1px var(--edge); }
.seg.tall button { min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.seg.tall small { font-size: 0.875rem; font-weight: 500; color: var(--ink-2); overflow-wrap: anywhere; }
.seg button:disabled { opacity: 0.45; }
.segl { font-size: 0.875rem; color: var(--ink-2); margin-top: 14px; }

/* ---------- taille du texte : « A moins / A plus » ---------- */
.tsize { display: grid; grid-template-columns: var(--tap-lg) minmax(0, 1fr) var(--tap-lg); gap: 12px; align-items: center; padding: 4px 0 2px; width: 100%; }
.tsize .sample { grid-column: 1 / -1; font-size: 1.0625rem; line-height: 1.4; padding: 10px 12px; border-radius: var(--r-s); background: var(--fill); }
.tsize button { width: var(--tap-lg); height: var(--tap-lg); border-radius: var(--r-pill); background: var(--fill); color: var(--brand-ink); font-family: var(--round); font-weight: 700; display: grid; place-items: center; }
.tsize button:first-of-type { font: 700 14px/1 var(--round); }
.tsize button:last-of-type { font: 700 22px/1 var(--round); }
.tsize button:active { background: var(--fill-press); }
.tsize button[aria-disabled="true"] { opacity: 0.45; }
.tsize .cur { text-align: center; font-size: 0.9375rem; font-weight: 600; }
.tsize .dots { display: flex; justify-content: center; gap: 6px; margin-top: 6px; }
.tsize .dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--fill-press); }
.tsize .dots i.on { background: var(--brand); }

/* ---------- listes groupées : lignes de groupe et lignes d'article ---------- */
.group { margin: 0 var(--gr) 0 var(--gx); background: var(--card); border-radius: var(--r-m); overflow: hidden; }
body:not(.grouped) .group { background: var(--group); }
.gh { padding: 26px calc(var(--gr) + 16px) 7px calc(var(--gx) + 16px); font-weight: 600; color: var(--ink-2); }
.gh.big { padding-left: var(--gx); padding-bottom: 10px; color: var(--ink); }
.gf { padding: 8px calc(var(--gr) + 16px) 0 calc(var(--gx) + 16px); color: var(--ink-2); }
.gf.long { font-size: 0.9375rem; color: var(--ink); }
.row { position: relative; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 12px 16px; width: 100%; color: var(--ink); font-size: 1.0625rem; text-align: left; text-decoration: none; transition: background-color var(--t-1); }
.row.th { min-height: 64px; }
.row + .row::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: var(--hair); background: var(--sep); }
.row.th + .row::before, .row.th + .row.th::before { left: 76px; }
a.row:active, button.row:active { background: var(--fill); }
.row .rt { flex: 1; min-width: 0; }
.row > a.rt { display: flex; flex-direction: column; justify-content: center; min-height: var(--tap); margin: -12px 0; padding: 12px 0; text-decoration: none; }
.row .rt small { display: block; margin-top: 2px; color: var(--ink-2); }
.row .val { margin-left: auto; color: var(--ink-2); white-space: nowrap; }
.row .chev { margin-left: auto; width: 20px; height: 20px; color: var(--ink-3); stroke-width: 2.4; flex: none; }
.row .val + .chev { margin-left: 6px; }
.row .chk { margin-left: auto; width: 22px; height: 22px; color: var(--brand-ink); stroke-width: 2.8; flex: none; }
.row .thumb { position: relative; width: 48px; height: 48px; border-radius: var(--r-s); background: var(--shelf); flex: none; }
.row .thumb img { position: absolute; inset: 4%; width: 92%; height: 92%; }
.row .thumb.q { display: grid; place-items: center; color: var(--ink-3); }
.row .thumb.q .ic { width: 22px; height: 22px; }
.row.danger { color: var(--promo); font-weight: 600; justify-content: center; }
.row.link { color: var(--brand-ink); font-weight: 600; }
.row:disabled, .group .row:disabled { opacity: 0.45; cursor: default; }
.row.stack { flex-direction: column; align-items: stretch; gap: 10px; }
.row.stack .seg { width: 100%; }
.row .icbtn { margin-left: auto; color: var(--ink-3); }
.ext { width: 20px; height: 20px; color: var(--ink-3); stroke-width: 2.2; flex: none; }
.row .ext:last-child { margin-left: auto; }
.order, .wlist { container-type: inline-size; }
.item { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 10px 12px; align-items: center; padding: 10px 16px; touch-action: pan-y; transition: transform var(--t-2) var(--e-out); }
/* glisser vers la gauche révèle « Retirer » (96 px, rouge de suppression), clipé par .order tant que la ligne n'a pas glissé */
.item.swipe { transform: translateX(-96px); }
.item .rm { position: absolute; top: 0; bottom: 0; right: -96px; width: 96px; display: grid; place-items: center; background: var(--promo-fill); color: var(--on-promo); font-size: 0.9375rem; font-weight: 600; }
.item::before { content: ""; position: absolute; top: 0; left: 84px; right: 0; height: var(--hair); background: var(--sep); }
.order > .item:first-child::before { display: none; }
.item .thumb { position: relative; width: 56px; height: 56px; border-radius: var(--r-s); background: var(--shelf); }
.item .thumb img { position: absolute; inset: 4%; width: 92%; height: 92%; }
.item .it { min-width: 0; min-height: var(--tap); display: flex; flex-direction: column; justify-content: center; text-decoration: none; }
.item .it b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 400; }
.item .it b strong { font-weight: 600; }
.item .it small { display: block; margin-top: 2px; color: var(--ink-2); }
.item .ir { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.item .ir .lp { font: 600 1.0625rem/1 var(--round); }
.item .stepper { position: static; box-shadow: none; }
.item .acts { display: flex; flex-wrap: wrap; gap: 0 8px; margin: -2px 0 -8px -6px; }
.item .acts .act { margin: 0; }
.item.wli .wq { display: block; color: var(--ink-2); margin-bottom: 1px; }
.item .thumb.q { display: grid; place-items: center; color: var(--ink-3); }
.item .thumb.q .ic { width: 22px; height: 22px; }
.freebox .of .ln { padding-top: 8px; }
.frow { padding-left: var(--g); padding-right: var(--g); min-height: 56px; }
.item.miss .it b { font-weight: 400; }
@container (max-width: 360px) { .item { grid-template-columns: 56px minmax(0, 1fr); } .item .ir { grid-column: 2; flex-direction: row; justify-content: space-between; align-items: center; } }
@media (min-width: 960px) { .item { grid-template-columns: 56px minmax(0, 28rem) auto; justify-content: start; } }

/* ---------- interrupteur, réglages avancés ---------- */
.sw { position: relative; width: 51px; height: 31px; flex: none; margin-left: auto; }
.sw input { position: absolute; inset: -7px 0; opacity: 0; margin: 0; cursor: pointer; }
.sw span { position: absolute; inset: 0; border-radius: 16px; background: var(--sw-off); transition: background-color var(--t-2); pointer-events: none; }
.sw span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12), 0 3px 8px rgba(0, 0, 0, 0.15); transition: transform var(--t-2) var(--e-out); }
.sw input:checked + span { background: var(--sw-on); }
.sw input:checked + span::after { transform: translateX(20px); }
.sw input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
details.adv > summary { list-style: none; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 12px 16px; cursor: pointer; font-size: 1.0625rem; }
details.adv > summary::-webkit-details-marker { display: none; }
details.adv > summary .chev { margin-left: auto; width: 20px; height: 20px; color: var(--ink-3); transition: transform var(--t-2) var(--e-out); }
details.adv[open] > summary .chev { transform: rotate(90deg); }
/* dans un groupe, le bloc replié se sépare des lignes comme une ligne */
.group details.adv { position: relative; }
.group > :not(details) + details.adv::before, .group details.adv > summary + .row::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: var(--hair); background: var(--sep); }

/* ---------- barres de progression ---------- */
.prog { position: relative; height: 8px; margin: 4px var(--g) 0; border-radius: var(--r-pill); background: var(--fill); overflow: hidden; }
.prog.thin { height: 6px; margin: 8px 0 2px; }
.prog span { display: block; height: 100%; border-radius: var(--r-pill); background: var(--brand); transition: width var(--t-4) var(--e-out); }
.prog i { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--ink-3); }
.progl { display: flex; align-items: center; gap: 6px; padding: 8px calc(var(--g) + 2px) 10px; color: var(--ink-2); }
.progl.done { color: var(--brand-ink); font-weight: 600; }
.progl .ic { width: 18px; height: 18px; stroke-width: 2.6; }

/* ---------- cartes d'accueil ---------- */
.hcard { display: flex; align-items: flex-start; gap: 12px; margin: 8px var(--gr) 0 var(--gx); padding: 14px 16px; border-radius: var(--r-m); background: var(--card); color: var(--ink); text-align: left; text-decoration: none; box-shadow: 0 0 0 1px var(--edge); width: auto; }
body:not(.grouped) .hcard { background: var(--shelf); box-shadow: none; }
button.hcard { width: calc(100% - var(--gx) - var(--gr)); }
.hcard .si { width: 26px; height: 26px; color: var(--brand-ink); flex: none; margin-top: 1px; }
.hcard > span { flex: 1; min-width: 0; }
.hcard b { display: block; font-size: 1.0625rem; font-weight: 600; line-height: 1.375rem; }
.hcard small { display: block; margin-top: 2px; color: var(--ink-2); }
.hcard .chev { width: 20px; height: 20px; color: var(--ink-3); stroke-width: 2.2; margin-top: 3px; flex: none; }
.hcard .x, .banner .x { width: var(--tap); height: var(--tap); margin: -12px -12px -12px 0; display: grid; place-items: center; color: inherit; border-radius: var(--r-pill); flex: none; }
.hcard .btn.sm { margin-top: 10px; }
.hcard .icbtn { flex: none; margin: -8px -10px -8px 0; }
.hcard.tint { background: var(--brand-tint); box-shadow: none; }
.hcard.tint b, .hcard.tint .si, .hcard.tint .big { color: var(--brand-ink); }
.hcard.tint small { color: var(--brand-ink); opacity: 0.9; }
.hcard.hero { flex-direction: column; gap: 4px; }
.hcard.hero .big { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; }
.hcard.hero .lab { font-size: 0.875rem; color: var(--ink-2); }
a.hcard:active, button.hcard:active { background: var(--fill); }
.hcard.list { flex-direction: column; gap: 0; padding: 6px 16px 4px; }
.hcard.list h2 { font-size: 1.0625rem; font-weight: 600; padding: 8px 0 4px; }
.hcard .stack { display: flex; margin-bottom: 6px; }
.hcard .stack span { position: relative; width: 48px; height: 48px; border-radius: var(--r-s); background: var(--shelf); margin-right: -10px; box-shadow: 0 0 0 2px var(--card); }
.hcard .stack img { position: absolute; inset: 4%; width: 92%; height: 92%; }
.hcard .btns { margin-top: 12px; width: 100%; }
.hcard.col { flex-direction: column; gap: 6px; }
.hcard .hl { flex: 1; min-width: 0; min-height: var(--tap); display: flex; flex-direction: column; justify-content: center; margin: -8px 0; padding: 8px 0; color: inherit; text-decoration: none; border-radius: var(--r-s); }
.orow { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 0; width: 100%; }
.orow + .orow { border-top: var(--hair) solid var(--sep); }
.orow .rt { flex: 1; min-width: 0; font-size: 1.0625rem; }
.orow .rt small { display: block; color: var(--ink-2); font-size: 0.875rem; line-height: 1.1875rem; }
.orow .btn.sm { width: var(--tap); padding: 0; }
.orow .btn .ic { width: 20px; height: 20px; }

/* ---------- bannières, budget ---------- */
.banner { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; align-items: start; margin: 12px var(--gr) 0 var(--gx); padding: 14px 14px 14px 16px; border-radius: var(--r-m); background: var(--fill); color: var(--ink); line-height: 1.25rem; }
.banner .ic { width: 24px; height: 24px; color: var(--brand-ink); margin-top: -1px; }
.banner b { display: block; font-size: 1.0625rem; font-weight: 600; line-height: 1.375rem; margin-bottom: 2px; }
.banner .btn.sm, .banner .act { margin-top: 10px; grid-column: 2; justify-self: start; }
.banner.good { background: var(--brand-tint); color: var(--brand-ink); }
.banner.good .ic { color: var(--brand-ink); }
.banner.warn { background: var(--warn-bg); color: var(--warn); }
/* courses d'un proche : deux actions sous le texte du bandeau ; un mot écrit par une personne garde ses retours à la ligne */
.banner .bacts { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.banner .bacts .btn.sm { margin-top: 0; grid-column: auto; }
.note { white-space: pre-line; overflow-wrap: anywhere; }
.banner .bmot { display: block; margin-top: 8px; }
.order.duo .of .ln:first-child { margin-top: 0; }
.banner.warn .ic { color: var(--warn); }
/* budget : ce qu'il reste ou le dépassement, une barre, puis « Tenir le budget » et « Modifier » */
.bud { display: grid; gap: 6px; margin-top: 10px; padding: 10px 12px 8px; border-radius: var(--r-s); background: var(--fill); color: var(--ink); font-size: 0.9375rem; line-height: 1.33; font-weight: 600; }
.bud.ok { background: var(--brand-tint); color: var(--brand-ink); }
.bud.over { background: var(--warn-bg); color: var(--warn); }
.bud .bt small { display: block; margin-top: 2px; font-size: 0.875rem; line-height: 1.1875rem; font-weight: 400; }
.bud .prog.thin { margin: 2px 0; background: var(--card); }
.bud.over .prog span { background: var(--warn); }
.bacts { display: flex; flex-wrap: wrap; gap: 0 16px; }
.bud .act { margin: 0 0 0 -6px; color: inherit; }

/* ---------- dock, mini panier, barre d'achat ---------- */
.dock { position: fixed; z-index: 25; left: var(--side); right: 0; bottom: calc(var(--sb) + var(--tab)); padding: 8px calc(8px + var(--sr)) 8px calc(8px + var(--sl)); pointer-events: none; }
.dock > * { pointer-events: auto; }
.dock .wrap { max-width: 720px; }
.dock.in { animation: dockin var(--t-3) var(--e-out); }
@keyframes dockin { from { opacity: 0; transform: translateY(12px); } }
.mini { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 16px 0 10px; border-radius: var(--r-m); background: var(--brand); color: var(--on-brand); text-decoration: none; box-shadow: var(--sh-2); transition: background-color var(--t-1), transform var(--t-1) var(--e-out); }
.mini:active { background: var(--brand-press); transform: scale(0.99); }
button.mini { width: 100%; text-align: left; }
.mini .mn { min-width: 36px; height: 36px; padding: 0 8px; border-radius: var(--r-s); background: var(--mini-count); display: grid; place-items: center; font: 700 1rem/1 var(--round); }
.mini .ml { flex: 1; font-size: var(--chrome-fs); font-weight: 600; }
.mini .ml small { display: block; font-size: 0.875rem; font-weight: 500; opacity: 0.9; }
.mini .mp { font: 700 1.125rem/1 var(--round); }
/* la page a déjà son bouton plein : le mini panier reste là, en teinte */
.mini.soft { background: var(--brand-tint); color: var(--brand-ink); box-shadow: var(--sh-2), inset 0 0 0 1.5px var(--ctl-line); }
.mini.soft:active { background: var(--brand-tint-press); }
.mini.soft .mn { background: var(--brand); color: var(--on-brand); }
.buybar { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--r-l); background: var(--nav-bg); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: var(--sh-2), 0 0 0 1px var(--edge); }
.buybar .btn { flex: 1; min-height: var(--tap-lg); }
.buybar .stepper { position: static; min-height: var(--tap-lg); border-radius: var(--r-m); box-shadow: none; }
.buybar .stepper button { width: 48px; height: 48px; }

/* ---------- fiche produit ---------- */
.pdp { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.pdp > * { min-width: 0; }
.pimg { position: relative; margin: 4px var(--gr) 0 var(--gx); aspect-ratio: 1 / 1; max-height: 50vh; border-radius: var(--r-l); background: var(--shelf); overflow: hidden; }
.pimg img { position: absolute; left: 50%; top: 50%; height: 88%; aspect-ratio: 1 / 1; max-width: 88%; transform: translate(-50%, -50%); }
.pimg .badge { left: 12px; top: 12px; }
.ph { padding: 18px var(--gr) 0 var(--gx); }
.ph .pb { font-size: 0.9375rem; font-weight: 600; color: var(--ink-2); }
.ph h1 { margin-top: 2px; }
.ph .pf { font-size: 0.9375rem; color: var(--ink-2); margin-top: 5px; }
.pprice { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin-top: 16px; }
.pprice .px { font-size: 2.25rem; letter-spacing: -0.02em; }
.pprice .pw { font-size: 0.9375rem; color: var(--ink-2); width: 100%; margin-top: 2px; }
.pprice .pw b { color: var(--brand-ink); font-weight: 600; }
.pinline { display: none; margin-top: 18px; max-width: 420px; }
.offer { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.offer .on { font-size: 1.0625rem; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.offer .os { display: block; color: var(--ink-2); margin-top: 2px; overflow-wrap: anywhere; }
.offer .op { text-align: right; }
.offer .op .px { font-size: 1.0625rem; font-weight: 600; }
.offer .op .px .pc { font-size: 1em; vertical-align: baseline; margin: 0; }
.offer .op .unit { display: block; margin-top: 3px; }
.offer .promo { color: var(--promo); font-weight: 500; font-size: 0.875rem; }
.offer.off { opacity: 0.55; }
.spec { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0 16px; }
.spec dt, .spec dd { padding: 11px 0; font-size: 0.9375rem; border-top: var(--hair) solid var(--sep); }
.spec dt { color: var(--ink-2); padding-left: 16px; }
.spec dd { padding-right: 16px; }
.spec dt:first-of-type, .spec dt:first-of-type + dd { border-top: 0; }

/* ---------- panier ---------- */
.sum { margin: 0 var(--gr) 0 var(--gx); padding: 18px 16px 16px; border-radius: var(--r-m); background: var(--card); }
.sum .sl { font-size: 0.9375rem; color: var(--ink-2); }
.sum .st { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.sum .st .px { font-size: 2.75rem; font-weight: 800; letter-spacing: -0.02em; }
.sum .sh2 { font-size: 1.0625rem; font-weight: 600; margin-top: 8px; }
.sum .sv { font-size: 0.9375rem; color: var(--brand-ink); font-weight: 600; margin-top: 6px; }
.sum .sn { font-size: 0.875rem; line-height: 1.1875rem; color: var(--ink-2); margin-top: 8px; }
.sum .seg { margin-top: 16px; }
.sum.part .st .px { color: var(--ink-2); }
.sum .alt { margin-top: 14px; padding: 12px 14px; border-radius: var(--r-s); background: var(--brand-tint); color: var(--brand-ink); font-size: 0.9375rem; line-height: 1.33; }
.sum .alt b { font-weight: 700; }
.sum .alt .btn { margin-top: 10px; }
.sum .alt .btns.two { margin-top: 10px; }
.sum .alt .btns.two .btn { margin-top: 0; }
.sum .optrow { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: var(--hair) solid var(--sep); }
.sum .optrow .ot { flex: 1; font-size: 1.0625rem; }
.sum .optrow .ot small { display: block; font-size: 0.875rem; line-height: 1.1875rem; color: var(--ink-2); }
.sum .segl { margin-top: 14px; }
.sum.loading .st .px, .sum.loading .sh2 { opacity: 0.35; }
.sum .btns { margin-top: 12px; }
.order { margin: 14px var(--gr) 0 var(--gx); border-radius: var(--r-m); background: var(--card); overflow: hidden; }
.oh { display: flex; align-items: center; gap: 12px; padding: 14px 16px 10px; }
.oh .rt { flex: 1; min-width: 0; }
.oh small { display: block; color: var(--ink-2); margin-top: 1px; }
.of { padding: 4px 16px 14px; }
.of .ln { display: flex; justify-content: space-between; gap: 10px; font-size: 0.9375rem; color: var(--ink-2); padding: 4px 0; }
.of .ln.tot { color: var(--ink); font-weight: 600; font-size: 1.0625rem; padding-top: 8px; margin-top: 4px; border-top: var(--hair) solid var(--sep); }
.of .hint { color: var(--brand-ink); margin-top: 6px; }
.of .hint.muted { color: var(--ink-2); }
.of .btn { margin-top: 12px; }
.of .acts { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; }
.of .btn.tint .ic { width: 18px; height: 18px; }
/* prix d'une ligne : il ouvre « Où le prendre » (autres enseignes, épingler, exclure, équivalents) */
.item .ir .lpb { display: inline-flex; align-items: center; gap: 2px; min-height: var(--tap); padding: 0 4px 0 8px; margin-right: -4px; border-radius: var(--r-s); color: var(--ink); }
.item .ir .lpb .ic { width: 16px; height: 16px; color: var(--ink-2); stroke-width: 2.4; }
.item .ir .lpb:active { background: var(--fill); }
@media (min-width: 960px) { .item .ir { gap: 2px; } }
.item .it small.inote { display: flex; align-items: flex-start; gap: 4px; color: var(--brand-ink); }
.item .inote .ic { width: 14px; height: 14px; flex: none; margin-top: 2px; stroke-width: 2.4; }
.order.inset { margin: 0 var(--g); box-shadow: 0 0 0 1px var(--edge); }
.cview { padding-top: 14px; }
.cartcols .cview { padding-top: 0; }
/* tableau du panier : la colonne des produits reste en place, les enseignes défilent de côté */
.tblh { padding-top: 14px; }
.ctbl { position: relative; margin: 8px var(--gr) 0 var(--gx); overflow-x: auto; overscroll-behavior-x: contain; border-radius: var(--r-m); background: var(--card); }
.ctbl:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.ctbl table { border-collapse: separate; border-spacing: 0; min-width: 100%; font-size: 0.9375rem; line-height: 1.25; }
.ctbl th, .ctbl td { padding: 10px 12px; text-align: right; vertical-align: top; white-space: nowrap; border-top: var(--hair) solid var(--sep); font-variant-numeric: tabular-nums; }
.ctbl thead th { border-top: 0; font-weight: 600; color: var(--ink); vertical-align: bottom; white-space: normal; min-width: 6rem; max-width: 9rem; }
.ctbl small { display: block; margin-top: 2px; font-size: 0.875rem; line-height: 1.1875rem; color: var(--ink-2); font-weight: 400; }
.ctbl th[scope="row"], .ctbl th.pc { position: sticky; left: 0; z-index: 1; min-width: 9.5rem; max-width: 12.5rem; text-align: left; white-space: normal; overflow-wrap: anywhere; font-weight: 600; background: var(--card); box-shadow: 1px 0 0 var(--sep); }
.ctbl td.on { background: var(--brand-tint); color: var(--brand-ink); font-weight: 700; }
.ctbl td.on .ic { width: 14px; height: 14px; stroke-width: 3; vertical-align: -1px; margin-right: 3px; }
.ctbl td.on small { color: var(--brand-ink); }
.ctbl td.na { color: var(--ink-2); }
.ctbl tfoot th, .ctbl tfoot td { font-weight: 600; }
/* Et si : un scénario par ligne, son total exact et « Appliquer » */
details.wif { margin: 28px var(--gr) 0 var(--gx); background: var(--card); border-radius: var(--r-m); overflow: hidden; }
details.wif > summary .rt { flex: 1; min-width: 0; font-weight: 600; }
details.wif > summary .rt small { display: block; margin-top: 2px; color: var(--ink-2); font-size: 0.875rem; line-height: 1.1875rem; font-weight: 400; }
details.wif > summary:active { background: var(--fill); }
#wif > .sn { padding: 0 16px 14px; font-size: 0.875rem; color: var(--ink-2); }
.row.wifr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: start; }
.row.wifr .rt { grid-row: 1 / span 2; }
.row.wifr .val { margin: 0; justify-self: end; font: 600 1.0625rem/1.3 var(--round); color: var(--ink); }
.row.wifr .btn { justify-self: end; }
.row.wifr.cur { background: var(--group); }
.row.wifr.cur .rt { grid-row: auto; }
/* Compléter malin : le produit, son prix chez l'enseigne, ce que devient le total */
.tup { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 8px 12px; align-items: start; padding: 12px 16px; }
.tup + .tup::before { content: ""; position: absolute; top: 0; left: 76px; right: 0; height: var(--hair); background: var(--sep); }
.tup .thumb { position: relative; width: 48px; height: 48px; border-radius: var(--r-s); background: var(--shelf); }
.tup .thumb img { position: absolute; inset: 4%; width: 92%; height: 92%; }
.tup .tt b { display: block; font-size: 0.9375rem; line-height: 1.33; font-weight: 400; overflow-wrap: anywhere; }
.tup .tt b strong { font-weight: 600; }
.tup .tt small { display: block; margin-top: 2px; font-size: 0.875rem; line-height: 1.1875rem; color: var(--ink-2); }
.tup .tt .eff { color: var(--ink); font-weight: 600; }
.tup.good .tt .eff { color: var(--brand-ink); }
.tup .btn { grid-column: 2; justify-self: start; }
.ihead { padding-top: 4px; }
.group.eqs { margin-top: 12px; }

/* ---------- état vide ---------- */
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; max-width: 360px; margin: 0 auto; padding: 56px 32px 24px; }
.empty .art { position: relative; width: 136px; height: 136px; border-radius: var(--r-l); background: var(--shelf); display: grid; place-items: center; margin-bottom: 8px; animation: rise var(--t-3) var(--e-out); }
body.grouped .empty .art { background: var(--card); }
.empty .art img { width: 70%; height: 70%; }
.empty .art .fan { position: absolute; inset: 0; }
.empty .art .fan img { position: absolute; left: 22%; top: 22%; width: 56%; height: 56%; }
.empty .art .fan img:nth-child(1) { transform: rotate(-10deg) translateX(-18%); }
.empty .art .fan img:nth-child(3) { transform: rotate(10deg) translateX(18%); }
.empty .art .ic { width: 56px; height: 56px; stroke-width: 1.8; color: var(--brand-ink); }
.empty p { color: var(--ink-2); max-width: 32ch; }
.empty .btn { margin-top: 8px; width: auto; min-width: 220px; }
.empty .btn + .btn { margin-top: 0; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
.foot { color: var(--ink-2); text-align: center; padding: 30px calc(var(--g) + 12px) 6px; }

/* ---------- feuille du bas ---------- */
.sheetw { position: fixed; inset: 0; z-index: 50; }
.scrim { position: absolute; inset: 0; background: var(--scrim); animation: fade var(--t-2) var(--e-out); }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; max-height: calc(100% - var(--st) - 24px); background: var(--sheet-bg); border-radius: var(--r-l) var(--r-l) 0 0; padding-bottom: var(--sb); box-shadow: var(--sh-3); animation: up var(--t-3) var(--e-out); touch-action: pan-y; }
.sheet.drag { transition: none; }
.sheet.closing { transition: transform var(--t-2) var(--e-in); }
.grabz { flex: none; height: 24px; display: grid; place-items: center; }
.grab { width: 36px; height: 5px; border-radius: 3px; background: var(--fill-press); }
.sheet-h { flex: none; display: grid; grid-template-columns: minmax(44px, 1fr) auto minmax(44px, 1fr); align-items: center; min-height: 56px; padding: 0 8px; }
.sheet-h h2 { text-align: center; padding: 0 4px; outline: none; }
.sheet-h > :first-child { justify-self: start; }
.sheet-h > :last-child { justify-self: end; }
.sheet-h .icbtn { color: var(--ink-2); }
.sheet-h .txtbtn:last-child { font-weight: 600; }
.sheet-b { position: relative; overflow-y: auto; overscroll-behavior: contain; padding: 4px 0 24px; -webkit-overflow-scrolling: touch; }
.sheet-b.more-bot { -webkit-mask-image: linear-gradient(#000 calc(100% - 28px), transparent); mask-image: linear-gradient(#000 calc(100% - 28px), transparent); }
.sheet-b.more-top { -webkit-mask-image: linear-gradient(transparent, #000 28px); mask-image: linear-gradient(transparent, #000 28px); }
.sheet-b.more-top.more-bot { -webkit-mask-image: linear-gradient(transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(transparent, #000 28px, #000 calc(100% - 28px), transparent); }
.sheet-b > p { padding: 0 calc(var(--g) + 4px) 12px; color: var(--ink); }
.sheet-f { flex: none; display: flex; gap: 10px; padding: 12px var(--g); box-shadow: 0 -1px 0 var(--sep); background: var(--sheet-bg); }
.sheet-f .btn { flex: 1; }
.sheet-f .btn.sm, .sheet-f .btn.ghost { flex: 0 0 auto; }
.sheet .group { background: var(--group); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sheet .group { background: var(--fill); } }
:root[data-theme="dark"] .sheet .group { background: var(--fill); }
.sheet .gh { padding-top: 18px; }
.sheet .pad { padding-left: var(--g); padding-right: var(--g); }
@keyframes up { from { transform: translateY(100%); } }
@media (min-width: 600px) {
  .sheet { left: 50%; right: auto; bottom: auto; top: 50%; width: min(480px, calc(100% - 48px)); max-height: 82vh; border-radius: var(--r-l); padding-bottom: 0; transform: translate(-50%, -50%); box-shadow: var(--sh-2); animation: popc var(--t-2) var(--e-out); }
  @keyframes popc { from { opacity: 0; transform: translate(-50%, -50%) scale(0.98); } }
  .grabz { display: none; }
}
/* options cochables : case ronde sans icône tant qu'elle n'est pas cochée, disque pour un choix unique */
.opt { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 16px; width: 100%; text-align: left; font-size: 1.0625rem; position: relative; color: var(--ink); }
.opt + .opt::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: var(--hair); background: var(--sep); }
.opt:active { background: var(--fill); }
.opt > span:first-child { flex: 1; min-width: 0; }
.opt .c { margin-left: auto; font-size: 0.9375rem; color: var(--ink-2); }
.opt .c + .box { margin-left: 10px; }
.box { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--ink-3); flex: none; display: grid; place-items: center; color: var(--on-brand); background: transparent; transition: background-color var(--t-1), border-color var(--t-1); }
.box .ic { width: 15px; height: 15px; stroke-width: 3; opacity: 0; transform: scale(0.6); transition: opacity var(--t-1), transform var(--t-2) var(--e-spring); }
[aria-checked="true"] > .box, .gi.on .box { background: var(--brand); border-color: var(--brand-ink); }
[aria-checked="true"] > .box .ic, .gi.on .box .ic { opacity: 1; transform: none; }
[role="radio"] .box .ic { display: none; }
[role="radio"] .box::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--on-brand); opacity: 0; transition: opacity var(--t-1); }
[role="radio"][aria-checked="true"] .box::after { opacity: 1; }
/* la façon de faire ses courses (panier, réglages, questions de départ, envoi à un proche) : quatre options, chacune
   avec son total dans le panier ou ce qu'elle fait ailleurs */
.opt.hw { min-height: 60px; }
.opt.hw b { display: block; font-weight: 600; }
.opt.hw small { display: block; font-size: 0.875rem; line-height: 1.1875rem; color: var(--ink-2); margin-top: 2px; }
.sum .howbox { margin: 16px -16px 0; border-top: var(--hair) solid var(--sep); }
.sum .howbox .segl { margin: 12px 16px 0; }
.sum .group.hw { margin: 2px 0 0; background: transparent; border-radius: 0; }
.gh.shoph small { display: block; font-weight: 400; font-size: 0.875rem; line-height: 1.1875rem; color: var(--ink-2); margin-top: 2px; }
.opt.alt { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 26px; gap: 10px; padding: 8px 16px; font-size: 0.9375rem; }
.opt.alt + .opt.alt::before { left: 66px; }
.opt.alt .thumb, .swp .thumb { position: relative; width: 40px; height: 40px; border-radius: var(--r-s); background: var(--shelf); }
.opt.alt .thumb img, .swp .thumb img { position: absolute; inset: 4%; width: 92%; height: 92%; }
.opt.alt .at { min-width: 0; line-height: 1.33; }
.opt.alt .at b { font-weight: 600; }
.opt.alt .at small { display: block; font-size: 0.875rem; line-height: 1.1875rem; color: var(--ink-2); margin-top: 1px; }
.opt.alt .ap { font-family: var(--round); font-weight: 600; }
.opt.alt .box { margin-left: 0; }
.steps { list-style: none; display: grid; gap: 14px; padding: 4px var(--g) 8px; counter-reset: s; }
.steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 1.0625rem; line-height: 1.4; counter-increment: s; }
.steps li::before { content: counter(s); width: 28px; height: 28px; border-radius: 50%; background: var(--brand-tint); color: var(--brand-ink); font-weight: 700; font-size: 0.875rem; display: grid; place-items: center; }
.steps .ic { display: inline-block; vertical-align: -4px; width: 20px; height: 20px; color: var(--brand-ink); }

/* ---------- toast ---------- */
.toast { position: fixed; z-index: 60; left: 50%; bottom: calc(var(--sb) + var(--tab) + var(--dock-h) + 12px); transform: translateX(-50%); display: flex; align-items: center; gap: 8px; min-height: 48px; width: max-content; max-width: calc(100% - 32px); padding: 10px 18px; border-radius: var(--r-pill); background: var(--toast-bg); color: #fff; font-size: 0.9375rem; font-weight: 500; line-height: 1.25rem; box-shadow: var(--sh-2); animation: toastin var(--t-2) var(--e-out); }
.toast .ic { width: 18px; height: 18px; color: var(--toast-link); stroke-width: 2.4; }
.toast button { min-height: var(--tap); margin: -10px -8px -10px 4px; padding: 0 10px; color: var(--toast-link); font-weight: 700; white-space: nowrap; border-radius: var(--r-pill); }
body.has-sheet .toast { bottom: calc(var(--sb) + 92px); z-index: 61; }
@keyframes toastin { from { opacity: 0; transform: translate(-50%, 8px); } }

/* ---------- première visite, comment ça marche ---------- */
.hero { padding: 4px var(--gr) 14px var(--gx); }
.hero h1 { margin: 0 0 10px; max-width: 30ch; }
.hero .lede { font-size: 1.0625rem; line-height: 1.4; color: var(--ink-2); margin: 0 0 16px; }
.hero .btn { margin-bottom: 14px; }
.hero .try { color: var(--ink-2); margin: 0 0 8px; }
.hero .exrow { display: flex; flex-wrap: wrap; gap: 8px; }
.hero .trust { color: var(--ink-2); margin: 16px 0 0; }
.how { padding: 4px var(--gr) 6px var(--gx); }
.step { display: flex; gap: 14px; padding: 12px 0; }
.step + .step { border-top: var(--hair) solid var(--sep); }
.step .sn { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: var(--on-brand); font-family: var(--round); font-weight: 700; font-size: 0.9375rem; display: grid; place-items: center; margin-top: 1px; }
.step b { display: block; font-size: 1.0625rem; font-weight: 600; line-height: 1.375rem; }
.step p { margin: 3px 0 0; font-size: 0.9375rem; line-height: 1.33; color: var(--ink-2); }
.prose { padding: 0 calc(var(--g) + 4px); font-size: 1.0625rem; line-height: 1.4; color: var(--ink); display: grid; gap: 10px; }
.group .prose { padding: 12px 16px; }
/* « À venir » de « Comment ça marche » : une ligne par projet, son monogramme, ce qui existe aujourd'hui en dessous */
.soonl { list-style: none; }
.row.soon { align-items: flex-start; }
.row.soon .mono { margin-top: 1px; }
.row.soon .rt b { display: block; font-weight: 600; }
.row.soon .rt small { max-width: 62ch; }
.row.soon .rt .now { margin-top: 6px; color: var(--ink); }
.row.soon::before { content: ""; position: absolute; top: 0; left: 64px; right: 0; height: var(--hair); background: var(--sep); }
.soonl + .row::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: var(--hair); background: var(--sep); }
#avenir { scroll-margin-top: calc(var(--st) + var(--nav) + 8px); }

/* ---------- remplacements, commande guidée, liste pour le magasin ---------- */
.swr { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; width: 100%; padding: 12px 16px; text-align: left; color: var(--ink); }
.swr + .swr::before { content: ""; position: absolute; top: 0; left: 54px; right: 0; height: var(--hair); background: var(--sep); }
.swr .box { margin-top: 7px; }
.swb { display: grid; gap: 6px; min-width: 0; }
.swp { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; align-items: center; }
.swp:not(.to) { opacity: 0.55; }
.swt { min-width: 0; font-size: 0.9375rem; line-height: 1.33; }
.swt b { font-weight: 600; }
.swt small { display: block; font-size: 0.875rem; line-height: 1.1875rem; color: var(--ink-2); }
.sws { font-size: 0.875rem; font-weight: 600; color: var(--brand-ink); padding-left: 50px; }
.swfoot { display: grid; gap: 8px; width: 100%; }
.swfoot span { font-size: 0.875rem; color: var(--ink-2); text-align: center; }
.swfoot b { color: var(--brand-ink); font-weight: 700; }
.gi { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr) 20px; gap: 12px; align-items: center; padding: 10px 16px; min-height: 52px; }
.gi + .gi::before { content: ""; position: absolute; top: 0; left: 54px; right: 0; height: var(--hair); background: var(--sep); }
.gi .gt { min-width: 0; color: var(--ink); text-decoration: none; min-height: var(--tap); display: flex; flex-direction: column; justify-content: center; }
.gi .gt b { display: block; font-size: 0.9375rem; font-weight: 400; line-height: 1.33; }
.gi .gq { font-weight: 700; }
.gi .gt small { display: block; font-size: 0.875rem; line-height: 1.1875rem; color: var(--ink-2); margin-top: 1px; overflow-wrap: anywhere; }
.gi.on .gt { opacity: 0.45; }

/* ---------- repas ---------- */
.rcard { display: flex; flex-direction: column; gap: 3px; padding: 12px; border-radius: var(--r-m); background: var(--shelf); color: var(--ink); text-decoration: none; min-width: 0; }
.rcard .stack { display: flex; margin-bottom: 8px; }
.rcard .stack span { position: relative; width: 44px; height: 44px; border-radius: var(--r-s); background: var(--card); margin-right: -9px; box-shadow: 0 0 0 2px var(--shelf); }
.rcard .stack img { position: absolute; inset: 4%; width: 92%; height: 92%; }
.rcard b { font-size: 0.9375rem; font-weight: 600; line-height: 1.33; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5rem; }
.rcard .rp { font-size: 0.9375rem; font-weight: 600; color: var(--brand-ink); }
.rcard small { font-size: 0.875rem; color: var(--ink-2); }
.rcard .skl { background: var(--card); margin: 0; }
.rcard b.skl { height: 1.25rem; min-height: 1.25rem; width: 82%; margin: 2px 0 1.25rem; }
.rcard .rp.skl { height: 0.875rem; margin: 3px 0; }
.rcard small.skl { height: 0.75rem; margin: 2px 0 1px; width: 70%; }
.rsum { margin-top: 4px; }
.rsum .seg { margin-top: 6px; }

/* ---------- historique des prix, scanner ---------- */
.hist { padding: 12px 16px; }
.hist svg { display: block; width: 100%; height: auto; }
.hax { display: flex; justify-content: space-between; font-size: 0.875rem; color: var(--ink-2); margin-top: 2px; }
.hleg { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 0.875rem; color: var(--ink-2); }
.hleg i { display: inline-block; width: 12px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: 3px; }
.hnote { font-size: 0.875rem; line-height: 1.1875rem; color: var(--ink-2); margin-top: 6px; }
.scanbox { position: relative; margin: 4px var(--gr) 0 var(--gx); aspect-ratio: 4 / 3; border-radius: var(--r-l); background: #111; overflow: hidden; }
.scanbox video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scanguide { position: absolute; left: 12%; right: 12%; top: 30%; bottom: 30%; border: 2px solid rgba(255, 255, 255, 0.85); border-radius: var(--r-s); box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.28); }
.scst { color: var(--ink-2); padding: 8px var(--gx) 0; min-height: 1.1875rem; }
.scanr { margin: 12px var(--gr) 0 var(--gx); background: var(--card); }
.scanr .scn { font-size: 0.9375rem; line-height: 1.33; }
.scanr .scn small { display: block; font-size: 0.875rem; line-height: 1.1875rem; color: var(--ink-2); margin-top: 2px; }
.scanr .sn { font-size: 0.875rem; line-height: 1.1875rem; color: var(--ink-2); }
.shelf { display: flex; align-items: center; gap: 8px; font-size: 0.9375rem; color: var(--ink-2); }
.shelf input { width: 96px; min-height: var(--tap); padding: 0 10px; border: 0; border-radius: var(--r-s); background: var(--group); font-size: 1.0625rem; color: var(--ink); text-align: right; -webkit-appearance: none; appearance: none; }
.shelf input:focus { outline: none; box-shadow: 0 0 0 2px var(--brand) inset; }

/* ---------- squelettes ---------- */
.sk { aspect-ratio: 1 / 1; border-radius: var(--r-m); background: var(--shelf); }
.skl { height: 15px; margin-top: 10px; border-radius: var(--r-pill); background: var(--shelf); }
.skl.s { width: 60%; }
.sk.bar { aspect-ratio: auto; height: 48px; }
.sk.card { aspect-ratio: auto; height: 64px; margin: 8px var(--gr) 0 var(--gx); }
@media (prefers-reduced-motion: no-preference) { .sk, .skl { animation: pulse 1.3s ease-in-out infinite; } @keyframes pulse { 50% { opacity: 0.55; } } }

/* ---------- barre latérale, grands écrans ---------- */
.side { display: none; }
/* ---------- ordinateur : survol à la souris ou au pavé (jamais au doigt, où il resterait collé après le geste) ---------- */
@media (hover: hover) and (pointer: fine) {
  .btn:not(:disabled):hover { background: var(--brand-press); }
  .btn.tint:not(:disabled):hover, .mini.soft:hover { background: var(--brand-tint-press); }
  .btn.ghost:not(:disabled):hover, .act:hover, .back:hover, .txtbtn:hover, .icbtn:hover, .row:not(:disabled):is(a, button):hover, .row > a.rt:hover, .opt:hover, .gi .gt:hover, .search:hover { background: var(--fill); }
  .btn.plain:not(:disabled):hover, .chip:not([aria-pressed="true"]):not([aria-checked="true"]):hover { background: var(--fill-press); }
  .btn.danger:not(:disabled):hover { filter: brightness(0.92); }
  .mini:not(.soft):hover { background: var(--brand-press); }
  .hcard:is(a, button):hover, .deal:hover { box-shadow: var(--sh-2); }
  .cat:hover .ct { background: var(--fill-press); }
  .card:hover .tile img { transform: scale(1.03); }
  .add:hover { background: var(--brand-tint); }
  .stepper:not(.soft) button:hover { background: rgba(0, 0, 0, 0.12); }
  .stepper.soft button:hover { background: var(--fill-press); }
  .gf a:hover, .foot a:hover, .sn a:hover, .hint a:hover, .trust a:hover, .prose a:hover { text-decoration-thickness: 2.5px; }
  .tab:hover { color: var(--ink); }
}
@media (min-width: 960px) {
  .tabbar, .dock { display: none; }
  .side { display: flex; flex-direction: column; gap: 2px; position: fixed; z-index: 31; inset: 0 auto 0 0; width: var(--side); padding: 20px 12px; background: var(--group); box-shadow: 1px 0 0 var(--sep); }
  .side .wordmark { font-size: 1.625rem; padding: 0 10px 18px; }
  .side .wordmark svg { width: 32px; height: 32px; }
  .sitem { position: relative; display: flex; align-items: center; gap: 12px; min-height: var(--tap); padding: 0 12px; border-radius: var(--r-s); text-decoration: none; color: var(--ink); font-size: 0.9375rem; font-weight: 500; }
  .sitem .ic { width: 24px; height: 24px; color: var(--brand-ink); }
  .sitem .on { display: none; }
  .sitem:hover { background: var(--fill); }
  .sitem[aria-current="page"] { background: var(--brand-tint); color: var(--brand-ink); font-weight: 600; }
  .sitem[aria-current="page"] .on { display: block; }
  .sitem[aria-current="page"] .off { display: none; }
  .sitem[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--brand); }
  .sitem .bdg { position: static; margin-left: auto; box-shadow: none; }
  .side .smini { margin-top: auto; }
  .side .mini { min-height: auto; padding: 12px 14px; flex-wrap: wrap; gap: 4px 10px; }
  .side .mini .ml { font-size: 0.9375rem; }
  .view, .view.docked { padding-bottom: 48px; }
  .toast { bottom: 32px; left: calc(50% + var(--side) / 2); }
  .pdp { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); align-items: start; column-gap: 8px; padding-top: 8px; }
  .pdp .pimg { max-height: none; grid-column: 1; grid-row: 1 / span 2; position: sticky; top: calc(var(--nav) + 12px); }
  .pdp .pinline { display: block; }
  .pinline .buybar { padding: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav .wordmark { display: none; }
  .view .srow:first-of-type { padding-top: 10px; }
  .pdp .pmain { grid-column: 2; grid-row: 1; }
  .pdp .pmore { grid-column: 2; grid-row: 2; }
  .pdp .pfull { grid-column: 1 / -1; }
  .pdp .ph { padding-top: 6px; }
  .cartcols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 0 4px; align-items: start; }
  .cartcols .cside { position: sticky; top: calc(var(--nav) + 12px); grid-column: 2; grid-row: 1 / span 4; }
  .cartcols .cmain { grid-column: 1; }
  .cartcols .order:first-child { margin-top: 0; }
}

/* ---------- rayons par univers, régime, détails progressifs ---------- */
details.univ > summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 22px var(--gr) 10px var(--gx); cursor: pointer; border-radius: var(--r-s); }
details.univ > summary::-webkit-details-marker { display: none; }
details.univ > summary .rt { flex: 1; min-width: 0; }
details.univ > summary h2 { padding: 0; }
details.univ > summary small, details.adv > summary .rt small { display: block; margin-top: 2px; color: var(--ink-2); font-size: 0.875rem; line-height: 1.1875rem; }
details.univ > summary .chev { width: 22px; height: 22px; color: var(--ink-3); stroke-width: 2.4; flex: none; transition: transform var(--t-2) var(--e-out); }
details.univ[open] > summary .chev { transform: rotate(90deg); }
details.univ > summary:active { background: var(--fill); }
details.univ > .cats { padding-bottom: 10px; }
/* le nom du rayon est le seul libellé de la tuile : il s'affiche en entier */
.cats.big .cat b { display: block; overflow-wrap: break-word; hyphens: auto; }
.cats.big .cat .ct img { inset: 12%; width: 76%; height: 76%; }
.chips.univ { margin-top: 2px; }
.hcard .thumb { position: relative; width: 48px; height: 48px; border-radius: var(--r-s); background: var(--shelf); flex: none; }
.hcard .thumb img { position: absolute; inset: 4%; width: 92%; height: 92%; }
.tagset.diet .chip { flex-direction: column; gap: 0; padding: 6px 16px; line-height: 1.2; }
.tagset.diet .chip small { font-size: 0.75rem; font-weight: 500; opacity: 0.85; }
.tagset.diet .chip[aria-pressed="true"]::before { display: none; }
.rcard.off { opacity: 0.55; }
.row.off .thumb { opacity: 0.5; }
.offer .os.skl, .gi .gt small.skl { display: block; height: 0.75rem; width: 56%; margin: 5px 0 3px; border-radius: var(--r-pill); }
.rail .card .tile.sk { display: block; }
.rail .card .skl { margin-top: 8px; }

/* ---------- remplir mes paniers, après la commande ---------- */
/* mode guidé : plein écran, sans barre d'onglets ; le gros bouton « Ouvrir sur … » dans le dock, sous le pouce */
body.solo { --tab: 0px; }
body.solo .tabbar { display: none; }
.dock .btn { max-width: none; box-shadow: var(--sh-2); }
.dock .btn .ic { width: 20px; height: 20px; }
@media (min-width: 960px) {
  body.solo .dock, body.dockd .dock { display: block; }
  body.solo .view.docked, body.dockd .view.docked { padding-bottom: calc(var(--dock-h) + 32px); }
}
.fhead { display: flex; align-items: center; gap: 12px; padding: 6px var(--gr) 10px var(--gx); }
.fhead .rt { flex: 1; min-width: 0; }
.fhead small { display: block; color: var(--ink-2); font-size: 0.875rem; line-height: 1.1875rem; }
.fhead .fk { flex: none; font: 600 1.0625rem/1 var(--round); }
.fillp { display: grid; gap: 14px; margin: 14px var(--gr) 0 var(--gx); padding: 18px 16px; border-radius: var(--r-l); background: var(--card); }
.fillp .fimg { position: relative; width: min(52vw, 13rem); aspect-ratio: 1 / 1; margin: 0 auto; border-radius: var(--r-m); background: var(--shelf); display: grid; place-items: center; color: var(--ink-2); }
.fillp .fimg img { position: absolute; inset: 6%; width: 88%; height: 88%; }
.fillp .fimg > .ic { width: 48px; height: 48px; }
.fillp .fbody { display: grid; gap: 8px; min-width: 0; }
.fillp h2 { overflow-wrap: anywhere; hyphens: auto; }
.fpos { font-size: 0.875rem; line-height: 1.1875rem; color: var(--ink-2); }
.fqty { justify-self: start; display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 14px; border-radius: var(--r-pill); background: var(--brand-tint); color: var(--brand-ink); font-size: 1.0625rem; font-weight: 600; }
.fqty b { font: 800 1.625rem/1 var(--round); }
.ff, .fhint { font-size: 0.9375rem; line-height: 1.33; color: var(--ink-2); }
.fsite { font-size: 0.9375rem; line-height: 1.33; color: var(--ink-2); overflow-wrap: anywhere; }
.fsite b { color: var(--ink); font-weight: 600; }
.fok { display: flex; align-items: center; gap: 6px; color: var(--brand-ink); font-weight: 600; }
.fok .ic { width: 20px; height: 20px; stroke-width: 2.6; }
.fillp .act { justify-self: start; margin: 0 0 0 -6px; }
.fillp .act .ic { width: 18px; height: 18px; margin-right: 4px; }
.fbtns { padding-top: 14px; }
.fnav { display: flex; justify-content: space-between; gap: 12px; padding: 12px var(--gr) 0 var(--gx); }
.fnav .act { margin: 0; }
.fnav .act:disabled { opacity: 0.45; cursor: default; }
.gi.cur { box-shadow: inset 3px 0 0 var(--brand); }
button.gt { width: 100%; text-align: left; padding: 0; }
.fend { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 18px var(--gr) 6px var(--gx); }
.fend .art { width: 72px; height: 72px; border-radius: 50%; background: var(--brand-tint); color: var(--brand-ink); display: grid; place-items: center; }
.fend .art .ic { width: 36px; height: 36px; stroke-width: 2.4; }
.fend p { color: var(--ink-2); max-width: 34ch; }
.fend-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; padding: 12px var(--gr) 0 var(--gx); }
.fend-acts .act { margin: 0; }
.fend-acts .act .ic { width: 18px; height: 18px; margin-right: 4px; }
.fillc .of .btn { margin-top: 12px; }
.fillh { flex-wrap: wrap; }
.hcard .prog { display: block; margin: 10px 0 2px; }
.hcard .prog > span { display: block; }
.hcard.arr { gap: 10px; }
.hcard .arrh { display: flex; align-items: flex-start; gap: 12px; width: 100%; }
.hcard .arrh > span { flex: 1; min-width: 0; }
.hcard .arrh .x { margin: -10px -12px -10px 0; }
.hcard.col .btns { margin-top: 4px; }
.row .acts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: -2px 0 -6px -2px; }
.row .acts .act { margin: 0; }
.row.link small { color: var(--ink-2); font-weight: 400; }
.of .progl { padding: 6px 0 2px; }
.opt.alt .chev { width: 20px; height: 20px; color: var(--ink-3); stroke-width: 2.4; }
@media (min-width: 960px) {
  .fillp { grid-template-columns: 13rem minmax(0, 1fr); align-items: start; gap: 24px; padding: 24px; }
  .fillp .fimg { width: 100%; }
}

/* ---------- Demande à Cabas : ce qui est compris, la réponse, une liste composée, les frais ---------- */
.banner.ask { margin-top: 4px; }
.banner.ask b { margin-bottom: 0; }
.gf.ask { padding-top: 0; padding-bottom: 10px; }
.tagset.askex .chip { flex: 0 1 auto; max-width: 100%; height: auto; min-height: var(--tap); padding-top: 8px; padding-bottom: 8px; white-space: normal; text-align: left; line-height: 1.25; }
.hcard.ans { align-items: flex-start; }
.hcard.ans > .thumb { position: relative; width: 56px; height: 56px; border-radius: var(--r-s); background: var(--shelf); flex: none; }
.hcard.ans > .thumb img { position: absolute; inset: 4%; width: 92%; height: 92%; }
.hcard .lab { color: var(--brand-ink); font-weight: 600; margin: 0 0 2px; }
.hcard.ans .btn.sm { margin-top: 10px; }
.hcard.compose, .hcard.fee { gap: 4px; }
.hcard.fee small + small { margin-top: 6px; }
.hcard.fee .fn { display: inline; font-size: inherit; line-height: inherit; }
.hcard.fee .btn.sm, .hcard.compose .btns { margin-top: 12px; }
.hcard.compose .hint, .hcard.fee .hint { margin-top: 8px; color: var(--ink-2); }
.hcard.compose .bud { margin-top: 12px; }
.crows { display: grid; width: 100%; margin-top: 10px; border-radius: var(--r-s); background: var(--group); }
.crow { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 56px; padding: 8px 12px; color: var(--ink); text-decoration: none; }
.crow + .crow { box-shadow: 0 -1px 0 var(--sep); }
.crow .thumb { position: relative; width: 40px; height: 40px; border-radius: var(--r-s); background: var(--shelf); }
.crow .thumb img { position: absolute; inset: 4%; width: 92%; height: 92%; }
.crow .ct { min-width: 0; }
.crow .ct b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.9375rem; font-weight: 500; line-height: 1.3; }
.crow .ct small { display: block; margin-top: 1px; }
.crow .cp { font: 600 0.9375rem/1 var(--round); font-variant-numeric: tabular-nums; }
.gh.here { color: var(--brand-ink); }
.gh[id^="frais-"] { scroll-margin-top: calc(var(--st) + var(--nav) + 8px); }
.group.gap { margin-bottom: 12px; }
#ftab .group { margin-top: 12px; }
.sheet .tagset + .gf { padding-top: 10px; }

/* ---------- panier de la semaine, mode magasin, ce qui a bougé, tes dépenses ---------- */
.hcard.prep .btns { margin-top: 4px; }
/* panier type : le rythme de chaque produit sous son nom */
.row.tpl .rt a { display: block; color: inherit; text-decoration: none; padding: 2px 0; }
.row.tpl .rt .act { margin: 2px 0 -8px -6px; }
/* mode magasin : gros caractères, toute la ligne se coche en marchant */
.store .gi.big { width: 100%; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; min-height: 64px; padding: 12px 16px; text-align: left; color: var(--ink); transition: background-color var(--t-1); }
.store .gi.big .box { width: 32px; height: 32px; }
.store .gi.big .box .ic { width: 18px; height: 18px; }
.store .gi.big .gt b { font-size: 1.1875rem; line-height: 1.35; font-weight: 500; }
.store .gi.big .gt small { font-size: 0.9375rem; line-height: 1.3; }
.store .gi.big + .gi.big::before { left: 62px; }
.store .gi.big:active { background: var(--fill); }
.store .gh { font-size: 1.0625rem; color: var(--ink); }
/* tout en magasin : le nom de chaque magasin, au-dessus de ses rayons */
.store .gh.shoph { font-size: 1.375rem; font-weight: 700; padding-top: 34px; }
.store .gh.shoph + .gh { padding-top: 12px; }
.store .progl { font-size: 1rem; }
.print-only { display: none; }
.scanr .sn.ok { display: flex; align-items: center; gap: 6px; color: var(--brand-ink); font-weight: 600; }
.scanr .sn.ok .ic { width: 18px; height: 18px; flex: none; }
/* ce qui a bougé : le signe est toujours écrit, la couleur ne fait que le redire */
.mv { font: 600 0.9375rem/1 var(--round); }
.mv.dn { color: var(--brand-ink); }
.mv.up { color: var(--warn); }
.hnote.moment { font-weight: 600; color: var(--ink); }
.hnote.moment.low { color: var(--brand-ink); }
/* dépenses par mois : des barres sobres, le montant au-dessus, le mois dessous */
.spend { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; align-items: end; height: 11rem; padding: 14px 12px 10px; }
.spend .sb { display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; min-width: 0; }
.spend .sv { font: 600 0.875rem/1.1 var(--round); color: var(--ink-2); white-space: nowrap; min-height: 1rem; }
.spend .bar { flex: 1; width: 100%; max-width: 44px; display: flex; align-items: flex-end; box-shadow: 0 2px 0 var(--sep); }
.spend .bar i { display: block; width: 100%; background: var(--brand); border-radius: var(--r-s) var(--r-s) 0 0; }
.spend .sm { font-size: 0.875rem; color: var(--ink-2); }

/* ---------- Nutri-Score et allergènes, comparer deux produits, signaler, une semaine de repas ---------- */
/* Nutri-Score : les cinq lettres en gris, celle du produit en encre pleine (pas les couleurs du logo officiel) */
.nscore { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; flex: none; }
.nscore i { display: grid; place-items: center; width: 26px; height: 30px; border-radius: 6px; background: var(--fill); color: var(--ink-2); font: 700 0.875rem/1 var(--round); font-style: normal; }
.nscore i.on { width: 34px; height: 38px; background: var(--ink); color: var(--paper); font-size: 1.125rem; }
.cmpt .nscore { margin: 2px 0 0; }
.cmpt .nscore i { width: 22px; }
.cmpt .nscore i.on { width: 30px; }
#pfacts .banner { margin-bottom: 12px; }
/* comparer : deux colonnes égales ; l'intitulé de chaque ligne au-dessus des deux valeurs */
.cmpt { width: 100%; table-layout: fixed; border-collapse: collapse; }
.cmpt th, .cmpt td { padding: 10px 12px; text-align: left; vertical-align: top; font-size: 0.9375rem; line-height: 1.33; overflow-wrap: anywhere; }
.cmpt thead th { padding-top: 14px; font-weight: 500; }
.cmpt thead a { display: flex; flex-direction: column; gap: 2px; color: var(--ink); text-decoration: none; border-radius: var(--r-s); }
.cmpt thead .thumb { position: relative; width: 72px; height: 72px; border-radius: var(--r-s); background: var(--shelf); margin-bottom: 6px; }
.cmpt thead .thumb img { position: absolute; inset: 4%; width: 92%; height: 92%; }
.cmpt .cb { font-size: 0.875rem; font-weight: 600; color: var(--ink-2); }
.cmpt .cn { font-weight: 600; }
.cmpt thead .tag { margin-top: 8px; }
.cmpt tr.cl th { padding: 10px 12px 0; font-size: 0.875rem; font-weight: 600; color: var(--ink-2); border-top: var(--hair) solid var(--sep); }
.cmpt td + td, .cmpt thead th + th { border-left: var(--hair) solid var(--sep); }
.cmpt td small { display: block; font-size: 0.875rem; color: var(--ink-2); }
.cmpt td b { font-weight: 700; }
.cmpt tr.take td { padding: 12px 10px; border-top: var(--hair) solid var(--sep); }
.cmpt tr.take .btn { width: 100%; padding-left: 8px; padding-right: 8px; }
.cmpv { margin-bottom: 12px; }
.cmpv .vt { margin-top: 6px; font: 700 1.5rem/1.2 var(--round); }
.cmpv .vt small { display: block; margin-top: 4px; font: 600 1rem/1.3 var(--sans); color: var(--brand-ink); }
/* signaler : le texte qui partira, tel quel ; un champ de plusieurs lignes */
.repv { margin: 8px var(--g) 0; padding: 12px 14px; border-radius: var(--r-s); background: var(--group); color: var(--ink); font: 0.875rem/1.4 var(--sans); white-space: pre-wrap; overflow-wrap: anywhere; }
.field .in.ta { align-items: stretch; padding: 10px 14px; }
.field textarea { flex: 1; min-width: 0; min-height: 6.5rem; border: 0; background: none; resize: vertical; font-size: 1.0625rem; line-height: 1.4; }
.field textarea:focus { outline: none; }
.row .rbtns { display: flex; flex-wrap: wrap; gap: 8px; }
/* une semaine de repas : le formulaire dans une ligne de groupe */
.row.stack > .btn { margin-top: 4px; }

/* ---------- impression : la page seule, en noir sur blanc, sans barres ni boutons ; la liste du magasin à cocher au stylo ---------- */
@media print {
  @page { margin: 14mm; }
  html, body, body.grouped, html:has(body.grouped) { background: #fff !important; color: #000 !important; }
  .skip, .side, .nav, .tabbar, .dock, .toast, .sheetw, .noprint, .btn, .act, .icbtn, .txtbtn, .mini, .seg, .prog, .progl, .banner { display: none !important; }
  .view { padding: 0 !important; margin: 0 !important; min-height: 0; }
  .wrap { max-width: none; }
  .lt { font-size: 20pt; line-height: 1.2; padding: 0 0 4pt; color: #000; }
  .lt-sub { color: #333; padding: 0 0 6pt; }
  .print-only { display: block; font-size: 11pt; margin: 0 0 8pt; color: #000; }
  .group, .hcard, .order { margin-left: 0; margin-right: 0; box-shadow: none !important; background: #fff !important; border: 0.8pt solid #888; border-radius: 4pt; }
  .gh { color: #000 !important; padding: 10pt 0 4pt; font-size: 12pt; break-after: avoid; }
  .store .gh.shoph { font-size: 15pt; padding-top: 14pt; }
  .gf { color: #333 !important; font-size: 9.5pt; padding: 4pt 0 0; }
  .store .gi.big { min-height: 0; padding: 5pt 8pt; break-inside: avoid; grid-template-columns: 14pt minmax(0, 1fr); gap: 8pt; }
  .store .gi.big + .gi.big::before { left: 0; background: #ccc; }
  .store .gi.big .box { width: 13pt; height: 13pt; border-radius: 2pt; border: 1.2pt solid #000; background: #fff !important; }
  .store .gi.big .box .ic { color: #000; }
  .store .gi.big .gt b { font-size: 12pt; color: #000; }
  .store .gi.big .gt small { font-size: 9.5pt; color: #333; }
  .store .gi.on .gt { opacity: 1; text-decoration: line-through; }
  a { color: #000; text-decoration: none; }
}

/* ---------- contraste renforcé : contours des commandes sans bordure, liens d'action soulignés, focus épais ---------- */
html[data-contrast="more"] :is(.chip, .btn.tint, .btn.plain, .btn.ghost, .search, .stepper.soft, .seg, .tsize button, .add, .field .in, .shelf input, .hcard, .deal, .banner, .sum .alt, .bud) { box-shadow: inset 0 0 0 1.5px var(--ctl-line); }
html[data-contrast="more"] .group { box-shadow: 0 0 0 1.5px var(--ctl-line); }
html[data-contrast="more"] .field.err .in { box-shadow: inset 0 0 0 2.5px var(--warn); }
html[data-contrast="more"] :is(.act, .row.link, .txtbtn, .back span) { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
html[data-contrast="more"] :focus-visible { outline-width: 4px; }
html[data-contrast="more"] .tab span, html[data-contrast="more"] .row .rt small, html[data-contrast="more"] .gf { font-weight: 500; }
html[data-contrast="more"] .prog { box-shadow: inset 0 0 0 1px var(--ctl-line); }

/* ---------- mode confort : cibles de 60 px, plus d'espace, une colonne, moins d'éléments par écran ----------
   html[data-simple], posé par boot.js avant le premier rendu ; les cibles suivent --tap et --tap-lg */
html[data-simple] { --tap: 60px; --tap-lg: 60px; --gap-card: 16px; --gap-section: 40px; --nav: 64px; --tab: 68px; --dock-h: 76px; }
@media (min-width: 960px) { html[data-simple] { --tab: 0px; } }
html[data-simple] :is(.row, .opt) { min-height: 64px; padding-top: 14px; padding-bottom: 14px; }
html[data-simple] .row.th { min-height: 72px; }
html[data-simple] .mini { min-height: 64px; }
html[data-simple] .chip { min-height: 60px; padding: 0 20px; font-size: 1rem; }
html[data-simple] .chips { flex-wrap: wrap; overflow: visible; position: static; -webkit-mask-image: none; mask-image: none; }
html[data-simple] .act { min-height: 60px; margin: -12px 0; font-size: 1rem; }
html[data-simple] .item .acts .act, html[data-simple] .row .acts .act, html[data-simple] .fnav .act, html[data-simple] .fend-acts .act, html[data-simple] .sh .act { margin: 0; }
/* liens dans le texte : 60 px de haut quelle que soit la taille du texte, sans écarter les lignes du paragraphe */
html[data-simple] :is(.gf, .foot, .sn, .hint, .trust, .prose) a { display: inline-block; min-height: 60px; padding: 21px 2px; margin: -21px -2px; }
@supports (padding: 1lh) { html[data-simple] :is(.gf, .foot, .sn, .hint, .trust, .prose) a { padding-block: calc((60px - 1lh) / 2); margin-block: calc((1lh - 60px) / 2); } }
html[data-simple] .meta { min-height: var(--tap); }
html[data-simple] .skip { padding: 20px 22px; }
html[data-simple] .seg.tall button { min-height: 64px; }
html[data-simple] .buybar .stepper button { width: 60px; height: 60px; }
html[data-simple] .hcard.ans > .thumb { width: 64px; height: 64px; }
html[data-simple] .grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
html[data-simple] .grid .tile, html[data-simple] .rail .tile { aspect-ratio: auto; height: 11rem; }
html[data-simple] .tile img { left: 50%; width: auto; max-width: 86%; transform: translateX(-50%); object-fit: contain; }
html[data-simple] .card:active .tile img { transform: translateX(-50%) scale(0.97); }
html[data-simple] .rail { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); grid-auto-columns: auto; overflow: visible; scroll-snap-type: none; -webkit-mask-image: none; mask-image: none; gap: 20px; }
html[data-simple] .rail > :nth-child(n + 5) { display: none; }
html[data-simple] .cats, html[data-simple] .cats.big { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
html[data-simple] .item { grid-template-columns: 64px minmax(0, 1fr); gap: 10px 14px; padding: 14px 16px; }
html[data-simple] .item .thumb { width: 64px; height: 64px; }
html[data-simple] .item .ir { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
html[data-simple] .item::before { left: 16px; }
html[data-simple] .stepper { min-width: 180px; }
html[data-simple] .sw { width: 64px; height: 38px; }
html[data-simple] .sw input { inset: -11px 0; }
html[data-simple] .sw span { border-radius: 19px; }
html[data-simple] .sw span::after { width: 34px; height: 34px; }
html[data-simple] .sw input:checked + span::after { transform: translateX(26px); }
html[data-simple] .box { width: 30px; height: 30px; }
html[data-simple] .btns { gap: 14px; }
html[data-simple] .hcard { padding: 18px 16px; margin-top: 12px; }
html[data-simple] .tab .ic { width: 28px; height: 28px; }
html[data-simple] .tab span { font-size: max(13px, 0.875rem); }