/*
 * Theme « famille » (Famille, after v4.css): the happy snack brand. Warm cream paper, chocolate ink, mustard yellow,
 * touches of tomato for « Best-seller »; a huge condensed display title (pair « anton »: --display), pills everywhere,
 * the header in two white pills, cards on a pastel of their category (lavender, sky, peach, mint, each drawn towards
 * the brand or the accent colour: partials/card .fa-t0 … .fa-t3), a yellow label « Sachet 100 g » above the name, the
 * price « / sachet », a big yellow « Ajouter », chips « Tous · 17 », the cart as a bar fixed at the bottom of phones.
 * Palette: fixed (cream / chocolate / mustard, every text pair ≥ 4.5:1, ShopThemeFamilleTest), set on body so that
 * v4.css derives its own from it; dark (the phone asks): deep brown and cream.
 * Signature « le saut du sachet »: the cards jump into place once (first visit, never in reduced motion).
 */
.theme-famille{--paper:#fbf7e4;--surface:#fffdf5;--ink:#3b2314;--line:#e6dcc0;--muted:#5a3b26;--soft-muted:#5a3b26;--ink-soft:#3f2617;--on-ink-muted:#dccaa8;--brand-on-ink:#f2c94c;--accent-on-ink:#f6a98f;--danger-on-ink:#ff9f8f;--v4-night:#22140b;--fa-y:#f2c94c;--fa-yi:#3b2314;--fa-t:#c2441e;--fa-k:80%}
.theme-famille,.theme-famille :is(main,.bar){--v4-page:var(--paper);--v4-tf:var(--display,var(--sans));--v4-tw:800;--v4-tls:0;--v4-tls2:.005em;--v4-tk:.96;--v4-tlh:.92;--v4-tsz:clamp(3.4rem,1rem + 10vw,9rem);--v4-cr:28px;--v4-cpad:10px 10px 14px;--v4-cb:0;--v4-mr:20px;--v4-cbg:var(--fa-p0);--v4-add-bg:var(--fa-y);--v4-add-fg:var(--fa-yi);--v4-add-r:999px;--v4-price:var(--ink);--v4-fam:var(--ink);--v4-cols:3;--v4-cols-xl:4;--v4-gap:14px;--v4h-ratio:1;--v4-media-bg:transparent;--chip-glow:0 8px 18px -10px var(--fa-y);--chip-lift:-2px;--chip-sheen:transparent;--fa-p0:color-mix(in oklab,color-mix(in oklab,#d9cdf3 88%,var(--brand)) var(--fa-k),var(--paper));--fa-p1:color-mix(in oklab,color-mix(in oklab,#c9e4f4 88%,var(--accent)) var(--fa-k),var(--paper));--fa-p2:color-mix(in oklab,color-mix(in oklab,#fbd7c2 88%,var(--brand)) var(--fa-k),var(--paper));--fa-p3:color-mix(in oklab,color-mix(in oklab,#cdeed8 88%,var(--accent)) var(--fa-k),var(--paper))}
@media (prefers-color-scheme:dark){.theme-famille :is(main,.bar){--fa-k:16%}}
:is(.v4h__title,.section__title,.pdp__title,.ft__title,.sl__title,.sheet__title,.done__title,.foot__big){font-synthesis-weight:none}
/* The header: « Menu | logo | Panier », two white pills */
.theme-famille .bar :is(.bar__brand,.bar__nav){padding:4px;border-radius:999px;background:var(--surface);color:var(--ink);box-shadow:0 6px 16px -10px rgb(59 35 20 / .5)}
.theme-famille .bar__brand{padding-right:14px}
.theme-famille .bar.is-stuck,.theme-famille .bar--solid{background:transparent;box-shadow:none}
.theme-famille .bar__name,.page-home.theme-famille .bar:not(.is-stuck) .bar__name{opacity:1;transform:none;font-family:var(--v4-tf);font-weight:400;font-size:18px;letter-spacing:.01em}
.theme-famille .bar__cart{background:var(--fa-y);color:var(--fa-yi)}
.theme-famille .bar__count{background:var(--ink);color:var(--paper)}
/* The opening: a mustard sun, two pastel blobs, crumbs */
.theme-famille .v4h{--v4-hero-bg:var(--paper)}
.fa-d{position:absolute;border-radius:50%}
.fa-d--sun{top:14%;right:-6%;width:clamp(150px,30vw,420px);aspect-ratio:1;background:var(--fa-y);opacity:.55}
.fa-d--a{bottom:10%;left:-8%;width:clamp(120px,22vw,300px);aspect-ratio:1.3;border-radius:46% 54% 60% 40%;background:var(--fa-p0)}
.fa-d--b{top:22%;left:8%;width:clamp(50px,7vw,96px);aspect-ratio:1;background:var(--fa-p3)}
.fa-d--dots{inset:0;border-radius:0;background:radial-gradient(5px 5px at 22% 70%,var(--fa-t) 98%,transparent),radial-gradient(4px 4px at 70% 18%,var(--fa-t) 98%,transparent),radial-gradient(6px 6px at 86% 76%,var(--fa-y) 98%,transparent),radial-gradient(4px 4px at 40% 12%,var(--fa-y) 98%,transparent);opacity:.8}
.theme-famille .v4h__tagline{font-weight:600}
.theme-famille .v4h__tagline em{font-family:inherit;font-style:normal;font-weight:800;color:var(--ink);background:linear-gradient(transparent 58%,color-mix(in srgb,var(--fa-y) 80%,transparent) 58%)}
.theme-famille .v4h__eyebrow{display:inline-block;padding:4px 12px;border-radius:999px;background:var(--fa-y);color:var(--fa-yi);font-size:14px;letter-spacing:.06em}
.theme-famille .v4h__item{border-radius:24px;background:var(--fa-p0)}
.theme-famille .v4h__item:nth-child(2){background:var(--fa-p1)}
.theme-famille .v4h__item:nth-child(3){background:var(--fa-p2)}
.theme-famille .v4h__add{width:48px;height:48px}
/* Chips: pills with their count, « Tous · 17 » */
.theme-famille :is(.chips--v4 .chips__chip,.filter){min-height:46px;padding:0 18px;border-radius:999px;background:color-mix(in oklab,var(--ink) 9%,var(--paper));color:var(--ink);box-shadow:none;font-size:16px;font-weight:700}
.theme-famille :is(.chips--v4 .chips__chip,.filter):is(:hover,.is-on,[aria-pressed=true]){background:var(--ink);color:var(--paper)}
.theme-famille .chips__n{margin-left:.25em;font-weight:500}
.theme-famille .filters{background:color-mix(in srgb,var(--paper) 92%,transparent)}
/* Cards: on the pastel of their category */
.theme-famille .fa-t1{--v4-cbg:var(--fa-p1)}
.theme-famille .fa-t2{--v4-cbg:var(--fa-p2)}
.theme-famille .fa-t3{--v4-cbg:var(--fa-p3)}
.theme-famille .card{background:var(--v4-cbg)}
.theme-famille .card__media{box-shadow:none}
.theme-famille .card__title{font-weight:700}
.fa-portion{align-self:flex-start;margin:2px 0 6px;padding:3px 10px;border-radius:8px;background:var(--fa-y);color:var(--fa-yi);font-size:14px;font-weight:700;line-height:1.3}
.theme-famille .price__now{font-weight:800}
.fa-unit{margin-left:.3em;font-weight:500;color:var(--ink);white-space:nowrap}
.theme-famille .price__was{margin-left:8px}
.theme-famille .card__foot{flex-direction:column;align-items:stretch;gap:8px}
.theme-famille .card__foot>.price{flex-direction:row;column-gap:0;margin:0}
.theme-famille .card .btn--add{width:100%;min-height:48px;padding:0 14px;font-size:16px;font-weight:800}
.theme-famille .card .btn--add__label{display:inline}
.theme-famille .card .benefit:not(.benefit--badge){background:color-mix(in srgb,var(--surface) 72%,transparent);color:color-mix(in srgb,var(--tag) 30%,var(--ink))}
.theme-famille :is(.fa-best,.benefit--badge){background:var(--fa-t);color:#fff;box-shadow:none;font-size:14px;font-weight:700}
.theme-famille .card__badges .chip{font-size:14px}
.theme-famille .btn{border-radius:999px}
.theme-famille :is(.step,.faq__item,.delivery,.acc__item){border-radius:24px;background:var(--fa-p1)}
.theme-famille .faq__item:nth-child(even){background:var(--fa-p2)}
.theme-famille .step__num{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--fa-y);color:var(--fa-yi)}
.theme-famille .marquee{background:var(--fa-y);color:var(--fa-yi)}
.theme-famille .pdp .media,.theme-famille .gallery .media{border-radius:28px;background:var(--fa-p0)}
/* The cart: a bar fixed at the bottom (« Panier ˄ » and the main button), a pill on computers */
.theme-famille .pill{background:var(--surface);color:var(--ink);box-shadow:0 -6px 30px -12px rgb(59 35 20 / .45)}
.theme-famille .pill.is-bump{animation-name:bump-d}
.theme-famille .pill__label{text-decoration:underline;text-underline-offset:4px}
.theme-famille .pill__label::after{content:" ˄";text-decoration:none}
.theme-famille .pill__icon{background:var(--ink);color:var(--paper)}
.theme-famille .pill__go{width:auto;min-width:64px;border-radius:999px;background:var(--fa-y);color:var(--fa-yi)}
@media (max-width:1099px){.theme-famille .pill{left:0;right:0;bottom:0;width:100%;min-height:72px;padding:10px 16px max(10px,env(safe-area-inset-bottom));border-radius:24px 24px 0 0;transform:none}.theme-famille .pill[hidden]{transform:translateY(140%)}}
/* Signature: the bags jump into place (first visit only) */
@keyframes fa-jump{0%{opacity:0;transform:translateY(22px)}55%{opacity:1;transform:translateY(-10px)}80%{transform:translateY(3px)}100%{transform:none}}
html.sig-first:not(.motion-low) .theme-famille{--v4-sig:v4-pop;--v4-sig-item:fa-jump}
html.sig-first:not(.motion-low) .theme-famille .card.reveal.is-in{animation:fa-jump .6s var(--ease) both;animation-delay:calc(var(--i,0) * 70ms)}
html.sig-first:not(.motion-low) .fa-d--sun{animation:v4-pop .8s var(--spring) both}
@media (prefers-reduced-motion:reduce){.theme-famille .card{animation:none!important}}
/* Nouveautés: a band of tilted bags */
.theme-famille .ft{background:linear-gradient(transparent 18%,var(--fa-y) 18% 82%,transparent 82%)}
.theme-famille .ft__item{padding:10px;border-radius:24px 24px 14px 14px;background:var(--fa-p0);box-shadow:0 12px 22px -16px rgb(59 35 20 / .6)}
.theme-famille .ft__item:nth-child(4n+2){background:var(--fa-p1);rotate:2deg}
.theme-famille .ft__item:nth-child(4n+3){background:var(--fa-p2);rotate:-1.5deg}
.theme-famille .ft__item:nth-child(4n){background:var(--fa-p3);rotate:1.5deg}
.theme-famille .ft__item:nth-child(4n+1){rotate:-2deg}
.theme-famille .ft__media{border-radius:16px}
.theme-famille :is(.ft__badge,.ft__tag){background:var(--fa-t);color:#fff}
/* Diapos: large pastel cards (the next one slides up with a short bounce) */
.theme-famille .sl--famille.is-on .sl__slide{transform:translateY(8%) scale(.96);transition-timing-function:var(--spring)}
.theme-famille .sl--famille.is-on .sl__slide.is-active{transform:none}
.theme-famille .sl--famille .sl__track{padding:12px;border-radius:32px;background:var(--fa-p1)}
.theme-famille .sl--famille .sl__link{border-radius:24px}
.theme-famille .sl--famille .sl__cap{border-radius:20px;background:var(--surface);color:var(--ink)}
.theme-famille .sl--famille .sl__btn{border-radius:999px;background:var(--fa-y);color:var(--fa-yi)}
/* Avis: speech bubbles */
.theme-famille .pv--famille .pv__card{--paper:var(--fa-p0);position:relative;border-radius:26px 26px 26px 6px;background:var(--fa-p0);box-shadow:none}
.theme-famille .pv--famille .pv__card:nth-child(3n+2){--paper:var(--fa-p2);background:var(--fa-p2);border-radius:26px 26px 6px 26px}
.theme-famille .pv--famille .pv__card:nth-child(3n){--paper:var(--fa-p3);background:var(--fa-p3)}
.theme-famille .pv--famille .pv__founder{border-radius:28px;background:var(--fa-p1)}
/* Puces */
.theme-famille :is(.offer,.benefit__go){border-radius:22px}
.theme-famille :is(.bday__field,.bday__consent){font-size:14px}