/* Jeere Studio — builder chrome: start screen, editor, modals.
   Black and white (the Jeere logo itself is black ink): the stores in the preview bring the colour.
   Colour only carries a meaning, in small doses (badges, dots, icons): green = done, orange = attention,
   red = problem, blue = information. Tokens below, documented in README.md « Couleurs d’état ».
   Every rule is scoped to a b- class so nothing leaks into the store preview (.jst) or the assistant (.jwz).
   Designed at 360 px first. */

:root {
  --ink: #111111;
  --white: #FFFFFF;
  --grey-1: #F5F5F3;
  --grey-2: #EBEBE8;
  --muted: #5E5E5E;
  --line: rgba(17, 17, 17, .12);
  --line-2: rgba(17, 17, 17, .22);
  --b-font: 'Poppins', 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --b-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  --b-top-h: 60px;
  --b-panel-w: 360px;
  --b-shadow-1: 0 1px 2px rgba(17, 17, 17, .06), 0 6px 18px -8px rgba(17, 17, 17, .16);
  --b-shadow-2: 0 34px 70px -28px rgba(17, 17, 17, .38), 0 12px 28px -14px rgba(17, 17, 17, .22);
  /* Status colours (same values as ../admin/admin.css): --x dot / icon (>= 3:1 on white), --x-bg tint, --x-ink text (>= 4.5:1) */
  --ok: #22C55E;   --ok-bg: #DCFCE7;   --ok-ink: #166534;
  --warn: #F5B800; --warn-bg: #FEF6D3; --warn-ink: #7A5A00;
  --err: #EF4444;  --err-bg: #FDE8E8;  --err-ink: #B91C1C;
  --info: #3B82F6; --info-bg: #E6F0FF; --info-ink: #1D4ED8;
  --chart-1: #3B82F6; --chart-2: #B79CFF; --chart-3: #22C55E; --chart-4: #FACC15; --chart-5: #7DD3FC;
}
.b-tone--ok { --t: var(--ok); --t-bg: var(--ok-bg); --t-ink: var(--ok-ink); }
.b-tone--warn { --t: var(--warn); --t-bg: var(--warn-bg); --t-ink: var(--warn-ink); }
.b-tone--err { --t: var(--err); --t-bg: var(--err-bg); --t-ink: var(--err-ink); }
.b-tone--info { --t: var(--info); --t-bg: var(--info-bg); --t-ink: var(--info-ink); }
/* No underline under any text: links are shown by their weight and colour */
a:not(.jst a) { text-decoration: none; }


*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font: 400 15px/1.5 var(--b-font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
[hidden] { display: none !important; }
html.b-modal-open, html.b-modal-open body { overflow: hidden; }

.b-root :focus-visible, .b-modal :focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.b-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.b-ico {
  display: block; width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
/* The Jeere logo (symbols #cloud and #wordmark in index.html): the hand-drawn cloud, black ink, like the landing page */
.b-logo__lock { display: inline-flex; align-items: center; gap: 0; color: var(--ink); vertical-align: middle; }
.b-logo__lock .logo__cloud { display: block; flex: none; height: 32px; width: auto; aspect-ratio: 600 / 446; fill: currentColor; }
.b-logo__lock .logo__wordmark { display: block; flex: none; height: 28px; width: auto; aspect-ratio: 900 / 479; fill: currentColor; }
@media (min-width: 560px) { .b-logo__lock .logo__cloud { height: 36px; } }
/* The footer: the cloud and « jeere » written by hand */
.b-logo__lock.b-logo__lock--sm { gap: 8px; }
.b-logo__lock--sm .logo__cloud { height: 24px; }
.b-logo__lock--sm .logo__wordmark { height: 28px; }
.b-noscript { padding: 32px 16px; text-align: center; font-weight: 400; }

/* ---------- Buttons ---------- */
.b-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px; border-radius: 13px; border: 1.5px solid transparent;
  background: none; color: var(--ink); font: 500 15px/1.2 var(--b-font); text-decoration: none; text-align: center;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color .15s, border-color .15s, color .15s, transform .15s;
}
.b-btn:active { transform: translateY(1px); }
.b-btn .b-ico { width: 18px; height: 18px; }
.b-btn--sm { min-height: 44px; padding: 0 14px; font-size: 14px; border-radius: 12px; }
.b-btn--primary { background: var(--ink); color: var(--white); }
.b-btn--primary:hover { background: #333333; }
.b-btn--ghost { background: var(--white); border-color: var(--line-2); }
.b-btn--ghost:hover { border-color: var(--ink); }
.b-btn--inv { background: var(--white); color: var(--ink); }
.b-btn--inv:hover { background: var(--grey-2); }
.b-btn--quiet { color: var(--muted); padding: 0 12px; }
.b-btn--quiet:hover { color: var(--ink); background: var(--grey-1); }
.b-btn--dashed { border: 1.5px dashed rgba(17, 17, 17, .3); background: transparent; }
.b-btn--dashed:hover { border-color: var(--ink); background: var(--grey-1); }
.b-btn--block { width: 100%; }
.b-btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.b-btn[disabled]:hover { background: inherit; }
.b-btn--primary[disabled]:hover { background: var(--ink); }

.b-ibtn {
  display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; padding: 0;
  border: 0; border-radius: 11px; background: transparent; color: var(--ink); cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: background-color .15s, color .15s;
}
.b-ibtn:hover { background: var(--grey-1); }
.b-ibtn[disabled] { color: rgba(17, 17, 17, .25); cursor: default; background: transparent; }
.b-ibtn--light:hover { background: var(--grey-2); }

.b-link { color: var(--ink); font-weight: 400; font-size: 14.5px; text-decoration: none; }
.b-link:hover { }
.b-only-wide { display: none; }
@media (min-width: 640px) { .b-only-wide { display: inline; } .b-only-narrow { display: none; } }

/* ============================================================ START SCREEN */
.b-wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 600px) { .b-wrap { padding: 0 24px; } }
@media (min-width: 1000px) { .b-wrap { padding: 0 40px; } }

.b-shead {
  position: sticky; top: 0; z-index: 10;
  background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.b-shead__in { height: 64px; display: flex; align-items: center; gap: 12px; }
.b-logo { display: block; padding: 8px 12px 8px 8px; color: var(--ink); border-radius: 10px; }
.b-shead__tag {
  font-size: 11.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; line-height: 1;
  padding: 5px 8px; border: 1.5px solid var(--ink); border-radius: 7px;
}
.b-shead__nav { margin-left: auto; display: flex; align-items: center; gap: 20px; min-width: 0; }

/* The seller's account in the start screen header (editor.js reads 'jeere-account' and shows one of the two) */
.b-acct { display: flex; align-items: center; gap: 18px; min-width: 0; }
.b-acct__btn { flex: none; white-space: nowrap; }
.b-acct__login { flex: none; white-space: nowrap; }
.b-acct__hello { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0; font-size: 14.5px; line-height: 1.25; }
.b-acct__av {
  display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%;
  background: var(--grey-2); color: var(--ink); font-size: 14px; font-weight: 500; line-height: 1;
}
.b-acct__txt { min-width: 0; max-width: 220px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.b-acct__name { font-weight: 500; }
.b-acct__short { display: none; }
/* « Retour à Jeere » only where the account links have room beside it (the logo also leads back) */
@media (max-width: 799.98px) { .b-shead__nav > .b-only-wide { display: none; } }
@media (max-width: 639.98px) {
  .b-shead__nav { gap: 12px; }
  .b-acct { gap: 12px; }
  .b-acct__btn { padding: 0 13px; }
  .b-acct__btn .b-ico { display: none; }
  /* « Bonjour » on top of the first name: the greeting and « Tableau de bord » fit a 360 px phone */
  .b-acct__av { display: none; }
  .b-acct__hello { flex: 0 1 auto; }
  .b-acct__txt { display: grid; max-width: 110px; text-align: right; }
  .b-acct__hi, .b-acct__name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .b-acct__hi { font-size: 11.5px; line-height: 1.3; color: var(--muted); }
  .b-acct__name { font-size: 14px; line-height: 1.3; }
}
/* Small phones: the « Studio » tag makes room for the account links */
@media (max-width: 479.98px) { .b-shead__tag { display: none; } }
@media (max-width: 409.98px) { .b-acct__long { display: none; } .b-acct__short { display: inline; } }

.b-smain { padding-top: 28px; padding-bottom: 36px; }
@media (min-width: 1000px) { .b-smain { padding-top: 52px; } }
.b-intro { max-width: 760px; }
.b-eyebrow {
  position: relative; margin: 0 0 14px; padding-left: 34px;
  font-size: 12.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
}
/* A short rule before the eyebrow */
.b-eyebrow::before { content: ''; position: absolute; left: 0; top: .5em; width: 22px; height: 4px; background: currentColor; }
.b-h1 { margin: 0; font: 500 clamp(36px, 9vw, 64px)/1.03 var(--b-font); letter-spacing: -.035em; text-wrap: balance; }
.b-h1:focus { outline: none; }
.b-lead { margin: 14px 0 0; max-width: 34em; color: var(--muted); font-size: clamp(16px, 2.2vw, 18.5px); line-height: 1.55; text-wrap: pretty; }

.b-resume {
  margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px;
  padding: 14px; border: 1.5px solid var(--ink); border-radius: 20px; background: var(--white);
}
.b-resume__ico { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 13px; background: var(--grey-1); }
.b-resume__txt { flex: 1 1 180px; min-width: 0; }
.b-resume__k { margin: 0; font-size: 11.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.b-resume__name { margin: 1px 0 0; font-size: 17.5px; font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
.b-resume__meta { margin: 0; font-size: 13.5px; color: var(--muted); }
.b-resume .b-btn { flex: 1 1 100%; }
@media (min-width: 560px) { .b-resume { padding: 14px 14px 14px 16px; } .b-resume .b-btn { flex: 0 0 auto; } }

.b-ways { margin-top: 24px; display: grid; gap: 16px; }
@media (min-width: 1080px) { .b-ways { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); } }
.b-ways__side { display: grid; gap: 16px; align-content: start; }
@media (min-width: 640px) and (max-width: 1079.98px) { .b-ways__side { grid-template-columns: 1fr 1fr; } }

.b-way {
  display: flex; flex-direction: column; gap: 16px; min-width: 0;
  padding: 18px; border: 1px solid var(--line); border-radius: 22px; background: var(--white);
}
@media (min-width: 600px) { .b-way { padding: 24px; } }
.b-way__head { display: flex; align-items: flex-start; gap: 14px; }
.b-way__ico { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 12px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.b-way__ico--inv { background: var(--white); color: var(--ink); box-shadow: none; }
.b-way__title { margin: 0; font-size: 20px; font-weight: 500; line-height: 1.25; letter-spacing: -.015em; }
.b-way__sub { margin: 3px 0 0; font-size: 14.5px; color: var(--muted); }
.b-way__text { margin: 0; font-size: 14.5px; }

.b-way--tpl { padding: 14px; border: 0; background: var(--grey-1); }
@media (min-width: 600px) { .b-way--tpl { padding: 24px; } }
.b-way--tpl .b-way__head { padding: 4px 4px 0; }

.b-way--ai { background: var(--ink); border-color: var(--ink); color: var(--white); }
.b-way--ai .b-way__sub, .b-way--ai .b-way__text { color: rgba(255, 255, 255, .74); }
.b-way--ai :focus-visible { outline-color: var(--white); }
.b-way--zero { background: var(--white); border: 1.5px dashed rgba(17, 17, 17, .24); }
.b-way--zero .b-way__ico { background: var(--grey-1); box-shadow: none; color: var(--muted); }
.b-soon {
  display: inline-block; margin-left: 6px; padding: 4px 8px; vertical-align: 3px;
  font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; line-height: 1;
  border-radius: 999px; background: var(--grey-2); color: var(--ink);
}

.b-chatdemo { display: grid; gap: 8px; }
.b-chatdemo__msg { display: flex; align-items: flex-end; gap: 8px; max-width: 94%; margin: 0; }
.b-chatdemo__msg > span:last-child {
  padding: 9px 12px; border-radius: 15px 15px 15px 4px; background: rgba(255, 255, 255, .12); color: var(--white);
  font-size: 13.5px; line-height: 1.4;
}
.b-chatdemo__msg--me { margin-left: auto; justify-content: flex-end; }
.b-chatdemo__msg--me > span:last-child { background: var(--white); color: var(--ink); border-radius: 15px 15px 4px 15px; }
.b-chatdemo__av {
  display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%;
  background: #000000; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24);
}
.b-chatdemo__av svg { display: block; width: auto; height: 13px; aspect-ratio: 600 / 446; fill: var(--white, #FFFFFF); }

/* Template cards with a live preview */
.b-tpls { display: grid; gap: 10px; }
@media (min-width: 640px) { .b-tpls { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
.b-tcard {
  position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px;
  padding: 10px; border: 1px solid var(--line); border-radius: 16px; background: var(--white);
  transition: border-color .2s, box-shadow .2s;
}
.b-tcard:hover { border-color: var(--ink); box-shadow: var(--b-shadow-1); }
.b-tcard:focus-within { border-color: var(--ink); }
@media (min-width: 640px) { .b-tcard { grid-template-columns: minmax(0, 1fr); padding: 10px 10px 14px; } }
.b-tcard__shot { position: relative; height: 172px; border-radius: 10px; background: var(--grey-2); overflow: hidden; }
@media (min-width: 640px) { .b-tcard__shot { height: 300px; } }
.b-tcard__shot.is-schem { display: grid; place-items: center; padding: 10px; }
.b-tcard__schem svg { display: block; width: 100%; height: auto; border-radius: 8px; }
.b-mini {
  position: absolute; left: 50%; top: 12px; width: 406px; padding: 8px; border-radius: 44px; background: var(--ink);
  transform: translateX(-50%) scale(var(--mini-s, .26)); transform-origin: top center;
  box-shadow: 0 30px 60px -20px rgba(17, 17, 17, .35);
}
.b-mini__screen { width: 390px; height: 1100px; overflow: hidden; border-radius: 36px; background: var(--white); }
.b-tcard__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 2px 2px 0 0; }
@media (min-width: 640px) { .b-tcard__body { padding: 6px 6px 0; } }
.b-tcard__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.b-tcard__name { margin: 0; font-size: 18px; font-weight: 500; letter-spacing: -.01em; line-height: 1.25; }
.b-chip { display: inline-block; padding: 3px 8px; border-radius: 999px; background: var(--grey-2); font-size: 11.5px; font-weight: 500; letter-spacing: .02em; }
.b-tcard__desc { display: none; margin: 0; font-size: 13.5px; color: var(--ink); line-height: 1.45; }
@media (min-width: 640px) { .b-tcard__desc { display: block; } }
.b-tcard__best { margin: 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.b-tcard__best span { color: var(--ink); font-weight: 400; }
.b-tcard__btn { margin-top: auto; align-self: flex-start; white-space: nowrap; }
.b-lbl-long { display: none; }
@media (min-width: 1200px) { .b-lbl-long { display: inline; } .b-lbl-short { display: none; } }
@media (min-width: 640px) { .b-tcard__btn { margin-top: 8px; align-self: stretch; } }
/* The whole card is the button's tap area */
.b-tcard__btn::after { content: ''; position: absolute; inset: 0; border-radius: 16px; }
.b-tcard:hover .b-tcard__btn { border-color: var(--ink); background: var(--ink); color: var(--white); }

.b-note { display: flex; align-items: flex-start; gap: 10px; margin: 26px 0 0; font-size: 13.5px; color: var(--muted); }
.b-note .b-ico { width: 18px; height: 18px; margin-top: 1px; color: var(--ink); }

.b-sfoot { border-top: 1px solid var(--line); }
.b-sfoot__in { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding-top: 24px; padding-bottom: 32px; }
.b-sfoot__in p { flex: 1 1 260px; margin: 0; font-size: 13.5px; color: var(--muted); }
.b-sfoot__nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }

/* ============================================================ EDITOR */
.b-top {
  position: relative; z-index: 5; display: flex; align-items: center; gap: 10px; min-width: 0;
  height: var(--b-top-h); padding: 0 12px 0 16px; border-bottom: 1px solid var(--line); background: var(--white);
}
.b-top__logo { display: flex; align-items: center; flex: none; min-height: 44px; padding: 0 12px 0 8px; color: var(--ink); border-radius: 10px; }
.b-top__sep { width: 1px; height: 26px; flex: none; background: var(--line); }
/* « Tableau de bord »: back to the seller's dashboard (../admin/), like the exit button of Shopify's theme editor */
.b-top__dash {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none; min-width: 44px; min-height: 44px; padding: 0 14px 0 12px;
  border-radius: 12px; background: var(--grey-1); color: var(--ink); font: 500 14px/1.2 var(--b-font); text-decoration: none; white-space: nowrap;
  -webkit-tap-highlight-color: transparent; transition: background-color .15s;
}
.b-top__dash:hover { background: var(--grey-2); }
.b-top__dash .b-ico { width: 19px; height: 19px; }
@media (max-width: 1439.98px) {
  .b-top__dash { width: 44px; padding: 0; }
  .b-top__dlbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.b-top__store {
  display: grid; align-content: center; min-width: 0; max-width: 280px; min-height: 44px; padding: 3px 10px;
  border: 0; border-radius: 10px; background: none; color: var(--ink); text-align: left; cursor: pointer; font-family: var(--b-font);
}
.b-top__store:hover { background: var(--grey-1); }
.b-top__name { overflow: hidden; font-size: 14.5px; font-weight: 500; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; }
.b-saved { overflow: hidden; font-size: 11.5px; line-height: 1.3; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
.b-saved::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 6px; vertical-align: 1px; border-radius: 50%; background: var(--ink); }
.b-saved.is-ok::before { background: var(--ok); }
.b-saved.is-warn { color: var(--warn-ink); font-weight: 500; }
.b-saved.is-warn::before { background: var(--warn); }
.b-saved.is-err { color: var(--err-ink); font-weight: 500; }
.b-saved.is-err::before { background: var(--err); }
.b-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 13px; background: var(--grey-1); }
.b-seg__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 44px; min-height: 44px; padding: 0 12px;
  border: 0; border-radius: 10px; background: none; color: var(--muted); font: 400 13.5px/1 var(--b-font); cursor: pointer;
  transition: background-color .15s, color .15s;
}
.b-seg__btn:hover { color: var(--ink); }
.b-seg__btn[aria-pressed="true"] { background: var(--white); color: var(--ink); font-weight: 500; box-shadow: 0 1px 2px rgba(17, 17, 17, .12), 0 0 0 1px var(--line); }
/* flex: none: the page selector and the device toggle keep their size; the store name (ellipsis) shrinks instead,
   so the toggle never slides under Undo */
.b-top__mid { display: flex; align-items: center; gap: 8px; flex: none; margin: 0 auto; }

/* Page selector « Page : Accueil ▾ »: a native select (best on cheap phones) with its label drawn inside */
.b-pagesel { position: relative; display: inline-flex; flex: none; border-radius: 13px; background: var(--grey-1); color: var(--ink); transition: background-color .15s; }
.b-pagesel:hover { background: var(--grey-2); }
.b-pagesel__k { position: absolute; top: 50%; left: 14px; transform: translateY(-50%); font: 400 13.5px/1 var(--b-font); color: var(--muted); white-space: nowrap; pointer-events: none; }
.b-pagesel__sel {
  min-height: 50px; padding: 0 40px 0 61px; border: 0; border-radius: 13px; background: transparent; color: var(--ink);
  font: 500 14px/1.2 var(--b-font); cursor: pointer; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent;
}
.b-pagesel__sel:focus { outline: none; }
.b-pagesel__sel:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.b-pagesel__sel option { color: var(--ink); background: var(--white); font-weight: 400; }
.b-pagesel__chev { position: absolute; top: 50%; right: 13px; width: 18px; height: 18px; transform: translateY(-50%); pointer-events: none; }
/* Another page than the home page is shown: the selector stands out a little, so the seller knows where she is */
.b-pagegrp.is-other .b-pagesel { background: var(--white); box-shadow: inset 0 0 0 1.5px var(--ink); }
.b-pagegrp.is-other .b-pagesel:hover { background: var(--grey-1); }
/* The selector and « Gérer les pages » (the seller's own pages are written in the dashboard, ../admin/#pages) */
.b-pagegrp { display: inline-flex; align-items: stretch; gap: 4px; flex: none; min-width: 0; }
.b-pagesel { min-width: 0; }
.b-pagesel__sel { max-width: 270px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* As wide as the page shown, not as the longest page title (where supported) */
.b-pagesel__sel { field-sizing: content; }
.b-top__page .b-pagesel__sel { min-width: 196px; }
.b-pagemng {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex: none; min-width: 44px; padding: 0 12px;
  border-radius: 13px; background: var(--grey-1); color: var(--ink); font: 500 13.5px/1.2 var(--b-font); text-decoration: none; white-space: nowrap;
  -webkit-tap-highlight-color: transparent; transition: background-color .15s;
}
.b-pagemng:hover, .b-pagemng:active { background: var(--grey-2); }
.b-pagemng .b-ico { width: 19px; height: 19px; }
.b-pagemng__lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.b-pagegrp .b-pagemng { width: 48px; padding: 0; }
.b-top__end { display: flex; align-items: center; gap: 4px; flex: none; margin-left: auto; }
.b-top__fiche { margin: 0 4px 0 6px; }
/* « ? Aide »: replays the guided tour; an icon below 1200 px (its name stays in aria-label and title) */
.b-top__help { margin: 0 4px 0 0; padding: 0 12px 0 10px; border-color: transparent; }
/* « Studio Pro »: the advanced editor on the same fiche; laptops and iPads only, like the Studio itself */
.b-top__pro { margin: 0 2px 0 0; padding: 0 12px 0 10px; border-color: transparent; text-decoration: none; }
.b-top__pro .b-ico { width: 20px; height: 20px; }
@media (max-width: 767px) { .b-top__pro { display: none; } }
@media (max-width: 1279px) { .b-top__pro { width: 44px; padding: 0; justify-content: center; } .b-top__pro .b-top__lbl { display: none; } }
.b-top__help .b-ico { width: 20px; height: 20px; }
@media (max-width: 1199.98px) {
  .b-top__device .b-seg__btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .b-top__device .b-seg__btn { padding: 0 10px; }
  /* Room for the page selector: « Fiche boutique » becomes an icon (its name stays in aria-label and title) */
  .b-top__fiche { width: 44px; margin: 0 2px; padding: 0; }
  .b-top__fiche .b-top__lbl { display: none; }
  .b-top__help { width: 44px; margin: 0 2px 0 0; padding: 0; }
  .b-top__help .b-top__lbl { display: none; }
}

/* Panel */
.b-panel { min-width: 0; background: var(--white); }
.b-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-bottom: 1px solid var(--line); background: var(--white); }
.b-tab {
  position: relative; display: grid; justify-items: center; align-content: center; gap: 4px; min-height: 60px; padding: 6px 2px;
  border: 0; background: none; color: var(--muted); font: 400 12px/1.2 var(--b-font); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.b-tab .b-ico { width: 21px; height: 21px; }
.b-tab:hover { color: var(--ink); }
.b-tab[aria-selected="true"] { color: var(--ink); font-weight: 500; }
.b-tab[aria-selected="true"]::after { content: ''; position: absolute; left: 14%; right: 14%; bottom: -1px; height: 2.5px; border-radius: 2px; background: var(--ink); }
.b-tab:focus-visible { outline-offset: -3px; }
.b-tab__score {
  position: absolute; top: 5px; left: calc(50% + 7px); min-width: 22px; padding: 0 5px; border-radius: 7px;
  background: var(--grey-2); color: var(--ink); font-size: 10.5px; font-weight: 600; line-height: 17px; text-align: center;
  box-shadow: 0 0 0 2px var(--white);
}
.b-tab__score.is-ok { background: var(--ink); color: var(--white); }
.b-tab__score[class*="b-tone--"] { background: var(--t-bg); color: var(--t-ink); }

.b-tp { padding: 18px 16px 40px; }
.b-tp:focus { outline: none; }
@media (min-width: 900px) { .b-tp { padding: 20px 20px 48px; } }
.b-tp__head { margin-bottom: 14px; }
.b-tp__headrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.b-tp__headrow .b-btn { flex: none; }
.b-tp__title { margin: 0; font-size: 20px; font-weight: 500; line-height: 1.25; letter-spacing: -.02em; }
.b-tp__text { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }

.b-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.b-item { border: 1px solid var(--line); border-radius: 15px; background: var(--white); scroll-margin-top: 16px; transition: border-color .15s, box-shadow .15s; }
.b-item:hover { border-color: rgba(17, 17, 17, .28); }
.b-item.is-open { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.b-item__row { display: flex; align-items: center; padding: 3px 3px 3px 0; }
.b-item__main {
  display: flex; flex: 1; align-items: center; gap: 12px; min-width: 0; min-height: 54px; padding: 6px 6px 6px 10px;
  border: 0; border-radius: 12px; background: none; color: inherit; text-align: left; font-family: var(--b-font); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.b-item__main:focus-visible { outline-offset: -2px; }
.b-item__ico { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 11px; background: var(--grey-1); color: var(--ink); }
.b-item__ico .b-ico { width: 19px; height: 19px; }
.b-item__txt { display: grid; flex: 1; gap: 1px; min-width: 0; }
.b-item__name { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 14.5px; font-weight: 500; line-height: 1.3; }
.b-item__name-t { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.b-item__sum { overflow: hidden; font-size: 12.5px; line-height: 1.4; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
.b-item__sum--wrap { white-space: normal; }
.b-item.is-off .b-item__ico, .b-item.is-off .b-item__sum, .b-item.is-off .b-item__thumb { opacity: .45; }
.b-item.is-off .b-item__name-t { color: var(--muted); }
.b-chev { width: 18px; height: 18px; margin-left: auto; color: var(--muted); transition: transform .2s; }
[aria-expanded="true"] > .b-chev { transform: rotate(180deg); color: var(--ink); }
.b-eye[aria-pressed="false"] { color: var(--muted); }
.b-tag {
  flex: none; padding: 2px 6px; border-radius: 6px; background: var(--grey-2); color: var(--ink);
  font-size: 10px; font-weight: 500; letter-spacing: .05em; line-height: 1.5; text-transform: uppercase; white-space: nowrap;
}
.b-tag--badge { background: var(--ink); color: var(--white); }
.b-item__body { padding: 2px 14px 14px; border-top: 1px solid var(--line); }
@media (min-width: 900px) { .b-item__body { padding: 2px 16px 16px; } }
.b-item__desc { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.b-item__desc + .b-field, .b-note-box + .b-field { margin-top: 14px; }
.b-item__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px; margin-top: 18px; padding-top: 10px; border-top: 1px solid var(--line); }
.b-item__moves { display: flex; flex-wrap: wrap; gap: 2px; margin-left: -10px; }
.b-item__main--static { cursor: default; }
.b-item.is-sorting { background: var(--grey-1); border-color: transparent; }
.b-item.is-sorting .b-item__ico { background: var(--white); }
.b-item.is-sorting .b-ibtn { background: var(--white); margin-left: 4px; box-shadow: 0 0 0 1px var(--line); }
.b-item.is-sorting .b-ibtn[disabled] { background: transparent; box-shadow: none; }
.b-item.is-sorting .b-item__row { padding-right: 6px; }
.b-fixed { display: flex; align-items: center; gap: 12px; margin: 8px 0; padding: 8px 12px 8px 10px; border-radius: 15px; background: var(--grey-1); }
.b-fixed .b-item__ico { background: var(--white); color: var(--muted); }
.b-fixed .b-item__name { color: var(--ink); }
.b-fixed__lock { display: grid; place-items: center; width: 36px; height: 36px; flex: none; color: var(--muted); }
.b-fixed__lock .b-ico { width: 17px; height: 17px; }
#b-sec-add { margin: 10px 0 0; }
.b-tp .b-btn--block + .b-list, .b-tp .b-btn--block + .b-note-box { margin-top: 12px; }
.b-tp #b-p-add { margin-bottom: 12px; }

.b-thumb { display: grid; place-items: center; overflow: hidden; flex: none; }
.b-thumb svg { display: block; width: 84%; height: 84%; }
.b-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.b-item__thumb { width: 44px; height: 44px; border-radius: 11px; box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .08); }

.b-empty { margin: 8px 0; font-size: 13.5px; color: var(--muted); }
.b-empty--box { padding: 18px 16px; border: 1px dashed var(--line-2); border-radius: 14px; background: var(--grey-1); text-align: center; }
.b-note-box {
  display: flex; align-items: flex-start; gap: 10px; margin: 12px 0 0; padding: 10px 12px;
  border-radius: 12px; background: var(--grey-1); font-size: 13px; line-height: 1.45;
}
.b-note-box .b-ico { width: 18px; height: 18px; margin-top: 1px; }
/* a section detached in the Studio Pro (wave 2): the notice and its two ways out */
.b-note-box--studio { background: var(--grey-1); border: 1px solid var(--line, rgba(17, 17, 17, .12)); }
.b-note-box--studio b { display: block; font-weight: 600; margin-bottom: 2px; }
.b-note-box__p { display: block; }
.b-item__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.b-tag--studio { background: var(--ink, #111111); color: var(--white, #FFFFFF); }
.b-foot-note { display: flex; align-items: flex-start; gap: 10px; margin: 22px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.b-foot-note .b-ico { width: 17px; height: 17px; margin-top: 1px; }

/* Fields */
.b-field { display: grid; gap: 6px; margin-top: 16px; min-width: 0; }
.b-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.b-label { font-size: 13.5px; font-weight: 500; color: var(--ink); }
.b-count { flex: none; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.b-count.is-near { color: var(--ink); font-weight: 500; }
.b-count.is-over { color: var(--ink); font-weight: 600; text-decoration: none; }
.b-hint { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.b-input {
  display: block; width: 100%; min-height: 46px; padding: 11px 13px;
  border: 1px solid var(--line-2); border-radius: 11px; background: var(--white); color: var(--ink);
  font: 400 16px/1.4 var(--b-font); -webkit-appearance: none; appearance: none;
  transition: border-color .15s, box-shadow .15s;
}
.b-input::placeholder { color: #8C8C8C; opacity: 1; }
.b-input:hover { border-color: rgba(17, 17, 17, .4); }
.b-input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(17, 17, 17, .12); }
.b-input--area { min-height: 92px; max-height: 360px; resize: vertical; field-sizing: content; }
.b-input--num { font-variant-numeric: tabular-nums; }
.b-input--code { min-height: 130px; font: 12.5px/1.5 var(--b-mono); }
.b-select-wrap { position: relative; }
.b-select { padding-right: 40px; cursor: pointer; text-overflow: ellipsis; }
.b-select-chev { position: absolute; top: 50%; right: 12px; width: 18px; height: 18px; transform: translateY(-50%); pointer-events: none; }
.b-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.b-grid2 > .b-field { margin-top: 0; align-content: start; }
.b-stepper { display: flex; align-items: stretch; width: max-content; max-width: 100%; border: 1px solid var(--line-2); border-radius: 11px; background: var(--white); overflow: hidden; }
.b-stepper:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(17, 17, 17, .12); }
.b-stepper .b-input { width: 76px; border: 0; border-radius: 0; text-align: center; box-shadow: none; }
.b-stepper__btn { width: 46px; height: auto; min-height: 46px; border-radius: 0; }
.b-stepper__btn:focus-visible { outline-offset: -3px; }
.b-fieldset { min-width: 0; margin: 18px 0 0; padding: 0; border: 0; }
.b-fieldset > legend { margin-bottom: 8px; padding: 0; }
.b-fieldset .b-field:first-child { margin-top: 0; }
.is-pulse { animation: b-pulse 1.6s ease; }
@keyframes b-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(17, 17, 17, 0); } 20%, 55% { box-shadow: 0 0 0 4px rgba(17, 17, 17, .22); } }

/* Image upload */
.b-img { display: flex; align-items: center; gap: 12px; }
.b-img__pic { display: grid; place-items: center; width: 78px; height: 78px; flex: none; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--grey-1); }
.b-img__pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.b-img__pic.is-empty { border-style: dashed; color: var(--muted); }
.b-img__actions { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
/* « Photo d’exemple · Prénom Nom / Unsplash » under a demo photo: muted, links without underline */
/* the two links are 44 px tall to tap (the caption's line grows; -6px only takes back the field's gap) */
.b-img__credit { margin: -6px 0 0; font-size: 12px; line-height: 1.45; color: var(--muted); overflow-wrap: anywhere; }
/* links: ink and medium weight on the muted caption; hover and focus mark them with a grey band behind the
   name (no underline, by design), the band only as tall as the text although the link is 44 px to tap */
.b-img__credit a { display: inline-flex; align-items: center; min-height: 44px; margin: 0 -3px; padding: 0 3px; border-radius: 4px; color: var(--ink); font-weight: 500; text-decoration: none; background: linear-gradient(var(--grey-2), var(--grey-2)) center / 100% 1.6em no-repeat; background-size: 0 1.6em; transition: background-size .15s ease; }
.b-img__credit a:hover, .b-img__credit a:focus-visible { background-size: 100% 1.6em; }
.b-img__credit a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 3px; }
.b-filebtn { position: relative; cursor: pointer; }
.b-filebtn:has(input:focus-visible) { outline: 3px solid var(--ink); outline-offset: 2px; }
.b-filebtn.is-busy { opacity: .6; pointer-events: none; }

/* Sub-items (reviews, delivery zones…) */
.b-subs { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.b-sub { min-width: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
.b-sub.is-open { border-color: rgba(17, 17, 17, .45); }
.b-sub__row { display: flex; align-items: center; min-width: 0; }
.b-sub__main {
  display: flex; flex: 1; align-items: center; gap: 8px; min-width: 0; min-height: 44px; padding: 4px 4px 4px 12px;
  border: 0; border-radius: 11px; background: none; color: inherit; text-align: left; font-family: var(--b-font); cursor: pointer;
}
.b-sub__main:focus-visible { outline-offset: -2px; }
.b-sub__n { flex: none; font-size: 13px; font-weight: 500; }
.b-sub__sum { flex: 1; min-width: 0; overflow: hidden; font-size: 12.5px; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
.b-sub__main .b-chev { width: 16px; height: 16px; }
.b-sub__body { padding: 0 12px 14px; border-top: 1px solid var(--line); }
.b-items__add { justify-self: start; margin-top: 2px; }
.b-sub__foot { display: flex; flex-wrap: wrap; gap: 2px; margin: 12px 0 -6px -10px; }

/* Product illustration */
.b-visual { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; align-items: start; }
.b-visual__prev { width: 84px; height: 106px; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .08); }
.b-visual__fields .b-field:first-child { margin-top: 0; }
.b-visual__fields .b-field { margin-top: 12px; }
.b-swatches { display: flex; flex-wrap: wrap; gap: 0; margin: 0 -6px; }
.b-swatch { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.b-swatch::before { content: ''; width: 28px; height: 28px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .16); }
.b-swatch[aria-pressed="true"]::before { box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--ink); }
.b-swatch:focus-visible { outline-offset: -4px; }
.b-swatch-custom { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; }
.b-swatch-input {
  width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer;
  -webkit-appearance: none; appearance: none; box-shadow: 0 0 0 1.5px var(--white), 0 0 0 3px rgba(17, 17, 17, .5);
}
.b-swatch-input::-webkit-color-swatch-wrapper { padding: 0; }
.b-swatch-input::-webkit-color-swatch { border: 0; border-radius: 50%; }
.b-swatch-input::-moz-color-swatch { border: 0; border-radius: 50%; }
.b-swatch-custom::after {
  content: ''; position: absolute; right: 4px; bottom: 4px; width: 15px; height: 15px; border-radius: 50%;
  background: var(--ink) 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='%23fff' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / 11px no-repeat;
  pointer-events: none;
}

/* Theme */
.b-group { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); scroll-margin-top: 16px; }
.b-group:focus { outline: none; }
.b-tp__head + .b-group { margin-top: 18px; padding-top: 0; border-top: 0; }
.b-group__title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 500; }
.b-group__hint { margin: 3px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.b-group > .b-tplopts, .b-group > .b-pals, .b-group > .b-fonts, .b-group > .b-segopts, .b-group > .b-switches, .b-group > .b-btn { margin-top: 12px; }
.b-group > .b-field:nth-child(2), .b-group > .b-field:first-of-type { margin-top: 12px; }
.b-group.is-pulse { animation: b-pulse-bg 1.6s ease; border-radius: 12px; }
@keyframes b-pulse-bg { 0%, 100% { background: transparent; } 25%, 60% { background: var(--grey-1); } }

.b-tplopts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.b-tplopt {
  position: relative; display: grid; gap: 3px; padding: 6px 6px 9px; border: 1.5px solid var(--line); border-radius: 13px;
  background: var(--white); color: var(--ink); text-align: left; font-family: var(--b-font); cursor: pointer;
}
.b-tplopt:hover { border-color: rgba(17, 17, 17, .4); }
.b-tplopt[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.b-tplopt__shot svg { display: block; width: 100%; height: auto; border-radius: 8px; }
.b-tplopt__name { padding: 2px 2px 0; font-size: 13.5px; font-weight: 500; line-height: 1.25; }
.b-tplopt__style { padding: 0 2px; font-size: 11.5px; color: var(--muted); line-height: 1.3; }
.b-tplopt[aria-pressed="true"]::after, .b-font[aria-pressed="true"]::after, .b-intopt[aria-pressed="true"]::after {
  content: ''; position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4L18 8' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat;
  box-shadow: 0 0 0 2px var(--white);
}

.b-pals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 8px; }
.b-pal { display: grid; gap: 5px; padding: 0; border: 0; background: none; color: var(--ink); text-align: center; font-family: var(--b-font); cursor: pointer; border-radius: 12px; }
.b-pal__sw { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .14); transition: box-shadow .15s; }
.b-pal:hover .b-pal__sw { box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .14), 0 0 0 2px var(--white), 0 0 0 3px rgba(17, 17, 17, .3); }
.b-pal[aria-pressed="true"] .b-pal__sw { box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .14), 0 0 0 2px var(--white), 0 0 0 4px var(--ink); }
.b-pal__sw { overflow: hidden; background: linear-gradient(var(--pa, #111111) 0 70%, var(--pb, #F5F5F3) 70% 100%); color: var(--po, #FFFFFF); }
.b-pal__aa { margin-bottom: 30%; font: 500 19px/1 var(--b-font); }
.b-pal__name { font-size: 12px; font-weight: 400; line-height: 1.3; }
.b-pal[aria-pressed="true"] .b-pal__name { font-weight: 600; }

.b-fonts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.b-font {
  position: relative; display: grid; gap: 1px; min-width: 0; padding: 10px 6px 9px; border: 1.5px solid var(--line); border-radius: 13px;
  background: var(--white); color: var(--ink); text-align: center; font-family: var(--b-font); cursor: pointer;
}
.b-font:hover { border-color: rgba(17, 17, 17, .4); }
.b-font[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.b-font__aa { font-size: 28px; line-height: 1.2; }
.b-font__name { font-size: 12.5px; font-weight: 500; }
.b-font__pair { overflow: hidden; font-size: 10.5px; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }

/* « Polices »: live preview, suggestions, then the heading font and the text font apart (theme.typography) */
.b-subhead { margin: 22px 0 0; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.b-group > .b-subhead + .b-fonts { margin-top: 10px; }
.b-typo {
  display: grid; gap: 6px; margin-top: 12px; padding: 16px 16px 15px; border-radius: 14px; overflow: hidden;
  background: var(--tb, #FFFFFF); color: var(--tt, #111111); box-shadow: inset 0 0 0 1px var(--line);
}
.b-typo__h { display: block; min-width: 0; line-height: 1.12; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.b-typo__p { display: block; font-size: 14px; line-height: 1.5; color: var(--tm, #555555); }
.b-field--tight { margin-top: 12px; }
.b-fontpick {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'k chev' 'v chev' 's chev'; align-items: center; column-gap: 10px;
  width: 100%; min-height: 64px; padding: 10px 14px; border: 1.5px solid var(--line); border-radius: 13px;
  background: var(--white); color: var(--ink); text-align: left; font-family: var(--b-font); cursor: pointer;
}
.b-fontpick:hover { border-color: rgba(17, 17, 17, .4); }
.b-fontpick[aria-expanded="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.b-fontpick__k { grid-area: k; font-size: 12px; color: var(--muted); line-height: 1.3; }
.b-fontpick__v { grid-area: v; overflow: hidden; font-size: 22px; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; }
.b-fontpick__s { grid-area: s; font-size: 12px; color: var(--muted); line-height: 1.3; }
.b-fontpick__chev { grid-area: chev; width: 20px; height: 20px; }
.b-fontlist { display: grid; gap: 10px; margin-top: 8px; padding: 12px; border-radius: 14px; background: var(--grey-1); }
.b-fstyles { display: flex; flex-wrap: wrap; gap: 6px; }
.b-fstyle {
  min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--white);
  color: var(--ink); font: 400 13.5px/1.2 var(--b-font); cursor: pointer;
}
.b-fstyle:hover { border-color: rgba(17, 17, 17, .4); }
.b-fstyle[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--white); font-weight: 500; }
.b-fontlist__hint { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.b-fontopts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.b-fontopt {
  position: relative; display: flex; align-items: center; min-width: 0; min-height: 56px;
  padding: 8px 12px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--white); color: var(--ink); text-align: left; cursor: pointer;
}
.b-fontopt:hover { border-color: rgba(17, 17, 17, .4); }
.b-fontopt[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.b-fontopt__v { min-width: 0; font-size: 19px; line-height: 1.2; overflow-wrap: break-word; }

/* « Mes polices » (theme.customFonts): her fonts, the font read from a file before it is added, import, Google Fonts */
.b-cfpanel { display: grid; gap: 10px; min-width: 0; }
.b-fontopt--mine { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; }
.b-fontopt__s { font-size: 11.5px; line-height: 1.3; color: var(--muted); font-family: var(--b-font); }
.b-cfhead { margin: 8px 0 0; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.b-cfimport { display: grid; gap: 6px; justify-items: start; }
.b-cfsearch { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.b-cfsearch .b-btn { min-height: 46px; }
.b-cferr { color: var(--err-ink); }
.b-cfpanel > .b-note { margin: 0; font-size: 12.5px; line-height: 1.45; }
.b-cfpanel > .b-note.b-tone--err, .b-cfpend .b-note.b-tone--warn { padding: 10px 12px; border-radius: 12px; background: var(--t-bg); color: var(--t-ink); }
.b-cfpanel > .b-note.b-tone--err .b-ico, .b-cfpend .b-note.b-tone--warn .b-ico { color: var(--t-ink); }
.b-cfpend {
  display: grid; gap: 10px; min-width: 0; padding: 14px; border: 1.5px solid var(--ink); border-radius: 14px; background: var(--white);
}
.b-cfpend__t { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.b-cfpend__prev { display: grid; gap: 4px; min-width: 0; padding: 12px 14px; border-radius: 12px; background: var(--grey-1); color: var(--ink); }
.b-cfpend__name { font-size: 28px; line-height: 1.15; overflow-wrap: anywhere; }
.b-cfpend__sample { font-size: 17px; line-height: 1.3; font-weight: 400; overflow-wrap: anywhere; }
.b-cfpend__meta { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.b-cfpend .b-note { margin: 0; font-size: 12.5px; line-height: 1.45; }
.b-cfpend .b-field--tight { margin-top: 0; }
.b-cfpend__lic { color: var(--ink); }
.b-cfpend__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.b-cflist { display: grid; margin: 0; padding: 0; overflow: hidden; list-style: none; border: 1px solid var(--line); border-radius: 14px; background: var(--white); }
.b-cflist > li + li { border-top: 1px solid var(--line); }
.b-cfrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 60px; padding: 8px 8px 8px 14px; }
.b-cfrow__main { display: grid; flex: 1 1 160px; min-width: 0; }
.b-cfrow__name { overflow: hidden; font-size: 18px; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; }
.b-cfrow__meta { font-size: 12px; line-height: 1.35; color: var(--muted); }
.b-cfrow__acts { display: flex; flex-wrap: wrap; gap: 2px; margin-left: auto; }
.b-btn--danger { color: var(--err-ink); }
.b-btn--danger:hover { color: var(--err-ink); background: var(--err-bg); }
.b-cfren { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; flex: 1 1 100%; align-items: center; }
@media (max-width: 420px) {
  .b-cfren { grid-template-columns: 1fr 1fr; }
  .b-cfren .b-input { grid-column: 1 / -1; }
}
.b-wchips { display: flex; flex-wrap: wrap; gap: 6px; }
.b-wchip {
  min-width: 44px; min-height: 44px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--white);
  color: var(--ink); font-size: 16px; line-height: 1.2; cursor: pointer;
}
.b-wchip:hover { border-color: rgba(17, 17, 17, .4); }
.b-wchip[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.b-sizeprev { flex: none; font-weight: 600; line-height: 1; }
.b-sizeprev--S { font-size: 12px; }
.b-sizeprev--M { font-size: 15px; }
.b-sizeprev--L { font-size: 19px; }
.b-group > .b-switches { margin-top: 12px; }
.b-group > .b-note { margin-top: 12px; font-size: 12.5px; line-height: 1.45; }
.b-field > .b-note { margin: 0; font-size: 12.5px; }

.b-segopts { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 4px; padding: 4px; border-radius: 14px; background: var(--grey-1); }
.b-segopt {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 6px;
  border: 0; border-radius: 10px; background: transparent; color: var(--muted); font: 400 14px/1.2 var(--b-font); cursor: pointer;
}
.b-segopt:hover { color: var(--ink); }
.b-segopt[aria-pressed="true"] { background: var(--white); color: var(--ink); font-weight: 500; box-shadow: 0 1px 2px rgba(17, 17, 17, .1), 0 0 0 1px var(--line); }
.b-radprev { width: 15px; height: 15px; flex: none; border-top: 2px solid currentColor; border-left: 2px solid currentColor; }
.b-btnprev { width: 22px; height: 13px; flex: none; border: 1.5px solid currentColor; border-radius: 4px; }
.b-btnprev--solid { background: currentColor; }

/* « Couleurs : Vives / Douces »: two cards, each with a tiny store drawn in the current palette */
.b-intopts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.b-group > .b-intopts { margin-top: 12px; }
.b-intopt {
  position: relative; display: grid; gap: 7px; min-width: 0; padding: 6px 6px 9px; border: 1.5px solid var(--line); border-radius: 13px;
  background: var(--white); color: var(--ink); text-align: left; font-family: var(--b-font); cursor: pointer;
}
.b-intopt:hover { border-color: rgba(17, 17, 17, .4); }
.b-intopt[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.b-intopt__name { padding: 0 4px; font-size: 14px; font-weight: 500; line-height: 1.25; }
.b-intprev {
  display: grid; grid-template-rows: 7px minmax(0, 1fr) 15px; gap: 5px; height: 78px; padding-bottom: 6px; overflow: hidden;
  border-radius: 8px; background: var(--bg); box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .1);
}
.b-intprev > i { display: block; min-height: 0; }
.b-intprev__bar { background: var(--a); }
.b-intprev > .b-intprev__hero { display: flex; flex-direction: column; justify-content: center; gap: 5px; margin: 0 6px; padding: 0 8px; border-radius: 5px; background: var(--a); }
.b-intprev__hero::before { content: ''; width: 62%; height: 5px; border-radius: 3px; background: var(--oa); }
.b-intprev__hero::after { content: ''; width: 34%; height: 8px; border-radius: 4px; background: var(--oa); opacity: .92; }
.b-intprev > .b-intprev__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 0 6px; }
.b-intprev__tiles b { display: block; border-radius: 3px; background: color-mix(in srgb, var(--a) 26%, var(--bg)); }
.b-intprev--soft .b-intprev__bar { background: color-mix(in srgb, var(--a) 14%, var(--bg)); }
.b-intprev--soft .b-intprev__hero { background: var(--sf); box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .07); }
.b-intprev--soft .b-intprev__hero::before { background: var(--tx); opacity: .8; }
.b-intprev--soft .b-intprev__hero::after { background: var(--a); opacity: 1; }
.b-intprev--soft .b-intprev__tiles b { background: var(--sf); box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .07); }

/* Boutique: payment switches */
.b-switches { display: grid; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; }
.b-switch {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 8px 14px;
  border: 0; border-top: 1px solid var(--line); background: var(--white); color: var(--ink); text-align: left; font-family: var(--b-font); cursor: pointer;
}
.b-switch:first-child { border-top: 0; }
.b-switch:hover { background: var(--grey-1); }
.b-switch:focus-visible { outline-offset: -3px; }
.b-switch__txt { display: grid; flex: 1; min-width: 0; }
.b-switch__lbl { font-size: 14.5px; font-weight: 500; line-height: 1.3; }
.b-switch__note { font-size: 12.5px; line-height: 1.35; color: var(--muted); }
.b-switch__ui { position: relative; width: 46px; height: 28px; flex: none; border-radius: 999px; background: var(--grey-2); box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .14); transition: background-color .2s; }
.b-switch__ui::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--white); box-shadow: 0 1px 3px rgba(17, 17, 17, .3); transition: transform .2s; }
.b-switch[aria-pressed="true"] .b-switch__ui { background: var(--ink); box-shadow: none; }
.b-switch[aria-pressed="true"] .b-switch__ui::after { transform: translateX(18px); }

/* Boutique: « Vos pages » (config.pages, written in the dashboard; here they open in the preview) */
.b-pglist { display: grid; margin: 12px 0 0; padding: 0; overflow: hidden; list-style: none; border: 1px solid var(--line); border-radius: 14px; }
.b-pglist > li + li { border-top: 1px solid var(--line); }
.b-pgrow {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 8px 12px 8px 10px;
  border: 0; background: var(--white); color: var(--ink); text-align: left; font-family: var(--b-font); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.b-pgrow:hover { background: var(--grey-1); }
.b-pgrow:focus-visible { outline-offset: -3px; }
.b-pgrow .b-item__ico { width: 36px; height: 36px; }
.b-pgrow__txt { display: grid; flex: 1; gap: 1px; min-width: 0; }
.b-pgrow__name { overflow: hidden; font-size: 14.5px; font-weight: 500; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; }
.b-pgrow__name.is-empty { color: var(--muted); font-style: italic; font-weight: 400; }
/* Where the page shows, then its address on a second line (the address is long: /pages/…) */
.b-pgrow__meta { display: flex; flex-direction: column; align-items: flex-start; gap: 0; min-width: 0; font-size: 12.5px; line-height: 1.4; color: var(--muted); white-space: nowrap; }
.b-pgrow__slug { max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.b-pgrow__where { flex: none; }
.b-pgrow__go { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 6px 8px; border-radius: 9px; font-size: 13px; font-weight: 500; color: var(--muted); }
.b-pgrow__go .b-ico { width: 18px; height: 18px; }
.b-pgrow:hover .b-pgrow__go { color: var(--ink); }
/* The page shown in the preview */
.b-pgrow[aria-current="page"] { background: var(--grey-1); box-shadow: inset 3px 0 0 var(--ink); }
.b-pgrow[aria-current="page"] .b-pgrow__go { background: var(--ink); color: var(--white); }
.b-group > .b-pgmanage { margin-top: 12px; }
.b-pgmanage .b-ico:last-child { margin-left: auto; }

/* Qualité */
.b-score { padding: 18px; border-radius: 18px; background: var(--grey-1); }
.b-score.is-ok { background: var(--ink); color: var(--white); }
.b-score[class*="b-tone--"] { background: var(--white); color: var(--ink); border: 1px solid var(--line); }
.b-score__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.b-score__num { display: flex; align-items: baseline; gap: 2px; margin: 0; }
.b-score__num strong { font-size: 46px; font-weight: 600; line-height: 1; letter-spacing: -.04em; }
.b-score__num span { font-size: 16px; font-weight: 400; opacity: .7; }
.b-status {
  display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border: 1.5px solid currentColor; border-radius: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: .06em; line-height: 1; white-space: nowrap;
}
.b-status--ok { background: var(--ink); color: var(--white); border-color: var(--ink); }
.b-score.is-ok .b-status--ok { background: var(--white); color: var(--ink); border-color: var(--white); }
.b-status[class*="b-tone--"], .b-score.is-ok .b-status[class*="b-tone--"] { gap: 6px; background: var(--t-bg); color: var(--t-ink); border-color: transparent; }
.b-status__ico { width: 14px; height: 14px; stroke-width: 2.4; }
.b-meter { height: 6px; margin-top: 14px; overflow: hidden; border-radius: 99px; background: rgba(17, 17, 17, .12); }
.b-meter i { display: block; height: 100%; border-radius: inherit; background: currentColor; transition: width .3s; }
.b-score.is-ok .b-meter { background: rgba(255, 255, 255, .22); }
.b-score[class*="b-tone--"] .b-meter { background: var(--grey-2); }
.b-score[class*="b-tone--"] .b-meter i { background: var(--t); }
.b-score__text { margin: 12px 0 0; font-size: 13.5px; line-height: 1.5; }
.b-issgroup { margin-top: 22px; }
.b-issgroup__n[class*="b-tone--"] { background: var(--t-bg); color: var(--t-ink); }
.b-issgroup__n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; background: var(--grey-2); font-size: 12px; font-weight: 600; }
.b-issues { display: grid; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.b-issue {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; min-height: 48px; padding: 12px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--white); color: var(--ink);
  text-align: left; font: 400 13.5px/1.45 var(--b-font); cursor: pointer;
}
.b-issue:hover { border-color: var(--ink); }
.b-issue--error { border-width: 1.5px; border-color: var(--err); }
.b-issue--error .b-issue__ico { stroke-width: 2.1; color: var(--err); }
.b-issue--warning .b-issue__ico { color: var(--warn-ink); }
.b-issue--tip .b-issue__ico { color: var(--info); }
.b-issue--tip { background: var(--grey-1); border-color: transparent; }
.b-issue--tip:hover { border-color: var(--ink); }
.b-issue__ico { width: 19px; height: 19px; margin-top: 1px; }
.b-issue__msg { flex: 1; min-width: 0; }
.b-issue__go { width: 17px; height: 17px; margin-top: 2px; color: var(--muted); }

/* Stage and device frames */
.b-stage { position: relative; min-width: 0; background: var(--grey-1); }
.b-stage__bar { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 14px 24px 0; }
.b-stage__hint { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--muted); text-align: center; text-wrap: balance; }
.b-stage__hint a { color: var(--ink); font-weight: 500; text-decoration: none; white-space: nowrap; }
.b-stage__hint a:hover { }
.b-stage__inner { padding: 14px 32px 56px; }
.b-dwrap { position: relative; margin: 0 auto; }
.b-device { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.b-device--phone { width: 410px; padding: 10px; border-radius: 52px; background: var(--ink); box-shadow: var(--b-shadow-2); }
.b-device--phone .b-device__chrome { display: none; }
.b-device--phone .b-device__screen { width: 390px; min-height: 780px; border-radius: 42px; }
.b-device--desktop { width: 1202px; overflow: hidden; border: 1px solid rgba(17, 17, 17, .14); border-radius: 14px; background: var(--white); box-shadow: var(--b-shadow-2); }
.b-device--desktop .b-device__screen { width: 1200px; min-height: 720px; }
.b-device__notch { display: none; }
.b-device__chrome { display: flex; align-items: center; gap: 16px; height: 44px; padding: 0 16px; border-bottom: 1px solid var(--line); background: var(--grey-2); }
.b-device__dots { display: flex; gap: 7px; }
.b-device__dots i { width: 11px; height: 11px; border-radius: 50%; background: rgba(17, 17, 17, .18); }
.b-device__url {
  display: flex; flex: 0 1 460px; align-items: center; justify-content: center; gap: 6px; height: 28px; margin: 0 auto; padding: 0 12px;
  border-radius: 8px; background: var(--white); color: var(--muted); font: 400 13px/1 var(--b-font); transform: translateX(-30px);
}
.b-device__url .b-ico { width: 13px; height: 13px; }
/* A long page address (store name + /pages/slug) ends with an ellipsis instead of pushing the frame */
.b-device__url { min-width: 0; }
.b-device__url .b-ico { flex: none; }
#b-device-url { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 1.3; }
.b-device__screen { position: relative; overflow: hidden; background: var(--white); }
.b-device__screen [data-section-id], .b-device__screen .jst-header { cursor: pointer; }
.b-noprev { display: grid; place-items: center; min-height: 600px; padding: 40px; color: var(--muted); font: 400 16px/1.5 var(--b-font); text-align: center; }

/* Outline on the hovered or selected part of the preview (drawn at screen scale: --inv = 1 / scale) */
.b-hl {
  position: absolute; z-index: 20; pointer-events: none; opacity: 0;
  box-shadow: inset 0 0 0 calc(2px * var(--inv, 1)) #111111, inset 0 0 0 calc(4px * var(--inv, 1)) rgba(255, 255, 255, .92);
  transition: opacity .12s;
}
.b-hl.is-on { opacity: 1; }
.b-hl--flash { background: rgba(17, 17, 17, .05); }
.b-hl__tag {
  position: absolute; top: 0; left: 0; padding: calc(4px * var(--inv, 1)) calc(9px * var(--inv, 1));
  border-radius: 0 0 calc(7px * var(--inv, 1)) 0; background: #111111; color: #FFFFFF;
  font: 500 calc(12px * var(--inv, 1))/1.2 var(--b-font); white-space: nowrap;
}
@media (prefers-reduced-motion: no-preference) {
  .b-hl--flash.is-on { animation: b-flash 1.7s ease forwards; }
}
@keyframes b-flash { 0% { opacity: 0; } 12%, 72% { opacity: 1; } 100% { opacity: 0; } }

.b-pick {
  position: fixed; left: 12px; right: 12px; bottom: calc(80px + env(safe-area-inset-bottom)); z-index: 40;
  display: flex; align-items: center; gap: 6px; padding: 6px; border: 1px solid var(--line); border-radius: 16px;
  background: var(--white); box-shadow: var(--b-shadow-2);
}
.b-pick .b-btn { flex: 1; min-width: 0; }
.b-pick .b-btn span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.b-mnav { display: none; }

/* Desktop: fixed app shell, the panel and the stage scroll on their own */
@media (min-width: 900px) {
  html.b-editing, html.b-editing body { height: 100%; overflow: hidden; }
  .b-ed { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--white); }
  .b-body { display: grid; flex: 1; grid-template-columns: var(--b-panel-w) minmax(0, 1fr); min-height: 0; }
  .b-panel { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); }
  .b-panel__scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
  .b-stage { min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
  .b-stage__device, .b-stage__page { display: none; }
  .b-pick { display: none !important; }
  /* « Voir la boutique » from the dashboard: the storefront alone, full width; « Modifier la boutique » brings the panel back */
  .b-ed.is-store .b-body { grid-template-columns: minmax(0, 1fr); }
  .b-ed.is-store .b-panel, .b-ed.is-store #b-undo, .b-ed.is-store #b-redo, .b-ed.is-store .b-top__fiche { display: none; }
  .b-ed.is-store .b-device__screen [data-section-id] { cursor: auto; }
}
@media (max-width: 899.98px) { .b-top__storeedit { display: none !important; } }
@media (min-width: 1280px) { :root { --b-panel-w: 384px; } }

/* Phones and tablets: two views (Modifier / Aperçu) switched by a bottom tab bar; the page itself scrolls */
@media (max-width: 899.98px) {
  .b-ed { min-height: 100vh; min-height: 100dvh; padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  .b-ed[data-view="edit"] .b-stage { display: none; }
  .b-ed[data-view="preview"] .b-panel { display: none; }
  .b-top { position: sticky; top: 0; z-index: 30; height: 56px; gap: 2px; padding: 0 8px 0 14px; }
  .b-top__sep, .b-top__mid, .b-saved { display: none; }
  .b-top__logo { padding: 0 8px 0 6px; }
  .b-top__logo .logo__cloud { height: 32px; }
  .b-top__store { flex: 1; max-width: none; padding: 3px 8px; }
  .b-top__name { font-size: 14px; }
  .b-top__fiche { width: 44px; margin: 0; padding: 0; border-color: transparent; }
  .b-top__fiche .b-top__lbl { display: none; }
  .b-top__end { gap: 0; }
  .b-top__end .b-btn--primary { margin-left: 4px; padding: 0 14px; }
  .b-tabs { position: sticky; top: 56px; z-index: 20; }
  .b-tab { min-height: 58px; }
  .b-stage { min-height: calc(100vh - 124px); min-height: calc(100dvh - 124px); }
  .b-stage__bar {
    position: sticky; top: 56px; z-index: 10; justify-content: space-between; gap: 8px; padding: 6px 8px;
    border-bottom: 1px solid var(--line); background: rgba(245, 245, 243, .95); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  .b-stage__hint { flex: 1 1 0; min-width: 0; text-align: left; font-size: 12px; text-wrap: pretty; }
  .b-stage__page .b-pagesel__sel { min-height: 46px; }
  .b-stage__page { flex: 0 1 auto; }
  /* Room for the device toggle: a long page title is cut with an ellipsis */
  .b-stage__page .b-pagesel__sel { max-width: min(270px, calc(100vw - 172px)); }
  .b-stage__page .b-pagemng { width: 46px; background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
  .b-stage__page .b-pagemng:active { background: var(--grey-2); }
  .b-top__dash { margin-left: 4px; }
  .b-stage__inner { padding: 16px 12px 28px; }
  .b-mnav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--white);
  }
  .b-mnav__btn {
    display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px;
    border: 0; border-radius: 13px; background: transparent; color: var(--muted); font: 500 15px/1 var(--b-font); cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .b-mnav__btn[aria-selected="true"] { background: var(--ink); color: var(--white); }
  .b-ed.is-typing { padding-bottom: 0; }
  .b-tp { max-width: 640px; margin: 0 auto; }
  .b-tabs { padding: 0 max(0px, calc((100% - 640px) / 2)); }
  .b-ed.is-typing .b-mnav { display: none; }
  .b-item, .b-group { scroll-margin-top: 128px; }
  html.b-editing .b-toast { bottom: calc(84px + env(safe-area-inset-bottom)); }
  html.b-editing.b-has-pick .b-toast { bottom: calc(150px + env(safe-area-inset-bottom)); }
  /* Dialogs open as bottom sheets here: show the toast at the top so it never covers their buttons */
  html.b-modal-open .b-toast[role="status"] { top: calc(12px + env(safe-area-inset-top)); bottom: auto; }
}
@media (min-width: 520px) and (max-width: 899.98px) {
  .b-top__sep { display: block; margin: 0 6px 0 8px; }
}
@media (max-width: 519.98px) {
  .b-top__store { display: none; }
  .b-top__end { margin-left: auto; }
}
/* The smallest phones: a little less room around the cloud, so « Tableau de bord », Annuler, Rétablir, the fiche and « Publier » all fit */
@media (max-width: 379.98px) {
  .b-top { padding-left: 10px; }
  .b-top__logo { padding: 0 6px; }
}
/* Small phones: « ? Aide » joins the bar, so the icon buttons are 40 px wide (still >= 40 px tall targets) and the cloud a little smaller */
@media (max-width: 409.98px) {
  .b-top__end .b-ibtn, .b-top__end .b-top__fiche, .b-top__end .b-top__help { width: 40px; min-width: 40px; }
  .b-top__end .b-btn--primary { padding: 0 12px; }
  .b-top__logo .logo__cloud { height: 28px; }
  .b-top__dash { margin-left: 2px; }
}
@media (max-width: 379.98px) { .b-top__logo { padding: 0 4px; } .b-top__end .b-btn--primary { padding: 0 11px; } }
/* On small phones the selector shows the page name only (its label stays for screen readers) */
@media (max-width: 399.98px) {
  .b-stage__page .b-pagesel__k { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .b-stage__page .b-pagesel__sel { padding-left: 14px; padding-right: 36px; }
  .b-stage__page .b-pagesel__chev { right: 11px; }
}
@media (max-width: 599.98px) {
  .b-stage__hint { display: none; }
}
@media (max-width: 479.98px) {
  .b-stage__device .b-seg__btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .b-stage__device .b-seg__btn { padding: 0 10px; }
}

/* ============================================================ MODALS AND TOAST */
.b-modal {
  position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(17, 17, 17, .5); opacity: 0; transition: opacity .18s;
}
.b-modal.is-open { opacity: 1; }
.b-modal__card {
  display: flex; flex-direction: column; width: 100%; max-width: 520px; max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px);
  overflow: hidden; border-radius: 22px; background: var(--white); box-shadow: var(--b-shadow-2);
  transform: translateY(10px); transition: transform .2s;
}
.b-modal.is-open .b-modal__card { transform: none; }
.b-modal__card--wide { max-width: 780px; }
.b-modal__card--small { max-width: 430px; }
.b-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 12px 0 22px; }
.b-modal__title { margin: 0; font-size: 20px; font-weight: 500; line-height: 1.25; letter-spacing: -.02em; }
.b-modal__body { min-height: 0; padding: 6px 22px 4px; overflow-y: auto; }
.b-modal__card--small .b-modal__body { padding-top: 24px; }
.b-modal__lead { margin: 6px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.b-modal__text { margin: 10px 0 0; font-size: 14.5px; line-height: 1.55; }
.b-modal__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 16px 22px 20px; }
@media (max-width: 599.98px) {
  .b-modal { align-items: flex-end; padding: 0; }
  .b-modal__card { max-width: none; max-height: 92vh; max-height: 92dvh; border-radius: 22px 22px 0 0; transform: translateY(28px); }
  .b-modal__head { padding-left: 18px; }
  .b-modal__body { padding: 6px 18px 4px; }
  .b-modal__foot { padding: 14px 18px calc(16px + env(safe-area-inset-bottom)); }
  .b-modal__foot .b-btn { flex: 1 1 auto; }
}

.b-fiche__meta { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); }
.b-code {
  max-height: 46vh; margin: 12px 0 0; padding: 14px 16px; overflow: auto;
  border: 1px solid var(--line); border-radius: 12px; background: var(--grey-1); color: var(--ink);
  font: 12.5px/1.6 var(--b-mono); white-space: pre; tab-size: 2;
}
.b-code:focus-visible { outline-offset: 0; }
.b-j-k { font-weight: 600; }
.b-j-s { color: #3A3A3A; }
.b-j-n, .b-j-b, .b-j-z { color: var(--ink); text-decoration: none; }
.b-j-p { padding: 0 4px; border-radius: 4px; background: var(--ink); color: var(--white); }
.b-import { display: grid; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.b-import__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.b-error { margin: 0; padding: 10px 12px; border: 1.5px solid var(--err); border-radius: 10px; background: var(--err-bg); color: var(--err-ink); font-size: 13.5px; font-weight: 400; }
.b-pubscore { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 12px; font-size: 14px; }
.b-addlist { display: grid; gap: 6px; margin: 14px 0 10px; padding: 0; list-style: none; }
.b-addopt {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 9px 12px 9px 10px;
  border: 1px solid var(--line); border-radius: 13px; background: var(--white); color: var(--ink); text-align: left; font-family: var(--b-font); cursor: pointer;
}
.b-addopt:hover { border-color: var(--ink); }
.b-addopt__plus { margin-left: auto; color: var(--muted); }
.b-addopt:hover .b-addopt__plus { color: var(--ink); }

.b-toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 120; width: max-content; max-width: min(92vw, 480px);
  padding: 12px 16px; border-radius: 13px; background: var(--ink); color: var(--white);
  font: 400 14px/1.45 var(--b-font); box-shadow: var(--b-shadow-2); overflow-wrap: anywhere;
  opacity: 0; pointer-events: none; transform: translate(-50%, 14px); transition: opacity .2s, transform .2s;
}
.b-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.b-toast[data-tone] { display: flex; align-items: flex-start; gap: 10px; padding-left: 12px; }
.b-toast[data-tone]::before {
  content: '✓' / ''; display: grid; place-items: center; flex: none; width: 22px; height: 22px; margin-top: -1px; border-radius: 50%;
  background: var(--ok-bg); color: var(--ok-ink); font-size: 12px; font-weight: 700; line-height: 1;
}
.b-toast[data-tone="warn"]::before { content: '!' / ''; background: var(--warn-bg); color: var(--warn-ink); }
.b-toast[data-tone="err"]::before { content: '×' / ''; background: var(--err-bg); color: var(--err-ink); font-size: 15px; }
.b-toast[data-tone="info"]::before { content: 'i' / ''; background: var(--info-bg); color: var(--info-ink); font-family: Georgia, serif; font-style: italic; }
/* A toast with an action (« Annuler »): it takes taps, the button sits at its end */
.b-toast.has-action { display: flex; align-items: center; gap: 12px; padding-top: 6px; padding-bottom: 6px; }
.b-toast.has-action.is-on { pointer-events: auto; }
.b-toast__act {
  flex: none; min-height: 44px; margin-left: auto; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .5); border-radius: 10px;
  background: transparent; color: var(--white); font: 600 14px/1 var(--b-font); cursor: pointer;
}
.b-toast__act:hover { background: rgba(255, 255, 255, .12); }
.b-toast__act:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .b-root *, .b-modal, .b-modal *, .b-toast { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Boutique: « Logo et icône » (store.logo, logoSize, logoPosition, showName, icon) */
.b-group > .b-field + .b-field, .b-group > .b-field + .b-maker, .b-group > .b-maker + .b-field, .b-group > .b-field + .b-switches, .b-group > .b-switches + .b-field { margin-top: 16px; }
.b-logochips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 2px; }
.b-logochip {
  position: relative; display: grid; place-items: center; min-width: 0; height: 92px; padding: 14px 12px 24px; overflow: hidden;
  border: 1px solid var(--line); border-radius: 12px;
}
.b-logochip--light { background: var(--white); color: var(--ink); }
.b-logochip--dark { border-color: var(--ink); background: #15120E; color: var(--white); }
.b-logochip img { display: block; max-width: 100%; max-height: 48px; width: auto; height: auto; object-fit: contain; }
.b-logochip__name { max-width: 100%; overflow: hidden; font-size: 18px; line-height: 1.2; white-space: nowrap; text-overflow: ellipsis; }
.b-logochip__tag { position: absolute; left: 0; right: 0; bottom: 6px; font-size: 11px; line-height: 1.2; text-align: center; opacity: .7; }
.b-img__actions--row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.b-group .b-switches { margin-top: 16px; }

/* « Pas de logo ? Créez-en un simple » */
.b-maker { margin-top: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); }
.b-maker__sum {
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 14px; border-radius: 14px;
  font-size: 14.5px; font-weight: 500; cursor: pointer; list-style: none;
}
.b-maker__sum::-webkit-details-marker { display: none; }
.b-maker__sum:hover { background: var(--grey-1); }
.b-maker__sum:focus-visible { outline-offset: -3px; }
.b-maker__sum > span { flex: 1; min-width: 0; }
.b-maker__sum .b-ico { flex: none; }
.b-maker[open] .b-maker__chev { transform: rotate(180deg); }
.b-maker__body { display: grid; gap: 14px; padding: 4px 14px 16px; }
.b-maker__fonts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.b-maker__font {
  min-width: 0; min-height: 48px; padding: 0; border: 1.5px solid var(--line); border-radius: 10px;
  background: var(--white); color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer;
}
.b-maker__font[aria-pressed="true"], .b-maker__col[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.b-maker__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.b-maker__col {
  display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 44px; padding: 0 10px; border: 1.5px solid var(--line); border-radius: 10px;
  background: var(--white); color: var(--ink); font: 400 13.5px/1.2 var(--b-font); text-align: left; cursor: pointer;
}
.b-maker__col > span:last-child { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.b-maker__sw { width: 20px; height: 20px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .25); }
.b-maker .b-switch { border: 1px solid var(--line); border-radius: 12px; min-height: 48px; }
.b-maker__prev { display: grid; place-items: center; min-height: 96px; padding: 16px; border: 1px dashed var(--line); border-radius: 12px; background: var(--white); }
.b-maker__prev.is-dark { background: #15120E; }
.b-maker__prev img { display: block; max-width: 100%; max-height: 64px; width: auto; height: auto; }

/* « Icône de l’onglet »: a browser tab with the icon, and the icon on its own */
.b-favrow { display: flex; align-items: center; gap: 12px; }
.b-favtab {
  display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; height: 40px; padding: 0 12px;
  border: 1px solid var(--line); border-bottom: 0; border-radius: 10px 10px 0 0; background: var(--grey-1); font-size: 12.5px;
  box-shadow: inset 0 -1px 0 var(--line);
}
.b-favtab__name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.b-fav { display: grid; place-items: center; flex: none; overflow: hidden; background: var(--fa, transparent); color: var(--fo, var(--ink)); font-weight: 600; line-height: 1; }
.b-fav img { display: block; width: 100%; height: 100%; object-fit: contain; }
.b-fav--16 { width: 16px; height: 16px; border-radius: 4px; font-size: 10px; }
.b-fav--48 { width: 48px; height: 48px; border-radius: 12px; font-size: 24px; border: 1px solid var(--line); }

/* The tab icon in the preview's address bar */
.b-device__fav { display: grid; place-items: center; width: 14px; height: 14px; flex: none; overflow: hidden; border-radius: 3px; background: var(--fa, transparent); color: var(--fo, var(--ink)); font-size: 9px; font-weight: 600; line-height: 1; }
.b-device__fav img { display: block; width: 100%; height: 100%; object-fit: contain; }
.b-device__fav[hidden] { display: none; }
/* « Votre logo se voit mal sur le fond de votre boutique » (an attention note: icon, word, tint) */
.b-lognote { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--t-bg, var(--warn-bg)); color: var(--t-ink, var(--warn-ink)); font-size: 13px; line-height: 1.45; }
.b-lognote[hidden] { display: none; }
.b-lognote { flex-wrap: wrap; }
.b-lognote > span:not(.b-lognote__acts) { flex: 1 1 200px; }
.b-lognote__acts { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 100%; padding-left: 26px; }
.b-lognote__acts .b-btn { min-height: 44px; background: var(--white); }
.b-logochips__cap { margin-top: 6px; }
.b-readnote__ratio { display: block; margin-top: 2px; font-size: 12px; opacity: .85; }
/* Thème: the logo, one tap away (it lives in Boutique) */
.b-logorow {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; margin: 0 0 18px; padding: 8px 12px 8px 8px;
  border: 1px solid var(--line); border-radius: 13px; background: var(--white); color: var(--ink); font-family: var(--b-font); text-align: left; cursor: pointer;
}
.b-logorow:hover { border-color: var(--ink); }
.b-logorow__pic { display: grid; place-items: center; flex: none; width: 64px; height: 44px; padding: 4px; border-radius: 9px; background: #F3F2EE; overflow: hidden; }
.b-logorow__pic img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.b-logorow__pic.is-empty { width: 44px; background: var(--ink); color: var(--white); font-weight: 600; font-size: 18px; }
.b-logorow__txt { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; }
.b-logorow__t { font-size: 14px; font-weight: 600; line-height: 1.3; }
.b-logorow__s { font-size: 12.5px; color: var(--muted); line-height: 1.3; }
.b-logorow__go { flex: none; color: var(--muted); }
.b-jump { margin-top: 12px; }
.b-lognote .b-ico { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--t, var(--warn)); }

/* ---------------------------------------------------------------- custom colours
   Thème › « Personnaliser les couleurs » (#b-g-theme-colors) and each section's « Couleur de fond ».
   Black and white chrome; the only colours are the seller's (the chips, the swatches) and « Peu lisible »
   (attention: orange, always with its icon and its words). */
.b-colors { display: grid; gap: 18px; margin-top: 12px; }
.b-cgroup { display: grid; gap: 6px; min-width: 0; }
.b-cgroup__t { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.b-cgroup > .b-hint { margin-top: -4px; }
.b-crow { border: 1px solid var(--line); border-radius: 12px; background: var(--white); min-width: 0; }
.b-crow.is-open { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.b-crow__main {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 54px; padding: 7px 12px 7px 9px;
  border: 0; border-radius: 12px; background: none; color: inherit; text-align: left; font-family: var(--b-font); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.b-crow__main:focus-visible { outline-offset: -2px; }
.b-crow__chip { flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .16); }
.b-crow__txt { display: grid; gap: 1px; flex: 1; min-width: 0; }
.b-crow__label { overflow: hidden; font-size: 14px; font-weight: 500; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; }
.b-crow__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.b-crow__hex { font-family: var(--b-mono); font-size: 12px; }
.b-crow.is-set .b-crow__state { color: var(--ink); font-weight: 500; }
.b-crow__warn { display: inline-flex; align-items: center; gap: 4px; padding: 0 6px; border-radius: 6px; background: var(--t-bg); color: var(--t-ink); font-weight: 500; }
.b-crow__warn[hidden] { display: none; }
.b-crow__warn .b-ico { width: 13px; height: 13px; color: var(--t); }
.b-crow__body { padding: 0 12px 12px; }
.b-crow__body > .b-hint { margin-bottom: 8px; }
.b-cpick { display: grid; gap: 8px; min-width: 0; }
.b-cpick__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.b-cpick__well { position: relative; display: grid; place-items: center; flex: none; width: 48px; height: 46px; border: 1px solid var(--line-2); border-radius: 11px; cursor: pointer; }
.b-cpick__native {
  width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px; background: none; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.b-cpick__native::-webkit-color-swatch-wrapper { padding: 0; }
.b-cpick__native::-webkit-color-swatch { border: 0; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .16); }
.b-cpick__native::-moz-color-swatch { border: 0; border-radius: 8px; }
.b-cpick__hex { flex: 1 1 110px; width: auto; min-width: 0; max-width: 150px; font-family: var(--b-mono); text-transform: uppercase; }
.b-cpick__hex.is-bad { border-color: var(--err); }
.b-cpick__reset { margin-left: auto; }
.b-cpick__cap { margin: 4px 0 -4px; font-size: 12px; color: var(--muted); }
/* Picker swatches: 44 x 44 tap targets on a grid (16 pop colours: 8 + 8 on a computer, 6 + 6 + 4 on a 360 px phone) */
.b-swatches--sm { display: grid; grid-template-columns: repeat(auto-fill, 44px); justify-content: start; margin: 0 -4px; }
.b-swatch--sm { width: 44px; height: 44px; }
.b-swatch--sm::before { width: 26px; height: 26px; }
.b-cpick__wellbox { display: grid; justify-items: center; gap: 9px; flex: none; }
.b-cpick__more { font-size: 11px; line-height: 1.2; color: var(--muted); text-align: center; white-space: nowrap; }
.b-cpick__well::after {
  content: ''; position: absolute; right: -5px; bottom: -5px; width: 18px; height: 18px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(#E63946, #FFB000, #FFE03D, #14C46C, #00BFCB, #3657FF, #8E44EF, #DE0F7B, #E63946); box-shadow: 0 0 0 2px var(--white);
}
.b-cpick__sub { margin: 6px 0 -2px; font-size: 12px; color: var(--muted); }
.b-readnote {
  display: flex; align-items: flex-start; flex-wrap: wrap; gap: 8px 10px; margin: 4px 0 0; padding: 10px 12px;
  border-radius: 10px; background: var(--t-bg); color: var(--t-ink); font-size: 13px; line-height: 1.45;
}
.b-readnote[hidden] { display: none; }
.b-readnote > .b-ico { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--t); }
.b-readnote__txt { flex: 1 1 180px; min-width: 0; }
.b-readnote__fix { flex: none; margin-left: auto; background: var(--ink); color: var(--white); }
.b-readnote__fix:hover { background: #333333; }
.b-colors__reset { justify-self: start; }

/* A section's « Couleur de fond » */
.b-bgopts { display: flex; flex-wrap: wrap; gap: 6px; }
.b-bgopt {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px 0 8px;
  border: 1px solid var(--line-2); border-radius: 12px; background: var(--white); color: var(--ink);
  font: 400 13.5px/1.2 var(--b-font); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.b-bgopt:hover { border-color: var(--ink); }
.b-bgopt[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); font-weight: 500; }
.b-bgopt__sw { flex: none; width: 22px; height: 22px; border-radius: 7px; background: var(--c, var(--grey-2)); box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .16); }
.b-bgopt__sw--auto { background: linear-gradient(135deg, var(--white) 50%, var(--grey-2) 50%); }
.b-bgopt__sw--custom:not([style]) { background: conic-gradient(#FF4D4D, #FFD23F, #3BD16F, #3AA0FF, #B45CFF, #FF4D4D); }
.b-scolors { gap: 8px; }
.b-scolors > .b-crow { margin-top: 4px; }
.b-scolors__pick { padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.b-scolors__h { margin-top: 10px; }

/* Qualité: « Corriger » on a colour issue, « Corriger tout » */
.b-issues > li.has-fix { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 6px; }
.b-issue__fix { align-self: stretch; min-height: 48px; border: 1px solid var(--line-2); background: var(--white); }
.b-issue__fix:hover { border-color: var(--ink); }
.b-fixall { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--warn-bg); }
.b-fixall .b-hint { color: var(--warn-ink); font-weight: 500; }
@media (max-width: 400px) {
  .b-issues > li.has-fix { grid-template-columns: minmax(0, 1fr); }
  .b-issue__fix { justify-self: start; min-height: 44px; }
}

/* ------------------------------------------------------------------ quick style (quickstyle.js)
 * The bottom sheet of the phone preview: a tap on a button, a title, a text, an image or an icon.
 * Touch first: 44 px rows, 36 px chips, the picker of jcolor.js in its finger variant. On a computer
 * the same sheet floats at the bottom of the preview. */
.qs {
  --qs-checker: repeating-conic-gradient(#DADADA 0% 25%, #FFFFFF 0% 50%) 0 0 / 8px 8px;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; max-height: 72vh; display: flex; flex-direction: column;
  background: #FFFFFF; color: var(--ink); border-radius: 20px 20px 0 0; font: 400 14px/20px var(--b-font);
  box-shadow: 0 -1px 0 rgba(17, 17, 17, .06), 0 -18px 40px -16px rgba(17, 17, 17, .28);
  padding: 0 16px calc(12px + env(safe-area-inset-bottom)); animation: qs-up 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.qs--float { left: auto; right: 24px; bottom: 24px; width: 340px; border-radius: 16px; box-shadow: 0 0 0 1px rgba(17, 17, 17, .06), var(--b-shadow-2); }
@keyframes qs-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.qs svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.qs button { font: inherit; color: inherit; }
.qs-grab { width: 36px; height: 4px; border-radius: 2px; background: rgba(17, 17, 17, .18); margin: 8px auto 4px; flex: none; }
.qs--float .qs-grab { display: none; }
.qs-head { display: flex; align-items: center; gap: 12px; min-height: 52px; flex: none; }
.qs-ic { width: 36px; height: 36px; border-radius: 10px; background: var(--grey-1); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.qs-t { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.qs-t b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qs-t small { color: var(--muted); font-size: 12px; line-height: 16px; }
.qs-x, .qs-back { width: 44px; height: 44px; border: 0; border-radius: 12px; background: none; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; margin-right: -10px; }
.qs-back { margin: 0 0 0 -10px; }
.qs-x:active, .qs-back:active { background: var(--grey-1); }
.qs-sub { display: flex; align-items: center; gap: 8px; min-height: 44px; border-top: 1px solid var(--line); flex: none; }
.qs-sub span { flex: 1 1 auto; font-weight: 600; }
.qs-done { height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--ink); color: #fff !important; font-weight: 600 !important; cursor: pointer; }
.qs-body { overflow: auto; flex: 1 1 auto; padding: 4px 0 8px; -webkit-overflow-scrolling: touch; }
.qs-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; border-top: 1px solid var(--line); }
.qs-row:first-child { border-top: 0; }
.qs-lab { color: var(--muted); font-size: 13px; flex: none; min-width: 72px; }
.qs-colors, .qs-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.qs-chip { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 6px; border: 1px solid var(--line); border-radius: 999px; background: #fff; cursor: pointer; }
.qs-chip i { width: 28px; height: 28px; border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .14); }
.qs-chip:active { background: var(--grey-1); }
.qs-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--grey-1); }
.qs-seg button { min-width: 44px; height: 38px; padding: 0 10px; border: 0; border-radius: 9px; background: none; cursor: pointer; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.qs-seg button.is-on { background: #fff; box-shadow: 0 1px 2px rgba(17, 17, 17, .14); }
.qs-range { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; max-width: 240px; }
.qs-range input { -webkit-appearance: none; appearance: none; flex: 1 1 auto; height: 28px; background: transparent; margin: 0; }
.qs-range input::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--ink) var(--p, 0%), var(--grey-2) var(--p, 0%)); }
.qs-range input::-moz-range-track { height: 4px; border-radius: 2px; background: var(--grey-2); }
.qs-range input::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -11px; border-radius: 13px; background: #fff; box-shadow: 0 0 0 1px rgba(17, 17, 17, .12), 0 2px 6px rgba(17, 17, 17, .22); }
.qs-range input::-moz-range-thumb { width: 26px; height: 26px; border: 0; border-radius: 13px; background: #fff; box-shadow: 0 0 0 1px rgba(17, 17, 17, .12), 0 2px 6px rgba(17, 17, 17, .22); }
.qs-range output { min-width: 52px; text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); font-size: 13px; }
.qs-switch { position: relative; width: 52px; height: 32px; border: 0; border-radius: 16px; background: var(--grey-2); cursor: pointer; transition: background-color 160ms; flex: none; }
.qs-switch i { position: absolute; left: 3px; top: 3px; width: 26px; height: 26px; border-radius: 13px; background: #fff; box-shadow: 0 1px 3px rgba(17, 17, 17, .25); transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1); }
.qs-switch.is-on { background: var(--ink); }
.qs-switch.is-on i { transform: translateX(20px); }
.qs-hint { margin: 4px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--grey-1); color: var(--muted); font-size: 13px; line-height: 18px; }
.qs-foot { display: flex; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line); flex: none; }
.qs-foot button { flex: 1 1 0; height: 44px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; cursor: pointer; font-weight: 500; }
.qs-foot .qs-edit { background: var(--ink); color: #fff !important; border-color: var(--ink); }
.qs .jc--inline { padding-bottom: 4px; }
.qs-seg button:focus-visible, .qs-chip:focus-visible, .qs-switch:focus-visible, .qs-foot button:focus-visible, .qs-x:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }
.jst .qs-target { outline: 2px solid #3657FF !important; outline-offset: -2px; }
.jst.qs-dragging img { cursor: grabbing; }
html.qs-open .b-pick { display: none; }
@media (prefers-reduced-motion: reduce) { .qs { animation: none; } .qs-switch i { transition: none; } }
html.qs-open .jst img.qs-target, html.qs-open .jst .qs-target img { touch-action: none; cursor: grab; }
/* decorative layers never take a tap: the photo or text under them does (quick style, crop by finger) */
#b-store .jst-hero-scrim, #b-store .jst-blob, #b-store .jst-wa-deco, #b-store .jst-about-deco { pointer-events: none; }