/* Jeere — landing page and waitlist (concept by Kreeative)
   Designed at 360 px first, then scaled up. Black and white only.
   The only photos are the store builder's demo photos (creer/img/demo/, WebP, Unsplash) in the
   example stores: the hero canvas, the template mock-ups and the diaspora card. They are
   <img> with width and height, object-fit: cover, and lazy below the hero. Everything else is HTML or SVG. */

/* A local font (Arial, Roboto on Android) scaled to Poppins' width and line metrics: nothing to download */
@font-face {
  font-family: 'Poppins Fallback';
  src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Roboto'), local('Roboto-Regular'), local('Roboto Regular');
  size-adjust: 110.6%; ascent-override: 94.9%; descent-override: 31.6%; line-gap-override: 9%;
}

:root {
  /* Jeere is black and white, nothing else: the sellers' photos and stores bring the colour.
     The "accent" names are kept so every rule has one place to change. */
  --accent: #111111;
  --accent-deep: #111111;
  --accent-soft: #EBEBE8;
  --accent-light: #FFFFFF;  /* on black */
  --white: #FFFFFF;
  --grey-1: #F5F5F3;
  --grey-2: #EBEBE8;
  --ink: #111111;
  --ink-2: #2A2A2A;
  --muted: #5E5E5E;
  --muted-light: #A3A3A3;
  --line: rgba(17, 17, 17, .12);
  --line-light: rgba(255, 255, 255, .14);
  --paper: #fff;

  /* Poppins everywhere. Poppins has no ɛ, ɔ or ŋ (Dioula and Bambara names): the page also loads
     those six letters alone from Montserrat, which the browser uses for them. Until Poppins arrives,
     'Poppins Fallback' (below) stands in at the same width, so the text does not reflow when it loads. */
  --f-display: 'Poppins', 'Montserrat', 'Poppins Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --f-text: var(--f-display);

  --r-sm: 10px;
  --r: 14px;
  --r-lg: 22px;
  --gutter: 16px;
  --max: 1160px;
  --head-h: 64px;
}

@media (min-width: 600px) { :root { --gutter: 24px; } }
@media (min-width: 1000px) { :root { --gutter: 40px; --head-h: 72px; } }

/* ---------- Reset and base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 12px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font: 400 16px/1.55 var(--f-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:hover { opacity: .72; }
.btn:hover, .head__logo:hover, .lang a:hover { opacity: 1; }
p a, li a, dd a { font-weight: 500; color: var(--ink); }
.section--ink p a, .foot p a { color: var(--white); }
button, input, select, textarea { font: inherit; color: inherit; }
p, h1, h2, h3, h4, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--focus, var(--ink)); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.ico { width: 20px; height: 20px; flex: none; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--ink); color: var(--white); padding: 10px 16px; border-radius: var(--r-sm); text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------- Type ---------- */
.eyebrow {
  display: block; padding-left: 34px; position: relative;
  font: 500 12.5px/1.45 var(--f-text); letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 18px;
}
/* A short bar before every label */
.eyebrow::before { content: ''; position: absolute; left: 0; top: .5em; width: 22px; height: 4px; background: currentColor; }
.eyebrow--light { color: var(--accent-light); }

.h2 {
  font: 400 clamp(30px, 6.2vw, 50px)/1.1 var(--f-display);
  letter-spacing: -.03em;
  text-wrap: balance;
}
.lead { font-size: clamp(16.5px, 2.2vw, 19px); line-height: 1.55; color: var(--muted); max-width: 36em; margin-top: 18px; text-wrap: pretty; }
.caption { font-size: 13.5px; color: var(--muted); margin-top: 14px; }
.caption--center { text-align: center; max-width: 46em; margin: 28px auto 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 22px;
  border-radius: var(--r); border: 1.5px solid transparent;
  font: 500 16px/1.2 var(--f-text); text-decoration: none; cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--ink); color: #fff; }
.btn--primary:hover { background: #333; }
.btn--sm { min-height: 44px; padding: 0 16px; font-size: 15px; border-radius: 12px; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .6; cursor: progress; }

/* ---------- Header ---------- */
.head {
  position: sticky; top: 0; z-index: 20;
  background: rgba(245, 245, 243, .9);
  -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent; transition: border-color .2s, background-color .2s;
}
.head.is-stuck { background: rgba(255, 255, 255, .9); border-bottom-color: var(--line); }
.head__in { height: var(--head-h); display: flex; align-items: center; gap: 24px; }
.head__logo { display: flex; align-items: center; min-height: 44px; padding: 6px 12px 6px 8px; margin-right: auto; color: var(--ink); text-decoration: none; border-radius: 10px; }
/* The header shows the hand-drawn cloud alone, with room around it */
.head__logo .logo__cloud { height: 32px; }
/* Logo: the cloud with two eyes (#cloud) and « jeere » written by hand (#wordmark), black ink */
.logo { display: inline-flex; align-items: center; gap: 0; color: inherit; }
.logo__cloud { display: block; height: 28px; width: auto; aspect-ratio: 600 / 446; flex: none; fill: currentColor; }
.logo__wordmark { display: block; height: 28px; width: auto; aspect-ratio: 900 / 479; flex: none; fill: currentColor; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.head__nav { display: none; gap: 26px; }
.head__nav a { font-size: 15px; font-weight: 400; text-decoration: none; color: var(--muted); padding: 10px 0; }
.head__nav a:hover { color: var(--ink); }
.head__nav .head__try { color: var(--ink); font-weight: 500; text-decoration: none; }
.head__nav a, .head__end .btn { white-space: nowrap; }
.head__end { display: flex; align-items: center; gap: 10px; }
.only-wide { display: none; }
@media (min-width: 560px) { .only-wide { display: inline; } .only-narrow { display: none; } .head__logo .logo__cloud { height: 36px; } }
@media (min-width: 1000px) { .head__nav { display: flex; } .head__logo { margin-right: 20px; flex: none; } .head__nav { margin-right: auto; } }
/* Small laptops: keep the menu on one line. « Questions » stays in the footer and the FAQ. */
@media (min-width: 1000px) and (max-width: 1199px) {
  .head__in, .head__nav { gap: 18px; }
  .head__nav a { font-size: 14px; }
  .head__nav a[href="#faq"] { display: none; }
}

.lang { display: flex; border: 1px solid var(--line); border-radius: 12px; padding: 3px; }
.lang button {
  min-width: 38px; min-height: 36px; border: 0; border-radius: 9px; background: none; cursor: pointer;
  font-size: 13px; font-weight: 500; letter-spacing: .04em; color: var(--muted);
}
.lang button[aria-pressed="true"] { background: var(--ink); color: var(--white); }

/* ---------- Hero ---------- */
/* Light grey band with the sign-up card on the left and the editor canvas on the right */
/* The next section is grey too: a hairline marks where the hero ends */
.hero { background: var(--grey-1); padding: 24px 0 0; overflow: hidden; border-bottom: 1px solid var(--line); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; align-items: center; }
.hero__title {
  font: 400 clamp(40px, 9vw, 76px)/1.03 var(--f-display);
  letter-spacing: -.035em;
  text-wrap: balance;
}
@media (max-width: 599px) { .hero__title { font-size: clamp(34px, 10.1vw, 52px); } }
.hero__lead { font-size: clamp(16.5px, 2.3vw, 19px); line-height: 1.55; color: var(--muted); max-width: 31em; margin-top: 18px; text-wrap: pretty; }

/* The black sign-up card */
.hero__card { --focus: #fff; text-wrap: pretty; max-width: 520px; margin-top: 28px; padding: 22px 16px 16px; border-radius: 28px; background: #111; color: var(--white); }
.hero__cardTitle { padding: 0 6px; font: 400 18px/1.35 var(--f-display); letter-spacing: -.01em; }
.hero__cardSub { padding: 0 6px; font-size: 16px; line-height: 1.4; color: rgba(255, 255, 255, .72); margin-top: 2px; }
.hero__consent { padding: 0 6px; font-size: 12px; line-height: 1.45; color: rgba(255, 255, 255, .6); margin-top: 12px; }
.hero__cardSub, .hero__consent { text-wrap: balance; }
.hero__pill {
  display: flex; align-items: center; height: 58px; margin-top: 12px; padding: 0 6px 0 4px;
  border-radius: 999px; background: var(--ink-2); border: 1px solid rgba(255, 255, 255, .18);
  transition: border-color .15s, box-shadow .15s;
}
.hero__pill:focus-within, .hero__card.is-bad .hero__pill { border-color: rgba(255, 255, 255, .75); box-shadow: 0 0 0 1px rgba(255, 255, 255, .75); }
.hero__cc {
  flex: none; height: 44px; padding: 0 24px 0 12px; border: 0; border-radius: 999px; cursor: pointer;
  appearance: none; -webkit-appearance: none; color: var(--white); font-size: 15px;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 10 5 5 5-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 6px center / 15px no-repeat;
}
.hero__cc option { color: var(--ink); background: var(--white); }
.hero__cc:focus-visible { outline: 2px solid var(--white); outline-offset: -2px; border-radius: 999px; }
.hero__tel {
  flex: 1; min-width: 0; height: 44px; padding: 0 10px 0 12px; border: 0; border-radius: 0; color: var(--white); font-size: 16px;
  background: linear-gradient(rgba(255, 255, 255, .18), rgba(255, 255, 255, .18)) left center / 1px 28px no-repeat; /* divider */
}
.hero__tel::placeholder { color: rgba(255, 255, 255, .62); opacity: 1; }
.hero__tel:focus { outline: none; }
.hero__go {
  flex: none; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%;
  background: var(--white); color: var(--ink); cursor: pointer; transition: transform .2s, background-color .2s;
}
.hero__go:hover { background: #E8E8E6; }
.hero__go:active { transform: scale(.95); }
.hero__go:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; border-radius: 50%; }
.hero__err { display: flex; align-items: center; gap: 8px; margin: 12px 6px 2px; font-size: 14px; font-weight: 400; line-height: 1.4; }
.hero__err::before { content: '!'; flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--white); color: var(--ink); font-size: 13px; font-weight: 600; }
.hero__try { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 12px; font-size: 15.5px; font-weight: 400; color: var(--ink); text-decoration: none; }
.hero__try .ico { width: 16px; height: 16px; transition: transform .2s; }
.hero__try:hover .ico { transform: translateX(3px); }
@media (max-width: 459px) {
  .hero__pill { padding: 0 5px 0 2px; }
  .hero__cc { padding: 0 20px 0 10px; background-position: right 3px center; }
  .hero__tel { padding: 0 6px 0 10px; }
  .hero__go { width: 44px; height: 44px; }
}
@media (max-width: 399px) {
  .hero__card { padding-left: 14px; padding-right: 14px; }
  .hero__cardTitle { font-size: 17px; }
  .hero__cc { padding: 0 18px 0 8px; font-size: 14px; }
  .hero__tel { padding: 0 4px 0 8px; }
  .hero__tel::placeholder { font-size: 15px; }
}
@media (min-width: 400px) { .hero__card { padding: 24px 20px 20px; } }
@media (min-width: 600px) { .hero__card { padding: 26px 24px 24px; border-radius: 32px; } .hero__cardTitle { font-size: 19px; } .hero__pill { height: 60px; } .hero__go { width: 48px; height: 48px; } }

.hero__visual { container-type: inline-size; }

@media (min-width: 600px) { .hero { padding-top: 40px; } }
@media (min-width: 1000px) {
  .hero { padding-top: 48px; }
  .hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; }
  /* 2 balanced lines like the reference, from 1000 px (46 px) to 1920 px (58 px) */
  .hero__title { font-size: clamp(46px, 5.2vw - 8px, 58px); line-height: 1.04; }
  .hero__lead { font-size: 18px; max-width: 34em; margin-top: 20px; }
}

/* ---------- Editor canvas (hero) ----------
   A store page being edited, on a faint grid, with floating editor tools. Its colours come from
   --hc-* (the store palette); the swatches change data-tint, and the registered properties fade. */
@property --hc-accent { syntax: '<color>'; inherits: true; initial-value: #EE5A2A; }
@property --hc-bg { syntax: '<color>'; inherits: true; initial-value: #FCE5DD; }
@property --hc-soft { syntax: '<color>'; inherits: true; initial-value: #FACABB; }
@property --hc-deep { syntax: '<color>'; inherits: true; initial-value: #B8380F; }
.cv {
  --hc-ink: #1A1512;
  --hc-accent: #EE5A2A;
  --hc-deep: #B8380F; /* the accent deepened to 4.5:1 on white: the "Ajouter" button text */
  --hc-bg: color-mix(in srgb, var(--hc-accent) 16%, #FFFFFF);
  --hc-soft: color-mix(in srgb, var(--hc-accent) 32%, #FFFFFF);
  position: relative; width: 100%; max-width: 540px; margin: 0 auto; aspect-ratio: 330 / 490;
  font-size: 11px; font-size: clamp(10px, 2.6cqw, 13px);
  transition: --hc-accent .4s ease, --hc-bg .4s ease, --hc-soft .4s ease, --hc-deep .4s ease;
}
.cv[data-tint="lagune"] { --hc-accent: #00BFCB; --hc-deep: #007279; }
.cv[data-tint="hibiscus"] { --hc-accent: #DE0F7B; --hc-deep: #C10D6B; }
.cv[data-tint="indigo"] { --hc-accent: #3657FF; --hc-deep: #2C4EFF; }
.cv[data-tint="mangue"] { --hc-accent: #FFB000; --hc-deep: #8F6300; }
.cv[data-tint="menthe"] { --hc-accent: #14C46C; --hc-deep: #0C7A43; }
.cv[data-tint="blanc"] { --hc-accent: #111111; --hc-deep: #111111; --hc-bg: #FFFFFF; --hc-soft: #EFEEEB; }
/* Older browsers without color-mix(): keep a warm page whatever the palette */
@supports not (color: color-mix(in srgb, red, red)) { .cv:not([data-tint="blanc"]) { --hc-bg: #FCE5DD; --hc-soft: #FACABB; } }

.cv__grid {
  position: absolute; inset: -10% -14%;
  background-image: linear-gradient(rgba(17, 17, 17, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(17, 17, 17, .06) 1px, transparent 1px);
  background-size: 48px 48px; background-position: center;
  -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent); mask-image: radial-gradient(closest-side, #000 72%, transparent);
}

/* The store page */
.cv__page { position: absolute; left: 8%; top: 0; width: 74%; height: 88%; border-radius: 8px; background: var(--hc-bg); color: var(--hc-ink); overflow: hidden; }
.cv__page svg { position: absolute; }
.cv__logo { position: absolute; top: 2.6%; left: 50%; width: 2em; height: 2em; margin-left: -1em; display: grid; place-items: center; border-radius: 50%; border: 1px solid currentColor; font: 400 .9em/1 Georgia, 'Times New Roman', serif; }
.cv__icons { position: absolute; top: 3.4%; right: 4.5%; display: flex; gap: .55em; }
.cv__icons svg { position: static; width: 1.1em; height: 1.1em; }
/* The product photo in a thick ring of the accent colour: the swatches recolour the ring */
.cv__stage { position: absolute; left: 9%; top: 41%; width: 46%; aspect-ratio: 1; border-radius: 50%; background: var(--hc-accent); }
.cv__stage img { position: absolute; inset: 9%; width: 82%; height: 82%; border-radius: 50%; object-fit: cover; object-position: 50% 30%; }
.cv__ph { width: 2.3em; height: 2.3em; color: var(--hc-ink); opacity: .32; }
.cv__ph--1 { left: 20%; top: 17%; }
.cv__ph--2 { left: 46%; top: 72%; }
.cv__ph--3 { left: 14%; top: 72%; }

/* Floating editor tools */
.cv__float { position: absolute; background: var(--white); border-radius: 12px; box-shadow: 0 1px 2px rgba(17, 17, 17, .08), 0 14px 34px -14px rgba(17, 17, 17, .28); }
.cv__tools { left: 0; top: 26%; display: flex; gap: .15em; padding: .35em; color: var(--ink); }
.cv__tools span { display: grid; place-items: center; width: 2.35em; height: 2.35em; border-radius: 7px; }
.cv__tools svg { width: 1.4em; height: 1.4em; }
.cv__tools .cv__ai { margin-right: .2em; background: var(--ink); color: var(--white); }

/* The interactive layer covers the canvas but only its controls catch the pointer */
.cv__ui { position: absolute; inset: 0; pointer-events: none; }
.cv__ui > * { pointer-events: auto; }
.cv__ui button { -webkit-tap-highlight-color: transparent; }

.cv__tray { left: 0; top: 74%; display: flex; padding: 4px; border-radius: 14px; }
.cv__sw { position: relative; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; background: none; cursor: pointer; }
.cv__sw::before {
  content: ''; position: absolute; inset: 8px; border-radius: 7px; background: var(--sw);
  box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .14); transition: box-shadow .2s, transform .2s;
}
.cv__sw:hover::before { transform: scale(1.07); }
.cv__sw[aria-pressed="true"]::before { box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .14), 0 0 0 2px var(--white), 0 0 0 3.5px var(--ink); }
.cv__sw:focus-visible { outline: 2px solid var(--ink); outline-offset: -1px; }
.cv__sw.is-pulse::before { animation: sw-pulse .9s ease; }
@keyframes sw-pulse { 35% { transform: scale(1.16); } }

.cv__card { right: 0; top: 9%; width: 140px; width: clamp(140px, 35cqw, 176px); padding: 8px; color: var(--ink); }
/* The same photo on a thin mat of the soft tint, which follows the swatches too */
.cv__img { position: relative; aspect-ratio: 1; border-radius: 8px; background: var(--hc-soft); overflow: hidden; }
.cv__img img { position: absolute; inset: 5px; width: calc(100% - 10px); height: calc(100% - 10px); border-radius: 5px; object-fit: cover; object-position: 50% 62%; }
.cv__name { margin: 8px 3px 0; font-size: 12px; font-weight: 400; line-height: 1.3; }
.cv__price { margin: 1px 3px 0; font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.cv__step { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; border: 1px solid var(--line); border-radius: 10px; }
.cv__step button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 9px; background: none; color: var(--ink); cursor: pointer; }
.cv__step button[aria-disabled="true"] { color: #A3A3A3; cursor: default; }
.cv__step .ico { width: 16px; height: 16px; }
.cv__step output { font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.cv__add {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 44px; margin-top: 6px; padding: 0;
  border: 1.5px solid var(--hc-deep); border-radius: 10px; background: none; color: var(--hc-deep); font: 500 13px/1 var(--f-text); cursor: pointer;
}
.cv__add .ico { width: 17px; height: 17px; }
.cv__add:hover { background: color-mix(in srgb, var(--hc-accent) 7%, transparent); }

.cv__chip {
  position: absolute; right: 0; bottom: 0; display: flex; align-items: center; gap: 8px; padding: 6px 13px 6px 6px;
  border-radius: 999px; background: var(--ink); color: var(--white); font-size: 12px; font-weight: 400; line-height: 1.3; white-space: nowrap;
  box-shadow: 0 14px 30px -14px rgba(17, 17, 17, .5);
}
.cv__ok { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--white); color: var(--ink); flex: none; }
.cv__ok .ico { width: 14px; height: 14px; }

.cv__play { position: absolute; left: 0; top: 88%; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--ink); color: var(--white); cursor: pointer; box-shadow: 0 10px 24px -10px rgba(17, 17, 17, .5); }
.cv__play:focus-visible { outline-offset: 3px; border-radius: 50%; }
.cv__play .cv__i-play, .cv__play[data-paused] .cv__i-pause { display: none; }
.cv__play[data-paused] .cv__i-play { display: block; }
html:not(.js) .cv__play { display: none; }
@media (prefers-reduced-motion: reduce) { .cv__sw.is-pulse::before, .cv__chip.is-bump { animation: none; } }

/* The layout follows the canvas width, not the screen: narrow canvases (phones, small laptops)
   keep the tall layout above; from 440 px wide the tools spread like a desktop editor. */
@container (max-width: 325px) {
  .cv { aspect-ratio: 330 / 560; }
  .cv__tools span:nth-child(n+6) { display: none; }
  .cv__tray { top: 72%; }
  .cv__play { top: 83%; }
}
@container (min-width: 440px) {
  .cv { aspect-ratio: 500 / 540; }
  .cv__page { left: 11%; top: 2%; width: 72%; height: 92%; }
  .cv__stage { left: 10%; top: 12%; width: 44%; }
  .cv__ph--1 { left: 64%; top: 6%; }
  .cv__ph--2 { left: 40%; top: 56%; }
  .cv__ph--3 { left: 30%; top: 88%; }
  .cv__tools { top: 43%; } /* just under the coloured circle */
  .cv__tray { left: 1%; top: 63%; }
  .cv__card { top: 10%; }
  .cv__name, .cv__price { font-size: 12.5px; }
  .cv__play { top: 85%; }
  .cv__chip { right: 3%; bottom: 3%; font-size: 12.5px; }
}
/* Two columns: a square canvas like the reference, level with the copy (after the @container rules so it wins) */
@media (min-width: 1000px) {
  .cv { aspect-ratio: 1 / 1; }
  .cv__page { left: 11%; top: 2%; width: 72%; height: 90%; }
  .cv__stage { left: 12%; top: 12%; width: 40%; }
  .cv__ph--1 { left: 62%; top: 8%; }
  .cv__ph--2 { left: 44%; top: 60%; }
  .cv__ph--3 { left: 22%; top: 84%; }
  .cv__tools { top: 42%; }
  .cv__tray { left: 1%; top: 66%; }
  .cv__card { top: 14%; }
  .cv__img { aspect-ratio: 4 / 3; }
  .cv__play { top: 84%; }
  .cv__chip { right: 3%; bottom: 2%; }
}
/* With a mouse the swatches can be smaller (touch screens keep 44 px targets) */
@media (min-width: 1000px) and (pointer: fine) {
  .cv__sw { width: 36px; height: 36px; }
  .cv__sw::before { inset: 7px; border-radius: 6px; }
  .cv__tray { padding: 3px; border-radius: 12px; }
}

/* ---------- Phone mockup (template preview) ---------- */
.phone {
  position: relative; width: 252px; flex: none;
  border-radius: 40px; padding: 9px; background: var(--ink);
  box-shadow: 0 2px 0 rgba(255,255,255,.08) inset, 0 40px 80px -30px rgba(0, 0, 0, .38), 0 18px 36px -18px rgba(17, 17, 17, .35);
}
.phone::before { content: ''; position: absolute; top: 15px; left: 50%; width: 70px; height: 18px; margin-left: -35px; border-radius: 10px; background: var(--ink); z-index: 2; }
.phone__screen { border-radius: 32px; overflow: hidden; background: var(--white); min-height: 500px; display: flex; flex-direction: column; font-size: 12px; line-height: 1.35; }
@media (min-width: 380px) { .phone { width: 268px; } }
@media (min-width: 1000px) { .phone { width: 304px; border-radius: 46px; padding: 10px; } .phone__screen { border-radius: 37px; min-height: 610px; font-size: 13.5px; } .phone::before { width: 84px; height: 22px; margin-left: -42px; top: 17px; } }

/* Payment methods, under the hero */
.paystrip { display: grid; gap: 20px; margin-top: 64px; padding-bottom: 56px; }
.paystrip__label { font: 400 clamp(26px, 4vw, 40px)/1.15 var(--f-display); letter-spacing: -.025em; text-wrap: balance; }
.paystrip__list { display: flex; flex-wrap: wrap; gap: 8px; }
.paystrip__list li { padding: 8px 14px; border-radius: 999px; background: var(--white); border: 1px solid var(--line); font-size: 14px; font-weight: 500; letter-spacing: -.005em; }
@media (min-width: 1000px) { .paystrip { gap: 26px; margin-top: 64px; padding-bottom: 88px; } .paystrip__label { font-size: clamp(26px, 2.4vw, 34px); } .paystrip__list li { padding: 9px 16px; font-size: 15px; } }

/* ---------- Sections ---------- */
.section { padding: 72px 0; }
.section--paper { background: var(--grey-1); }
.section--ink { background: var(--ink); color: var(--white); --focus: #fff; }
.section--ink .lead { color: var(--muted-light); }
.section__head { max-width: 760px; margin-bottom: 40px; }
@media (min-width: 1000px) { .section { padding: 112px 0; } .section__head { margin-bottom: 56px; } }

/* All in one */
.features { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.feature { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px 22px; }
.feature .ico { width: 28px; height: 28px; margin-bottom: 18px; }
.feature__title { font: 500 19px/1.25 var(--f-display); letter-spacing: -.02em; margin-bottom: 6px; }
.feature p { color: var(--muted); font-size: 15.5px; }

/* Before / after */
.compare { display: grid; gap: 14px; }
.compare__col { border-radius: var(--r-lg); padding: 24px 22px; }
.compare__col--before { background: var(--grey-1); }
.compare__col--after { background: var(--ink); color: var(--white); }
.compare__title { display: flex; align-items: center; gap: 10px; font: 500 13px/1 var(--f-text); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 18px; min-height: 22px; }
.compare__col--before .compare__title { color: var(--muted); }
.logo--inline { gap: 6px; color: var(--white); }
/* « Avec jeere »: the handwritten wordmark, white on the dark column */
.logo--inline .logo__wordmark { height: 26px; margin: -4px 0 -2px; }
.compare li { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 16.5px; line-height: 1.45; }
.compare__col--after li { border-top-color: var(--line-light); }
.compare li:first-child { border-top: 0; padding-top: 0; }
.compare__col--before .ico { color: var(--muted); opacity: .7; margin-top: 1px; }
.compare__col--before li span { color: var(--muted); }
.compare__col--after .ico { color: var(--accent-light); margin-top: 1px; }
@media (min-width: 800px) { .compare { grid-template-columns: 1fr 1fr; } .compare__col { padding: 34px 32px; } }

/* Why Jeere: complaint elsewhere, then Jeere's answer */
.vs-group + .vs-group { margin-top: 44px; }
.vs-group__title { font: 500 13px/1.3 var(--f-text); letter-spacing: .12em; text-transform: uppercase; color: var(--muted-light); padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line-light); }
.vs-list { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.vs { display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: var(--r-lg); background: #1C1C1C; border: 1px solid var(--line-light); }
.vs__them { font-size: 14.5px; line-height: 1.5; color: var(--muted-light); padding-bottom: 14px; border-bottom: 1px dashed var(--line-light); }
.vs__tag { display: inline-block; margin-right: 6px; padding: 2px 7px; border-radius: 6px; border: 1px solid var(--line-light); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--white); }
.vs__title { font: 500 20px/1.25 var(--f-display); letter-spacing: -.02em; color: var(--white); margin-top: 4px; }
.vs__us { font-size: 15.5px; color: #D4D4D4; }

/* Steps */
.steps { display: grid; gap: 14px; counter-reset: s; }
.step { position: relative; background: var(--grey-1); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px 22px 26px; }
.step__n { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--ink); color: #fff; font: 500 17px/1 var(--f-text); margin-bottom: 18px; }
.step__title { font: 500 21px/1.25 var(--f-display); letter-spacing: -.02em; margin-bottom: 8px; }
.step p { color: var(--muted); }
@media (min-width: 700px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .steps { grid-template-columns: repeat(4, 1fr); } }

/* Delivery by commune */
.ship { display: grid; gap: 40px; }
.cod { margin-top: 30px; padding: 22px; border-radius: var(--r-lg); background: var(--accent-soft); }
.cod__title { font: 500 17px/1.3 var(--f-text); color: var(--accent-deep); margin-bottom: 6px; }
.cod p { color: var(--ink-2); }
.communes { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
.communes legend { font-weight: 500; margin-bottom: 12px; padding: 0; }
.communes__list { display: flex; flex-wrap: wrap; gap: 8px; }
.communes label { position: relative; }
.communes input, .seg input, .checks input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.communes span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 15px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--paper); font-size: 15px; font-weight: 400; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s;
}
.communes span:hover { border-color: var(--ink); }
.communes input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--white); }
.communes input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 2px; }
.receipt { background: var(--paper); border-radius: var(--r-lg); padding: 22px; box-shadow: 0 24px 50px -30px rgba(17, 17, 17, .4); border: 1px solid var(--line); }
.receipt__head { font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding-bottom: 14px; border-bottom: 1px dashed var(--line); }
.receipt dl div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px dashed var(--line); }
.receipt dd { font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.receipt .receipt__total { border-bottom: 0; padding-bottom: 4px; font-size: 19px; }
.receipt__total dt { font-weight: 500; }
.receipt__total dd { color: var(--accent); font-weight: 600; }
.receipt__eta { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--grey-1); font-weight: 500; font-size: 15px; }
.receipt__eta .ico { color: var(--accent); --paper: var(--grey-1); }
.is-bump { animation: bump .35s ease; }
@keyframes bump { 40% { transform: scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .is-bump { animation: none; } }
@media (min-width: 1000px) { .ship { grid-template-columns: .95fr 1.05fr; gap: 72px; align-items: center; } }

/* Templates */
.tpl { display: grid; gap: 44px; }
.tabs { display: flex; gap: 6px; padding: 5px; margin-top: 30px; border-radius: 16px; background: var(--grey-2); width: max-content; max-width: 100%; }
.tabs button {
  min-height: 44px; padding: 0 16px; border: 0; border-radius: 12px; background: none; cursor: pointer;
  font: 500 15px/1 var(--f-text); color: var(--muted);
}
.tabs button[aria-selected="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px rgba(17, 17, 17, .12); }
.tpl__desc { margin-top: 16px; min-height: 3em; font-size: 16.5px; color: var(--muted); }
.tpl__desc b { color: var(--ink); font-weight: 500; }
.rules { margin-top: 26px; display: grid; gap: 12px; }
.rules li { display: flex; gap: 12px; }
.tpl__try { margin-top: 28px; }
.rules .ico { color: var(--accent); margin-top: 2px; }
.tpl__preview { display: flex; justify-content: center; padding: 20px 0; border-radius: 28px; background:
  linear-gradient(var(--grey-2), var(--grey-2)) padding-box; }
.phone--sm .phone__screen { min-height: 520px; }
@media (min-width: 1000px) { .tpl { grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; } .tpl__preview { padding: 48px 0; } .phone--sm .phone__screen { min-height: 600px; } }

/* Mini stores in the template preview */
.mini { padding-top: 34px; animation: fade .35s ease; }
@keyframes fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mini { animation: none; } }
.mini .ico { width: 18px; height: 18px; }
.mini__bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px 12px; }
.mini__grid { display: grid; gap: 10px; padding: 0 12px 16px; }
.mini__grid--2 { grid-template-columns: 1fr 1fr; }
.mini__item p { margin-top: 7px; font-size: .92em; }
.mini__item b { display: block; font-size: .92em; margin-top: 1px; }
/* A photo tile: the pop colour of the tile stays around the photo (frame, mat or block), and shows
   alone while the photo loads or if it cannot load */
.art { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Plateau: editorial, the big photo in a turquoise frame (« Lagune »), products full bleed */
.mini--plateau { background: #FFFFFF; }
.mini--plateau .mini__name { font: 500 12px/1 var(--f-display); letter-spacing: .24em; }
.mini__hero { position: relative; margin: 0 12px 14px; }
.mini__hero .art { aspect-ratio: 4 / 4.6; background: #00BFCB; }
.mini__hero .art img { inset: 7px; width: calc(100% - 14px); height: calc(100% - 14px); object-position: 50% 35%; }
.mini__hero::after { content: ''; position: absolute; inset: 58% 0 0; background: linear-gradient(transparent, rgba(4, 39, 43, .86) 62%); }
.mini__kicker { position: absolute; z-index: 1; left: 14px; bottom: 44px; font-size: .8em; letter-spacing: .14em; text-transform: uppercase; color: #FBF8F4; }
.mini__headline { position: absolute; z-index: 1; left: 12px; bottom: 8px; font: italic 500 30px/1 var(--f-display); letter-spacing: -.03em; color: #FBF8F4; }
.mini--plateau .art--p1 { background: #00BFCB; }
.mini--plateau .art--p2 { background: #FFB000; }
.mini--plateau .mini__item .art img { object-position: 50% 40%; }
.mini--plateau .mini__item p { font-weight: 400; }
.mini--plateau .mini__item b { font-weight: 400; color: var(--muted); }

/* Cocody: soft, round cards; each photo sits on a pastel mat, the banner portrait in a fuchsia ring */
.mini--cocody { background: #FFEDF5; }
.mini--cocody .mini__name { font: 500 16px/1 var(--f-text); letter-spacing: -.01em; }
.mini__banner { position: relative; margin: 0 12px 12px; padding: 18px 16px; min-height: 120px; border-radius: 20px; background: #F7ABD2; overflow: hidden; }
.mini__banner p { position: relative; font: 500 1.35em/1.15 var(--f-text); letter-spacing: -.02em; max-width: 60%; color: #2E0618; z-index: 1; }
.mini__chips { display: flex; gap: 6px; padding: 0 12px 12px; }
.mini__chips span { padding: 5px 11px; border-radius: 999px; background: #fff; font-size: .88em; font-weight: 400; }
.mini__chips .is-on { background: #DE0F7B; color: #FFFFFF; }
.mini--cocody .art { aspect-ratio: 1; border-radius: 18px; }
.mini--cocody .mini__item .art img { inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); border-radius: 13px; }
.art--c1 { background: #FFE29E; } .art--c2 { background: #AAEAC9; } .art--c3 { background: #F7ABD2; } .art--c4 { background: #B8C3FF; }
.art--c1 img { object-position: 50% 55%; } .art--c3 img { object-position: 50% 10%; } .art--c4 img { object-position: 50% 40%; }
.mini--cocody .art--c0 { position: absolute; right: 8px; bottom: -16px; width: 104px; border-radius: 50%; background: #DE0F7B; }
.art--c0 img { inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); border-radius: 50%; object-position: 50% 35%; }
.mini--cocody .mini__item b { color: #C10D6B; }

/* Treichville: bold blocks; each photo sits on a block of colour that sticks out like a hard shadow */
.mini--treichville { background: var(--ink); color: #fff; }
.mini--treichville .mini__name { font: 600 15px/1 var(--f-text); letter-spacing: .02em; }
.mini__drop { padding: 4px 14px 0; font: 600 76px/.86 var(--f-text); letter-spacing: -.05em; color: #D4F06A; }
.mini__tag { display: inline-block; margin: 10px 14px 12px; padding: 5px 9px; background: #6D5BF0; font-weight: 600; font-size: .85em; text-transform: uppercase; letter-spacing: .04em; }
.mini--treichville .art { aspect-ratio: 1; }
.mini--treichville .art img { width: calc(100% - 7px); height: calc(100% - 7px); }
.art--t1 { background: #D4F06A; } .art--t2 { background: #FF6B4A; } .art--t3 { background: #F4EEE6; } .art--t4 { background: #6D5BF0; }
.art--t2 img { object-position: 50% 45%; } .art--t3 img { object-position: 50% 40%; } .art--t4 img { object-position: 45% 55%; }
.mini--treichville .mini__item p { font-weight: 500; }
.mini--treichville .mini__item b { color: #D4F06A; }

/* Diaspora */
.dia { display: grid; gap: 40px; }
.pill { display: inline-block; margin-left: 6px; line-height: 1; padding: 4px 9px; border-radius: 999px; background: var(--ink); color: #fff; letter-spacing: .08em; }
.dia__card { background: var(--white); color: var(--ink); border-radius: var(--r-lg); padding: 10px 22px 22px; box-shadow: 0 40px 60px -36px rgba(0, 0, 0, .35); border: 1px solid var(--line); transform: rotate(-1.2deg); max-width: 440px; width: 100%; justify-self: center; }
.dia__row { display: flex; justify-content: space-between; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.dia__row span { color: var(--muted); }
.dia__row b { text-align: right; font-weight: 500; }
.dia__proof { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 12px; border-radius: 14px; background: var(--grey-1); }
/* The proof photo: a courier with the parcels (a demo photo) */
.dia__photo { position: relative; width: 60px; height: 60px; border-radius: 10px; flex: none; overflow: hidden; background: linear-gradient(135deg, #B48A6C, #7A4E3A); }
.dia__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.dia__proof p { display: grid; font-size: 14px; flex: 1; }
.dia__proof span { color: var(--muted); font-size: 13px; }
.dia__ok { color: #fff; background: var(--accent); border-radius: 50%; padding: 4px; width: 28px; height: 28px; }
@media (min-width: 1000px) { .dia { grid-template-columns: 1.1fr .9fr; gap: 72px; align-items: center; } }

/* Pricing */
.plans { display: grid; gap: 14px; }
.plan { position: relative; display: flex; flex-direction: column; background: var(--grey-1); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px 22px; }
.plan--pick { margin-top: 10px; background: var(--ink); color: var(--white); border-color: var(--ink); }
.plan__flag { position: absolute; top: -12px; left: 22px; padding: 5px 10px; border-radius: 999px; background: var(--white); color: var(--ink); border: 1.5px solid var(--ink); font-size: 12px; font-weight: 500; letter-spacing: .02em; }
.plan__name { font: 500 24px/1.1 var(--f-display); letter-spacing: -.02em; }
.plan__price { margin-top: 14px; font-size: 15px; color: var(--muted); }
.plan--pick .plan__price, .plan--pick .plan__alt, .plan--pick .plan__for { color: var(--muted-light); }
.plan__price b { font: 500 38px/1 var(--f-text); letter-spacing: -.03em; color: var(--ink); margin-right: 2px; }
.plan--pick .plan__price b { color: #fff; }
.plan__alt { font-size: 14px; color: var(--muted); margin-top: 6px; }
.plan__orders { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 15px; }
.plan__orders b { font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.plan--pick .plan__orders { border-top-color: var(--line-light); }
.plan__fee { margin-top: 12px; }
.plan__fee span { display: inline-block; padding: 5px 10px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-deep); font-weight: 500; font-size: 14px; }
.plan--pick .plan__fee span { background: color-mix(in srgb, var(--accent-light) 18%, transparent); color: var(--accent-light); }
.plan__for { margin-top: 14px; color: var(--muted); font-size: 15px; }
@media (min-width: 700px) { .plans { grid-template-columns: 1fr 1fr; row-gap: 24px; } .plan--pick { margin-top: 0; } }
@media (min-width: 1100px) { .plans { grid-template-columns: repeat(4, 1fr); } }

/* The Studio's plans (#studio, « Abonnements Studio »), on black. The monthly / yearly toggle swaps
   [data-sp-m] / [data-sp-y] through the section's data-period (site.js); yearly without JS. */
.sp__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-bottom: 22px; }
.sp__toggle { display: inline-flex; padding: 4px; gap: 4px; border-radius: 999px; background: #222; border: 1px solid var(--line-light); }
.sp__toggle button {
  min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: none; color: #D6D6D6;
  font: 500 15px/1 var(--f-text); cursor: pointer; transition: background-color .2s, color .2s;
}
.sp__toggle button[aria-pressed="true"] { background: var(--white); color: var(--ink); }
.sp__toggle button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.sp__save { font-weight: 600; }
.sp__fx { font-size: 14px; color: var(--muted-light); }
.sp { display: grid; gap: 14px; }
.sp__plan { position: relative; display: flex; flex-direction: column; padding: 26px 22px 22px; border-radius: var(--r-lg); background: #1C1C1C; border: 1px solid var(--line-light); }
.sp__plan--pick { margin-top: 10px; background: var(--white); color: var(--ink); border-color: var(--white); }
.sp__flag { position: absolute; top: -12px; left: 22px; padding: 5px 10px; border-radius: 999px; background: var(--ink); color: var(--white); border: 1.5px solid var(--white); font-size: 12px; font-weight: 500; letter-spacing: .02em; }
.sp__name { font: 500 24px/1.1 var(--f-display); letter-spacing: -.02em; }
.sp__price { margin-top: 14px; font-size: 15px; color: var(--muted-light); }
.sp__price b { font: 500 38px/1 var(--f-text); letter-spacing: -.03em; color: var(--white); margin-right: 2px; }
.sp__plan--pick .sp__price { color: var(--muted); }
.sp__plan--pick .sp__price b { color: var(--ink); }
.sp__alt { font-size: 14px; color: var(--muted-light); margin-top: 6px; min-height: 1.5em; }
.sp__plan--pick .sp__alt { color: var(--muted); }
[data-sp][data-period="an"] [data-sp-m], [data-sp][data-period="mois"] [data-sp-y] { display: none; }
.sp__list { display: grid; gap: 9px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-light); font-size: 15px; }
.sp__plan--pick .sp__list { border-top-color: var(--line); }
.sp__list li { display: flex; gap: 9px; }
.sp__list .ico { flex: none; margin-top: 2px; }
.sp__cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 28px; }
.sp__try { background: var(--white); color: var(--ink); }
.sp__try:hover { background: #E6E6E6; }
.sp__more { color: var(--white); border-color: rgba(255, 255, 255, .5); }
.sp__more:hover { border-color: var(--white); }
.sp__note { color: var(--muted-light); }
@media (max-width: 459px) { .sp__cta .btn { width: 100%; } .sp__toggle { width: 100%; } .sp__toggle button { flex: 1; padding: 0 10px; } }
@media (min-width: 700px) { .sp { grid-template-columns: 1fr 1fr; row-gap: 24px; } .sp__plan--pick { margin-top: 0; } }
@media (min-width: 1100px) { .sp { grid-template-columns: repeat(4, 1fr); } }

/* Included in every plan */
.included { margin-top: 18px; padding: 22px; border-radius: var(--r-lg); background: var(--grey-1); }
.included__title { font: 500 13px/1.3 var(--f-text); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 14px; }
.included ul { display: grid; gap: 10px; }
.included li { display: flex; gap: 10px; font-size: 15px; }
.included .ico { margin-top: 1px; }
@media (min-width: 800px) { .included { padding: 26px 30px; } .included ul { grid-template-columns: 1fr 1fr; gap: 12px 32px; } }

/* FAQ */
.faq { display: grid; gap: 8px; }
.faq__list { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 64px; padding: 16px 0;
  font: 500 clamp(17px, 2.2vw, 19px)/1.35 var(--f-display); letter-spacing: -.01em; cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' stroke='%231A1512' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 16px no-repeat; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 22px; color: var(--muted); max-width: 40em; }
.faq details a { color: var(--accent); }
@media (min-width: 1000px) { .faq { grid-template-columns: .8fr 1.2fr; gap: 72px; } .faq .section__head { margin-bottom: 0; } }

/* Waitlist */
.join { display: grid; gap: 36px; }
.join__perks { margin-top: 26px; display: grid; gap: 12px; }
.join__perks li { display: flex; gap: 12px; align-items: center; font-weight: 400; }
.join__perks .ico { color: var(--ink); background: var(--accent-light); border-radius: 50%; padding: 3px; width: 24px; height: 24px; }
.join__card { scroll-margin-top: 16px; --focus: var(--ink); background: var(--white); color: var(--ink); border-radius: 26px; padding: 22px 18px; box-shadow: 0 50px 80px -50px rgba(0, 0, 0, .6); }
@media (min-width: 600px) { .join__card { padding: 32px; } }
@media (min-width: 1000px) { .join { grid-template-columns: .9fr 1.1fr; gap: 72px; align-items: start; } .join__copy { position: sticky; top: calc(var(--head-h) + 40px); } }

.join__next { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 11px 14px; border-radius: 12px; background: var(--grey-1); font-size: 15px; font-weight: 500; }
.join__next .ico { width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: var(--ink); color: var(--white); }

.form { display: grid; gap: 18px; }
.form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.form__label { display: block; font-weight: 500; font-size: 15px; margin-bottom: 8px; padding: 0; }
.opt { font-weight: 400; color: var(--muted); font-size: 13.5px; }
.form__hint { font-size: 13px; color: var(--muted); margin-top: 7px; }
.input {
  width: 100%; min-height: 52px; padding: 12px 14px; border-radius: 12px;
  border: 1.5px solid rgba(17, 17, 17, .18); background: var(--paper); font-size: 16px;
  transition: border-color .15s, box-shadow .15s;
}
.input::placeholder { color: #8E8E8E; }
.input:hover { border-color: rgba(17, 17, 17, .35); }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.input[aria-invalid="true"] { border-color: var(--ink); border-width: 2px; }
select.input { appearance: none; -webkit-appearance: none; padding-right: 38px; background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m7 10 5 5 5-5' fill='none' stroke='%231A1512' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 12px center / 18px no-repeat; }
.phonein { display: flex; gap: 8px; }
.phonein__cc { flex: 0 0 122px; padding-left: 12px; padding-right: 30px; background-position: right 8px center; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; border-radius: 15px; background: var(--grey-2); }
.seg label { position: relative; }
.seg span { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 46px; padding: 6px 10px; border-radius: 11px; font-weight: 500; font-size: 14.5px; line-height: 1.2; color: var(--muted); cursor: pointer; }
.seg input:checked + span { background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px rgba(17, 17, 17, .14); }
.seg input:focus-visible + span, .checks input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 2px; }
.checks { display: flex; flex-wrap: wrap; gap: 8px; }
.checks label { position: relative; }
.checks span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1.5px solid rgba(17, 17, 17, .18); background: var(--paper); font-weight: 400; font-size: 15px; cursor: pointer; }
.checks input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--white); }
.tick { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; line-height: 1.45; cursor: pointer; }
.tick input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--ink); }
.tick span { padding-top: 1px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__error { padding: 12px 14px; border-radius: 12px; background: var(--grey-2); color: var(--ink); border-left: 4px solid var(--ink); font-size: 14.5px; font-weight: 400; }

.done { text-align: center; padding: 20px 4px 6px; outline: none; }
.done__mark { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 18px; display: grid; place-items: center; background: var(--accent); color: #fff; }
.done__mark .ico { width: 30px; height: 30px; }
.done__title { font: 500 28px/1.15 var(--f-display); letter-spacing: -.02em; margin-bottom: 10px; }
.done p { color: var(--muted); margin-bottom: 24px; }

/* ---------- Footer ---------- */
.foot { background: var(--ink); color: var(--white); padding: 56px 0 40px; border-top: 1px solid var(--line-light); --focus: #fff; }
.foot__brand { display: flex; align-items: flex-start; gap: clamp(16px, 3vw, 28px); color: var(--white); }
.foot__txt { display: grid; gap: 10px; justify-items: end; margin-top: clamp(14px, 2.6vw, 30px); }
.foot__word { display: block; height: clamp(52px, 7vw, 88px); width: auto; aspect-ratio: 900 / 479; fill: currentColor; }
.foot__icons { display: flex; gap: 10px; color: var(--muted-light); }
.foot__icons .ico { width: 16px; height: 16px; --paper: var(--ink); }
.foot__cloud { height: clamp(108px, 20vw, 200px); width: auto; aspect-ratio: 600 / 446; flex: none; fill: currentColor; }
.foot__grid { display: grid; gap: 22px; margin-top: 36px; padding-top: 26px; border-top: 1px solid var(--line-light); }
.foot__tag { font: 500 20px/1.3 var(--f-display); letter-spacing: -.02em; max-width: 18em; }
.foot__links { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.foot__links a { color: var(--muted-light); text-decoration: none; padding: 8px 0; }
.foot__links a:hover { color: var(--white); }
.foot__small { margin-top: 22px; font-size: 13px; color: var(--muted-light); max-width: 60em; }
.foot__small + .foot__small { margin-top: 8px; }
.foot__small a { color: var(--white); }
@media (min-width: 800px) { .foot__grid { grid-template-columns: 1fr auto; align-items: start; } }

/* ---------- Scroll-in ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; transition: none; } }

/* ---------- Physical to online (« Votre boutique physique, maintenant en ligne », the hero) ----------
   The photo of a real boutique; the logo's brush strokes trace it while it sinks into black; a burst; the same
   boutique online, in black and white (the products in colour), its products scrolling. anim/boutique.js builds the strokes and the burst
   and sets the classes on .bt__stage:
   is-armed → is-real (the photo alone, the copy's first half) → is-draw (strokes draw in, the black cover rises over the photo) → is-sign (« jeere » is written over
   the copy) → is-boom (the drawing bursts) → is-shop (the store window pops in, its rows scroll) → is-done.
   Without JS: the photo. With reduced motion (is-static): the store, still, over the dimmed photo. */
.bt { position: relative; background: #000; color: var(--white); --focus: #fff; --cream: #F3EEE4; }
.bt__stage { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: #000; }
@media (min-width: 600px) { .bt__stage { aspect-ratio: 4 / 3; } }
/* From 900 px: 16:9, but never taller than the screen under the header (a height, not aspect-ratio + max-height,
   which would also narrow the stage) */
@media (min-width: 900px) { .bt__stage { aspect-ratio: auto; height: min(56.25vw, calc(100vh - var(--head-h))); min-height: 520px; } }
.bt__frame, .bt__frame picture, .bt__img, .bt__svg, .bt__cover { position: absolute; inset: 0; width: 100%; height: 100%; }
.bt__img { object-fit: cover; object-position: 50% 50%; }
.bt__svg { display: block; max-width: none; overflow: hidden; }
.bt__svg--ink { color: var(--cream); }
.bt__cover { background: #000; }
.bt__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, #000 0, rgba(0, 0, 0, .55) 14%, rgba(0, 0, 0, 0) 38%); }
.bt__credit { position: absolute; right: 12px; bottom: 8px; margin: 0; font-size: 11.5px; color: rgba(255, 255, 255, .66); }
.bt__credit a { display: inline-flex; align-items: center; gap: 5px; color: inherit; font-weight: 400; }
.bt__ig { width: 13px; height: 13px; flex: none; }
.bt__credit a:hover { color: var(--white); opacity: 1; }
.bt__copy { position: relative; padding: 4px 0 64px; }
@media (min-width: 900px) { .bt__copy { padding-top: 28px; } }
.bt__text { max-width: 560px; }
/* « jeere », the page's wordmark, in the drawing's cream: the last thing the brush writes */
.bt__mark { display: block; height: clamp(34px, 3.6vw, 50px); width: auto; aspect-ratio: 900 / 479; margin: 0 0 18px -2px; fill: var(--cream); clip-path: inset(-12% -3% -12% -3%); transition: clip-path .75s cubic-bezier(.45, .1, .5, 1); }
.bt .h2 { color: var(--white); }
.bt .h2 span { display: block; }
.bt .eyebrow { padding-left: 0; }   /* no bar before « Du comptoir à Internet » */
.bt .eyebrow::before { content: none; }
.bt .bt__h1 { font-size: clamp(34px, 5.4vw, 64px); line-height: 1.04; letter-spacing: -.03em; }
.bt .lead { color: rgba(255, 255, 255, .8); }
.bt__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 28px; }
.bt__cta { background: var(--white); color: var(--ink); }
.bt__cta:hover { background: #E6E6E2; opacity: 1; }
.bt__cta .ico { width: 18px; height: 18px; transition: transform .2s; }
.bt__cta:hover .ico { transform: translateX(3px); }
.bt__replay {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 6px; border: 0; background: none;
  color: rgba(255, 255, 255, .82); font: 500 15px/1 var(--f-text); cursor: pointer;
}
.bt__replay:hover { color: var(--white); }
.bt__replay .ico { width: 18px; height: 18px; }
.bt__replay[hidden] { display: none; }
.bt__replay.is-off { visibility: hidden; }   /* keeps its place: the copy does not jump when it appears */
@media (min-width: 1280px) {
  /* Wide screens: the text sits on solid black at the left, the photo in the right-hand column */
  .bt__shade { display: none; }
  /* the copy is centred on the stage's height too, so it lines up with the store */
  .bt__copy { position: absolute; inset: 0; display: flex; align-items: center; padding: 0; pointer-events: none; }
  .bt__copy > .wrap { width: 100%; }
  .bt__text { pointer-events: auto; max-width: min(520px, 38vw); }
  .bt .lead { max-width: 24em; }
  .bt__credit { right: 16px; bottom: 12px; }
}

/* The animation (only once the script has armed the stage) */
/* Each strand is one dash (pathLength 1) slid into place; delay and duration are set per strand */
.bt__s { stroke-dasharray: 1 3; stroke-dashoffset: 1.05; transition-property: stroke-dashoffset; transition-timing-function: cubic-bezier(.3, .55, .25, 1); }
.is-draw .bt__s { stroke-dashoffset: 0; }
/* The drops at the strand tips and her eyes */
.bt__dot { opacity: 0; transition: opacity .12s linear; }
.is-draw .bt__dot { opacity: 1; }
.is-draw .bt__svg--ink { will-change: opacity, transform; }   /* each ink layer is its own layer: a finished one is not repainted */
/* The photo sinks into black as the drawing grows: a first dim so the strokes read on it, then all the way down
   (the script sets the duration to the drawing's) */
.bt__cover { opacity: 0; will-change: opacity; }
.is-draw .bt__cover { animation: bt-sink 3s cubic-bezier(.4, .1, .6, 1) both; }
@keyframes bt-sink { 0% { opacity: 0; } 14% { opacity: .42; } 100% { opacity: 1; } }
/* Paf: the drawing flies apart, a flash, streaks and drops of ink flung out, the frame shakes */
.is-boom .bt__svg--ink { opacity: 0; transform: scale(1.14); transition: opacity .32s ease, transform .5s cubic-bezier(.2, .7, .2, 1); }
.is-boom .bt__frame { animation: bt-shake .34s linear both; }
@keyframes bt-shake { 20% { transform: translate(-6px, 3px); } 40% { transform: translate(5px, -4px); } 60% { transform: translate(-3px, 2px); } 80% { transform: translate(2px, -1px); } 100% { transform: none; } }
.bt__frame, .bt__shop, .bt__burst { position: absolute; inset: 5% 4%; pointer-events: none; }
/* The photo of the stall (portrait) sits in the same box as the store that replaces it, as a rounded card */
.bt__frame { width: auto; height: auto; overflow: hidden; border-radius: 26px; }
@media (min-width: 600px) { .bt__frame, .bt__shop, .bt__burst { inset: 6% 9%; } }
@media (min-width: 900px) { .bt__frame, .bt__shop, .bt__burst { inset: 7% 14%; } }
@media (min-width: 1280px) {
  /* beside the copy, in the column the photo's shelves filled */
  /* beside the copy: at most 600 × 700 px, centred on the stage's height, so big screens do not stretch it */
  .bt__stage { --colL: calc(max(var(--gutter), (100% - var(--max)) / 2) + min(520px, 38vw) + 56px); --colR: max(var(--gutter), (100% - var(--max)) / 2); }
  .bt__frame, .bt__shop, .bt__burst { left: var(--colL); right: auto; width: min(600px, calc(100% - var(--colL) - var(--colR)));
    top: calc((100% - min(84%, 700px)) / 2); bottom: auto; height: min(84%, 700px); }
}
.bt__burst { visibility: hidden; }
.is-boom .bt__burst { visibility: visible; }
.bt__burst i { position: absolute; left: 50%; top: 50%; width: var(--w); height: var(--h); margin-top: calc(var(--h) / -2); border-radius: 99px; background: var(--c, var(--cream)); transform-origin: 0 50%; opacity: 0; }
.bt__burst i.d { margin-left: calc(var(--w) / -2); transform-origin: 50% 50%; }
.is-boom .bt__burst i.s { animation: bt-streak .72s cubic-bezier(.12, .75, .3, 1) var(--t) both; }
.is-boom .bt__burst i.d { animation: bt-drop .85s cubic-bezier(.12, .75, .3, 1) var(--t) both; }
@keyframes bt-streak { 0% { opacity: 1; transform: rotate(var(--a)) translateX(var(--r0)) scaleX(.12); } 55% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--r1)) scaleX(1); } }
@keyframes bt-drop { 0% { opacity: 1; transform: rotate(var(--a)) translateX(var(--r0)) scale(.4); } 65% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--r1)) scale(1); } }
.bt__flash { position: absolute; left: 50%; top: 50%; width: 170%; aspect-ratio: 1; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, #fff 0, rgba(243, 238, 228, .6) 16%, rgba(243, 238, 228, 0) 56%); transform: translate(-50%, -50%) scale(.02); }
.is-boom .bt__flash { animation: bt-flash .62s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes bt-flash { 0% { opacity: 1; transform: translate(-50%, -50%) scale(.02); } 30% { opacity: .9; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); } }
/* A slow machine: no burst, the drawing simply fades as the store comes in */
.is-slow .bt__burst { display: none; }
.is-slow.is-boom .bt__frame { animation: none; }
.bt__stage.is-done .bt__svg, .bt__stage.is-done .bt__burst { display: none; }
.bt__stage.is-done .bt__frame { visibility: hidden; }   /* the photo's card, all black by now, leaves with the drawing */
.bt__stage.is-reset, .bt__stage.is-reset *, .bt__stage.is-reset ~ .bt__copy * { transition: none !important; animation: none !important; }

/* The boutique, online, laid out like the Tabouret concept but in black and white: a plain white window, black type
   and pills, light grey cards with cut-out objects standing out of them, and pieces that break out of the window
   (the cart, the objects of the row of products, the Wave notice, the dock). One row of products
   scrolls. Sizes follow the store's box (cq units). « Chez Awa » has its own mark (a basket seen from above) and face. */
.bt__shop { visibility: hidden; container: shop / size; color: #0C0C0C; font-family: var(--f-text); --mute: #6B6B6B; --line: rgba(12, 12, 12, .12); }
.bt__win { position: absolute; inset: 3% 10% 15% 0; display: flex; flex-direction: column; container-type: size;
  border-radius: 30px; background: #fff; box-shadow: 0 50px 100px -20px rgba(0, 0, 0, .8);
  opacity: 0; transform: translateY(24px) scale(.6) rotate(-3deg); }
.bt__top { display: flex; align-items: center; gap: 9px; padding: clamp(22px, 6.5cqw, 40px) clamp(16px, 5cqw, 32px) 0; }
.bt__logo { flex: none; width: clamp(26px, 6.4cqw, 36px); height: auto; aspect-ratio: 1; }
.bt__brand { font: italic 600 clamp(16px, 4.2cqw, 24px)/1 'Fraunces', Georgia, 'Times New Roman', serif; letter-spacing: -.02em; }
.bt__url { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; margin-right: clamp(40px, 12cqw, 70px); padding: 5px 11px; border-radius: 99px;
  border: 1px solid var(--line); font: 500 clamp(10px, 2.1cqw, 12.5px)/1 var(--f-text); color: var(--mute); }
.bt__url svg { width: 9px; height: 11px; }
.bt__h { margin: clamp(24px, 7cqw, 44px) clamp(16px, 5cqw, 32px) 0; font: 700 clamp(17px, 4.6cqw, 27px)/1.1 var(--f-display); letter-spacing: -.03em; }
.bt__chips { display: flex; gap: 6px; margin: clamp(10px, 3cqw, 18px) clamp(16px, 5cqw, 32px) 0; overflow: hidden; }
.bt__chips span { flex: none; padding: 6px 12px; border-radius: 99px; border: 1px solid var(--line); font-size: clamp(10.5px, 2.2cqw, 13px); font-weight: 500; color: #3A3A3A; }
.bt__chips .is-on { background: #0C0C0C; border-color: #0C0C0C; color: #fff; }
/* The row of products: the cards stay inside the window (clipped at its edges), but the objects on them go over its
   edges onto the black. The script lays a copy of the row on top (.bt__rail--objects), wider than the window, that
   shows only the objects and slides in step with it (same cards, same animation, started together); the row underneath
   then hides its own objects (.has-objects). Room above the cards for the objects that stand out of them. */
.bt__row { position: relative; flex: 1 1 0; min-height: 0; display: flex; align-items: center; padding-bottom: clamp(30px, 8cqw, 54px); --ov: 8cqw;
  --cw: clamp(112px, min(42cqw, 34cqh), 230px); }
.bt__rail { flex: 1 1 0; min-width: 0; height: 100%; overflow: hidden; }
.bt__rail--objects { position: absolute; top: 0; bottom: clamp(30px, 8cqw, 54px); left: calc(var(--ov) * -1); right: calc(var(--ov) * -1); height: auto; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.bt__rail--objects .bt__track { padding-left: calc(clamp(16px, 5cqw, 32px) + var(--ov)); }
.bt__rail--objects .bt__p { background: none; }
.bt__rail--objects figcaption { visibility: hidden; }
.has-objects > .bt__rail:not(.bt__rail--objects) .bt__p img { visibility: hidden; }
.bt__track { display: flex; align-items: center; gap: clamp(10px, 2.6cqw, 16px); height: 100%; width: max-content; padding-left: clamp(16px, 5cqw, 32px);
  animation: bt-roll 34s linear infinite paused; }
@keyframes bt-roll { to { transform: translateX(calc(-50% - clamp(5px, 1.3cqw, 8px))); } }
.bt__p { position: relative; flex: none; margin: 0; width: var(--cw); padding: 0 12px 12px; border-radius: 22px; background: #F2F2F0; }
.bt__p img { display: block; width: 100%; height: auto; aspect-ratio: 1.15; margin: -34% 0 6px; object-fit: contain; object-position: 50% 100%;
  filter: drop-shadow(0 14px 10px rgba(0, 0, 0, .22)); }   /* cut-out objects standing out of their card */
.bt__p figcaption { display: flex; flex-direction: column; gap: 2px; }
.bt__p b { font-size: clamp(11.5px, 2.5cqw, 14px); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt__p small { font-size: clamp(9.5px, 2cqw, 11.5px); color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt__price { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; font-size: clamp(12px, 2.6cqw, 15px); font-weight: 700; letter-spacing: -.01em; }
.bt__price i { display: grid; place-items: center; width: clamp(22px, 5cqw, 28px); aspect-ratio: 1; border-radius: 50%; background: #0C0C0C; color: #fff; }
.bt__price i svg { width: 42%; height: 42%; }
/* Out of the window: the cart on its top edge */
.bt__cart { position: absolute; top: 0; right: calc(10% + clamp(16px, 4cqw, 30px)); display: flex; align-items: center; gap: 6px;
  padding: 0 14px; height: clamp(38px, 7cqh, 50px); border-radius: 16px; background: #0C0C0C; color: #fff; border: 1.5px solid #fff; box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .7); }
.bt__cart svg { width: 20px; height: 20px; }
.bt__cart b { display: grid; place-items: center; min-width: 20px; height: 20px; border-radius: 99px; background: #fff; color: #0C0C0C; font-size: 11.5px; }
/* …the Wave payment, over the bottom edge */
.bt__toast { position: absolute; left: 54%; bottom: 9.5%; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 18px;
  background: #fff; color: #0C0C0C; border: 1px solid var(--line); box-shadow: 0 22px 44px -16px rgba(0, 0, 0, .8); }
.bt__toast i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #0C0C0C; color: #fff; }
.bt__toast i svg { width: 13px; height: 13px; }
.bt__toast b { display: block; font-size: 13px; font-weight: 600; }
.bt__toast small { display: block; font-size: 11px; color: var(--mute); }
/* …and the dock, astride the bottom edge */
.bt__dock { position: absolute; bottom: 9%; left: 25%; width: max-content; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 99px;
  background: #0C0C0C; border: 1px solid rgba(255, 255, 255, .3); color: rgba(255, 255, 255, .62); box-shadow: 0 18px 36px -12px rgba(0, 0, 0, .7); }
.bt__dock > span { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 11px; border-radius: 99px; font-size: 12px; font-weight: 600; }
.bt__dock > .is-on { background: #fff; color: #0C0C0C; }
.bt__dock svg { flex: none; width: 17px; height: 17px; }
/* A narrow store box (phones, tablets): the window takes the width, the « Coup de cœur » card stays home */
@container shop (max-width: 560px) {
  .bt__win { inset: 4% 0 9% 0; }
  .bt__cart { right: clamp(14px, 5cqw, 26px); top: 0; }
  .bt__url { margin-right: clamp(50px, 16cqw, 76px); }
  .bt__toast { left: auto; right: -3%; bottom: 17%; }
  .bt__dock { left: 50%; bottom: 2%; }
}
@container shop (max-width: 380px) { .bt__url { display: none; } }
/* In: the window pops, then the pieces outside it land one by one */
.bt__cart, .bt__toast, .bt__dock { opacity: 0; }
.bt__cart { transform: translateY(-30px) scale(.8); }
.bt__toast { transform: translateY(16px) scale(.85); }
.bt__dock { transform: translate(-50%, 30px); }
.bt__stage.is-shop .bt__shop, .bt__stage.is-static .bt__shop { visibility: visible; }
.bt__stage.is-shop .bt__win { opacity: 1; transform: none; transition: transform .8s cubic-bezier(.18, 1.3, .4, 1), opacity .22s ease; }
.bt__stage.is-shop :is(.bt__cart, .bt__toast) { opacity: 1; transform: none; transition: transform .7s cubic-bezier(.2, 1.4, .4, 1), opacity .3s ease; }
.bt__stage.is-shop .bt__dock { opacity: 1; transform: translateX(-50%); transition: transform .7s cubic-bezier(.2, 1.4, .4, 1) .3s, opacity .3s ease .3s; }
.bt__stage.is-shop .bt__cart { transition-delay: .2s; }
.bt__stage.is-shop .bt__toast { transition-delay: 1.4s; }
.bt__stage.is-shop .bt__track { animation-play-state: running; }
.bt__credit { transition: opacity .4s ease; }
.bt__stage.is-shop .bt__credit, .bt__stage.is-static .bt__credit { opacity: 0; pointer-events: none; }   /* the photo is gone */
/* Still: the store over the dimmed photo */
.bt__stage.is-static .bt__frame { opacity: .2; }
.bt__stage.is-static :is(.bt__win, .bt__cart, .bt__toast) { opacity: 1; transform: none; }
.bt__stage.is-static .bt__dock { opacity: 1; transform: translateX(-50%); }

/* « jeere » is written from left to right as the drawing ends */
.bt__stage.is-armed:not(.is-sign) ~ .bt__copy .bt__mark { clip-path: inset(-12% 100% -12% -3%); }
.bt.is-focus .bt__stage ~ .bt__copy .bt__mark { clip-path: inset(-12% -3% -12% -3%); }
@media (min-width: 1280px) {
  /* The copy follows the story: « Votre boutique physique, » with the photo, « maintenant en ligne. », the lead
     and the button as the store comes in */
  .bt__stage.is-armed ~ .bt__copy :is(.eyebrow, .bt__t1, .bt__t2, .lead, .bt__acts) { opacity: 0; transform: translateY(14px); }
  .bt__stage.is-real ~ .bt__copy :is(.eyebrow, .bt__t1) { opacity: 1; transform: none; transition: opacity .7s ease .1s, transform .7s cubic-bezier(.2, .8, .2, 1) .1s; }
  .bt__stage.is-real ~ .bt__copy .bt__t1 { transition-delay: .3s; }
  .bt__stage.is-shop ~ .bt__copy :is(.bt__t2, .lead, .bt__acts) { opacity: 1; transform: none; transition: opacity .7s ease .25s, transform .7s cubic-bezier(.2, .8, .2, 1) .25s; }
  .bt__stage.is-shop ~ .bt__copy .lead { transition-delay: .4s; }
  .bt__stage.is-shop ~ .bt__copy .bt__acts { transition-delay: .55s; }
  .bt__stage.is-done ~ .bt__copy :is(.eyebrow, .bt__t1, .bt__t2, .lead, .bt__acts),
  .bt.is-focus .bt__stage ~ .bt__copy :is(.eyebrow, .bt__t1, .bt__t2, .lead, .bt__acts) { opacity: 1; transform: none; }
}
}