/* Maquette boutique nutrition, version claire.
   Structure inspirée des grandes boutiques scandinaves ; identité propre (Archivo, rouge, couleur du parfum).
   CSP stricte : aucun style en ligne. Mouvement : transform/opacity (+ couleurs @property). */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face { font-family: "Archivo Fallback"; src: local("Arial"); size-adjust: 98%; ascent-override: 90%; descent-override: 22%; }
@property --panel { syntax: "<color>"; inherits: true; initial-value: #e7d8cb; }

:root {
  --bg: #f5f3ef;
  --surface: #ffffff;
  --tile: #ece9e3;
  --ink: #171615;
  --ink-2: #5d5851;
  --line: #e2ddd5;
  --line-2: #c9c3b9;
  --red: #c8161d;
  --red-hi: #a81218;
  --ok: #1d7a3b;
  --mark: #b45309;
  --dark: #0f0e0d;

  --t-choco: #e8d9cd;
  --t-vanille: #f2e6c8;
  --t-fraise: #f5d6dd;
  --t-caramel: #f1dbbf;
  --t-neutre: #e1e4e7;
  --t-acier: #dde1e5;
  --t-cerise: #f2d0d7;
  --t-coton: #f7d9e8;
  --t-iso: #cfe0e6;
  --t-lime: #e1eac9;
  --t-or: #efe2c2;

  --font: "Archivo", "Archivo Fallback", system-ui, sans-serif;
  --fs-body: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --fs-h1: clamp(2.5rem, 1.7rem + 3.4vw, 5.25rem);
  --fs-h2: clamp(1.875rem, 1.45rem + 1.8vw, 3.25rem);

  --r1: 10px;
  --r2: 16px;
  --r3: 28px;
  --gut: clamp(16px, 3.6vw, 48px);
  --max: 1360px;
  --bar: 36px;
  --hdr: 72px;
  --shadow: 0 1px 2px rgb(23 22 21 / 0.06), 0 8px 24px -8px rgb(23 22 21 / 0.14);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --spring: linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017 19.6%, 1.067 22.7%, 1.088 25.9%, 1.087 29.5%, 1.04 37.5%, 1.012 44.4%, 0.998 52.7%, 0.995 63.1%, 1);
  color-scheme: light;
  accent-color: var(--red);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr) + 24px); scrollbar-color: var(--line-2) var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--fs-body) / 1.55 var(--font); -webkit-font-smoothing: antialiased; overflow-x: clip; caret-color: var(--red); }
::selection { background: var(--ink); color: var(--bg); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gut)); margin-inline: auto; padding-inline: var(--gut); }
.skip { position: fixed; left: 16px; top: 12px; z-index: 100; padding: 12px 18px; background: var(--ink); color: var(--bg); border-radius: var(--r1); font-weight: 700; transform: translateY(-160%); transition: transform 0.2s var(--ease-out); }
.skip:focus-visible { transform: none; }
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.price, .label dd, .qty output, .stepper output, .cart-total span:last-child, .rail-count { font-variant-numeric: tabular-nums; }

/* ---------- typographie ---------- */
.h1 { font-size: var(--fs-h1); font-weight: 820; font-stretch: 72%; line-height: 0.94; letter-spacing: -0.015em; text-wrap: balance; text-transform: uppercase; }
.h2 { font-size: var(--fs-h2); font-weight: 800; font-stretch: 74%; line-height: 0.98; letter-spacing: -0.01em; text-wrap: balance; text-transform: uppercase; }
.lede { font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); color: var(--ink-2); max-width: 34em; text-wrap: pretty; }
.sec-sub { color: var(--ink-2); max-width: 38em; margin-top: 12px; }

/* ---------- boutons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; border: 1px solid transparent; font-weight: 700; font-size: 0.9375rem; text-align: center; text-decoration: none; transition: transform 0.18s var(--ease-out), background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px) scale(0.98); transition-duration: 0.06s; }
.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-hi); box-shadow: 0 10px 22px -10px rgb(200 22 29 / 0.6); }
.btn-primary:disabled { background: var(--tile); color: var(--ink-2); cursor: not-allowed; transform: none; box-shadow: none; }
.btn-dark { background: var(--ink); color: var(--bg); }
.btn-dark:hover { background: #000; }
.btn-ghost { border-color: var(--line-2); background: var(--surface); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-light { border-color: rgb(255 255 255 / 0.55); background: transparent; color: #fff; }
.btn-light:hover { border-color: #fff; background: rgb(255 255 255 / 0.08); }
.btn-block { width: 100%; }
.btn-wa .ico { color: var(--ok); }
.btn-light.btn-wa .ico { color: #7fd99a; }
.link-arrow { display: inline-flex; gap: 8px; align-items: center; min-height: 44px; font-weight: 700; text-decoration: none; }
.link-arrow .ico { transition: transform 0.3s var(--ease-out); }
.link-arrow:hover { text-decoration: underline; }
.link-arrow:hover .ico { transform: translateX(4px); }
.link-btn { background: none; border: 0; padding: 0; min-height: 44px; text-decoration: underline; font-weight: 700; }

/* ---------- bandeau + en-tête ---------- */
.bar { height: var(--bar); background: var(--ink); color: var(--bg); font-size: 0.8125rem; font-weight: 600; }
.bar-in { height: 100%; display: flex; align-items: center; justify-content: center; gap: 28px; }
.bar-in p { display: inline-flex; align-items: center; gap: 8px; }
.bar .ico { width: 16px; height: 16px; }
.hdr { position: sticky; top: 0; z-index: 50; background: rgb(255 255 255 / 0.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.hdr-in { height: var(--hdr); display: flex; align-items: center; gap: 20px; }
.brand { font-size: 1.625rem; font-weight: 900; font-stretch: 62%; letter-spacing: 0.005em; text-decoration: none; line-height: 1; text-transform: uppercase; flex: none; }
.brand b { color: var(--red); font-weight: 900; margin-left: 2px; }
.hdr-search { flex: 1; max-width: 560px; margin-inline: auto; display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 18px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); color: var(--ink-2); text-decoration: none; transition: border-color 0.2s; }
.hdr-search:hover { border-color: var(--line-2); }
.hdr-act { display: flex; align-items: center; gap: 2px; }
.icon-btn { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; text-decoration: none; transition: background-color 0.2s, transform 0.15s var(--ease-out); }
.icon-btn:hover { background: var(--tile); }
.icon-btn:active { transform: scale(0.94); }
.icon-btn .ico { width: 22px; height: 22px; }
.hdr-search-m, .menu-btn { display: none; }
.cart-count { position: absolute; top: 3px; right: 1px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--red); color: #fff; font-size: 0.6875rem; font-weight: 800; line-height: 19px; text-align: center; }
.cart-count.bump { animation: bump 0.5s var(--spring); }
@keyframes bump { 40% { transform: scale(1.45); } }
.nav { border-top: 1px solid var(--line); }
.nav-top, .nav-cta, .scrim { display: none; }
.nav-in { display: flex; gap: 2px; height: 48px; align-items: stretch; }
.nav-link { position: relative; display: inline-flex; align-items: center; padding: 0 14px; font-weight: 600; font-size: 0.9375rem; text-decoration: none; color: var(--ink-2); transition: color 0.2s; }
.nav-link:first-child { padding-left: 0; }
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--ink); }
.nav-link::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease-out); }
.nav-link:first-child::after { left: 0; }
.nav-link:hover::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); }
.nav-link .ico { display: none; }

/* ---------- héros : photo de salle + podium de trois marques ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: var(--dark); }
.hero-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 78% 50%; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(12 11 10 / 0.9) 0%, rgb(12 11 10 / 0.76) 42%, rgb(12 11 10 / 0.5) 100%); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); align-items: center; min-height: min(calc(100svh - var(--bar) - var(--hdr) - 49px), 780px); padding-block: clamp(32px, 6vh, 72px); }
.hero-copy { display: grid; gap: 22px; align-content: center; }
.hero .lede { color: rgb(255 255 255 / 0.84); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.trust { display: flex; flex-wrap: wrap; gap: 10px 22px; padding-top: 20px; border-top: 1px solid rgb(255 255 255 / 0.18); font-size: 0.9375rem; font-weight: 600; }
.trust li { display: inline-flex; align-items: center; gap: 8px; }
.trust .ico { color: #7fd99a; }
.hero .pending { top: 14px; right: 14px; }

.podium { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 16px; height: 100%; min-height: 560px; --panel: #e7d8cb; transition: --panel 0.9s var(--ease-io); }
.podium[data-flav="lime"] { --panel: var(--t-lime); }
.podium[data-flav="choco"] { --panel: #e7d8cb; }
.podium[data-flav="or"] { --panel: var(--t-or); }
.podium-stage { position: relative; container-type: inline-size; min-height: 420px; }
.podium-stage::before { content: ""; position: absolute; inset: 14% 4% 0; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in oklab, var(--panel) 50%, transparent), transparent); }
.giant { position: absolute; inset: 0 0 auto; z-index: 0; text-align: center; white-space: nowrap; pointer-events: none; font-size: 23cqi; font-weight: 900; font-stretch: 62%; line-height: 0.8; text-transform: uppercase; color: rgb(255 255 255 / 0.16); }
.giant-word { display: inline-block; }
.giant .ch { display: inline-block; transition: transform 0.55s var(--ease-out), opacity 0.4s; transition-delay: calc(var(--i, 0) * 32ms); }
.giant.is-out .ch { transform: translateY(-38%); opacity: 0; transition-duration: 0.28s, 0.2s; transition-delay: calc(var(--i, 0) * 14ms); }
.giant.is-pre .ch { transform: translateY(38%); opacity: 0; transition: none; }
.jars { position: absolute; inset: 17% 2% 0 2%; z-index: 2; }
.jar { position: absolute; bottom: 0; padding: 0; border: 0; background: none; border-radius: var(--r2); transition: transform 0.35s var(--ease-out); }
.jar img { height: 100%; width: auto; filter: drop-shadow(0 26px 24px rgb(0 0 0 / 0.5)); transition: filter 0.4s, opacity 0.4s; }
.jar.pos-c { left: 50%; height: 100%; z-index: 3; transform: translateX(-50%); }
.jar.pos-l { left: 0; height: 70%; z-index: 2; }
.jar.pos-r { right: 0; height: 62%; z-index: 2; }
.jar.pos-l img, .jar.pos-r img { opacity: 0.85; filter: brightness(0.8) drop-shadow(0 18px 18px rgb(0 0 0 / 0.45)); }
.jar.pos-l:hover img, .jar.pos-r:hover img, .jar:focus-visible img { opacity: 1; filter: drop-shadow(0 26px 24px rgb(0 0 0 / 0.5)); }
.jar.pos-l:hover, .jar.pos-r:hover { transform: translateY(-10px); }
.jar.pos-c:hover { transform: translateX(-50%) translateY(-6px); }
.jar:focus-visible { outline-color: #fff; }
.pod-card { position: relative; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 14px 14px 20px; border-radius: var(--r2); background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.pod-name { font-weight: 800; line-height: 1.25; }
.pod-facts { color: var(--ink-2); font-size: 0.875rem; }
.pod-card .btn { min-height: 46px; padding: 0 22px; flex: none; }
.hint { position: absolute; top: 4px; right: 0; z-index: 4; font-size: 0.8125rem; font-weight: 600; color: rgb(255 255 255 / 0.7); }

/* entrée (une fois) */
[data-enter] .h1, [data-enter] .lede, [data-enter] .actions, [data-enter] .trust, [data-enter] .crumbs, [data-enter] .shop-banner, [data-enter] .filters { animation: rise 0.9s var(--ease-out) both; }
[data-enter] .lede, [data-enter] .shop-banner { animation-delay: 0.08s; }
[data-enter] .actions, [data-enter] .filters { animation-delay: 0.16s; }
[data-enter] .trust { animation-delay: 0.24s; }
[data-enter] .jar { animation: land 1.1s var(--spring) both; }
[data-enter] .jar.pos-c { animation-delay: 0.2s; }
[data-enter] .jar.pos-l { animation-delay: 0.32s; }
[data-enter] .jar.pos-r { animation-delay: 0.44s; }
[data-enter] .giant { animation: fade 1.2s var(--ease-out) 0.3s both; }
[data-enter] .pod-card { animation: rise 0.8s var(--ease-out) 0.65s both; }
@keyframes rise { from { opacity: 0; transform: translateY(20px); } }
@keyframes fade { from { opacity: 0; } }
@keyframes land { from { opacity: 0; translate: 0 -60px; } 40% { opacity: 1; } }
::view-transition-group(*) { animation-duration: 0.7s; animation-timing-function: var(--spring); }

/* ---------- sections ---------- */
.sec { padding-block: clamp(56px, 9vh, 112px); }
.sec-head { margin-bottom: clamp(24px, 4vh, 40px); }
.sec-head--row { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 24px; flex-wrap: wrap; }
.sec--white { background: var(--surface); border-block: 1px solid var(--line); }

/* bento des rayons */
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(240px, 30vh)); gap: 16px; }
.bento-item { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(18px, 2vw, 28px); border-radius: var(--r3); text-decoration: none; overflow: hidden; isolation: isolate; background: var(--b, var(--tile)); transition: transform 0.35s var(--ease-out); }
.bento-item:hover { transform: translateY(-3px); }
.bento-item img { position: absolute; z-index: -1; right: 6%; bottom: 0; height: 80%; width: auto; filter: drop-shadow(0 20px 20px rgb(23 22 21 / 0.22)); transition: transform 0.6s var(--ease-out); }
.bento-item:hover img { transform: translateY(-8px) scale(1.04); }
.bento-big { grid-column: span 2; grid-row: span 2; --b: var(--t-or); }
.bento-big img { height: 76%; right: 8%; }
.bento-wide { grid-column: span 2; --b: #e7d8cb; }
.bento-wide img { height: 104%; bottom: -10%; }
.bento-crea { --b: var(--t-lime); }
.bento-crea img { height: 62%; right: 8%; }
.bento-pre { --b: var(--t-cerise); }
.bento-pre img { height: 60%; right: 8%; }
.bento-t { font-size: clamp(1.75rem, 1.2rem + 1.8vw, 3rem); font-weight: 850; font-stretch: 66%; text-transform: uppercase; line-height: 0.95; max-width: 9ch; }
.bento-big .bento-t { font-size: clamp(2.5rem, 1.6rem + 3vw, 4.75rem); }
.bento-s { font-size: 0.9375rem; font-weight: 600; max-width: 18ch; }
.bento-go { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.9375rem; }
.bento-go .ico { transition: transform 0.3s var(--ease-out); }
.bento-item:hover .bento-go .ico { transform: translateX(5px); }

/* carrousel produit */
.rail-wrap { position: relative; }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 16px) / 4); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 20px; scrollbar-width: none; overscroll-behavior-x: contain; }
.rail::-webkit-scrollbar { display: none; }
.rail > .card { scroll-snap-align: start; }
.rail-nav { display: flex; align-items: center; gap: 8px; }
.rail-count { min-width: 52px; text-align: center; font-weight: 700; font-size: 0.875rem; color: var(--ink-2); }
.rail-btn { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--surface); display: grid; place-items: center; transition: background-color 0.2s, border-color 0.2s, opacity 0.2s, transform 0.15s var(--ease-out); }
.rail-btn:hover { border-color: var(--ink); }
.rail-btn:active { transform: scale(0.94); }
.rail-btn:disabled { opacity: 0.35; cursor: default; }
.rail-progress { height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.rail-progress span { display: block; height: 100%; width: 100%; background: var(--ink); transform-origin: left; transform: scaleX(0.1); }
@supports (animation-timeline: scroll(x)) {
  .rail-wrap { timeline-scope: --rail; }
  .rail { scroll-timeline: --rail x; }
  .rail-progress span { animation: progress linear both; animation-timeline: --rail; }
  @keyframes progress { from { transform: scaleX(0.1); } to { transform: scaleX(1); } }
}

/* cartes produit */
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.card { position: relative; display: flex; flex-direction: column; border-radius: var(--r2); background: var(--surface); border: 1px solid var(--line); overflow: hidden; transition: transform 0.3s var(--ease-out), box-shadow 0.3s; }
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.card-media { position: relative; aspect-ratio: 1 / 1.02; display: grid; place-items: center; padding: 10% 12% 8%; background: var(--tile); isolation: isolate; overflow: hidden; }
.card-media::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--card-t, var(--t-neutre)); opacity: 0; transition: opacity 0.45s var(--ease-out); }
.card:hover .card-media::before { opacity: 1; }
.card-media img { max-height: 100%; max-width: 100%; width: auto; object-fit: contain; filter: drop-shadow(0 14px 14px rgb(23 22 21 / 0.2)); transition: transform 0.5s var(--ease-out); }
.card:hover .card-media img { transform: translateY(-6px) scale(1.04); }
.card-media .tile { position: absolute; inset: 0; border-radius: 0; }
.card[data-flav="choco"] { --card-t: var(--t-choco); }
.card[data-flav="neutre"] { --card-t: var(--t-neutre); }
.card[data-flav="lime"] { --card-t: var(--t-lime); }
.card[data-flav="vanille"] { --card-t: var(--t-vanille); }
.card[data-flav="fraise"] { --card-t: var(--t-fraise); }
.card[data-flav="caramel"] { --card-t: var(--t-caramel); }
.card[data-flav="acier"] { --card-t: var(--t-acier); }
.card[data-flav="cerise"] { --card-t: var(--t-cerise); }
.card[data-flav="coton"] { --card-t: var(--t-coton); }
.card[data-flav="iso"] { --card-t: var(--t-iso); }
.card[data-flav="or"] { --card-t: var(--t-or); }
.card-body { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px 16px; flex: 1; }
.card-brand { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.card-name { font-size: 1rem; font-weight: 700; line-height: 1.25; }
.card-name a { text-decoration: none; }
.card-name a::after { content: ""; position: absolute; inset: 0 0 76px 0; }
.card-name a:hover { text-decoration: underline; }
.card-meta { font-size: 0.875rem; color: var(--ink-2); }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 14px; }
.price { font-size: 1.375rem; font-weight: 800; font-stretch: 80%; line-height: 1; white-space: nowrap; }
.price span { font-size: 0.68em; color: var(--ink-2); font-weight: 700; }
.price.assumed { font-size: 0.875rem; font-weight: 600; font-stretch: 100%; color: var(--ink-2); white-space: normal; }
.add { position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 0; background: var(--ink); color: var(--bg); font-weight: 700; font-size: 0.875rem; white-space: nowrap; transition: background-color 0.2s, transform 0.15s var(--ease-out); }
.add .ico { width: 18px; height: 18px; }
.add:hover { background: var(--red); transform: translateY(-1px); }
.add:active { transform: scale(0.96); }
.add.is-done { background: var(--ok); }

/* tuile typographique (photo à fournir) */
.tile { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 10%; border-radius: var(--r2); container-type: inline-size; background: var(--t-neutre); color: var(--ink); overflow: hidden; position: relative; }
.tile-brand { position: absolute; top: 10%; left: 10%; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(23 22 21 / 0.7); }
.tile-name { font-size: 16cqi; font-weight: 900; font-stretch: 62%; line-height: 0.88; text-transform: uppercase; }
.pending { display: none; position: absolute; top: 9%; right: 8%; z-index: 3; padding: 3px 8px; border-radius: 4px; background: var(--mark); color: #fff; font-size: 0.6875rem; font-weight: 800; }

/* objectif -> produit */
.choose-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 56px); align-items: stretch; }
.goals { display: grid; align-content: start; border-top: 1px solid var(--line); }
.goal { display: grid; gap: 2px; text-align: left; padding: 20px 0; border: 0; border-bottom: 1px solid var(--line); background: none; position: relative; }
.goal::before { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease-out); }
.goal[aria-pressed="true"]::before { transform: scaleX(1); }
.goal-t { font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem); font-weight: 800; font-stretch: 72%; text-transform: uppercase; line-height: 1.05; color: var(--ink-2); transition: color 0.25s, transform 0.35s var(--ease-out); }
.goal-f { color: var(--ink-2); font-size: 0.9375rem; }
.goal:hover .goal-t { color: var(--ink); transform: translateX(6px); }
.goal[aria-pressed="true"] .goal-t { color: var(--ink); }
.stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(20px, 3vw, 40px); align-items: center; min-height: 500px; padding: clamp(20px, 3vw, 40px); border-radius: var(--r3); background: var(--sb, var(--t-choco)); }
.stage[hidden] { display: none; }
.stage-media { display: grid; place-items: center; height: 100%; min-height: 300px; }
.stage-media img { max-height: 400px; width: auto; filter: drop-shadow(0 24px 24px rgb(23 22 21 / 0.25)); }
.stage-body { display: grid; gap: 14px; align-content: center; justify-items: start; }
.stage-name { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); font-weight: 800; line-height: 1.15; }
.stage-fam { margin-top: -8px; font-weight: 600; color: rgb(23 22 21 / 0.7); }
.stage-text { color: rgb(23 22 21 / 0.78); }
::view-transition-old(stage) { animation: 0.25s var(--ease-io) both vt-out; }
::view-transition-new(stage) { animation: 0.55s var(--ease-out) both vt-in; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-12px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(18px); } }

/* valeurs : carte sobre, dans le style des autres cartes */
.label { width: 100%; max-width: 420px; padding: 16px 20px 14px; border-radius: var(--r2); background: var(--surface); border: 1px solid var(--line); }
.stage .label { background: rgb(255 255 255 / 0.72); border-color: transparent; }
.label-h { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.label-s { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0 10px; font-size: 0.875rem; color: var(--ink-2); border-bottom: 1px solid var(--line); }
.label dl { display: grid; }
.label dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.label dl div:last-child { border-bottom: 0; }
.label dt { font-weight: 600; color: var(--ink-2); }
.label dd { font-size: 1.125rem; font-weight: 800; }
.label-n { font-size: 0.8125rem; color: var(--ink-2); padding-top: 8px; border-top: 1px solid var(--line); }

/* logos qui défilent */
.marquee { position: relative; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee 40s linear infinite; }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
.marquee-list { display: flex; align-items: center; gap: clamp(40px, 6vw, 80px); padding-right: clamp(40px, 6vw, 80px); }
.marquee-list li { flex: none; }
.marquee-list a, .marquee-list span { display: grid; place-items: center; height: 64px; text-decoration: none; }
.logo { height: 34px; width: auto; max-width: 170px; object-fit: contain; filter: grayscale(1); opacity: 0.6; transition: filter 0.3s, opacity 0.3s, transform 0.3s var(--ease-out); }
.logo--sm { height: 22px; }
.logo--tall { height: 52px; }
.logo--jpg { mix-blend-mode: multiply; height: 24px; }
a:hover > .logo, a:focus-visible > .logo { filter: none; opacity: 1; transform: scale(1.06); }
.logo-txt { font-size: 1rem; font-weight: 800; font-stretch: 85%; letter-spacing: 0.06em; text-transform: uppercase; color: #6b665f; white-space: nowrap; transition: color 0.3s; }
a:hover > .logo-txt { color: var(--ink); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* FAQ */
.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 56px); }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); interpolate-size: allow-keywords; }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 64px; padding: 16px 0; font-weight: 700; font-size: 1.0625rem; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ico { transition: transform 0.35s var(--ease-out); }
.faq details[open] summary .ico { transform: rotate(45deg); }
.faq details::details-content { block-size: 0; overflow: clip; transition: block-size 0.4s var(--ease-out), content-visibility 0.4s allow-discrete; }
.faq details[open]::details-content { block-size: auto; }
.faq .ans { padding: 0 48px 20px 0; color: var(--ink-2); max-width: 62ch; }

/* réassurance */
.assure { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.assure li { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: start; padding: 22px; border-radius: var(--r2); background: var(--surface); border: 1px solid var(--line); }
.assure .ico { width: 26px; height: 26px; grid-row: span 2; color: var(--red); }
.assure b { font-weight: 800; }
.assure p { color: var(--ink-2); font-size: 0.9375rem; }

/* ---------- pied ---------- */
.ftr { background: var(--ink); color: var(--bg); padding-block: 64px 28px; margin-top: clamp(40px, 6vh, 80px); }
.ftr-in { display: grid; grid-template-columns: 2fr repeat(2, 1fr); gap: 32px; padding-bottom: 36px; border-bottom: 1px solid rgb(245 243 239 / 0.16); }
.ftr .brand { font-size: 2.75rem; margin-bottom: 12px; }
.ftr-note { color: rgb(245 243 239 / 0.7); max-width: 32em; }
.ftr h2 { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(245 243 239 / 0.6); margin-bottom: 8px; }
.ftr-nav { display: grid; }
.ftr-nav a { min-height: 40px; display: inline-flex; align-items: center; text-decoration: none; color: rgb(245 243 239 / 0.86); }
.ftr-nav a:hover { color: #fff; text-decoration: underline; }
.ftr-credit { padding-top: 20px; font-size: 0.8125rem; color: rgb(245 243 239 / 0.6); }
.ftr ::selection { background: var(--bg); color: var(--ink); }

/* ---------- boutique ---------- */
.shop-head { padding-block: clamp(16px, 3vh, 32px) 0; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 0.875rem; color: var(--ink-2); }
.crumbs a { text-decoration: none; padding-block: 10px; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs span { padding-block: 10px; }
.shop-banner { position: relative; display: grid; align-items: end; min-height: clamp(180px, 22vw, 280px); margin-top: 4px; border-radius: var(--r3); overflow: hidden; isolation: isolate; color: #fff; background: var(--dark); }
.shop-banner img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 62% 58%; }
.shop-banner::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(10 10 10 / 0.8) 0%, rgb(10 10 10 / 0.4) 55%, transparent 85%); }
.shop-banner-in { display: grid; gap: 6px; padding: clamp(20px, 3vw, 36px); max-width: 560px; }
.h1--shop { font-size: clamp(2rem, 1.4rem + 2vw, 3.25rem); }
.shop-count { color: rgb(255 255 255 / 0.85); font-size: 0.9375rem; }
.shop-banner .pending { top: 14px; right: 14px; }
.filters { display: grid; gap: 12px; margin-top: 20px; padding-block: 14px; position: sticky; top: var(--hdr); z-index: 20; background: rgb(245 243 239 / 0.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); font-weight: 650; font-size: 0.9375rem; transition: background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.15s var(--ease-out); }
.chip span { color: var(--ink-2); font-weight: 600; margin-left: 4px; }
.chip:hover { border-color: var(--ink); }
.chip:active { transform: scale(0.96); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.chip[aria-pressed="true"] span { color: rgb(245 243 239 / 0.7); }
.filter-row { display: flex; gap: 10px; flex-wrap: wrap; }
.search { flex: 1 1 280px; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line-2); color: var(--ink-2); }
.search:focus-within { border-color: var(--ink); }
.search input { flex: 1; min-width: 0; min-height: 46px; border: 0; background: transparent; color: var(--ink); font-size: 1rem; }
.search input:focus { outline: none; }
.search input::placeholder { color: #7a746c; }
.select select { min-height: 48px; width: 100%; padding: 0 42px 0 16px; border-radius: 999px; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23171615' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 16px center; border: 1px solid var(--line-2); appearance: none; font-size: 0.9375rem; font-weight: 600; }
.fam-select { display: none; }
.sec--grid { padding-top: 24px; }
.no-result { padding: 64px 0; color: var(--ink-2); text-align: center; font-size: 1.125rem; }
.card[hidden] { display: none; }

/* ---------- page produit ---------- */
.pdp { padding-block: 8px clamp(40px, 7vh, 80px); }
.pdp-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 64px); align-items: start; margin-top: 8px; }
.stagebox { position: relative; aspect-ratio: 1 / 1; border-radius: var(--r3); background: var(--sb, var(--tile)); display: grid; place-items: center; overflow: hidden; }
.stagebox img { max-height: 78%; max-width: 78%; width: auto; object-fit: contain; filter: drop-shadow(0 30px 30px rgb(23 22 21 / 0.22)); }
.buy { display: grid; gap: 16px; align-content: start; position: sticky; top: calc(var(--hdr) + 20px); }
.buy-brand { justify-self: start; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; }
.buy-brand:hover { color: var(--ink); text-decoration: underline; }
.buy-title { margin-top: -8px; font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); font-weight: 800; font-stretch: 86%; line-height: 1.08; text-wrap: balance; }
.buy-meta { color: var(--ink-2); }
.buy-price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding-block: 4px; }
.buy-price .price { font-size: clamp(2rem, 1.7rem + 1vw, 2.75rem); }
.buy-price .price.assumed { font-size: 1.125rem; font-weight: 700; color: var(--ink); }
.per { color: var(--ink-2); font-size: 0.9375rem; }
.bullets { display: grid; gap: 8px; }
.bullets li { display: flex; gap: 10px; align-items: flex-start; }
.bullets .ico { color: var(--ok); margin-top: 3px; }
.opt { display: grid; gap: 10px; border: 0; padding: 0; margin: 0; }
.opt legend { font-weight: 700; padding: 0; margin-bottom: 10px; }
.opt legend span { font-weight: 500; color: var(--ink-2); }
.seg { display: flex; flex-wrap: wrap; gap: 10px; }
.seg label { position: relative; flex: 1 1 140px; }
.seg input { position: absolute; opacity: 0; inset: 0; }
.seg span { display: grid; gap: 2px; min-height: 56px; padding: 10px 16px; border-radius: var(--r1); border: 1px solid var(--line-2); background: var(--surface); cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s; }
.seg small { color: var(--ink-2); font-size: 0.8125rem; }
.seg b { font-weight: 800; }
.seg input:checked + span { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.seg input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 3px; }
.seg span:hover { border-color: var(--ink); }
.buy-row { display: flex; gap: 12px; }
.buy-row .btn { flex: 1; min-height: 56px; font-size: 1rem; }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); }
.stepper button { width: 48px; height: 54px; border: 0; background: none; display: grid; place-items: center; border-radius: 999px; }
.stepper button:hover { background: var(--tile); }
.stepper output { min-width: 28px; text-align: center; font-weight: 800; }
.trust-inline { display: flex; flex-wrap: wrap; gap: 8px 18px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 0.875rem; font-weight: 600; }
.trust-inline li { display: inline-flex; align-items: center; gap: 6px; }
.trust-inline .ico { width: 18px; height: 18px; color: var(--ink); }

/* points forts : le pot et ses bienfaits */
.feat { padding-block: clamp(56px, 9vh, 104px); background: var(--surface); border-block: 1px solid var(--line); }
.feat-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 72px); align-items: center; }
.feat-visual { position: relative; aspect-ratio: 1 / 1.05; max-height: 600px; border-radius: var(--r3); background: var(--sb, var(--tile)); display: grid; place-items: center; overflow: hidden; container-type: inline-size; isolation: isolate; }
.feat-giant { position: absolute; inset: 7% 0 auto; z-index: -1; text-align: center; white-space: nowrap; font-size: 24cqi; font-weight: 900; font-stretch: 62%; line-height: 0.8; text-transform: uppercase; color: rgb(255 255 255 / 0.75); }
.feat-visual img { max-height: 70%; max-width: 72%; width: auto; margin-top: 14%; object-fit: contain; filter: drop-shadow(0 28px 26px rgb(23 22 21 / 0.24)); }
.feat-list { border-top: 1px solid var(--line); margin-top: clamp(20px, 3vh, 32px); }
.feat-list li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 2px 18px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); }
.feat-ic { grid-row: span 2; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--sb, var(--tile)); }
.feat-ic .ico { width: 24px; height: 24px; color: var(--ink); }
.feat-t { font-size: 1.125rem; font-weight: 800; line-height: 1.2; }
.feat-d { color: var(--ink-2); }
.how-h { margin-top: clamp(32px, 5vh, 56px); font-size: 1.125rem; font-weight: 800; }
.how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.how li { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; align-items: center; padding: 18px 20px; border-radius: var(--r2); background: var(--bg); }
.how .ico { grid-row: span 2; width: 30px; height: 30px; color: var(--red); }
.how b { font-size: 1.125rem; font-weight: 800; line-height: 1.2; }
.how span { color: var(--ink-2); font-size: 0.875rem; }
.feat-note { margin-top: 16px; font-size: 0.8125rem; color: var(--ink-2); }
.pdp-more { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.sb-choco { --sb: var(--t-choco); }
.sb-vanille { --sb: var(--t-vanille); }
.sb-fraise { --sb: var(--t-fraise); }
.sb-caramel { --sb: var(--t-caramel); }
.sb-neutre { --sb: var(--t-neutre); }
.sb-acier { --sb: var(--t-acier); }
.sb-cerise { --sb: var(--t-cerise); }
.sb-coton { --sb: var(--t-coton); }
.sb-iso { --sb: var(--t-iso); }
.sb-lime { --sb: var(--t-lime); }
.sb-or { --sb: var(--t-or); }

/* barre d'achat collante */
.stick { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: rgb(255 255 255 / 0.97); border-top: 1px solid var(--line); transform: translateY(110%); transition: transform 0.45s var(--ease-out); }
.stick.is-on { transform: none; }
.stick-in { display: flex; align-items: center; gap: 16px; min-height: 76px; padding-block: 10px; }
.stick img { height: 52px; width: auto; }
.stick-n { font-weight: 700; line-height: 1.25; flex: 1; min-width: 0; }
.stick-n small { display: block; color: var(--ink-2); font-weight: 500; }
.stick .price { font-size: 1.5rem; }
.stick .btn { min-height: 50px; }

/* ---------- panier ---------- */
.cart { margin: 0 0 0 auto; width: min(440px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; padding: 0; border: 0; background: var(--surface); color: var(--ink); box-shadow: -20px 0 60px -20px rgb(23 22 21 / 0.3); }
.cart::backdrop { background: rgb(23 22 21 / 0.4); }
.cart[open] { animation: slide-in 0.45s var(--ease-out); }
.cart[open]::backdrop { animation: fade 0.3s; }
@keyframes slide-in { from { transform: translateX(100%); } }
.cart-in { display: flex; flex-direction: column; height: 100%; padding: 16px 20px 20px; }
.cart-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.cart-title { font-size: 1.75rem; font-weight: 850; font-stretch: 66%; text-transform: uppercase; }
.cart-view { display: flex; flex-direction: column; flex: 1; min-height: 0; padding-top: 16px; }
.cart-view[hidden] { display: none; }
.cart-empty { color: var(--ink-2); padding: 24px 0; }
.cart-empty a { color: var(--ink); font-weight: 700; }
.cart-list { flex: 1; overflow-y: auto; display: grid; align-content: start; }
.cart-item { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.cart-item-n { font-weight: 700; line-height: 1.3; }
.cart-item-p { color: var(--ink-2); font-size: 0.9375rem; }
.qty { display: inline-flex; align-items: center; gap: 2px; grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.qty button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: transparent; display: grid; place-items: center; }
.qty button:hover { border-color: var(--ink); }
.qty .ico { width: 16px; height: 16px; }
.qty output { min-width: 28px; text-align: center; font-weight: 800; }
.cart-foot { display: grid; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); }
.cart-total { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; }
.cart-total span:last-child { font-size: 1.75rem; font-weight: 850; font-stretch: 70%; }
.cart-hint { color: var(--ink-2); font-size: 0.875rem; }
.checkout { gap: 14px; overflow-y: auto; }
.checkout-lede { color: var(--ink-2); }
.field { display: grid; gap: 6px; font-weight: 600; font-size: 0.9375rem; }
.field input { min-height: 50px; padding: 0 14px; border-radius: var(--r1); border: 1px solid var(--line-2); background: var(--surface); font-size: 1rem; }
.field input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgb(23 22 21 / 0.08); }
.field input[aria-invalid="true"] { border-color: var(--red); }
.field-err { color: var(--red); font-size: 0.875rem; font-weight: 600; }
.field-err:empty { display: none; }
.form-msg { min-height: 1.5em; font-weight: 600; }
.fly { position: fixed; z-index: 200; pointer-events: none; margin: 0; will-change: transform, opacity; }

/* ---------- maquette : infos à valider ---------- */
.assume-toggle { position: fixed; left: 16px; bottom: 16px; z-index: 60; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--mark); background: var(--surface); color: var(--mark); font-weight: 700; font-size: 0.8125rem; box-shadow: var(--shadow); }
.assume-toggle[aria-pressed="true"] { background: var(--mark); color: #fff; }
.show-assumed .assumed { text-decoration: underline dotted var(--mark) 2px; text-underline-offset: 4px; background: rgb(180 83 9 / 0.1); }
.show-assumed .hero .assumed { background: rgb(242 179 61 / 0.18); text-decoration-color: #f2b33d; }
.show-assumed .pending { display: block; }
.has-stick .assume-toggle { bottom: 92px; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rail { grid-auto-columns: calc((100% - 2 * 16px) / 3); }
  .stage { grid-template-columns: 1fr; min-height: 0; }
  .stage-media img { max-height: 300px; }
  .pdp-grid, .pdp-more, .feat-grid { grid-template-columns: 1fr; }
  .buy { position: static; }
  .stagebox { aspect-ratio: 4 / 3; }
  .feat-visual { aspect-ratio: 4 / 3; max-height: 460px; }
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; min-height: 0; gap: 28px; }
  .hero::before { background: linear-gradient(180deg, rgb(12 11 10 / 0.88) 0%, rgb(12 11 10 / 0.72) 55%, rgb(12 11 10 / 0.55) 100%); }
  .podium { min-height: 0; }
  .podium-stage { min-height: 0; aspect-ratio: 1 / 0.95; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; }
  .bento-big { grid-row: auto; min-height: 340px; }
  .bento-wide, .bento-crea, .bento-pre { min-height: 220px; }
  .choose-grid, .faq-grid { grid-template-columns: 1fr; }
  .assure { grid-template-columns: 1fr; }
  .how { grid-template-columns: 1fr; }
  .ftr-in { grid-template-columns: 1fr 1fr; }
  .ftr-in > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  :root { --hdr: 60px; --bar: 32px; }
  .bar-in p:not(:first-child) { display: none; }
  .hdr { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--surface); }
  .menu-open .hdr { z-index: 90; }
  .hdr-search { display: none; }
  .hdr-act { margin-left: auto; }
  .hdr-search-m, .menu-btn { display: grid; }
  /* tiroir de menu plein écran, ouvert par la droite */
  .nav { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; border: 0; background: var(--surface); transform: translateX(100%); visibility: hidden; transition: transform 0.5s var(--ease-out), visibility 0s 0.5s; overscroll-behavior: contain; overflow-y: auto; }
  .nav.is-open { transform: none; visibility: visible; transition-delay: 0s; }
  .nav-top { display: flex; align-items: center; justify-content: space-between; flex: none; min-height: var(--hdr); padding: 0 8px 0 var(--gut); border-bottom: 1px solid var(--line); }
  .nav-title { font-size: 1.5rem; font-weight: 850; font-stretch: 66%; text-transform: uppercase; }
  .nav-in { flex-direction: column; height: auto; padding: 4px var(--gut); }
  .nav-link, .nav-link:first-child { justify-content: space-between; font-size: 1.625rem; font-weight: 850; font-stretch: 66%; text-transform: uppercase; color: var(--ink); min-height: 60px; padding: 0; border-bottom: 1px solid var(--line); }
  .nav-link .ico { display: block; color: var(--ink-2); }
  .nav-link::after { display: none; }
  .nav.is-open .nav-link { animation: nav-in 0.5s var(--ease-out) both; animation-delay: calc(0.1s + var(--i, 0) * 0.035s); }
  @keyframes nav-in { from { opacity: 0; transform: translateX(28px); } }
  .nav-cta { display: grid; gap: 10px; margin-top: auto; padding: 20px var(--gut) calc(20px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--bg); }
  .scrim { display: block; position: fixed; inset: 0; z-index: 79; background: rgb(23 22 21 / 0.45); opacity: 0; transition: opacity 0.35s; }
  .scrim[hidden] { display: none; }
  .scrim.is-on { opacity: 1; }
  .menu-open { overflow: hidden; }
  .hint { display: none; }
  .pod-card { padding: 12px 12px 12px 16px; }
  .actions .btn { flex: 1 1 100%; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .rail { grid-auto-columns: 100%; gap: 12px; }
  .rail > .card .card-media { aspect-ratio: 1 / 0.86; }
  .card-body { padding: 12px; }
  .card-name { font-size: 0.9375rem; }
  .card-foot { flex-direction: column; align-items: stretch; gap: 10px; }
  .card-name a::after { inset: 0 0 110px 0; }
  .rail > .card .card-foot { flex-direction: row; align-items: center; }
  .rail > .card .card-name { font-size: 1.0625rem; }
  .rail > .card .card-name a::after { inset: 0 0 76px 0; }
  .bento { grid-template-columns: 1fr; }
  .bento-big, .bento-wide { grid-column: auto; }
  .shop-banner { min-height: 170px; }
  .shop-banner img { object-position: 72% 55%; }
  .filters { position: static; }
  .chips { display: none; }
  .fam-select { display: block; flex: 1 1 100%; }
  .filter-row .select:not(.fam-select) { flex: 1 1 calc(50% - 5px); }
  .stagebox { aspect-ratio: 1 / 0.9; }
  .feat-visual { aspect-ratio: 1 / 0.95; }
  .stick img, .stick .price { display: none; }
  .stick .btn { flex: 1; }
  .ftr-in { grid-template-columns: 1fr; }
}

/* ---------- mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .marquee { mask-image: none; -webkit-mask-image: none; }
  .marquee-track { width: auto; }
  .marquee-list { flex-wrap: wrap; row-gap: 16px; }
  .marquee-list[aria-hidden="true"] { display: none; }
}

/* ---------- photos normalisées (carré, marge incluse) + galerie produit ---------- */
.card-media { padding: 5%; }
.card-media img { width: 100%; height: 100%; max-width: none; object-fit: contain; }
.gallery { display: grid; gap: 12px; align-content: start; }
.stagebox img { max-height: 88%; max-width: 88%; }
.stagebox.is-photo { background: var(--surface); border: 1px solid var(--line); }
.stagebox.is-photo img { max-height: 100%; max-width: 100%; width: 100%; height: 100%; object-fit: contain; filter: none; }
.thumbs { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.thumb { flex: none; width: 84px; height: 84px; padding: 4px; border-radius: var(--r1); border: 2px solid transparent; background: var(--sb, var(--tile)); display: grid; place-items: center; overflow: hidden; transition: border-color 0.2s, transform 0.15s var(--ease-out); }
.thumb img { width: 100%; height: 100%; object-fit: contain; }
.thumb[data-photo="1"] { background: var(--surface); border-color: var(--line); }
.thumb[aria-pressed="true"] { border-color: var(--ink); }
.thumb:hover { border-color: var(--line-2); }
.thumb:active { transform: scale(0.96); }
.jar img { filter: drop-shadow(0 26px 24px rgb(0 0 0 / 0.5)); }
@media (max-width: 760px) { .thumb { width: 68px; height: 68px; } }

/* ---------- correctifs : titres du bento qui passaient sur l'image, bouton centré ---------- */
.bento-t { max-width: none; font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.375rem); hyphens: manual; overflow-wrap: normal; }
.bento-big .bento-t { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.75rem); }
.bento-item > span { position: relative; z-index: 1; max-width: 56%; }
.bento-big > span { max-width: 60%; }
.bento-item img { max-width: 46%; object-fit: contain; object-position: bottom right; }
.bento-big img { max-width: 52%; }
.stage-body .btn { justify-self: stretch; }
@media (min-width: 1101px) { .stage-body .btn { justify-self: start; min-width: 220px; } }
@media (max-width: 760px) {
  .bento-item { min-height: 200px; }
  .bento-big { min-height: 260px; }
  .bento-t, .bento-big .bento-t { font-size: 1.75rem; }
  .bento-item img, .bento-big img { height: 78%; max-width: 44%; right: 4%; }
  .bento-s { display: none; }
  .stage-body { justify-items: stretch; }
  .stage-body .label { max-width: none; }
}

/* =================================================================
   HÉROS « studio » : carrousel 3D de pots, lumière de marque, particules
   ================================================================= */
@property --hx { syntax: "<color>"; inherits: true; initial-value: #e0313f; }
.hx { position: relative; isolation: isolate; overflow: clip; color: #fff; background: #0b0a09; --hx: #e0313f; transition: --hx 1s var(--ease-io); }
.hx-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hx-bg::before { content: ""; position: absolute; inset: 0; background:
  radial-gradient(60% 55% at 70% 48%, color-mix(in oklab, var(--hx) 34%, transparent), transparent 70%),
  radial-gradient(40% 40% at 72% 88%, color-mix(in oklab, var(--hx) 22%, transparent), transparent 70%),
  linear-gradient(180deg, #0b0a09 0%, #12100e 60%, #0b0a09 100%); }
.hx-rays { position: absolute; left: 70%; top: 46%; width: 160vmax; height: 160vmax; translate: -50% -50%; opacity: 0.55;
  background: repeating-conic-gradient(from 0deg, color-mix(in oklab, var(--hx) 30%, transparent) 0deg 4deg, transparent 4deg 18deg);
  mask-image: radial-gradient(closest-side, #000 0%, rgb(0 0 0 / 0.5) 30%, transparent 62%); -webkit-mask-image: radial-gradient(closest-side, #000 0%, rgb(0 0 0 / 0.5) 30%, transparent 62%);
  animation: hx-spin 60s linear infinite; }
@keyframes hx-spin { to { rotate: 360deg; } }
.hx-fx { position: absolute; inset: 0; width: 100%; height: 100%; }
.hx-vignette { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgb(0 0 0 / 0.65) 100%); }
.hx-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(16px, 3vw, 48px); align-items: center; min-height: min(calc(100svh - var(--bar) - var(--hdr) - 49px - 132px), 700px); padding-top: clamp(28px, 5vh, 64px); }
.hx-copy { display: grid; gap: 22px; position: relative; z-index: 3; }
.hx-title { font-size: clamp(2.75rem, 1.6rem + 4.2vw, 6rem); font-weight: 860; font-stretch: 66%; line-height: 0.9; letter-spacing: -0.01em; text-transform: uppercase; text-wrap: balance; }
.hx-title .w { display: inline-block; overflow: clip; padding-bottom: 0.06em; margin-bottom: -0.06em; vertical-align: top; }
.hx-title .w > span { display: inline-block; animation: hx-word 1s var(--ease-out) both; }
.hx-title .w:nth-child(2) > span { animation-delay: 0.07s; } .hx-title .w:nth-child(3) > span { animation-delay: 0.14s; }
.hx-title .w:nth-child(4) > span { animation-delay: 0.2s; } .hx-title .w:nth-child(5) > span { animation-delay: 0.25s; } .hx-title .w:nth-child(6) > span { animation-delay: 0.3s; }
@keyframes hx-word { from { transform: translateY(105%) rotate(4deg); } }
.hx-lede { color: rgb(255 255 255 / 0.78); animation: rise 0.9s var(--ease-out) 0.35s both; }
.hx-actions { animation: rise 0.9s var(--ease-out) 0.45s both; }
.hx-trust { animation: rise 0.9s var(--ease-out) 0.55s both; }

/* scène */
.hx-stage { position: relative; height: min(64svh, 600px); min-height: 380px; container-type: inline-size; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.hx-stage.is-drag { cursor: grabbing; }
.hx-word { position: absolute; inset: 2% 0 auto; z-index: 0; text-align: center; white-space: nowrap; pointer-events: none; font-size: 24cqi; font-weight: 900; font-stretch: 62%; line-height: 0.8; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1.5px color-mix(in oklab, var(--hx) 70%, #fff); opacity: 0.55; transform: translate3d(var(--px, 0), var(--py, 0), 0); transition: transform 0.6s var(--ease-out); }
.hx-word .ch { display: inline-block; transition: transform 0.6s var(--ease-out), opacity 0.45s; transition-delay: calc(var(--i, 0) * 34ms); }
.hx-word.is-out .ch { transform: translateY(-40%) rotate(-6deg); opacity: 0; transition-duration: 0.3s, 0.22s; transition-delay: calc(var(--i, 0) * 16ms); }
.hx-word.is-pre .ch { transform: translateY(40%) rotate(6deg); opacity: 0; transition: none; }
.hx-ring { position: absolute; inset: 0; z-index: 2; }
.hx-item { position: absolute; left: 50%; bottom: 17%; width: 46cqi; height: 72%; padding: 0; border: 0; background: none; transform-origin: 50% 100%; will-change: transform, opacity; -webkit-tap-highlight-color: transparent; }
.hx-item:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }
.hx-tilt { display: block; width: 100%; height: 100%; transition: transform 0.5s var(--ease-out); transform-style: preserve-3d; }
.hx-item img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 30px 34px rgb(0 0 0 / 0.55)); -webkit-box-reflect: below 2px linear-gradient(transparent 72%, rgb(255 255 255 / 0.16)); pointer-events: none; }
.hx-item.is-front img { animation: hx-float 5s ease-in-out infinite; }
@keyframes hx-float { 50% { transform: translateY(-2.2%); } }
.hx-floor { position: absolute; left: -10%; right: -10%; bottom: 0; height: 24%; z-index: 1; background: radial-gradient(50% 60% at 50% 0%, color-mix(in oklab, var(--hx) 28%, transparent), transparent 70%), linear-gradient(180deg, rgb(255 255 255 / 0.06), transparent 70%); border-top: 1px solid rgb(255 255 255 / 0.08); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hx-stage { animation: hx-exit linear both; animation-timeline: view(); animation-range: exit 0% exit 90%; }
    @keyframes hx-exit { to { transform: translateY(-6%) scale(0.92); opacity: 0.35; } }
  }
}

/* barre d'infos du produit affiché */
.hx-bar { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 24px; padding-block: 18px 22px; }
.hx-info { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.3fr) auto; align-items: center; gap: 16px 28px; padding: 16px 18px 16px 24px; border-radius: var(--r2); background: rgb(255 255 255 / 0.06); border: 1px solid rgb(255 255 255 / 0.1); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.hx-info > * { transition: opacity 0.25s, transform 0.35s var(--ease-out); }
.hx-info.is-swap > * { opacity: 0; transform: translateY(8px); }
.hx-brand { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: color-mix(in oklab, var(--hx) 65%, #fff); }
.hx-name { font-size: 1.25rem; font-weight: 800; line-height: 1.15; }
.hx-stats { display: flex; gap: 22px; }
.hx-stats li { display: grid; }
.hx-stats b { font-size: 1.5rem; font-weight: 880; font-stretch: 70%; line-height: 1; }
.hx-stats span { font-size: 0.8125rem; color: rgb(255 255 255 / 0.65); }
.hx-buy { display: flex; align-items: center; gap: 10px; }
.hx-price { font-size: 1.5rem; font-weight: 850; font-stretch: 72%; white-space: nowrap; margin-right: 6px; font-variant-numeric: tabular-nums; }
.hx-price span { font-size: 0.65em; color: rgb(255 255 255 / 0.7); }
.hx-price .assumed { font-size: 0.875rem; font-weight: 600; font-stretch: 100%; }
.hx-buy .btn { min-height: 46px; padding: 0 20px; }
.hx-nav { display: flex; align-items: center; gap: 8px; }
.hx-btn { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgb(255 255 255 / 0.25); background: rgb(255 255 255 / 0.04); color: #fff; display: grid; place-items: center; transition: background-color 0.2s, border-color 0.2s, transform 0.15s var(--ease-out); }
.hx-btn:hover { border-color: #fff; background: rgb(255 255 255 / 0.1); }
.hx-btn:active { transform: scale(0.94); }
.hx-count { min-width: 64px; text-align: center; font-weight: 700; font-size: 0.9375rem; color: rgb(255 255 255 / 0.7); font-variant-numeric: tabular-nums; }
.hx-count b { color: #fff; }
.hx-progress { grid-column: 1 / -1; height: 2px; background: rgb(255 255 255 / 0.12); border-radius: 2px; overflow: hidden; }
.hx-progress span { display: block; height: 100%; background: var(--hx); transform-origin: left; transform: scaleX(0); }
.show-assumed .hx .assumed { background: rgb(242 179 61 / 0.18); text-decoration-color: #f2b33d; }

@media (max-width: 1100px) {
  .hx-info { grid-template-columns: minmax(0, 1fr) auto; }
  .hx-stats { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 900px) {
  .hx-grid { grid-template-columns: 1fr; min-height: 0; }
  .hx-stage { height: 400px; min-height: 0; }
  .hx-item { width: 54cqi; }
  .hx-rays { left: 50%; top: 62%; }
  .hx-bar { grid-template-columns: 1fr; }
  .hx-nav { justify-content: center; order: -1; }
}
@media (max-width: 760px) {
  .hx-stage { height: 340px; }
  .hx-word { font-size: 28cqi; }
  .hx-info { grid-template-columns: 1fr; padding: 16px; }
  .hx-stats { grid-row: auto; gap: 18px; }
  .hx-buy { flex-wrap: wrap; }
  .hx-buy .btn { flex: 1; }
  .hx-price { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .hx-rays { animation: none; }
  .hx-item.is-front img { animation: none; }
}
/* réglages héros : tient dans un écran 1440x900 ; bouton maquette à droite */
.hx-title { font-size: clamp(2.5rem, 1.4rem + 3.3vw, 4.75rem); }
.hx-grid { padding-top: clamp(20px, 3.5vh, 44px); gap: clamp(16px, 3vw, 40px); }
.hx-copy { gap: 18px; }
.hx-stage { height: min(56svh, 540px); }
.hx-bar { padding-block: 12px 18px; }
.assume-toggle { left: auto; right: 16px; }
@media (max-width: 760px) { .assume-toggle { right: 12px; bottom: 12px; } }
@media (max-width: 900px) {
  .hx-grid, .hx-bar { grid-template-columns: minmax(0, 1fr); }
  .hx-stage { height: 420px; }
}
@media (max-width: 760px) {
  .hx-stage { height: 330px; }
  .hx-title { font-size: clamp(2.25rem, 1.2rem + 5vw, 3rem); }
  .hx-info { min-width: 0; }
  .hx-buy { flex-wrap: wrap; min-width: 0; }
}
@media (max-width: 760px) {
  .hx-stage { height: 380px; margin-inline: calc(-1 * var(--gut)); }
  .hx-item { width: 62cqi; height: 74%; bottom: 15%; }
  .hx-word { inset: 0 0 auto; }
}
/* mobile : l'animation passe avant le titre et les boutons (ordinateur inchangé) */
@media (max-width: 760px) {
  .hx { display: flex; flex-direction: column; }
  .hx-grid, .hx-bar { display: contents; }
  .hx-stage { order: 1; margin: 12px 0 0; }
  .hx-nav { order: 2; justify-content: center; padding-inline: var(--gut); }
  .hx-progress { order: 3; margin: 12px var(--gut) 0; }
  .hx-copy { order: 4; padding: 28px var(--gut) 0; }
  .hx-info { order: 5; margin: 24px var(--gut) 28px; }
}
@media (max-width: 760px) {
  .hx-stage { height: 340px; margin-top: 28px; }
  .hx-word { inset: 2% 0 auto; font-size: 25cqi; }
  .hx-item { bottom: 6%; height: 76%; }
  .hx-floor { height: 16%; }
  .hx-rays { left: 50%; top: 210px; }
  .hx-bg::before { background:
    radial-gradient(70% 34% at 50% 210px, color-mix(in oklab, var(--hx) 38%, transparent), transparent 70%),
    linear-gradient(180deg, #0b0a09 0%, #12100e 60%, #0b0a09 100%); }
}
/* mobile : la fiche du produit affiché colle à l'animation */
@media (max-width: 760px) {
  .hx-info { order: 2; margin: 14px var(--gut) 0; }
  .hx-nav { order: 3; margin-top: 14px; }
  .hx-progress { order: 4; }
  .hx-copy { order: 5; padding-bottom: 32px; }
}

/* Conteneurs React neutres : n’ajoutent aucune boîte (l’en-tête reste collant sur toute la page) */
.dc{display:contents}

/* Mot géant décoratif : en pseudo-élément, hors du texte lu et des contrôles de contraste */
.feat-giant::before{content:attr(data-giant)}