/* css/shop.css — the shop chrome and components shared by every v2 page (markup: v2/_dev/gen.mjs + js/shop/markup.js,
behaviour: js/shop/*.js), in the client's charter (css/tokens.css): blanc cassé pages, sage bands and label boxes,
black text and calls to action; Questrial 400 only (hierarchy from size, capitals and letter-spacing).
Architecture: frames are square with a hairline (the charter's strip, the menu's boxes), images sit in arched niches,
controls are soft pills. Opaque surfaces (never a backdrop-filter over the live canvas). Every control ≥ 44px.
Contents: utilities · skip link · header (.top) · « Commander » (.order-btn) · status line · footer (.foot)
· order bar (.obar) · buttons (.cta, .link, .linkbtn) · stepper (.step) · breadcrumb · product card (.card) · FAQ (.qa)
· order sheet (.basket) · reveal · reduced motion */
/* ───────── utilities ───────── */
:where(.top, .foot, .obar, .basket, .card, .qa, .step, .cta, .skip-to),
:where(.top, .foot, .obar, .basket, .card, .qa, .step, .cta) *,
:where(.top, .foot, .obar, .basket, .card, .qa, .step, .cta) ::before,
:where(.top, .foot, .obar, .basket, .card, .qa, .step, .cta) ::after { box-sizing: border-box; }
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
html:not(.js) .js-only, html.js .no-js-only { display: none !important; }
:where(.top, .foot, .obar, .basket, .card, .qa, .step, .cta, .link, .linkbtn) [hidden] { display: none !important; }
:where(.top, .obar, .basket, .card, .qa, .step, .cta, .link, .linkbtn, .skip-to):focus-visible,
:where(.top, .obar, .basket, .card, .qa, .step) :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
/* icons (charte, iconographie): rounded, a fine constant outline, flat */
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ico--wa { stroke: none; }
html.basket-open { overflow: hidden; scrollbar-gutter: stable; }
/* ───────── skip link ───────── */
.skip-to { position: fixed; z-index: 100; left: 12px; top: 12px; padding: 12px 18px; background: var(--ink); color: var(--cta-ink);
font: 400 14px/1.2 var(--font-sans); letter-spacing: var(--tr-btn); text-transform: uppercase; text-decoration: none; transform: translateY(-160%); transition: transform .2s ease-out; }
.skip-to:focus-visible { transform: none; outline-color: var(--cta-ink); outline-offset: -5px; }
html.xp-boot .skip-to { display: none; }
/* ───────── header: the charter's strip — a blanc cassé band framed by one black hairline ───────── */
.top { position: fixed; z-index: 60; inset: 0 0 auto; padding: var(--top-pad) var(--top-pad) 0; pointer-events: none;
font-family: var(--font-sans); color: var(--ink); }
.top__in { pointer-events: auto; position: relative; display: flex; align-items: center; gap: 12px; max-width: 1400px; height: 60px; margin: 0 auto;
padding: 0 7px 0 20px; background: var(--paper); border: 1px solid var(--ink); transition: box-shadow .3s ease-out; }
html.is-scrolled .top__in { box-shadow: var(--shadow-float); }
.top__brand { display: inline-flex; align-items: center; min-height: 44px; color: var(--sauge); text-decoration: none; }
.top__logo { display: block; width: 112px; height: auto; fill: currentColor; }
.top__nav { flex: 1; display: flex; align-items: center; justify-content: center; min-width: 0; }
.top__list { display: flex; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; }
.top__a { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 clamp(8px, .9vw, 14px); color: var(--ink); text-decoration: none;
font: 400 12.5px/1 var(--font-sans); letter-spacing: var(--tr-caps); text-transform: uppercase; white-space: nowrap; }
.top__a::after { content: ""; position: absolute; left: clamp(8px, .9vw, 14px); right: clamp(8px, .9vw, 14px); bottom: 11px; height: 1px; background: currentColor;
transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease-out); }
.top__a:hover::after, .top__a[aria-current]::after { transform: none; }
.top .top__status, .top__navclose { display: none; }
/* the status line lives in the phone menu and the footer: on desktop it collided with « Commander » */
.top__actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.top__menu { display: none; align-items: center; gap: 10px; min-height: 44px; min-width: 44px; padding: 0 16px; border: 1px solid var(--ink); border-radius: var(--r-ctl);
background: transparent; color: var(--ink); font: 400 12.5px/1 var(--font-sans); letter-spacing: var(--tr-caps); text-transform: uppercase; text-decoration: none; cursor: pointer; }
.top__burger { position: relative; width: 16px; height: 9px; border-block: 1.2px solid currentColor; }
.top__burger::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.2px; margin-top: -.6px; background: currentColor; transition: transform .2s; }
html.nav-open .top__burger { border-color: transparent; }
html.nav-open .top__burger::before { transform: rotate(45deg); box-shadow: none; }
html.nav-open .top__burger::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.2px; margin-top: -.6px; background: currentColor; transform: rotate(-45deg); }
/* « Commander »: black, always visible; the count (a sage pill, black figures) appears once something is in */
.order-btn { position: relative; display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 20px 0 17px; border: 0; border-radius: var(--r-ctl);
background: var(--cta-bg); color: var(--cta-ink); font: 400 12.5px/1 var(--font-sans); letter-spacing: var(--tr-caps); text-transform: uppercase;
text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .2s ease-out; }
.order-btn:hover { background: var(--cta-bg-hover); }
.order-btn .ico { width: 18px; height: 18px; }
.order-btn__count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; margin-left: 2px; border-radius: 11px;
background: var(--badge-bg); color: var(--badge-ink); font: 400 13px/1 var(--font-sans); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.order-btn__count.is-bump { animation: badge-bump .5s cubic-bezier(.22, 1, .36, 1); }
@keyframes badge-bump { 0% { transform: scale(1); } 35% { transform: scale(1.22); } 100% { transform: scale(1); } }
/* narrow: the nav becomes a disclosure panel under the strip (JS: html.nav-open; no JS: #site-nav:target) */
@media (max-width: 1199.98px) {
.top__menu { display: inline-flex; }
.top__nav { position: absolute; left: -1px; right: -1px; top: calc(100% + 8px); display: none; flex-direction: column; align-items: stretch; gap: 6px;
padding: 10px 10px 14px; background: var(--paper); border: 1px solid var(--ink); box-shadow: var(--shadow-float); }
html.nav-open .top__nav, html:not(.js) .top__nav:target { display: flex; }
.top__list { flex-direction: column; align-items: stretch; gap: 0; }
.top__list li + li { border-top: 1px solid var(--line); }
.top__a { min-height: 54px; padding: 0 12px; font-size: 14px; }
.top__a::after { display: none; }
.top__a[aria-current]::before { content: ""; width: 6px; height: 6px; margin-right: 12px; border-radius: 50%; background: var(--ink); }
.top .top__status { display: flex; margin: 0; padding: 12px 12px 2px; }
html:not(.js) .top__navclose { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--ink); }
}
@media (max-width: 459.98px) {
.top__in { padding-left: 14px; gap: 6px; }
.top__logo { width: 92px; }
.top__menu { padding: 0 14px; font-size: 0; gap: 0; letter-spacing: 0; } /* burger only; the name stays « Menu » */
.order-btn { padding: 0 15px 0 13px; }
}
/* ───────── open / soon status line ───────── */
.open-status { display: inline-flex; align-items: center; gap: 9px; margin: 0; font: 400 14px/1.35 var(--font-sans); color: var(--ink-2); }
.open-status__dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--open-dot); box-shadow: 0 0 0 3px rgb(141 179 58 / .2); }
.open-status[data-state="soon"] .open-status__dot { background: var(--accent); box-shadow: 0 0 0 3px rgb(161 42 80 / .16); }
.open-status[data-state="closed"] .open-status__dot { background: var(--ink-2); box-shadow: none; }
.open-status--night { color: var(--band-ink-2); }
.open-status--night .open-status__dot { box-shadow: 0 0 0 3px rgb(254 251 244 / .55); }
.open-status--night[data-state="closed"] .open-status__dot { background: var(--band-ink-2); }
/* ───────── footer: the sage band, the logo in blanc cassé (the charter's second lock-up), one big heart ───────── */
.foot { position: relative; z-index: 3; overflow: hidden; margin-top: var(--foot-gap, clamp(64px, 10vw, 128px));
padding: clamp(56px, 7vw, 96px) clamp(20px, 4.4vw, 72px) 28px; background: var(--band); color: var(--band-ink); font: 400 15.5px/1.6 var(--font-sans); }
.foot::before { content: ""; position: absolute; z-index: 0; right: clamp(-120px, -6vw, -60px); bottom: clamp(-150px, -9vw, -80px); width: clamp(200px, 22vw, 320px);
aspect-ratio: 220 / 235; background: var(--blanc-casse); opacity: .42; transform: rotate(-12deg); pointer-events: none;
-webkit-mask: url("../assets/img/heart.svg") center / contain no-repeat; mask: url("../assets/img/heart.svg") center / contain no-repeat; }
.foot > * { position: relative; z-index: 1; }
main.hf + .foot { --foot-gap: 0px; } /* the homepage ends on its sage band: no seam before the footer */
.foot :focus-visible { outline: 2px solid var(--band-ink); outline-offset: 3px; }
.foot__in { display: grid; grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); gap: 32px clamp(20px, 3vw, 48px); max-width: 1400px; margin: 0 auto; }
.foot__brand { display: grid; gap: 16px; align-content: start; }
.foot__home { justify-self: start; color: var(--blanc-casse); }
.foot__logo { display: block; width: 168px; height: auto; fill: currentColor; }
.foot__line { margin: 0; max-width: 30ch; color: var(--band-ink); }
.foot__col { display: grid; gap: 6px; align-content: start; }
.foot__k { margin: 0 0 6px; font: 400 12px/1.3 var(--font-sans); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--band-ink); }
.foot__v { margin: 0; font-style: normal; }
.foot__muted { color: var(--band-ink-2); font-size: 14.5px; }
.foot__a { display: inline-flex; align-items: center; gap: 8px; justify-self: start; min-height: 32px; color: var(--band-ink); text-decoration: underline;
text-decoration-color: rgb(0 0 0 / .35); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.foot__a:hover { text-decoration-color: currentColor; }
.foot__a .ico { width: 18px; height: 18px; }
.foot__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; max-width: 1400px; margin: 44px auto 0;
padding-top: 20px; border-top: 1px solid rgb(0 0 0 / .2); }
.foot__nav ul { display: flex; flex-wrap: wrap; gap: 0 22px; margin: 0; padding: 0; list-style: none; }
.foot__nav a { display: inline-flex; align-items: center; min-height: 40px; color: var(--band-ink); text-decoration: none; font-size: 12px; letter-spacing: var(--tr-caps); text-transform: uppercase; }
.foot__nav a:hover, .foot__nav a[aria-current] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.foot__copy { margin: 0; color: var(--band-ink-2); font-size: 13.5px; }
@media (max-width: 999.98px) { .foot__in { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot__brand { grid-column: 1 / -1; } }
@media (max-width: 759.98px) { .foot { padding-bottom: calc(100px + env(safe-area-inset-bottom)); } }
@media (max-width: 379.98px) { .foot__in { grid-template-columns: 1fr; } }
/* ───────── order bar: bottom bar on phones, a pill bottom-right on wider screens ───────── */
.obar { position: fixed; z-index: 55; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); font-family: var(--font-sans);
transition: transform .4s cubic-bezier(.22, 1, .36, 1), opacity .3s ease-out; }
html.js .obar[data-visible="false"] { transform: translateY(calc(100% + 32px)); opacity: 0; pointer-events: none; visibility: hidden;
transition: transform .4s cubic-bezier(.22, 1, .36, 1), opacity .3s ease-out, visibility 0s .4s; }
html[data-obar="off"] .obar { display: none; }
.obar__btn, .obar__wa { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 8px 18px 8px 10px; border: 0; border-radius: var(--r-ctl);
background: var(--cta-bg); color: var(--cta-ink); font: 400 15px/1.2 var(--font-sans); text-align: left; text-decoration: none; cursor: pointer;
box-shadow: 0 16px 36px -16px rgb(0 0 0 / .5); }
.obar__btn:hover, .obar__wa:hover { background: var(--cta-bg-hover); }
.obar__wa { justify-content: center; }
.obar__ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--sauge); color: var(--ink); }
.obar__txt { display: grid; gap: 3px; flex: 1; min-width: 0; }
.obar__label { font-size: 11.5px; letter-spacing: var(--tr-caps); text-transform: uppercase; color: rgb(254 251 244 / .78); }
.obar__total, .obar__label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.obar__total { font: 400 17px/1.15 var(--font-sans); font-variant-numeric: tabular-nums; }
.obar__go { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 12.5px; letter-spacing: var(--tr-caps); text-transform: uppercase; white-space: nowrap; }
.obar__go .ico { width: 18px; height: 18px; }
@media (max-width: 399.98px) { .obar__more { display: none; } }
@media (min-width: 760px) {
.obar { left: auto; right: 24px; bottom: 24px; }
.obar__btn, .obar__wa { width: auto; padding: 8px 24px 8px 9px; }
}
/* ───────── buttons and links: black pill, blanc cassé capitals (charte: CTA = noir profond) ───────── */
.cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 26px; border: 1px solid var(--cta-bg);
border-radius: var(--r-ctl); background: var(--cta-bg); color: var(--cta-ink); font: 400 var(--t-btn)/1.2 var(--font-sans); letter-spacing: var(--tr-btn);
text-transform: uppercase; text-align: center; text-decoration: none; cursor: pointer; transition: background .2s ease-out, border-color .2s ease-out, color .2s ease-out; }
.cta:hover { background: var(--cta-bg-hover); border-color: var(--cta-bg-hover); }
.cta .ico { width: 19px; height: 19px; }
.cta--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.cta--ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--cta-ink); }
.cta--quiet { background: var(--field-hi); color: var(--ink); border-color: transparent; }
.cta--quiet:hover { background: var(--sauge); border-color: transparent; }
.cta--block { display: flex; width: 100%; }
.link { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.link:hover { text-decoration-thickness: 2px; }
.linkbtn { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer;
font: 400 15px/1.2 var(--font-sans); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
/* ───────── stepper: « Ajouter + » → − n + (js/shop/markup.js stepHTML) ───────── */
.step { display: inline-flex; align-items: center; height: 46px; border-radius: var(--r-ctl); background: var(--cta-bg); color: var(--cta-ink);
font-family: var(--font-sans); vertical-align: middle; transition: background .2s ease-out; }
.step__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 46px; height: 46px; padding: 0; border: 0; border-radius: var(--r-ctl);
background: transparent; color: inherit; font: 400 13px/1 var(--font-sans); letter-spacing: var(--tr-btn); text-transform: uppercase; cursor: pointer; }
.step__btn:hover { background: rgb(254 251 244 / .14); }
.step__btn .ico { width: 17px; height: 17px; stroke-width: 1.5; }
.step__n { min-width: 24px; text-align: center; font: 400 16px/1 var(--font-sans); font-variant-numeric: tabular-nums; }
.step:not(.is-on) .step__n { display: none; }
.step:not(.is-on) .step__plus { padding: 0 18px 0 22px; }
.step.is-on .step__add { display: none; }
.step--line, .step--quiet { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-ui); }
.step--line .step__btn:hover, .step--quiet .step__btn:hover { background: var(--field-hi); }
.step--quiet:not(.is-on) { background: var(--cta-bg); color: var(--cta-ink); box-shadow: none; }
.step--quiet:not(.is-on) .step__btn:hover { background: rgb(254 251 244 / .14); }
.step--wide { display: flex; width: 100%; }
.step--wide:not(.is-on) .step__plus { flex: 1; }
.step--wide.is-on { justify-content: space-between; }
/* ───────── breadcrumb (gen:crumb: every page but the home; the same trail as its BreadcrumbList JSON-LD) ─────────
Small spaced capitals, AA on blanc cassé / sage (ink-2 8.4:1 / 5.8:1, links ink); a sage page sets --crumb-ink(-2). */
.crumb { margin: 0 0 14px; font: 400 11.5px/1.3 var(--font-sans); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--crumb-ink-2, var(--ink-2)); }
.crumb__list { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; margin: 0; padding: 0; list-style: none; }
.crumb__i { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.crumb__i + .crumb__i::before { content: "•"; letter-spacing: 0; color: var(--crumb-ink-2, var(--ink-2)); }
.crumb__a { display: inline-flex; align-items: center; min-height: 32px; color: var(--crumb-ink, var(--ink)); text-decoration: underline;
text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.crumb__a:hover { text-decoration-color: currentColor; }
.crumb__a:focus-visible { outline: 2px solid var(--crumb-ink, var(--focus-ring)); outline-offset: 2px; }
.crumb__here { color: var(--crumb-ink-2, var(--ink-2)); }
/* ───────── product card (base; pages add their own modifiers) ─────────
A square frame with a hairline; the fruit stands in a sage-mist niche (the arch). The name link covers the card. */
.card { position: relative; display: grid; grid-template-rows: auto 1fr; overflow: hidden; background: var(--paper); color: var(--ink);
border: 1px solid var(--line); border-radius: var(--r-card); font-family: var(--font-sans); }
.card__media { position: relative; display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; isolation: isolate; background: var(--paper); }
.card__media::before { content: ""; position: absolute; z-index: -1; left: 11%; right: 11%; top: 9%; bottom: 0; border-radius: var(--r-niche); background: var(--field-hi); }
.card__media img { display: block; width: 100%; height: 100%; object-fit: contain; }
.card__body { display: grid; gap: 6px; align-content: start; padding: 16px 18px 18px; border-top: 1px solid var(--line); }
.card__kicker { margin: 0; font: 400 11px/1.3 var(--font-sans); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink-2); }
.card__name { margin: 0; font: 400 var(--t-title)/1.15 var(--font-sans); letter-spacing: -.005em; }
.card__name a { color: inherit; text-decoration: none; }
.card__name a::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.card__name a:focus-visible { outline: none; }
.card:has(.card__name a:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.card__meta { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0; font-size: 14.5px; color: var(--ink-2); }
.card__price { color: var(--ink); font-variant-numeric: tabular-nums; }
.card__line { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.card__actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; margin-top: 10px; }
.card__more { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font: 400 14.5px/1.2 var(--font-sans); text-decoration: underline;
text-decoration-thickness: 1px; text-underline-offset: 4px; }
/* ───────── FAQ (…
…