/* ==========================================================================
   Fleurale — application styles (vanilla recreation of the DC prototypes)
   Tokens are loaded separately from design-system/tokens/*.css.
   This file holds the shared component + page styles for index & boutique.
   ========================================================================== */

html { scroll-behavior: smooth; }
a.fl-btn, a.fl-btn:hover { text-decoration: none; }

/* ---- Skip link ---- */
.fl-skip {
  position: fixed; top: 14px; left: 14px; z-index: 120;
  background: var(--blue-electric); color: var(--yellow-pollen);
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-sm);
  padding: 10px 20px; border-radius: var(--radius-pill); text-decoration: none;
  transform: translateY(-300%); transition: transform var(--dur-fast) var(--ease-soft);
}
.fl-skip:focus { transform: translateY(0); }

/* ==========================================================================
   Logo (recolorable SVG mask)
   ========================================================================== */
.fl-logo {
  display: inline-block; flex: none;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  background: var(--logo-color, var(--blue-electric));
  transition: background var(--dur-fast) var(--ease-soft);
}
/* header logo → white on hover */
.fl-logo-link:hover .fl-logo { background: #ffffff; }
.fl-logo--horizontal { aspect-ratio: 2.727;
  -webkit-mask-image: url(../assets/logo/logo-horizontal.svg);
          mask-image: url(../assets/logo/logo-horizontal.svg); }
.fl-logo--tagline { aspect-ratio: 2.05;
  -webkit-mask-image: url(../assets/logo/logo-tagline.svg);
          mask-image: url(../assets/logo/logo-tagline.svg); }
.fl-logo-head { height: 62px; }
.fl-logo-hero { height: 84px; }
.fl-logo-foot { height: 96px; }
@media (min-width: 1200px) { .fl-logo-hero { height: 120px; } }
@media (max-width: 900px) {
  .fl-logo-head { height: 52px; }
  .fl-logo-hero { height: 52px; }
  .fl-logo-foot { height: 74px; }
}

/* ==========================================================================
   Eyebrow
   ========================================================================== */
.fl-eyebrow {
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--text-2xs); letter-spacing: var(--tracking-caps);
  text-transform: uppercase; display: inline-block;
  color: var(--eyebrow-color, var(--blue-electric));
}

/* Inline SVG icon system (sprite <use>) — replaces the Phosphor icon font.
   Sizes to 1em (the element's font-size), colours via currentColor.
   Line icons draw with stroke=currentColor, brand icons with fill=currentColor. */
.fl-ico { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; flex: none; }

/* ==========================================================================
   Tag
   ========================================================================== */
.fl-tag {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--text-2xs); letter-spacing: 0.1em; text-transform: uppercase;
  border-radius: var(--radius-pill); padding: 5px 12px; white-space: nowrap;
  background: var(--yellow-pollen); color: var(--blue-electric);
}
.fl-tag--printemps { background: var(--pink-peony); color: var(--blue-electric); }
.fl-tag--ete      { background: var(--yellow-pollen); color: var(--blue-electric); }
.fl-tag--automne  { background: var(--red-poppy); color: var(--cream-on-dark); }
.fl-tag--hiver    { background: var(--blue-light); color: var(--blue-electric); }

/* ==========================================================================
   Buttons (Design-system Button component)
   ========================================================================== */
.fl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--font-display); font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide); line-height: 1.1;
  border-radius: var(--radius-pill); padding: 14px 30px; font-size: var(--text-md);
  border: 2px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-soft), filter var(--dur-fast) var(--ease-soft),
              background var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft);
}
.fl-btn--primary { background: var(--blue-electric); color: var(--yellow-pollen); border-color: var(--blue-electric); }
.fl-btn--primary:hover { color: var(--blue-electric); border-color: var(--yellow-pollen); }
.fl-btn--accent { background: var(--yellow-pollen); color: var(--blue-electric); border-color: var(--yellow-pollen); }
.fl-btn--accent:hover { color: var(--yellow-pollen); border-color: var(--blue-electric); }
.fl-btn--ghost { background: transparent; color: var(--blue-electric); border-color: var(--blue-electric); }
.fl-btn--ghost:hover { color: var(--yellow-pollen); border-color: var(--blue-electric); }
.fl-btn--full { width: 100%; }

/* ==========================================================================
   Header
   ========================================================================== */
.hd-rose      { --hd-bg:var(--pink-peony);   --hd-fg:var(--ink);          --hd-hover:var(--red-poppy);          --hd-logo:var(--blue-electric); --hd-border:var(--pink-deep);        --hd-cta-bg:var(--blue-electric); --hd-cta-fg:var(--yellow-pollen); }
.hd-bleuclair { --hd-bg:var(--blue-light);   --hd-fg:var(--ink);          --hd-hover:var(--blue-electric-deep); --hd-logo:var(--blue-electric); --hd-border:#5f9be0;                 --hd-cta-bg:var(--blue-electric); --hd-cta-fg:var(--yellow-pollen); }
.hd-jaune     { --hd-bg:var(--yellow-pollen);--hd-fg:var(--blue-electric); --hd-hover:var(--red-poppy);          --hd-logo:var(--blue-electric); --hd-border:var(--yellow-deep);      --hd-cta-bg:var(--blue-electric); --hd-cta-fg:var(--yellow-pollen); }
.hd-bleu      { --hd-bg:var(--blue-electric);--hd-fg:var(--cream-on-dark); --hd-hover:var(--yellow-pollen);      --hd-logo:var(--yellow-pollen); --hd-border:rgba(243,234,217,0.28); --hd-cta-bg:var(--yellow-pollen); --hd-cta-fg:var(--blue-electric); }
.hd-rouge     { --hd-bg:var(--red-poppy);    --hd-fg:var(--cream-on-dark); --hd-hover:var(--yellow-pollen);      --hd-logo:var(--yellow-pollen); --hd-border:rgba(243,234,217,0.28); --hd-cta-bg:var(--yellow-pollen); --hd-cta-fg:var(--blue-electric); }
.hd-creme     { --hd-bg:var(--paper-soft);   --hd-fg:var(--ink);          --hd-hover:var(--blue-electric);      --hd-logo:var(--blue-electric); --hd-border:var(--border-subtle);    --hd-cta-bg:var(--blue-electric); --hd-cta-fg:var(--yellow-pollen); }
/* accent overrides (nav text / logo / cta colour) */
.acc-jaune { --hd-fg:#F9C739; --hd-logo:#F9C739; --hd-cta-bg:#F9C739; --hd-cta-fg:var(--blue-electric); }
.acc-bleu  { --hd-fg:#0426D5; --hd-logo:#0426D5; --hd-cta-bg:#0426D5; --hd-cta-fg:var(--cream-on-dark); }
.acc-rouge { --hd-fg:#A42B00; --hd-logo:#A42B00; --hd-cta-bg:#A42B00; --hd-cta-fg:var(--cream-on-dark); }
.acc-rose  { --hd-fg:#FFBACE; --hd-logo:#FFBACE; --hd-cta-bg:#FFBACE; --hd-cta-fg:var(--red-poppy); }
.acc-creme { --hd-fg:#F4EAD9; --hd-logo:#F4EAD9; --hd-cta-bg:#F4EAD9; --hd-cta-fg:var(--blue-electric); }
.acc-blanc { --hd-fg:#FFFFFF; --hd-logo:#FFFFFF; --hd-cta-bg:#FFFFFF; --hd-cta-fg:var(--blue-electric); }
/* menu links (and burger) white, while the logo & CTA keep their accent colour */
.acc-menu-white { --hd-fg:#FFFFFF; }

.fl-header { position: sticky; top: 0; z-index: 60; background: var(--hd-bg); border-bottom: 1px solid var(--hd-border); }
.fl-header__bar { max-width: 1180px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px clamp(16px,4vw,32px); position: relative; }
.fl-header__right { display: flex; align-items: center; gap: clamp(12px,2vw,22px); }
.fl-nav { display: flex; align-items: center; flex-wrap: wrap; gap: clamp(14px,2.2vw,28px); }
.hd-nav-link { position: relative; color: var(--hd-fg) !important; text-decoration: none; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-sm); letter-spacing: var(--tracking-wide); }
.hd-navtxt { color: var(--hd-fg); }
/* animated underline on the desktop nav — grows from the left on hover.
   Text keeps its colour (no yellow flip) on every tab, incl. L'atelier. */
.fl-nav-desktop .hd-nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 2px; background: var(--hd-hover); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-base) var(--ease-soft); }
.fl-nav-desktop .hd-nav-link:hover::after { transform: scaleX(1); }

.hd-cta { display: inline-flex; align-items: center; justify-content: center; gap: .5em; font-family: var(--font-display); font-weight: var(--fw-bold); letter-spacing: var(--tracking-wide); line-height: 1; border-radius: var(--radius-pill); border: 2px solid var(--hd-cta-bg); background: var(--hd-cta-bg) !important; color: var(--hd-cta-fg) !important; text-decoration: none; cursor: pointer; padding: 9px 20px; font-size: var(--text-sm); transition: transform var(--dur-fast) var(--ease-soft), filter var(--dur-fast) var(--ease-soft); }
.hd-cta:hover { filter: brightness(0.94); text-decoration: none; color: var(--hd-cta-fg) !important; }

.hd-cart { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-sm); border-radius: var(--radius-pill); padding: 9px 18px; border: 2px solid var(--yellow-pollen); background: var(--yellow-pollen); color: var(--blue-electric) !important; cursor: pointer; transition: transform var(--dur-fast) var(--ease-soft), filter var(--dur-fast) var(--ease-soft); }
.hd-count { display: inline-grid; place-items: center; min-width: 21px; height: 21px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--blue-electric); color: var(--yellow-pollen); font-size: var(--text-xs); transition: background var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft); }
/* Hover fills the pill blue — on the blue header it needs a yellow outline to
   stay readable instead of dissolving into the bar. */
@media (hover: hover) {
  .hd-cart:hover { color: var(--yellow-pollen) !important; border-color: var(--yellow-pollen); }
  .hd-cart:hover .hd-count { background: var(--yellow-pollen); color: var(--blue-electric); }
}

.hd-burger { appearance: none; width: 44px; height: 44px; display: grid; place-items: center; background: transparent; border: 2px solid var(--hd-fg); border-radius: var(--radius-pill); color: var(--hd-fg); font-size: 22px; cursor: pointer; }
.fl-menu-mobile {
  background: var(--hd-bg); box-shadow: var(--shadow-md);
  padding: 0 clamp(20px,5vw,36px);            /* no vertical padding while collapsed */
  display: flex; flex-direction: column; gap: 4px;
  max-height: 0; overflow: hidden; opacity: 0; visibility: hidden;
  transform: translateY(-6px);
  transition: max-height 400ms var(--ease-soft), padding 400ms var(--ease-soft),
              opacity 240ms var(--ease-soft), transform 400ms var(--ease-soft),
              visibility 0s linear 400ms;
}
.fl-menu-mobile.is-open {
  max-height: 82vh; padding: 18px clamp(20px,5vw,36px) 30px;
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: max-height 420ms var(--ease-soft), padding 420ms var(--ease-soft),
              opacity 260ms var(--ease-soft) 40ms, transform 420ms var(--ease-soft),
              visibility 0s;
}
.fl-menu-mobile a.hd-nav-link { font-size: var(--text-lg); padding: 15px 6px; border-bottom: 1px solid var(--hd-border); }

/* Header wave (generated in JS into these two layers) */
.fl-wave { position: absolute; left: 0; right: 0; top: 100%; pointer-events: none; }
.fl-wave__mask { position: absolute; left: 0; right: 0; top: 0; background: var(--hd-bg); -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x; }
.fl-wave__line { position: absolute; left: 0; right: 0; background-repeat: repeat-x; }

/* Desktop nav vs. burger toggling */
.fl-burger { display: none; }
@media (max-width: 900px) {
  .fl-nav-desktop { display: none; }
  .fl-burger { display: grid; }
  .hd-cart .hd-cart-label { display: none; }
}
@media (min-width: 901px) {
  .fl-menu-mobile { display: none !important; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero-pollen     { --hero-ground: var(--yellow-pollen); --hero-ink: var(--blue-electric); --btn-fill-bg: var(--red-poppy); --btn-fill-text: var(--yellow-pollen); --btn-fill-bg-h: var(--red-poppy-deep); --btn-out: var(--red-poppy); }
.hero-coquelicot { --hero-ground: var(--red-poppy);     --hero-ink: var(--yellow-pollen); --btn-fill-bg: var(--pink-peony); --btn-fill-text: var(--red-poppy); --btn-fill-bg-h: var(--pink-deep); --btn-out: var(--yellow-pollen); }
.hero-bleu       { --hero-ground: var(--blue-electric); --hero-ink: var(--yellow-pollen); --btn-fill-bg: var(--pink-peony); --btn-fill-text: var(--red-poppy); --btn-fill-bg-h: var(--pink-deep); --btn-out: var(--yellow-pollen); }
.hero-rose       { --hero-ground: var(--pink-peony);    --hero-ink: var(--red-poppy);     --btn-fill-bg: var(--red-poppy); --btn-fill-text: var(--yellow-pollen); --btn-fill-bg-h: var(--red-poppy-deep); --btn-out: var(--red-poppy); }
.hero-creme      { --hero-ground: #faf2e3;               --hero-ink: var(--blue-electric); --btn-fill-bg: var(--red-poppy); --btn-fill-text: var(--yellow-pollen); --btn-fill-bg-h: var(--red-poppy-deep); --btn-out: var(--red-poppy); }
.hi-bleu{--hero-ink:var(--blue-electric);} .hi-jaune{--hero-ink:var(--yellow-pollen);} .hi-rouge{--hero-ink:var(--red-poppy);} .hi-rose{--hero-ink:var(--pink-peony);} .hi-creme{--hero-ink:var(--paper);}
.hc-bleu{--hero-cal:var(--blue-electric);} .hc-jaune{--hero-cal:var(--yellow-pollen);} .hc-rouge{--hero-cal:var(--red-poppy);} .hc-rose{--hero-cal:var(--pink-peony);} .hc-creme{--hero-cal:var(--paper);}

.hero { position: relative; overflow: hidden; background: var(--hero-ground); }
/* Warm-cream hero carries the same paper grain as the other cream surfaces
   (two-class selector so it beats the .hero background shorthand above). */
.hero.hero-creme {
  background-color: #faf2e3;
  background-image: var(--tex-grain), var(--tex-grain-coarse);
  background-repeat: repeat, repeat;
  background-size: 260px 260px, 420px 420px;
}
.hero__inner { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; min-height: calc(100svh - var(--hd-h, 76px)); padding: clamp(40px,7vh,84px) clamp(20px,5vw,48px) clamp(76px,11vh,120px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.hero__stack { display: flex; flex-direction: column; align-items: center; gap: clamp(18px,3vh,30px); max-width: min(90vw,820px); }
.hero h1 { color: var(--hero-ink); font-size: clamp(1.9rem,4.4vw,4rem); line-height: var(--leading-tight); margin: 6px 0 0; max-width: 16ch; text-wrap: balance; }
.hero__sub { font-family: var(--font-light); font-size: clamp(1.12rem,1.7vw,1.6rem); line-height: var(--leading-normal); margin: 0; max-width: 40ch; color: var(--hero-ink); }
/* Hero calligrammes — live multi-path SVG (each <path> is one little flower),
   injected by hero-cal.js. Interactive repulsion + white-fade on desktop. */
.hero-cal svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hero-cal svg path { fill: currentColor; }
/* Keep the calligrammes clear of the hero text: they were oversized under 2000px
   and overlapped the centred copy — shrink on desktop, and hide on phones where
   they'd sit right under the text. */
@media (max-width: 2000px) {
  .hero-cal[data-hero-cal="fleur"] { width: clamp(230px, 31vw, 620px) !important; top: -13% !important; right: -10% !important; }
  .hero-cal[data-hero-cal="icon"]  { width: clamp(165px, 21vw, 440px) !important; bottom: -9% !important; left: -6% !important; }
}
@media (min-width: 2001px) {   /* wide screens: smaller than before, to close the size gap */
  .hero-cal[data-hero-cal="fleur"] { width: clamp(620px, 33vw, 760px) !important; }
  .hero-cal[data-hero-cal="icon"]  { width: clamp(440px, 23vw, 500px) !important; }
}
@media (max-width: 640px) {
  .hero-cal { display: none !important; }
}

.fl-hcta { display: inline-flex; align-items: center; justify-content: center; gap: .5em; font-family: var(--font-display); font-weight: var(--fw-bold); letter-spacing: var(--tracking-wide); line-height: 1; border-radius: var(--radius-pill); padding: 16px 34px; font-size: var(--text-lg); border: 2px solid transparent; text-decoration: none; cursor: pointer; transition: transform var(--dur-fast) var(--ease-soft), background var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft); }
.fl-hcta:hover { text-decoration: none; }
.fl-hcta:active { transform: translateY(1px) scale(0.985); }
.fl-hcta-fill { background: var(--btn-fill-bg) !important; color: var(--btn-fill-text) !important; border-color: var(--btn-fill-bg) !important; }
.fl-hcta-fill:hover { color: var(--btn-fill-bg) !important; border-color: var(--btn-fill-bg) !important; }
.fl-hcta-out { background: transparent !important; color: var(--btn-out) !important; border-color: var(--btn-out) !important; }
.fl-hcta-out:hover { background: rgba(28,19,5,0.08) !important; color: var(--btn-out) !important; }

.hero-scrollcue { position: absolute; left: 50%; bottom: clamp(14px,2.5vh,26px); transform: translateX(-50%); z-index: 2; display: inline-flex; flex-direction: column; align-items: center; gap: 8px; color: var(--blue-electric); opacity: 0.85; text-decoration: none; transition: opacity var(--dur-fast) var(--ease-soft); }
.hero-scrollcue:hover { opacity: 1; }
@keyframes heroScrollBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
.hero-scrollcue .cue-move { animation: heroScrollBob 1.9s var(--ease-soft) infinite; }

/* ==========================================================================
   Section 01 — Seasons
   ========================================================================== */
@keyframes seasonRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.srise { animation: seasonRise 520ms var(--ease-soft) both; }

.season-flower { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; transition: transform 260ms var(--ease-soft); }
/* hover feedback on the season tabs (motif + label + rail pill) */
.season-tab__label { transition: color var(--dur-fast) var(--ease-soft); }
.season-tab:hover .season-flower { transform: translateY(-5px) scale(1.06); }
.season-tab:hover .season-tab__label { color: var(--blue-electric); }
.season-pill:hover { transform: scale(1.18); }

.season-tab { appearance: none; border: none; background: transparent; cursor: pointer; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0; position: relative; z-index: 1; }
.season-tab__slot { display: grid; place-items: center; width: clamp(150px,17vw,210px); height: clamp(150px,17vw,210px); margin-bottom: 10px; }
.season-tab__label { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-lg); color: var(--ink); }
.season-tab.is-active .season-tab__label { color: var(--blue-electric); }
.season-tab__pillslot { height: 28px; display: flex; align-items: center; justify-content: center; }
.season-pill {
  display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
  border-radius: var(--radius-pill); white-space: nowrap;
  font-family: var(--font-display); font-weight: var(--fw-bold); letter-spacing: 0.1em;
  text-transform: uppercase; font-size: var(--text-xs);
  box-shadow: 0 0 0 3px var(--paper-soft);
  max-width: 14px; height: 14px; padding: 0; background: #b0a184; color: transparent;
  transition: max-width 520ms var(--ease-soft), height 520ms var(--ease-soft), padding 520ms var(--ease-soft), background 520ms var(--ease-soft), color 320ms var(--ease-soft), transform 220ms var(--ease-soft);
}
.season-tab.is-active .season-pill { max-width: 240px; height: 26px; padding: 5px 14px; }
.season-tab.is-active .season-pill[data-season="printemps"] { background: #FFBACE; color: var(--blue-electric); }
.season-tab.is-active .season-pill[data-season="ete"]      { background: #F9C739; color: var(--blue-electric); }
.season-tab.is-active .season-pill[data-season="automne"]  { background: #A42B00; color: var(--cream-on-dark); }
.season-tab.is-active .season-pill[data-season="hiver"]    { background: #79AFEA; color: var(--blue-electric); }

/* ---- seasons: vertical list on mobile (the 4-across row is too cramped) ---- */
@media (max-width: 640px) {
  [data-season-tabs] { grid-template-columns: 1fr !important; gap: 8px !important; }
  /* hide the horizontal progress rail + fill (direct children of the tablist) */
  [data-season-tabs] > [aria-hidden="true"] { display: none !important; }
  .season-tab {
    display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
    column-gap: 16px; row-gap: 3px; align-items: center; text-align: left; width: 100%;
    padding: 8px 14px 8px 16px; border-radius: 16px;
    transition: background var(--dur-base) var(--ease-soft);
  }
  .season-tab__slot { grid-column: 1; grid-row: 1 / span 2; width: 76px; height: 76px; margin-bottom: 0; }
  .season-tab__label { grid-column: 2; grid-row: 1; align-self: end; font-size: var(--text-lg); }
  .season-tab__pillslot { grid-column: 2; grid-row: 2; justify-content: flex-start; align-self: start; }
  .season-tab.is-active { background: #ffffff; }
  .season-tab.is-active::before {
    content: ""; position: absolute; left: 0; top: 12px; bottom: 12px;
    width: 4px; border-radius: 0 4px 4px 0; background: #b0a184;
  }
  .season-tab.is-active[data-season="printemps"]::before { background: #FFBACE; }
  .season-tab.is-active[data-season="ete"]::before       { background: #F9C739; }
  .season-tab.is-active[data-season="automne"]::before   { background: #A42B00; }
  .season-tab.is-active[data-season="hiver"]::before     { background: #79AFEA; }
  /* the lifted hover doesn't suit a tap list */
  .season-tab:hover .season-flower { transform: none; }
}

/* ==========================================================================
   Section 02 — Compositions
   ========================================================================== */
.s02-bleuclair { background: var(--blue-light); } .s02-creme { background: var(--paper-soft); }
.s02-jaune { background: var(--yellow-pollen); } .s02-rose { background: var(--pink-peony); }
.s02-rouge { background: var(--red-poppy); } .s02-bleu { background: var(--blue-electric); }
.s02-blanc { background: #ffffff; }

/* ==========================================================================
   Paper grain — two procedural layers (inline SVG feTurbulence, no asset):
   • --tex-grain: fine, dense grain (close-up texture)
   • --tex-grain-coarse: big, sparse blobs on top (relief seen from afar)
   Applied to both the warm cream (--bg-page) and the light cream (--paper-soft).
   Tune fine via feFuncA slope; coarse via baseFrequency (size) + tableValues
   (sparsity / strength).
   ========================================================================== */
:root {
  --tex-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.28'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --tex-grain-coarse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.15' numOctaves='2' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0 0 0 0 0 0 0 0 0 0.28 0.34 0.34'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E");
}
.tex-cream, .s02-cremechaud, .tex-cream-soft {
  background-image: var(--tex-grain), var(--tex-grain-coarse);
  background-repeat: repeat, repeat;
  background-size: 260px 260px, 420px 420px;
}
/* Lightened cream bases: the grain darkens the surface, so we brighten the
   ground a touch to keep the crème / crème chaud luminous under the texture. */
.tex-cream, .s02-cremechaud { background-color: #faf2e3; }  /* crème chaud (#f4ead9) brightened */
.tex-cream-soft { background-color: #fdfaf4; }              /* crème clair (#faf5ec) brightened */

/* Section 05 — pull quote on top, then the founder's signature: round portrait
   on the left, name over role on the right. Same shape on mobile and desktop. */
.atelier-sign { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 20px); }
.atelier-sign > img {
  width: clamp(94px, 10.5vw, 122px); height: auto; aspect-ratio: 1 / 1;
  flex: none; display: block; object-fit: cover; border-radius: 50%;
}
.atelier-sign__id { display: flex; flex-direction: column; gap: 2px; line-height: 1.15; min-width: 0; }
.atelier-sign__id strong {
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: clamp(1.12rem, 1.7vw, 1.38rem); color: var(--ink);
}
.atelier-sign__id > span {
  font-family: var(--font-light); font-size: clamp(0.94rem, 1.2vw, 1.06rem); color: var(--ink-soft);
}

/* ==========================================================================
   Section 04 — Services carousel
   ========================================================================== */
.svc-track { scrollbar-width: none; }
.svc-track::-webkit-scrollbar { display: none; }

/* ==========================================================================
   Boutique — filters / pagination / cards
   ========================================================================== */
.cat-btn { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-sm); letter-spacing: var(--tracking-wide); border-radius: var(--radius-pill); padding: 10px 20px; border: 2px solid var(--blue-electric); background: transparent; color: var(--blue-electric); cursor: pointer; transition: background var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft), transform var(--dur-fast) var(--ease-soft); }
.cat-btn:hover { background: rgba(4,38,213,0.08); }
.cat-btn[aria-pressed="true"] { background: var(--blue-electric); color: var(--yellow-pollen); }
.chip { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; border-radius: var(--radius-pill); padding: 7px 15px; border: 1px solid var(--red-poppy); background: transparent; color: var(--red-poppy); cursor: pointer; transition: background var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft); }
.chip:hover { background: rgba(164,43,0,0.08); }
.chip[aria-pressed="true"] { background: var(--red-poppy); color: var(--cream-on-dark); }
.page-btn { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-sm); min-width: 44px; height: 44px; padding: 0 12px; border-radius: var(--radius-md); border: 1px solid var(--border-subtle); background: var(--surface-card); color: var(--blue-electric); cursor: pointer; transition: background var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft); }
.page-btn:hover { color: var(--yellow-pollen); border-color: var(--blue-electric); }
.page-btn[aria-pressed="true"] { background: var(--blue-electric); color: var(--yellow-pollen); border-color: var(--blue-electric); }
.page-arrow { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-pill); border: none; background: var(--blue-electric); color: var(--yellow-pollen); font-size: 22px; cursor: pointer; transition: filter var(--dur-fast) var(--ease-soft), transform var(--dur-fast) var(--ease-soft); }
.page-arrow:hover { color: var(--blue-electric); }
.page-arrow:disabled { opacity: 0.4; cursor: default; transform: none; filter: none; }

/* Bouquet card (boutique grid) */
.bouquet-card { display: flex; flex-direction: column; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; transition: transform var(--dur-base) var(--ease-soft), box-shadow var(--dur-base) var(--ease-soft); }
.bouquet-card:hover { box-shadow: var(--shadow-md); }
.bouquet-card__media { position: relative; aspect-ratio: 3 / 2; background: var(--blue-wash); overflow: hidden; }
.bouquet-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bouquet-card__media--empty { display: grid; place-items: center; background: linear-gradient(160deg, var(--paper-deep), var(--surface-card)); }
.bouquet-card__media--empty .season-flower { width: 62%; height: 62%; }
.bouquet-card__tag { position: absolute; top: 12px; left: 12px; z-index: 1; }
.bouquet-card__body { display: flex; flex-direction: column; gap: 6px; padding: clamp(16px,2.4vw,20px); flex: 1; }
.bouquet-card__name { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-lg); color: var(--blue-electric); margin: 0; line-height: 1.12; }
.bouquet-card__note { font-family: var(--font-light); font-size: var(--text-sm); color: var(--ink-soft); margin: 0; line-height: var(--leading-normal); flex: 1; }
.bouquet-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; }
.bouquet-card__price { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-lg); color: var(--red-poppy); }
.bouquet-card__add { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-sm); border-radius: var(--radius-pill); padding: 9px 16px; background: var(--blue-electric); color: var(--yellow-pollen); border: 2px solid var(--blue-electric); cursor: pointer; transition: background var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft), transform var(--dur-fast) var(--ease-soft); }
.bouquet-card__add:hover { color: var(--blue-electric); border-color: var(--yellow-pollen); }

/* ==========================================================================
   Inputs (contact form)
   ========================================================================== */
.fl-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* Safari/iOS gives date & time inputs an intrinsic width that ignores width:100%
   and pushed the form past the right edge on phones. */
.fl-field input[type="date"], .fl-field input[type="time"] {
  -webkit-appearance: none; appearance: none;
  min-width: 0; max-width: 100%;
}
.fl-field label { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--blue-electric); }
.fl-field input, .fl-field textarea, .fl-field select { font-family: var(--font-body); font-size: var(--text-md); color: var(--ink); background: var(--paper-soft); border: 2px solid var(--border-subtle); border-radius: var(--radius-md); padding: 11px 14px; width: 100%; transition: border-color var(--dur-fast) var(--ease-soft); }
.fl-field input:focus, .fl-field textarea:focus, .fl-field select:focus { border-color: var(--blue-electric); outline: none; }
.fl-field select { cursor: pointer; }
.fl-field textarea { min-height: 120px; resize: vertical; }
.fl-field .fl-help { font-size: var(--text-xs); color: var(--ink-soft); }
.fl-field .fl-error { font-size: var(--text-xs); color: var(--red-poppy); }
.fl-field.has-error input, .fl-field.has-error textarea { border-color: var(--red-poppy); }

/* ==========================================================================
   Cart drawer / toast (shared)
   ========================================================================== */
.qty-btn { display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--radius-pill); border: 1px solid var(--border-subtle); background: var(--surface-card); color: var(--blue-electric); cursor: pointer; font-size: 13px; transition: background var(--dur-fast) var(--ease-soft); }
.qty-btn:hover { background: var(--blue-wash); }
.shop-checkout { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-md); border: none; border-radius: var(--radius-pill); padding: 14px; background: var(--blue-electric); color: var(--yellow-pollen); cursor: pointer; transition: filter var(--dur-fast) var(--ease-soft); width: 100%; }
.shop-checkout:hover { color: var(--blue-electric); }
.shop-checkout:disabled { opacity: 0.4; cursor: default; }
@keyframes shopDrawerIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes shopFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes shopToastIn { from { opacity: 0; transform: translate(-50%,14px); } to { opacity: 1; transform: translate(-50%,0); } }
.shop-drawer { animation: shopDrawerIn var(--dur-base) var(--ease-soft); }
.shop-scrim { animation: shopFadeIn var(--dur-base) var(--ease-soft); }
.shop-toast { animation: shopToastIn var(--dur-base) var(--ease-soft); }

/* ==========================================================================
   Footer credits (partner logos)
   ========================================================================== */
.fl-credits { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 32px 72px; text-align: center; }
.fl-credit-group { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.fl-credit-label { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-sm); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--yellow-pollen); opacity: 0.9; }
.fl-credit-logos { display: flex; align-items: center; justify-content: center; gap: 20px; }
.fl-credit { display: inline-flex; align-items: center; opacity: 0.92; transition: opacity var(--dur-fast) var(--ease-soft), transform var(--dur-fast) var(--ease-soft); }
.fl-credit:hover { opacity: 1; }
.fl-credit img { display: block; width: auto; }
/* partner logos as recolourable masks — white by default, yellow on hover */
.fl-credit-logo {
  display: block; width: auto;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  background: #ffffff;
  transition: background var(--dur-fast) var(--ease-soft);
}
.fl-credit:hover .fl-credit-logo { background: var(--yellow-pollen); }
.fl-credit-logo--beau   { aspect-ratio: 1.92;  -webkit-mask-image: url(../assets/logo/beau-pixel.svg); mask-image: url(../assets/logo/beau-pixel.svg); }
.fl-credit-logo--goozie { aspect-ratio: 1.955; -webkit-mask-image: url(../assets/logo/goozie.svg);     mask-image: url(../assets/logo/goozie.svg); }
.fl-credit-logo--zoumi  { aspect-ratio: 1.287; -webkit-mask-image: url(../assets/logo/zoumi.svg);       mask-image: url(../assets/logo/zoumi.svg); }
.fl-credit-x { font-family: var(--font-display); font-weight: var(--fw-bold); color: var(--cream-on-dark); opacity: 0.55; font-size: var(--text-lg); }

/* ==========================================================================
   Product modal (article detail)
   ========================================================================== */
.pm-overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: clamp(12px,3vw,32px); }
.pm-scrim { position: absolute; inset: 0; background: rgba(4,38,71,0.42); animation: shopFadeIn var(--dur-base) var(--ease-soft); }
@keyframes pmIn { from { opacity: 0; transform: translateY(12px) scale(0.985); } to { opacity: 1; transform: none; } }
.pm-dialog { position: relative; z-index: 1; width: min(1060px, 100%); max-height: calc(100vh - clamp(24px,6vw,64px)); overflow: auto; background: var(--surface-card); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); animation: pmIn var(--dur-base) var(--ease-soft); }
.pm-close { position: absolute; top: 14px; right: 14px; z-index: 3; appearance: none; border: none; width: 44px; height: 44px; border-radius: var(--radius-pill); background: rgba(250,245,236,0.9); color: var(--ink); font-size: 22px; cursor: pointer; display: grid; place-items: center; box-shadow: var(--shadow-sm); transition: filter var(--dur-fast) var(--ease-soft); }
.pm-close:hover { filter: brightness(0.95); }
.pm-body { display: grid; grid-template-columns: 1.1fr 1fr; }
.pm-gallery { display: flex; flex-direction: column; gap: 12px; padding: clamp(16px,2.4vw,26px); background: var(--paper-deep); }
.pm-main { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-md); overflow: hidden; background: var(--blue-wash); }
.pm-main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pm-main:not(.is-motif) img { cursor: zoom-in; }
.pm-zoom-badge { position: absolute; right: 12px; bottom: 12px; z-index: 2; width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--radius-pill); background: rgba(4,38,71,0.55); color: #fff; font-size: 17px; pointer-events: none; }
.pm-main.is-motif { display: grid; place-items: center; background: linear-gradient(160deg, var(--paper-deep), var(--surface-card)); }
.pm-main.is-motif img { position: static; width: 55%; height: 55%; object-fit: contain; }
.pm-thumbs { display: flex; gap: 10px; flex-wrap: wrap; }
.pm-thumb { width: 88px; height: 68px; border-radius: var(--radius-sm); overflow: hidden; border: 2px solid transparent; background: var(--surface-card); cursor: pointer; padding: 0; flex: none; transition: border-color var(--dur-fast) var(--ease-soft); }
.pm-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pm-thumb.is-active { border-color: var(--blue-electric); }
.pm-info { display: flex; flex-direction: column; gap: 15px; padding: clamp(24px,3.2vw,42px); }

/* image lightbox (enlarge a photo) */
.pm-lightbox { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: clamp(16px,4vw,52px); background: rgba(4,20,40,0.86); cursor: zoom-out; animation: shopFadeIn var(--dur-base) var(--ease-soft); }
.pm-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); }
.pm-lb-close { position: fixed; top: 16px; right: 16px; width: 46px; height: 46px; border-radius: var(--radius-pill); border: none; background: rgba(250,245,236,0.92); color: var(--ink); font-size: 22px; display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-md); }
.pm-info h2 { margin: 0; font-size: clamp(1.5rem,2.6vw,2rem); color: var(--blue-electric); line-height: 1.08; }
.pm-cat { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-soft); }
.pm-price { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: clamp(1.5rem,2.4vw,1.9rem); color: var(--red-poppy); }
.pm-desc { font-family: var(--font-light); font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--ink); margin: 0; }
.pm-meta { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.pm-meta li { display: flex; gap: 8px; align-items: baseline; font-family: var(--font-light); font-size: var(--text-sm); color: var(--ink-soft); }
.pm-meta li strong { font-family: var(--font-display); color: var(--ink); font-weight: var(--fw-bold); min-width: 88px; }
.pm-add { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-md); border-radius: var(--radius-pill); padding: 13px 28px; background: var(--blue-electric); color: var(--yellow-pollen); border: 2px solid var(--blue-electric); cursor: pointer; transition: background var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft), transform var(--dur-fast) var(--ease-soft); }
.pm-add:hover { color: var(--blue-electric); border-color: var(--yellow-pollen); }
@media (max-width: 720px) {
  .pm-body { grid-template-columns: 1fr; }
}

.bouquet-card { cursor: pointer; }

/* ==========================================================================
   Scattered background petal motifs (grid + jitter, random rotation) with a
   gentle scroll parallax. Populated by common.js on [data-motif-scatter].
   ========================================================================== */
.motif-scatter { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.motif-scatter img { position: absolute; display: block; height: auto; will-change: transform; opacity: 0.85; }
/* keep the blue footer petals more discreet (halved) */
footer .motif-scatter img { opacity: 0.5; }

/* ==========================================================================
   Corner accent flowers on the light sections — vertical parallax, no rotation,
   sitting behind the content (populated/animated by common.js).
   ========================================================================== */
.fl-accent { position: absolute; z-index: 0; width: clamp(150px, 17vw, 210px); height: auto; display: block; pointer-events: none; will-change: transform; opacity: .92; }
.fl-accent--tl { top: -38px;  left: -44px; }
.fl-accent--tr { top: -38px;  right: -44px; }
.fl-accent--bl { bottom: -38px; left: -44px; }
.fl-accent--br { bottom: -38px; right: -44px; }
.fl-accent--mr { top: 38%; right: -44px; }
.fl-accent--ml { top: 58%; left: -44px; }
.fl-accent-host { position: relative; overflow: hidden; }
.fl-accent-content { position: relative; z-index: 1; }
/* On phones the accent flowers crept under the text — shrink them and push them
   far out to the edges so only a sliver peeks in, well clear of the content. */
@media (max-width: 640px) {
  .fl-accent { width: clamp(120px, 34vw, 150px); opacity: .6; }
  .fl-accent--tl, .fl-accent--bl, .fl-accent--ml { left: -94px; }
  .fl-accent--tr, .fl-accent--br, .fl-accent--mr { right: -94px; }
}
/* Section 03 — the flower-shape overlay doesn't read well on phones. Switch to a
   clean stacked layout: photo on top (framed on the subject), text on pink below. */
@media (max-width: 640px) {
  #fleurs { background: var(--pink-peony) !important; }
  #fleurs > div { min-height: 0 !important; display: flex; flex-direction: column; }
  #fleurs > div > img {                    /* greenhouse photo → block at the top */
    position: static !important; order: -1;
    width: 100% !important; height: 320px !important;
    object-fit: cover !important; object-position: 88% center !important;
  }
  #fleurs > div > div:nth-of-type(1) { display: none !important; }   /* drop flower shape */
  #fleurs > div > div:nth-of-type(2) { position: static !important; }   /* text flows below */
  #fleurs > div > div:nth-of-type(2) > div { height: auto !important; }
  #fleurs > div > div:nth-of-type(2) > div > div {
    position: static !important; width: auto !important;
    padding: 30px 22px 40px !important;
  }
}

/* ==========================================================================
   Contact form on saturated ground (red variant helpers, kept for parity)
   ========================================================================== */
.contact-form-red label { color: var(--cream-on-dark) !important; }
.contact-form-red input:focus, .contact-form-red textarea:focus, .contact-form-red select:focus { border-color: var(--yellow-pollen) !important; }

/* ==========================================================================
   Hover restorations for inline-styled elements
   (the prototype used a runtime style-hover attribute; these rebuild them)
   ========================================================================== */
/* social icon pills */
.fl-social { transition: background var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft); }
.fl-social--blue:hover   { background: var(--blue-electric) !important; color: var(--yellow-pollen) !important; }
.fl-social--yellow:hover { background: var(--yellow-pollen) !important; color: var(--blue-electric) !important; }
/* footer links */
.fl-foot-link { transition: color var(--dur-fast) var(--ease-soft); }
/* "Nous écrire" devis pills — invert to blue fill / yellow text on hover */
.fl-hover-bright { transition: background var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft), transform var(--dur-fast) var(--ease-soft); }
/* carousel / grid "Ajouter" buttons (section 02) — fill blue / text yellow on hover.
   Excludes the boutique card button, which has its own rule. */
main [data-add]:not(.bouquet-card__add) { transition: background var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft), transform var(--dur-fast) var(--ease-soft); }
/* Colour inversions only on real hover devices — on touch, :hover sticks after a
   tap and the control stays visually "pressed". */
@media (hover: hover) {
  .fl-foot-link:hover { color: var(--pink-peony) !important; }
  /* contact phone / e-mail links on the yellow block */
  .fl-hover-ink:hover { color: var(--ink) !important; }
  .fl-hover-bright:hover { color: var(--yellow-pollen) !important; }
  main [data-add]:not(.bouquet-card__add):hover { color: var(--yellow-pollen) !important; }
  /* services carousel arrows */
  [data-svc-prev]:hover, [data-svc-next]:hover { color: var(--blue-electric) !important; }
}
/* hero secondary scroll cue already handled; quote / static blocks need none */

/* ==========================================================================
   Circle-fill hover — an accent disc grows from the button's centre.
   The disc (::before, z-index:-1) sits above the base background and below the
   label; the label colour cross-fades to the "on-fill" colour. Applied to every
   button that uses the invert hover, replacing the instant colour swap.
   ========================================================================== */
.fl-hcta-fill, .fl-btn--primary, .fl-btn--accent, .fl-btn--ghost, .hd-cart,
.page-btn, .page-arrow, .bouquet-card__add, .pm-add, .fl-hover-bright,
.shop-checkout, main [data-add]:not(.bouquet-card__add), [data-svc-prev], [data-svc-next] {
  position: relative; overflow: hidden; isolation: isolate;
  transition: color 260ms var(--ease-soft), border-color 220ms var(--ease-soft), transform var(--dur-fast) var(--ease-soft);
}
.fl-hcta-fill::before, .fl-btn--primary::before, .fl-btn--accent::before, .fl-btn--ghost::before,
.hd-cart::before, .page-btn::before, .page-arrow::before, .bouquet-card__add::before, .pm-add::before,
.fl-hover-bright::before, .shop-checkout::before,
main [data-add]:not(.bouquet-card__add)::before, [data-svc-prev]::before, [data-svc-next]::before {
  content: ""; position: absolute; z-index: -1; top: 50%; left: 50%;
  width: 0; aspect-ratio: 1; border-radius: 50%;
  background: var(--fill, var(--blue-electric));
  transform: translate(-50%, -50%);
  transition: width 480ms var(--ease-soft);
  pointer-events: none;
}
/* The disc only grows on real hover devices — on touch the :hover state lingers
   after a tap and the button would stay filled. */
@media (hover: hover) {
  .fl-hcta-fill:hover::before, .fl-btn--primary:hover::before, .fl-btn--accent:hover::before, .fl-btn--ghost:hover::before,
  .hd-cart:hover::before, .page-btn:hover::before, .page-arrow:hover::before, .bouquet-card__add:hover::before, .pm-add:hover::before,
  .fl-hover-bright:hover::before, .shop-checkout:hover::before,
  main [data-add]:not(.bouquet-card__add):hover::before, [data-svc-prev]:hover::before, [data-svc-next]:hover::before {
    width: 265%;
  }
}
/* per-button fill colour */
.fl-hcta-fill { --fill: var(--btn-fill-text); }
.fl-btn--primary { --fill: var(--yellow-pollen); }
.fl-btn--accent  { --fill: var(--blue-electric); }
.fl-btn--ghost   { --fill: var(--blue-electric); }
.hd-cart         { --fill: var(--blue-electric); }
.page-btn        { --fill: var(--blue-electric); }
.page-arrow      { --fill: var(--yellow-pollen); }
.bouquet-card__add { --fill: var(--yellow-pollen); }
.pm-add          { --fill: var(--yellow-pollen); }
.fl-hover-bright  { --fill: var(--blue-electric); }
.shop-checkout   { --fill: var(--yellow-pollen); }
main [data-add]:not(.bouquet-card__add) { --fill: var(--blue-electric); }
[data-svc-prev], [data-svc-next] { --fill: var(--yellow-pollen); }

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .srise { animation: none; }
  .hero-scrollcue .cue-move { animation: none; }
}