/* css/shop-content.css — owner C. The content pages of the v2 shop (fruit-cups, maison, mentions-legales, 404: html.sc) and
   the content blocks the coffrets / contact pages share with them (page head, steps, FAQ, bands, signature quick-add).
   Builds on css/tokens.css + css/shop.css (header, footer, order bar, sheet, .cta, .step, .qa). The client's charter:
   blanc cassé page and cards (a hairline, square), sage label boxes, panels and bands, black text and actions,
   Questrial 400 only (capitals + letter-spacing for labels); every control ≥ 44 px; AA contrast (ink 20.3:1 on blanc
   cassé / 14.0:1 on sage, ink-2 8.4:1 / 5.8:1).

   Contents: base (html.sc) · layout · page head · type · steps · FAQ · band · quick-add · fruit cups · maison
   · mentions légales · 404 · reduced motion */

/* ───────── base: the content pages (html.sc) ───────── */
:root { --sc-gutter: 20px; --sc-max: 1240px; }
@media (min-width: 640px) { :root { --sc-gutter: 32px; } }
@media (min-width: 1024px) { :root { --sc-gutter: clamp(40px, 4.4vw, 72px); } }

html.sc { background: var(--field); color: var(--ink); -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  scroll-padding-top: calc(var(--top-h, 84px) + 16px); }
html.sc body { margin: 0; min-height: 100vh; background: var(--field); font: 400 17px/1.6 var(--font-sans); -webkit-font-smoothing: antialiased; }
/* zero-specificity resets: every component class below (and shop.css) wins over them */
:where(html.sc) :where(*, *::before, *::after) { box-sizing: border-box; }
:where(html.sc) :where(h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote) { margin: 0; }
:where(html.sc) :where(img) { display: block; max-width: 100%; height: auto; }
:where(html.sc) :where(main) { display: block; overflow-x: clip; }
:where(html.sc) :where(:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
:where(html.sc) :where(a) { color: var(--ink); }
:where(html.sc) :where([hidden]) { display: none !important; }
:where([class^="sc-"], [class*=" sc-"], [class^="cup"], [class*=" cup"], [class^="mai-"], [class*=" mai-"], [class^="legal"], [class^="nf-"]) { box-sizing: border-box; }

/* ───────── layout ───────── */
.sc-wrap { width: min(var(--sc-max), 100% - 2 * var(--sc-gutter)); margin-inline: auto; }
.sc-section { padding-top: clamp(64px, 9vw, 128px); }
.sc-panel { background: var(--paper); border: 1px solid var(--line); }

/* ───────── page head ───────── */
.sc-head { padding: calc(var(--top-h, 84px) + clamp(32px, 6vw, 88px)) 0 0; }
/* the kicker is the menu's sage label box (« C O F F R E T S ») */
.sc-kicker { display: inline-block; margin: 0 0 20px; padding: 9px 14px 8px calc(14px + var(--tr-label)); background: var(--sauge); color: var(--ink);
  font: 400 var(--t-label)/1.2 var(--font-sans); letter-spacing: var(--tr-label); text-transform: uppercase; }
.sc-title { margin: 0; font: 400 var(--t-display)/1.03 var(--font-sans); letter-spacing: var(--tr-display); text-wrap: balance; }
.sc-lead { margin: 22px 0 0; max-width: 46ch; font: 400 clamp(17px, 1rem + .3vw, 20px)/1.55 var(--font-sans); color: var(--ink-2); }
.sc-h2 { margin: 0; font: 400 var(--t-h2)/1.08 var(--font-sans); letter-spacing: var(--tr-h2); text-wrap: balance; }
.sc-title em, .sc-h2 em { font-style: normal; }
.sc-text { margin: 14px 0 0; max-width: 58ch; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.sc-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* ───────── « Comment ça marche » ───────── */
.sc-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: clamp(24px, 3vw, 40px) 0 0; padding: 0; list-style: none; }
.sc-step { display: grid; align-content: start; gap: 10px; padding: 24px 24px 28px; background: var(--paper); border: 1px solid var(--line);
  font-family: var(--font-sans); }
.sc-step__n { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 6px; border-radius: 50%; background: var(--field-hi); color: var(--ink);
  font: 400 21px/1 var(--font-sans); }
.sc-step__t { margin: 0; font: 400 20px/1.25 var(--font-sans); }
.sc-step__p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.sc-steps__after { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 0; }
@media (max-width: 759.98px) {
  .sc-steps { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .sc-step { grid-template-columns: 42px minmax(0, 1fr); column-gap: 16px; padding: 18px 18px 20px; }
  .sc-step__n { grid-row: span 2; margin: 0; }
  .sc-steps__after .cta { flex: 1 1 100%; }
}

/* ───────── FAQ (shop.css .qa inside a paper panel) ───────── */
.sc-faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); gap: 24px clamp(24px, 5vw, 80px); align-items: start; }
.sc-faq__side { position: sticky; top: calc(var(--top-h, 84px) + 24px); }
.sc-faq__ask { margin: 16px 0 0; max-width: 34ch; font-size: 16.5px; line-height: 1.55; color: var(--ink-2); }
.sc-faq__list { padding: 4px clamp(18px, 2.4vw, 32px); background: var(--paper); border: 1px solid var(--line); }
.sc-faq__list .qa:first-child { border-top: 0; }
.sc-faq__list .qa:last-child { border-bottom: 0; }
@media (max-width: 899.98px) { .sc-faq { grid-template-columns: minmax(0, 1fr); } .sc-faq__side { position: static; } }

/* ───────── band (a closing call to action) ───────── */
.sc-band { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px 48px; padding: clamp(26px, 4.4vw, 60px);
  background: var(--paper); border: 1px solid var(--line); }
.sc-band__txt p { margin: 14px 0 0; max-width: 52ch; font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.sc-band__btns { display: grid; gap: 10px; }
/* the « night » band is now the brand's sage band (black text, black calls to action) */
.sc-band--night { background: var(--band); color: var(--band-ink); border-color: transparent; }
.sc-band--night .sc-band__txt p { color: var(--band-ink-2); }
.sc-band--night .cta--ghost:hover { background: var(--ink); color: var(--cta-ink); }
@media (max-width: 759.98px) { .sc-band { grid-template-columns: minmax(0, 1fr); } .sc-band__btns .cta { width: 100%; } }

/* ───────── signature quick-add (contact empty state, 404) ───────── */
.sc-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 148px), 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.sc-quick__item { position: relative; isolation: isolate; display: grid; grid-template-rows: auto auto 1fr auto; justify-items: center; gap: 2px; padding: 16px 10px 14px;
  border: 1px solid var(--line); background: var(--sc-quick-bg, var(--paper)); text-align: center; font-family: var(--font-sans); }
.sc-quick__item::before { content: ""; position: absolute; z-index: -1; left: 20%; right: 20%; top: 12px; height: 92px; border-radius: var(--r-niche); background: var(--field-hi); }
.sc-quick__img { width: auto; height: 84px; max-width: 100%; margin: 0 0 8px; object-fit: contain; }
.sc-quick__name { margin: 0; font: 400 15.5px/1.25 var(--font-sans); }
.sc-quick__name a { display: inline-block; padding: 4px 2px; color: var(--ink); text-decoration: none; }
.sc-quick__name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.sc-quick__price { margin: 0; font-size: 14.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sc-quick .step { margin-top: 10px; }
.sc-text + .sc-quick { margin-top: 22px; }

/* ═════════════════ FRUIT CUPS ═════════════════ */
.cups-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 20px 48px; }
.cups-hero__facts { display: grid; gap: 6px; margin: 0; padding: 20px 24px; list-style: none; background: var(--sauge);
  font-size: 15.5px; line-height: 1.4; color: var(--ink-2); }
.cups-hero__facts strong { color: var(--ink); font-weight: 400; }
.cups-hero__banner { margin: clamp(28px, 4vw, 48px) 0 0; overflow: hidden; background: var(--field-hi); }
.cups-hero__banner img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 78%; }
@media (min-width: 900px) { .cups-hero__banner img { aspect-ratio: 12 / 5; } }
@media (max-width: 899.98px) { .cups-hero__grid { grid-template-columns: minmax(0, 1fr); } .cups-hero__facts { justify-self: start; } }

.cups-list__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 32px; margin-bottom: clamp(24px, 3vw, 40px); }
.cups-list__head .sc-text { margin: 0; max-width: 40ch; }
.cups-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); margin: 0; padding: 0; list-style: none; }
.cup { display: grid; grid-template-rows: auto 1fr; overflow: hidden; background: var(--paper); border: 1px solid var(--line);
  scroll-margin-top: calc(var(--top-h, 84px) + 16px); }
.cup__media { margin: 0; aspect-ratio: 600 / 660; overflow: hidden; background: var(--field-hi); }
.cup__media img { width: 100%; height: 100%; object-fit: cover; }
.cup__body { display: grid; grid-template-rows: auto auto 1fr auto; align-content: start; gap: 8px; min-width: 0; padding: 18px 20px 20px; }
.cup__name { margin: 0; font: 400 clamp(21px, 1.7vw, 26px)/1.15 var(--font-sans); letter-spacing: -.008em; }
.cup__line { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--ink); }
.cup__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; margin-top: 8px; }
.cup__price { display: grid; margin: 0; font: 400 15.5px/1.25 var(--font-sans); color: var(--ink); }
.cup__price small { font: 400 13.5px/1.3 var(--font-sans); color: var(--ink-2); }
.cup__wa { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--ink); font: 400 15px/1.2 var(--font-sans); text-underline-offset: 3px; }
.cup__wa .ico { width: 18px; height: 18px; }
.cups-list__note { margin: 20px 0 0; font-size: 15px; color: var(--ink-2); }
@media (max-width: 1023.98px) { .cups-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599.98px) {
  .cups-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .cup { grid-template-columns: minmax(0, 38%) minmax(0, 1fr); grid-template-rows: none; }
  .cup__media { aspect-ratio: auto; height: 100%; min-height: 180px; }
  .cup__body { padding: 14px 14px 16px; gap: 6px; }
  .cup__name { font-size: 22px; }
  .cup__line { font-size: 14.5px; }
  .cup__foot { margin-top: 4px; }
}

/* ═════════════════ LA MAISON ═════════════════ */
.mai-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 32px clamp(32px, 6vw, 112px); align-items: center; }
.mai-hero .sc-head { padding-bottom: 0; }
.mai-portrait { margin: calc(var(--top-h, 84px) + 24px) 0 0; overflow: hidden; aspect-ratio: 900 / 1125; border-radius: var(--r-niche); background: var(--field-hi); }
.mai-portrait img { width: 100%; height: 100%; object-fit: cover; }
.mai-lead { margin: 26px 0 0; max-width: 30ch; font: 400 clamp(24px, 2.4vw, 34px)/1.25 var(--font-sans); letter-spacing: -.01em; }
.mai-prose { margin: 18px 0 0; max-width: 60ch; font-size: clamp(17px, 1rem + .15vw, 18.5px); line-height: 1.7; color: var(--ink); }
.mai-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px clamp(32px, 6vw, 96px); align-items: center; }
.mai-split__media { margin: 0; overflow: hidden; background: var(--field-hi); }
.mai-split__media img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
.mai-statement { margin-top: clamp(64px, 9vw, 128px); padding: clamp(64px, 10vw, 144px) 0; background: var(--night); color: var(--night-ink); }
.mai-statement__k { margin: 0 0 24px; font: 400 var(--t-label)/1.3 var(--font-sans); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--band-ink); }
.mai-statement__t { margin: 0; max-width: 24ch; font: 400 clamp(28px, 3.8vw, 56px)/1.16 var(--font-sans); letter-spacing: -.015em; }
.mai-statement__t em { font-style: normal; }
.mai-statement__t span { display: block; }
.mai-statement__t span + span { margin-top: .12em; }
.mai-statement__t .is-soft { color: var(--night-ink-2); font-size: .62em; line-height: 1.35; max-width: 34ch; margin-top: .7em; }
.mai-diptych { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: clamp(28px, 4vw, 48px) 0 0; }
.mai-diptych__col { padding: clamp(22px, 3vw, 40px); background: var(--paper); border: 1px solid var(--line); }
.mai-diptych__city { margin: 0; font: 400 clamp(15px, 1.2vw, 17px)/1.2 var(--font-sans); letter-spacing: var(--tr-label); text-transform: uppercase; }
.mai-diptych__text { margin: 12px 0 0; font-size: 17px; line-height: 1.5; color: var(--ink-2); }
.mai-poster { margin: clamp(28px, 4vw, 56px) auto 0; max-width: 860px; padding: clamp(12px, 1.6vw, 20px); background: var(--paper); border: 1px solid var(--line); }
.mai-poster img { width: 100%; }
.mai-poster figcaption { margin: 12px 4px 2px; font-size: 15px; color: var(--ink-2); text-align: center; }
.mai-approach { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 28px clamp(32px, 6vw, 96px); align-items: start; }
.mai-specs { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.mai-specs li { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 14px 20px; background: var(--sauge);
  font: 400 clamp(18px, 1.4vw, 21px)/1.35 var(--font-sans); }
.mai-specs li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 5px var(--blanc-casse); }
/* le geste, en quatre temps (the four steps that were on the homepage film; plain HTML here) */
.mai-process__head { display: grid; justify-items: center; text-align: center; }
.mai-process__head .sc-h2 { margin-top: 18px; }
.mai-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: clamp(28px, 4vw, 48px) 0 0; padding: 0; list-style: none; }
.mai-steps__i { display: grid; align-content: start; justify-items: start; gap: 18px; min-height: 160px; padding: 24px 22px 26px; background: var(--sauge); color: var(--ink); }
.mai-steps__n { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--blanc-casse);
  font: 400 13px/1 var(--font-sans); letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.mai-steps__t { font: 400 clamp(19px, 1.6vw, 23px)/1.3 var(--font-sans); text-wrap: balance; }
.mai-steps__sign { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin: 28px 0 0; font-size: 17px; color: var(--ink-2); text-align: center; }
.mai-steps__heart { width: 30px; height: 32px; fill: var(--sauge); color: var(--sauge); }
@media (max-width: 899.98px) { .mai-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479.98px) {
  .mai-steps { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .mai-steps__i { grid-template-columns: auto minmax(0, 1fr); align-items: center; min-height: 0; gap: 16px; padding: 16px 18px; }
}
.mai-coda { margin: 22px 0 0; max-width: 40ch; font: 400 clamp(20px, 1.8vw, 26px)/1.35 var(--font-sans); color: var(--ink); }
.mai-word { max-width: 900px; margin-inline: auto; text-align: center; }
.mai-word__k { margin: 0 0 22px; font: 400 var(--t-label)/1.3 var(--font-sans); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-2); }
.mai-word blockquote { margin: 0; }
.mai-word blockquote p { margin: 0; font: 400 clamp(24px, 2.8vw, 40px)/1.3 var(--font-sans); letter-spacing: -.01em; text-wrap: balance; }
/* a signature: the charter reserves the script (Abramo, --font-script) for it; Questrial until the file arrives */
.mai-word__sign { display: inline-flex; align-items: center; gap: 12px; margin: 24px 0 0; font: 400 22px/1 var(--font-script); color: var(--ink-2); }
.mai-word__heart { width: 34px; height: 36px; fill: var(--sauge); }
.mai-word .sc-actions { justify-content: center; margin-top: 34px; }
@media (max-width: 899.98px) {
  .mai-hero, .mai-split, .mai-approach { grid-template-columns: minmax(0, 1fr); }
  .mai-portrait { margin: 0 auto; width: min(100%, 420px); grid-row: 2; }
  .mai-split__media { order: -1; }
}
@media (max-width: 599.98px) { .mai-diptych { grid-template-columns: minmax(0, 1fr); } .mai-word .sc-actions .cta { flex: 1 1 100%; } }

/* ═════════════════ MENTIONS LÉGALES ═════════════════ */
.legal-flag { display: inline-flex; align-items: center; gap: 10px; margin: 22px 0 0; padding: 11px 18px; background: var(--sauge);
  font: 400 15.5px/1.35 var(--font-sans); color: var(--ink); }
.legal-body { padding-top: clamp(32px, 4vw, 56px); }
.legal { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: 28px clamp(28px, 5vw, 80px); align-items: start; }
.legal-toc { position: sticky; top: calc(var(--top-h, 84px) + 24px); }
.legal-toc__k { margin: 0 0 10px; font: 400 11.5px/1.3 var(--font-sans); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-2); }
.legal-toc ol { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.legal-toc a { display: flex; align-items: center; min-height: 46px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 16px; }
.legal-toc a:hover { text-decoration: underline; text-underline-offset: 3px; }
.legal-content { padding: clamp(24px, 4vw, 56px); background: var(--paper); border: 1px solid var(--line); }
.legal-content h2 { margin: 44px 0 14px; font: 400 clamp(24px, 2vw, 30px)/1.2 var(--font-sans); letter-spacing: -.008em; scroll-margin-top: calc(var(--top-h, 84px) + 20px); }
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 { margin: 24px 0 8px; font: 400 12.5px/1.35 var(--font-sans); letter-spacing: var(--tr-caps); text-transform: uppercase; }
.legal-content p, .legal-content li { max-width: 68ch; font-size: 16.5px; line-height: 1.65; color: var(--ink); }
.legal-content p + p { margin-top: 12px; }
.legal-content ul { margin: 10px 0 0; padding-left: 1.2em; display: grid; gap: 6px; }
.legal-content a { color: var(--ink); text-underline-offset: 3px; }
.legal-list { display: grid; margin: 0; border-top: 1px solid var(--line); }
.legal-list > div { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 4px 20px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.legal-list dt { font-size: 15.5px; color: var(--ink-2); }
.legal-list dd { margin: 0; font-size: 16.5px; overflow-wrap: anywhere; }
.legal-todo { display: inline-block; padding: 1px 8px; background: var(--field-hi); color: var(--ink-2); font-size: 15px; }
@media (max-width: 899.98px) { .legal { grid-template-columns: minmax(0, 1fr); } .legal-toc { position: static; } }
@media (max-width: 599.98px) { .legal-list > div { grid-template-columns: minmax(0, 1fr); } }

/* ═════════════════ 404 ═════════════════ */
.nf { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 24px clamp(32px, 6vw, 96px); align-items: center; }
/* the fruit stands in a sage niche (the brand's arch) */
.nf-fruit { justify-self: center; width: min(78%, 340px); margin: calc(var(--top-h, 84px) + 16px) 0 0; padding: 18% 12% 8%; border-radius: var(--r-niche); background: var(--field-hi); }
.nf-fruit img { width: 100%; }
.nf-links { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 22px 0 0; padding: 0; list-style: none; }
.nf-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-size: 12.5px; letter-spacing: var(--tr-caps); text-transform: uppercase; text-underline-offset: 6px; }
.nf-quick { --sc-quick-bg: var(--paper); }

@media (max-width: 759.98px) { .nf { grid-template-columns: minmax(0, 1fr); } .nf-fruit { grid-row: 1; width: min(52%, 200px); margin-bottom: -20px; } .nf .sc-head { padding-top: 0; } }

/* ───────── reduced motion ───────── */