/* ── La boutique en mode DRIVE (modif 20) ─────────────────────────────────────
 *
 * « Il faut prévoir une boutique un peu différente au niveau des couleurs pour que les
 * adhérents s'y retrouvent, sinon on va les perdre. » Quand le cycle en cours est un drive,
 * l'accent terracotta devient le VERT SAUGE de la charte (`--color-accent-*`, dans
 * tokens.css) : on réécrit l'échelle `--color-primary-*` sur `body`, et tout ce qui la lit
 * suit — boutons, liens, badges, anneau de focus. Rien d'autre ne change : les neutres chauds,
 * les polices et les composants sont ceux de la livraison.
 *
 * Réécrit sur `body` et non sur `:root` : c'est la balise qui porte `data-mode`, et un
 * `:root` plus haut ne verrait pas l'attribut. */
body[data-mode='drive'] {
  --color-primary-50: var(--color-accent-50);
  --color-primary-100: var(--color-accent-100);
  --color-primary-200: var(--color-accent-200);
  --color-primary-300: var(--color-accent-300);
  --color-primary-400: var(--color-accent-400);
  --color-primary-500: var(--color-accent-500);
  --color-primary-600: var(--color-accent-600);
  --color-primary-700: var(--color-accent-700);
  --color-primary-800: var(--color-accent-800);
  --color-primary-900: var(--color-accent-900);
  --focus-ring: 0 0 0 3px color-mix(in oklab, var(--color-accent-500) 35%, transparent);
}

.lisere-drive {
  display: flex; align-items: center; justify-content: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: var(--color-accent-500); color: var(--fg-on-accent);
  font-size: var(--fs-body-sm); text-align: center;
}
.lisere-drive__mot {
  font-family: var(--font-display); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
}