/* =========================================================================
   VELOLOD — Composants
   ========================================================================= */

/* ---------- Boutons ----------------------------------------------------- */
.btn {
  --btn-bg: var(--accent);
  --btn-fg: #fff;
  --btn-bd: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-3);
  padding: 0.9rem 1.6rem;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 2px solid var(--btn-bd);
  border-radius: var(--radius-sm);
  font-weight: 800; font-size: var(--step-0); line-height: 1;
  text-decoration: none; white-space: nowrap;
  transition: background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.btn:hover { background: var(--accent-hover); transform: translateY(-2px); box-shadow: var(--shadow-red); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn[disabled], .btn[aria-disabled="true"] {
  background: var(--vl-ink-200); color: var(--vl-ink-400);
  cursor: not-allowed; transform: none; box-shadow: none;
}
.btn .i { transition: transform var(--dur-base) var(--ease-out); }
.btn:hover .i { transform: translateX(4px); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--vl-ink-900); --btn-bd: var(--vl-ink-200); }
.btn--ghost:hover { --btn-bg: var(--vl-ink-900); --btn-fg: #fff; --btn-bd: var(--vl-ink-900); box-shadow: var(--shadow-md); }
.btn--onDark { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255,255,255,.55); }
.btn--onDark:hover { --btn-bg: #fff; --btn-fg: var(--vl-ink-900); --btn-bd: #fff; box-shadow: none; }
.btn--lg { padding: 1.1rem 2rem; font-size: var(--step-1); }
.btn--sm { padding: 0.6rem 1rem; font-size: var(--step--1); }
.btn--block { width: 100%; }

.link-arrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-weight: 800; text-decoration: none; color: var(--vl-ink-900);
  border-bottom: 2px solid var(--accent); padding-bottom: 2px;
}
.link-arrow:hover { color: var(--accent); }
.link-arrow .i { transition: transform var(--dur-base) var(--ease-out); }
.link-arrow:hover .i { transform: translateX(4px); }

/* ---------- Badges ------------------------------------------------------ */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--radius-pill);
  font-size: var(--step--2); font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--vl-ink-100); color: var(--vl-ink-700);
}
.badge--accent { background: var(--accent); color: #fff; }
.badge--new    { background: var(--vl-ink-900); color: #fff; }
.badge--info   { background: var(--vl-info-50); color: var(--vl-info-500); }
.badge--warn   { background: var(--vl-warn-50); color: var(--vl-warn-500); }
.badge--ok     { background: var(--vl-success-50); color: var(--vl-success-500); }
/* Pastille « Promo » : elle n'apparaît que sur une promotion datée
   (voir velolod_sale_is_justified). */
.badge--sale   { background: var(--accent); color: #fff; box-shadow: 0 4px 12px rgba(229,1,11,.3); }
/* Ambre : « Nouveau », mises en avant éditoriales. Texte graphite —
   du blanc sur ambre ne passerait pas le contraste. */
.badge--amber  { background: var(--vl-amber-400); color: var(--vl-ink-900); }
.badge--stop   { background: var(--vl-red-50); color: var(--vl-red-700); }

/* ---------- Bandeau de service (statique, conservé pour compatibilité) --- */
.topbar {
  background: var(--vl-ink-900); color: rgba(255,255,255,.86);
  font-size: var(--step--1);
}
.topbar .container {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-6); min-height: 38px; flex-wrap: wrap;
}
.topbar span { display: inline-flex; align-items: center; gap: var(--space-2); }
.topbar .i { color: var(--vl-red-400); }
@media (max-width: 1000px) { .topbar span:nth-child(n+3) { display: none; } }
@media (max-width: 620px) { .topbar span:nth-child(n+2) { display: none; } .topbar .container { min-height: 34px; } }

/* ---------- Bandeau d'annonces défilant ---------------------------------
   Rouge signature pleine largeur : c'est la première chose que l'œil
   rencontre, et elle pose la marque avant même le logo.
   Le défilement se fait sur `transform`, donc sur le compositeur : il ne
   déclenche ni layout ni paint, et ne coûte rien au défilement de la page. */
.marquee {
  background: var(--accent); color: #fff;
  border-bottom: 3px solid var(--vl-amber-400);
  overflow: hidden;
}
.marquee__viewport {
  overflow: hidden;
  /* Les extrémités s'estompent : la boucle ne se coupe jamais net contre
     le bord de l'écran. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee__track {
  display: flex; width: max-content;
  animation: vl-marquee 44s linear infinite;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }
.marquee__set { display: flex; flex: none; }
.marquee__item {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding-block: 0.5rem; padding-inline: clamp(1rem, 2.4vw, 2.25rem);
  font-size: var(--step--2); letter-spacing: 0.14em; text-transform: uppercase;
  white-space: nowrap;
}
.marquee__item b { font-weight: 800; }
.marquee__item .i { color: var(--vl-amber-400); flex: none; }
/* Séparateur losange entre deux messages */
.marquee__item::after {
  content: ""; width: 5px; height: 5px; margin-left: clamp(1rem, 2.4vw, 2.25rem);
  background: var(--vl-amber-400); rotate: 45deg; flex: none;
}
@keyframes vl-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .marquee__viewport { overflow-x: auto; scrollbar-width: none; }
  .marquee__viewport::-webkit-scrollbar { display: none; }
  .marquee__set:last-child { display: none; }
}

/* ---------- En-tête ------------------------------------------------------ */
.header {
  position: sticky; top: 0; z-index: var(--z-sticky); background: #fff;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
/*
 * app.js pose « is-stuck » dès le premier défilement et « is-hidden » quand on
 * descend. Les deux règles manquaient : l'en-tête restait plat et ne se
 * rétractait jamais. */
.header.is-stuck { box-shadow: 0 8px 28px rgba(20, 23, 26, .10); }
.header.is-hidden { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) {
  .header.is-hidden { transform: none; }
}
.header__main {
  display: grid; grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center; gap: clamp(1rem, 3vw, 2.75rem);
  /*
   * Bandeau + en-tête + navigation mangeaient 207 px avant le moindre
   * contenu, soit 30 % d'un écran d'ordinateur portable : la page donnait
   * l'impression d'être vue en gros plan. La respiration reste confortable
   * au toucher (44 px minimum) mais ne dévore plus la fenêtre.
   */
  padding-block: var(--space-4);
}
/* Le logo gagne une vraie zone de respect et un socle rouge : il devient
   un point d'ancrage, plus une image posée dans un coin. */
.brand { display: inline-flex; align-items: center; flex: none; position: relative; padding-bottom: 6px; }
.brand::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 46px; height: 4px;
  background: var(--accent); border-radius: 2px;
  transition: width var(--dur-base) var(--ease-out);
}
.brand:hover::after { width: 100%; }
/* Lockup horizontal (icône + mot-symbole) : on cadre par la largeur, la
   hauteur suit le ratio du fichier fourni. */
.brand img { width: clamp(168px, 14vw, 224px); height: auto; }

.search { position: relative; }
.search input {
  width: 100%; padding: 0.78rem 3rem 0.78rem 3rem;
  background: var(--vl-sand-100); border: 2px solid transparent;
  border-radius: var(--radius-pill); font-size: var(--step-0); font-weight: 600;
  transition: border-color var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.search input::placeholder { color: var(--vl-ink-400); font-weight: 500; }
.search input:focus { background: #fff; border-color: var(--accent); outline: none; box-shadow: 0 0 0 4px var(--vl-red-50); }
.search input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.search__icon { position: absolute; left: 1.1rem; top: 50%; translate: 0 -50%; color: var(--vl-ink-400); }
.search__clear {
  position: absolute; right: .6rem; top: 50%; translate: 0 -50%;
  border: 0; background: none; padding: .5rem; color: var(--vl-ink-400); display: none;
}
.search.is-filled .search__clear { display: block; }

.suggest {
  position: absolute; inset-inline: 0; top: calc(100% + 8px);
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); overflow: hidden; z-index: var(--z-dropdown); display: none;
}
.suggest.is-open { display: block; }
.suggest__item {
  display: flex; gap: var(--space-3); align-items: center; width: 100%;
  padding: var(--space-3) var(--space-4); border: 0; background: none; text-align: left;
  /* La ligne entière est un lien : sans cette règle, le nom ET le prix
     ressortaient soulignés, ce qui brouille la lecture du montant. */
  text-decoration: none;
}
.suggest__item:hover b { text-decoration: underline; text-underline-offset: .18em; }
.suggest__item + .suggest__item { border-top: 1px solid var(--vl-ink-100); }
.suggest__item:hover, .suggest__item[aria-selected="true"] { background: var(--vl-ink-50); }
.suggest__item img { width: 46px; height: 46px; object-fit: contain; flex: none; }
.suggest__item b { display: block; font-size: var(--step--1); overflow-wrap: anywhere; }
.suggest__item small { color: var(--text-muted); font-size: var(--step--2); }
/*
 * Trois colonnes : visuel, texte, prix.
 *
 * « min-width: 0 » sur la colonne texte n'est pas cosmétique : sans elle, un
 * nom de produit long refuse de se réduire (largeur minimale automatique d'un
 * élément flex) et pousse le prix hors de la ligne.
 */
.suggest__item > span { flex: 1 1 auto; min-width: 0; }
.suggest__item > strong {
  flex: 0 0 auto;
  margin-left: auto;
  min-width: 150px;
  text-align: right;
  white-space: nowrap;
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
}
/* Mobile : le prix passe sous le titre, aligné sur lui, jamais en surimpression. */
@media (max-width: 560px) {
  .suggest__item { flex-wrap: wrap; }
  .suggest__item > strong {
    flex: 1 1 100%;
    min-width: 0;
    margin: 4px 0 0;
    padding-left: calc(46px + var(--space-3));
    text-align: left;
  }
}
.suggest__empty { padding: var(--space-4); color: var(--text-muted); font-size: var(--step--1); }

.header__tools { display: flex; align-items: center; gap: var(--space-2); }
.tool {
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  padding: var(--space-1) var(--space-3); border: 0; background: none;
  border-radius: var(--radius-sm); text-decoration: none;
  font-size: var(--step--2); font-weight: 700; color: var(--vl-ink-700);
  transition: color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.tool:hover { color: var(--accent); background: var(--vl-ink-50); }
.tool__count {
  position: absolute; top: -6px; right: -8px; min-width: 18px; height: 18px;
  display: grid; place-items: center; padding: 0 5px;
  background: var(--accent); color: #fff; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 800;
}
.tool__icon { position: relative; }
.burger { display: none; }

/* ---------- Navigation principale + méga-menu --------------------------- */
/* Barre de navigation en graphite plein : c'est elle qui donne au site sa
   silhouette de boutique. Sur fond blanc, elle disparaissait. */
.nav { background: var(--vl-ink-900); }
.nav__list { display: flex; align-items: stretch; gap: 0; list-style: none; margin: 0; padding: 0;
  overflow-x: auto; scrollbar-width: none; }
.nav__list::-webkit-scrollbar { display: none; }
.nav__link {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) clamp(.7rem, 1.15vw, 1.15rem);
  font-size: var(--step--1); font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; text-decoration: none; color: rgba(255,255,255,.86);
  white-space: nowrap;
  transition: color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.nav__link::after {
  content: ""; position: absolute; left: clamp(.7rem, 1.15vw, 1.15rem);
  right: clamp(.7rem, 1.15vw, 1.15rem); bottom: 10px; height: 3px;
  background: var(--vl-amber-400); border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.nav__link:hover, .nav__item.is-open .nav__link, .nav__link[aria-current="page"] {
  color: #fff; background: rgba(255,255,255,.06);
}
.nav__link:hover::after, .nav__item.is-open .nav__link::after, .nav__link[aria-current="page"]::after {
  transform: scaleX(1);
}
.nav__link--promo { color: var(--vl-amber-400); }
.nav__link--promo:hover { color: var(--vl-amber-300); }
.nav__item { position: relative; }
/* Le bouton « toutes les catégories » prend le rouge : c'est l'entrée
   principale du catalogue, elle doit se voir de l'autre bout de l'écran. */
.nav__all {
  display: inline-flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) clamp(1rem, 1.6vw, 1.6rem); margin-right: var(--space-4);
  background: var(--accent); color: #fff; border: 0;
  font-size: var(--step--1); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  white-space: nowrap; flex: none;
  transition: background var(--dur-base) var(--ease-out);
}
.nav__all:hover { background: var(--accent-hover); }

.mega {
  position: absolute; left: 0; top: 100%; width: min(92vw, 980px);
  background: #fff; border: 1px solid var(--border); border-top: 3px solid var(--accent);
  border-radius: 0 0 var(--radius-md) var(--radius-md); box-shadow: var(--shadow-lg);
  padding: var(--space-6); z-index: var(--z-dropdown);
  display: grid; grid-template-columns: repeat(3, 1fr) 260px; gap: var(--space-6);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility var(--dur-base);
}
.nav__item.is-open .mega { opacity: 1; visibility: visible; transform: none; }
.mega h3 {
  font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--text-muted); margin-bottom: var(--space-3);
}
.mega ul { list-style: none; margin: 0; padding: 0; }
.mega li + li { margin-top: 2px; }
.mega a {
  display: flex; justify-content: space-between; gap: var(--space-3);
  padding: 6px 8px; border-radius: var(--radius-xs);
  text-decoration: none; font-weight: 600; font-size: var(--step--1);
}
.mega a:hover { background: var(--vl-ink-50); color: var(--accent); }
.mega a span { color: var(--vl-ink-400); font-variant-numeric: tabular-nums; }
.mega__promo {
  background: var(--vl-ink-900); color: #fff; border-radius: var(--radius-md);
  padding: var(--space-5); display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 220px; background-size: cover; background-position: center;
  position: relative; overflow: hidden;
}
.mega__promo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,23,26,.15), rgba(20,23,26,.88));
}
.mega__promo > * { position: relative; z-index: 1; }
.mega__promo strong { display: block; font-family: var(--font-display); font-style: italic;
  text-transform: uppercase; font-size: var(--step-2); line-height: 1; margin-bottom: var(--space-3); }

/* ---------- Hero -------------------------------------------------------- */
.hero { position: relative; background: var(--vl-ink-900); overflow: hidden; }
.hero__viewport { position: relative; min-height: clamp(460px, 74vh, 760px); }
.hero__slide {
  position: absolute; inset: 0; opacity: 0; visibility: hidden;
  transition: opacity var(--dur-slow) var(--ease-in-out), visibility var(--dur-slow);
}
.hero__slide.is-active { opacity: 1; visibility: visible; }
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 72% center; }
.hero__slide::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, rgba(11,14,17,.90) 0%, rgba(11,14,17,.72) 32%, rgba(11,14,17,.14) 60%, rgba(11,14,17,0) 76%);
}
@media (max-width: 720px) {
  .hero__slide::after { background: linear-gradient(180deg, rgba(11,14,17,.35) 0%, rgba(11,14,17,.82) 55%, rgba(11,14,17,.94) 100%); }
  .hero__media img { object-position: 62% center; }
}
.hero__inner {
  position: relative; z-index: 2; height: 100%;
  display: flex; align-items: center;
  padding-block: clamp(3rem, 7vw, 5.5rem);
}
.hero__copy { max-width: 640px; color: #fff; }
.hero__copy h1 { color: #fff; margin: var(--space-4) 0 var(--space-4); }
.hero__copy h1 em { font-style: italic; color: var(--vl-red-400); display: block; }
.hero__copy p { color: rgba(255,255,255,.88); font-size: var(--step-1); max-width: 46ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }

.hero__nav {
  position: absolute; bottom: var(--space-6); z-index: 3;
  width: 52px; height: 52px; display: grid; place-items: center;
  border: 0; background: rgba(255,255,255,.10); color: #fff;
  border-radius: var(--radius-pill); backdrop-filter: blur(6px);
  transition: background var(--dur-base) var(--ease-out);
}
.hero__nav:hover { background: rgba(255,255,255,.26); }
.hero__nav--prev { right: calc(max(var(--gutter), 50vw - var(--container) / 2) + 64px); }
.hero__nav--next { right: max(var(--gutter), calc(50vw - var(--container) / 2)); }
@media (max-width: 720px) { .hero__nav { display: none; } }

.hero__dots {
  position: absolute; left: 50%; translate: -50% 0; bottom: var(--space-6);
  display: flex; gap: var(--space-2); z-index: 3;
}
@media (min-width: 900px) {
  .hero__dots { left: auto; translate: none;
    inset-inline-start: max(var(--gutter), calc(50vw - var(--container) / 2)); }
}
.hero__dot { width: 34px; height: 4px; border: 0; padding: 0; background: rgba(255,255,255,.35); border-radius: 2px; }
.hero__dot.is-active { background: var(--accent); width: 46px; }

/* Chevrons rouges signature, repris du logo */
.hero__marks {
  position: absolute; right: -30px; bottom: -20px; z-index: 1;
  display: flex; gap: 14px; transform: skewX(-18deg); pointer-events: none;
}
.hero__marks span { width: 26px; height: 190px; background: var(--accent); border-radius: 3px; opacity: .92; }
.hero__marks span:nth-child(2) { height: 150px; opacity: .7; }
.hero__marks span:nth-child(3) { height: 110px; opacity: .45; }
@media (max-width: 900px) { .hero__marks { display: none; } }

/* ---------- Accès catégories sous le hero -------------------------------- */
.quicknav { background: #fff; border-bottom: 1px solid var(--border); }
.quicknav__list {
  display: grid; grid-template-columns: repeat(6, 1fr);
  list-style: none; margin: 0; padding: 0;
}
.quicknav__list a {
  display: flex; flex-direction: column; gap: 4px;
  padding: var(--space-5) var(--space-4); text-decoration: none;
  border-left: 1px solid var(--border); height: 100%;
  transition: background var(--dur-base) var(--ease-out);
}
.quicknav__list li:last-child a { border-right: 1px solid var(--border); }
.quicknav__list a:hover { background: var(--vl-ink-50); }
.quicknav__list strong { font-size: var(--step--1); text-transform: uppercase; letter-spacing: .06em; }
.quicknav__list span { font-size: var(--step--2); color: var(--text-muted); }
.quicknav__list a:hover strong { color: var(--accent); }
@media (max-width: 900px) {
  .quicknav__list { grid-template-columns: repeat(2, 1fr); }
  .quicknav__list li:nth-child(2n) a { border-right: 1px solid var(--border); }
  .quicknav__list li:nth-child(n+3) a { border-top: 1px solid var(--border); }
}

/* ---------- Carte catégorie --------------------------------------------- */
.cat-card {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--radius-lg); background: var(--vl-ink-800);
  min-height: 260px; text-decoration: none; color: #fff;
  isolation: isolate;
}
.cat-card--tall { min-height: 540px; }
.cat-card img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out); z-index: -2;
}
.cat-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(20,23,26,.05) 0%, rgba(20,23,26,.30) 42%, rgba(20,23,26,.92) 100%);
}
.cat-card:hover img { transform: scale(1.06); }
/* Packshots sur fond blanc : on les fond dans la surface plutôt que d'afficher un rectangle */
.cat-card--pack img { mix-blend-mode: multiply; }
.cat-card--pack { background: var(--vl-ink-100); }
.cat-card__body { position: absolute; inset-inline: 0; bottom: 0; padding: var(--space-5); }
.cat-card__body h3 {
  color: #fff; font-style: italic; text-transform: uppercase;
  font-size: var(--step-3); line-height: 1;
}
.cat-card__body p { color: rgba(255,255,255,.82); font-size: var(--step--1); margin: var(--space-2) 0 var(--space-3); }
.cat-card__cta { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 800; font-size: var(--step--1); }
.cat-card:hover .cat-card__cta { color: var(--vl-red-400); }

/* ---------- Carte produit ------------------------------------------------ */
.product-card {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md);
  overflow: hidden; height: 100%;
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.product-card:hover { border-color: var(--vl-ink-300); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.product-card__media {
  position: relative; aspect-ratio: 4 / 3; background: var(--vl-ink-50);
  display: grid; place-items: center; padding: var(--space-4); overflow: hidden;
}
.product-card__media img {
  max-height: 100%; width: auto; object-fit: contain; mix-blend-mode: multiply;
  transition: transform var(--dur-slow) var(--ease-out);
}
.product-card:hover .product-card__media img { transform: scale(1.05); }
.product-card__flags { position: absolute; top: var(--space-3); left: var(--space-3); display: grid; gap: 6px; }
.product-card__fav {
  position: absolute; top: var(--space-3); right: var(--space-3);
  width: 38px; height: 38px; display: grid; place-items: center;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-pill);
  color: var(--vl-ink-500); transition: color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.product-card__fav:hover, .product-card__fav[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }
.product-card__body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); flex: 1; }
.product-card__brand { font-size: var(--step--2); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.product-card__name {
  font-family: var(--font-text); font-size: var(--step--1); font-weight: 700;
  line-height: 1.35; letter-spacing: 0; color: var(--vl-ink-900);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  /* Deux lignes reservees, meme pour un nom court : sans cela les cartes
     d'une meme rangee ne finissent pas a la meme hauteur. */
  min-height: calc(2 * 1.35em);
}
.product-card__name a { text-decoration: none; }
.product-card__name a::after { content: ""; position: absolute; inset: 0; }
.product-card__specs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: var(--space-2); }
.spec-chip {
  font-size: var(--step--2); font-weight: 600; color: var(--vl-ink-600);
  background: var(--vl-ink-50); border-radius: var(--radius-xs); padding: 3px 8px;
}
.product-card__foot {
  display: grid; gap: var(--space-3);
  padding: var(--space-4); border-top: 1px solid var(--vl-ink-100);
  background: linear-gradient(180deg, #fff, var(--vl-sand-50));
}
.product-card__pricing {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-3); flex-wrap: wrap;
}
.product-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
/*
 * Le bouton d'achat prend toute la largeur de la carte : dans une colonne de
 * grille de 250 px, le libellé « Ajouter au panier » se cassait sur trois
 * lignes lorsqu'un second bouton l'accompagnait.
 *
 * Les styles sont écrits ici et non hérités de WooCommerce : sur la page
 * d'accueil il n'y a pas de conteneur .woocommerce, et le même bouton
 * s'affichait en simple lien souligné sur l'accueil et en gros bouton rouge
 * en boutique.
 */
.product-card__actions .button,
.product-card__actions .added_to_cart {
  flex: 1 1 100%; display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2); text-align: center; white-space: nowrap;
  min-height: 44px; padding: .7rem 1rem; border: 0; border-radius: var(--radius-sm);
  font-family: inherit; font-weight: 800; font-size: var(--step--1); line-height: 1.1;
  text-decoration: none; cursor: pointer;
}
.product-card__actions .button {
  background: var(--accent); color: #fff;
  transition: background var(--dur-fast) var(--ease-out);
}
.product-card__actions .button:hover,
.product-card__actions .button:focus-visible { background: var(--accent-hover); color: #fff; }
.product-card__actions .product-card__compare { flex: 1 1 100%; justify-content: center; }
.price { font-family: var(--font-display); font-size: var(--step-2); font-weight: 800; letter-spacing: -0.02em; color: var(--vl-ink-900); }
.price small { font-size: var(--step--2); font-weight: 600; color: var(--text-muted); display: block; letter-spacing: 0; }
/* Prix barré : gris, plus petit, jamais à côté du prix courant sans le
   distinguer nettement — c'est une exigence d'affichage des prix. */
.price del { font-size: var(--step--1); font-weight: 600; color: var(--vl-ink-400); margin-right: 6px; }
.price del .woocommerce-Price-amount { text-decoration: line-through; }
.price ins { text-decoration: none; color: var(--accent); }
.availability { display: inline-flex; align-items: center; gap: 6px; font-size: var(--step--2); font-weight: 700; color: var(--vl-ink-600); }
.availability::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--vl-warn-500); }
.availability--stock::before { background: var(--vl-success-500); }
/* « Épuisé » doit se distinguer de « Sur commande » : ce sont deux
   situations différentes pour l'acheteur. */
.availability--out { color: var(--accent); }
.availability--out::before { background: var(--accent); }
.velolod-on-order::before { background: var(--vl-warn-500); }
.product-card__compare { display: inline-flex; align-items: center; gap: 6px; font-size: var(--step--2); font-weight: 700; color: var(--text-muted); position: relative; z-index: 2; }

/* ---------- Grille produits (page d'accueil) -----------------------------
 * Trois paliers seulement, exactement ceux demandés : 1 colonne en mobile,
 * 2 en tablette, 4 en ordinateur. `minmax(0, 1fr)` est obligatoire — sans lui
 * la largeur minimale d'une piste de grille est `auto`, et un nom de produit
 * long fait déborder la colonne, donc la page.
 * ---------------------------------------------------------------------- */
.product-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  align-items: stretch;
}
.product-grid > * { min-width: 0; }

@media (min-width: 600px) {
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Bouton centré sous une grille. */
.section-cta {
  display: flex; justify-content: center;
  margin-top: var(--space-6);
}

/* ---------- Rail horizontal --------------------------------------------- */
.rail { position: relative; }
.rail__track {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: clamp(228px, 23vw, 318px);
  gap: var(--space-5); overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: var(--space-4); scrollbar-width: thin;
}
.rail__track > * { scroll-snap-align: start; }

.rail__btns { display: flex; gap: var(--space-2); }
.rail__btn {
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--border); background: #fff; border-radius: var(--radius-pill);
  transition: border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.rail__btn:hover { border-color: var(--vl-ink-900); color: var(--accent); }

/* ---------- Onglets ------------------------------------------------------ */
.tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--border); overflow-x: auto; }
.tab {
  padding: var(--space-3) var(--space-4); border: 0; background: none;
  font-weight: 800; font-size: var(--step--1); color: var(--text-muted);
  border-bottom: 3px solid transparent; white-space: nowrap;
}
.tab[aria-selected="true"] { color: var(--vl-ink-900); border-bottom-color: var(--accent); }

/* ---------- Parallaxe ---------------------------------------------------- */
.parallax { position: relative; overflow: hidden; isolation: isolate; background: var(--vl-ink-900); }
.parallax__bg {
  position: absolute; inset: -12% 0; z-index: -2;
  background-size: cover; background-position: center;
  will-change: transform;
}
.parallax::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(11,14,17,.86), rgba(11,14,17,.45) 55%, rgba(11,14,17,.15));
}
.parallax__inner { padding-block: clamp(4rem, 12vw, 9rem); color: #fff; }
.parallax__inner h2 { color: #fff; }
.parallax__inner p { color: rgba(255,255,255,.86); }
@media (max-width: 720px) {
  .parallax__bg { inset: 0; }
  .parallax::after { background: linear-gradient(180deg, rgba(11,14,17,.55), rgba(11,14,17,.9)); }
}

/* ---------- Bandeau marques ---------------------------------------------- */
.brands { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.brands a {
  background: #fff; padding: var(--space-5) var(--space-3);
  display: grid; place-items: center; gap: 4px; text-decoration: none;
  transition: background var(--dur-base) var(--ease-out);
}
.brands a:hover { background: var(--vl-ink-50); }
.brands strong { font-family: var(--font-display); font-style: italic; text-transform: uppercase; font-size: var(--step-0); letter-spacing: -0.01em; }
.brands span { font-size: var(--step--2); color: var(--text-muted); }

/* ---------- Réassurance --------------------------------------------------
   Bande rouge pleine largeur juste avant le pied de page : c'est le dernier
   argument que voit un visiteur qui hésite, il ne doit pas se fondre dans
   le blanc. Les colonnes sont séparées par un filet clair plutôt que par du
   vide — plus dense, plus « boutique ». */
.section--trust { background: var(--accent); color: #fff; }
.section--trust h2, .section--trust h3, .section--trust .eyebrow { color: #fff; }
.section--trust .section-head p { color: rgba(255,255,255,.85); }
.trust {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0;
}
.trust__item {
  display: flex; gap: var(--space-4); align-items: flex-start;
  padding: var(--space-5) var(--space-5) var(--space-5) 0;
}
.section--trust .trust__item + .trust__item {
  border-left: 1px solid rgba(255,255,255,.22); padding-left: var(--space-5);
}
.trust__icon {
  flex: none; width: 48px; height: 48px; display: grid; place-items: center;
  border-radius: var(--radius-sm); background: var(--vl-red-50); color: var(--accent);
}
.section--trust .trust__icon { background: rgba(255,255,255,.14); color: var(--vl-amber-400); }
.trust__item h3 {
  font-family: var(--font-text); font-size: var(--step--1); letter-spacing: .08em;
  text-transform: uppercase; font-weight: 800;
}
.section--trust .trust__item h3 { color: #fff; }
.trust__item p { font-size: var(--step--1); color: var(--text-muted); margin: 4px 0 0; }
.section--trust .trust__item p { color: rgba(255,255,255,.82); }
@media (max-width: 720px) {
  .section--trust .trust__item + .trust__item {
    border-left: 0; border-top: 1px solid rgba(255,255,255,.22); padding-left: 0;
  }
}

/* ---------- Avis (structure, sans contenu fictif) ------------------------
   L'etat vide a ete retire : la section entiere ne s'affiche plus tant
   qu'aucun avis verifie n'existe. */

/* ---------- Newsletter ---------------------------------------------------
   Bloc ambre, à cheval sur la fin de page et le pied de page. Il tranche
   volontairement : c'est la seule zone de la page qui demande quelque chose
   au visiteur, elle doit se distinguer de tout le reste.
   Texte graphite sur ambre — le contraste est très au-dessus du seuil. */
.newsletter {
  background: var(--vl-amber-400); color: var(--vl-ink-900);
  border-radius: var(--radius-lg); padding: clamp(2rem, 5vw, 3.25rem);
  position: relative; overflow: hidden;
  /* Une seule colonne : la deuxième restait vide et poussait tout le texte
     contre le bord droit du bandeau. */
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
}
/* Chevrons discrets repris du logo, en filigrane */
.newsletter::after {
  content: ""; position: absolute; right: -60px; top: -40px; bottom: -40px; width: 260px;
  background: repeating-linear-gradient(115deg, rgba(20,23,26,.07) 0 22px, transparent 22px 54px);
  pointer-events: none;
}
/* La décoration reste hors flux : sans l'exception, cette règle écrasait
   son position:absolute et elle occupait une colonne de la grille. */
.newsletter > *:not(.hero__marks) { position: relative; z-index: 1; }
.newsletter h2 { color: var(--vl-ink-900); }
.newsletter p { color: rgba(20,23,26,.78); }
.newsletter .eyebrow { color: var(--vl-red-700); }
.newsletter .eyebrow::before { background: var(--vl-red-700); }
.newsletter__form { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.newsletter__form input {
  flex: 1 1 240px; padding: 1.05rem 1.25rem; border-radius: var(--radius-sm);
  border: 2px solid var(--vl-ink-900); background: #fff; color: var(--vl-ink-900);
  font-weight: 600;
}
.newsletter__form input::placeholder { color: var(--vl-ink-400); }
.newsletter__form input:focus { outline: 3px solid var(--vl-ink-900); outline-offset: 2px; }
.newsletter__form .btn { --btn-bg: var(--vl-ink-900); --btn-bd: var(--vl-ink-900); }
.newsletter__form .btn:hover { --btn-bg: var(--accent); --btn-bd: var(--accent); box-shadow: none; }
/* Sur l'ambre, le bouton « sur fond sombre » (blanc sur jaune) n'était pas
   lisible : on repasse sur l'encre pleine. */
.newsletter .btn--onDark { --btn-bg: var(--vl-ink-900); --btn-fg: #fff; --btn-bd: var(--vl-ink-900); }
.newsletter .btn--onDark:hover { --btn-bg: var(--vl-red-600, #E10600); --btn-fg: #fff; --btn-bd: var(--vl-red-600, #E10600); }
.newsletter small { display: block; margin-top: var(--space-3); color: rgba(20,23,26,.62); font-size: var(--step--2); }
@media (max-width: 860px) { .newsletter { grid-template-columns: 1fr; } }

/* ---------- Pied de page -------------------------------------------------- */
.footer {
  background: var(--vl-ink-900); color: rgba(255,255,255,.72);
  padding-block: var(--space-8) var(--space-5);
  /* Filet rouge en tête : le pied de page se raccroche à la marque au
     lieu de se poser comme un bloc noir anonyme. */
  border-top: 5px solid var(--accent);
}
/*
 * Trois colonnes de liens côte à côte depuis le retrait de la colonne
 * « VELOLOD ».
 *
 * PIÈGE CSS : « 1.5fr repeat(auto-fit, minmax(150px, 1fr)) » est invalide —
 * auto-fit ne se combine pas avec une taille flexible. La déclaration entière
 * était alors ignorée et le pied de page s'empilait sur une seule colonne.
 * On garde donc un compte de colonnes explicite.
 */
.footer__grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 3rem); }
.footer h3 {
  color: #fff; font-family: var(--font-text); font-size: var(--step--1);
  text-transform: uppercase; letter-spacing: .14em; margin-bottom: var(--space-4);
  position: relative; padding-bottom: var(--space-3);
}
.footer h3::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 26px; height: 3px;
  background: var(--vl-amber-400); border-radius: 2px;
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li + li { margin-top: var(--space-2); }
.footer a { text-decoration: none; font-size: var(--step--1); transition: color var(--dur-fast) var(--ease-out), padding-left var(--dur-fast) var(--ease-out); }
.footer a:hover { color: #fff; padding-left: 4px; }
.footer__brand img { width: 200px; margin-bottom: var(--space-4); }
.footer__brand p { font-size: var(--step--1); max-width: 38ch; }
/* Identité légale sous le logo : lisible, discrète, jamais décorative. */
.footer__identity {
  margin-top: var(--space-4);
  font-size: var(--step--2);
  line-height: 1.7;
  color: rgba(255, 255, 255, .78);
  letter-spacing: .01em;
}
.footer__legal {
  display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between;
  margin-top: var(--space-7); padding-top: var(--space-5);
  border-top: 1px solid rgba(255,255,255,.12); font-size: var(--step--2);
}
.placeholder {
  display: inline-block; background: rgba(255,255,255,.10); color: rgba(255,255,255,.9);
  border: 1px dashed rgba(255,255,255,.35); border-radius: var(--radius-xs);
  padding: 1px 6px; font-family: var(--font-mono); font-size: .8em;
}
@media (max-width: 1000px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }

/* ---------- Filtres et pages catégorie ------------------------------------ */
.breadcrumb { font-size: var(--step--1); color: var(--text-muted); padding-block: var(--space-4); }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); }

.catalog { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: var(--space-7); align-items: start; }
/* Sans widget de filtre, la grille produits occupe toute la largeur. */
.catalog--full { grid-template-columns: minmax(0, 1fr); }
.filters { position: sticky; top: calc(var(--header-h-compact) + var(--space-4)); }
.filter-group { border-bottom: 1px solid var(--border); padding-block: var(--space-4); }
.filter-group summary { font-weight: 800; font-size: var(--step--1); text-transform: uppercase; letter-spacing: .06em; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.filter-group summary::-webkit-details-marker { display: none; }
.filter-group summary::after { content: "+"; font-weight: 700; color: var(--text-muted); }
.filter-group[open] summary::after { content: "−"; }
.filter-group__body { padding-top: var(--space-3); display: grid; gap: var(--space-2); }
.check { display: flex; align-items: center; gap: var(--space-3); font-size: var(--step--1); cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.check span:last-child { margin-left: auto; color: var(--vl-ink-400); font-variant-numeric: tabular-nums; font-size: var(--step--2); }

.toolbar { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between; margin-bottom: var(--space-5); }
.toolbar select { padding: .7rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--vl-ink-100); border: 0; border-radius: var(--radius-pill); padding: 5px 12px; font-size: var(--step--2); font-weight: 700; }
.chip:hover { background: var(--vl-ink-200); }

.filters-toggle { display: none; }
@media (max-width: 980px) {
  .catalog { grid-template-columns: 1fr; }
  .filters {
    position: fixed; inset: 0 30% 0 0; z-index: var(--z-drawer);
    background: #fff; padding: var(--space-5); overflow-y: auto;
    transform: translateX(-102%); transition: transform var(--dur-base) var(--ease-out);
    box-shadow: var(--shadow-lg);
  }
  .filters.is-open { transform: none; }
  .filters-toggle { display: inline-flex; }
}

/* ---------- Fiche produit -------------------------------------------------- */
.pdp { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--space-7); align-items: start; }
.gallery__main { background: var(--vl-ink-50); border-radius: var(--radius-lg); aspect-ratio: 4/3; display: grid; place-items: center; padding: var(--space-6); }
.gallery__main img { max-height: 100%; width: auto; object-fit: contain; mix-blend-mode: multiply; }
.gallery__thumbs { display: flex; gap: var(--space-3); margin-top: var(--space-3); overflow-x: auto; }
.gallery__thumbs button { width: 78px; height: 78px; flex: none; border: 2px solid var(--border); border-radius: var(--radius-sm); background: #fff; padding: 6px; }
.gallery__thumbs button[aria-current="true"] { border-color: var(--vl-ink-900); }
.gallery__thumbs img { width: 100%; height: 100%; object-fit: contain; }

.pdp__price { font-family: var(--font-display); font-size: var(--step-5); font-weight: 800; letter-spacing: -.03em; }
.variant-grid { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.variant {
  min-width: 62px; padding: .6rem .9rem; border: 2px solid var(--border);
  background: #fff; border-radius: var(--radius-sm); font-weight: 700; font-size: var(--step--1);
}
.variant[aria-pressed="true"] { border-color: var(--vl-ink-900); background: var(--vl-ink-900); color: #fff; }

.specs-table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.specs-table th, .specs-table td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--vl-ink-100); vertical-align: top; }
.specs-table th { width: 38%; color: var(--text-muted); font-weight: 700; }
.specs-table tr:nth-child(odd) { background: var(--vl-ink-50); }

.notice {
  display: flex; gap: var(--space-3); align-items: flex-start;
  border-left: 4px solid var(--vl-warn-500); background: var(--vl-warn-50);
  padding: var(--space-4); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--step--1);
}
.notice strong { display: block; }

@media (max-width: 900px) { .pdp { grid-template-columns: 1fr; } }

/* ---------- Menu mobile ----------------------------------------------------- */
@media (max-width: 1080px) {
  .header__main { grid-template-columns: auto 1fr auto; gap: var(--space-4); }
  .nav { display: none; }
  .burger { display: inline-flex; }
  .header__search-row { padding-bottom: var(--space-4); }
}
@media (min-width: 1081px) { .header__search-row { display: none; } }
@media (max-width: 620px) {
  .header__main .search { display: none; }
  .brand img { width: 150px; }
  /* on masque le libellé, pas l'icône */
  .tool > span:not([class]) { display: none; }
  .tool { padding: var(--space-2); }
  .header__tools { gap: 0; }
}

.drawer {
  position: fixed; inset: 0 auto 0 0; width: min(88vw, 380px); z-index: var(--z-drawer);
  background: #fff; transform: translateX(-102%); transition: transform var(--dur-base) var(--ease-out);
  overflow-y: auto; box-shadow: var(--shadow-lg); padding: var(--space-5);
}
.drawer.is-open { transform: none; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-5); }
.drawer nav ul { list-style: none; margin: 0; padding: 0; }
.drawer nav a {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-4) 0; border-bottom: 1px solid var(--vl-ink-100);
  text-decoration: none; font-weight: 800; text-transform: uppercase; font-size: var(--step--1);
}
.scrim {
  position: fixed; inset: 0; background: rgba(20,23,26,.5); z-index: calc(var(--z-drawer) - 1);
  opacity: 0; visibility: hidden; transition: opacity var(--dur-base), visibility var(--dur-base);
}
.scrim.is-open { opacity: 1; visibility: visible; }

/* =========================================================================
   Refonte visuelle 1.8 — densité, couleur, hiérarchie
   Ces règles complètent les composants ci-dessus ; elles ne créent pas un
   second système, elles poussent le premier là où il restait timide.
   ========================================================================= */

/* ---------- Hero : plus haut, plus affirmé ------------------------------- */
.hero__viewport { min-height: clamp(520px, 78vh, 820px); }
.hero__copy .eyebrow { color: var(--vl-amber-400); }
.hero__copy .eyebrow::before { background: var(--vl-amber-400); }
.hero__copy h1 { font-size: var(--step-7); }
/* Un liseré ambre sous l'accroche : la même signature que la nav et le
   pied de page, répétée trois fois, finit par faire une identité. */
.hero__copy h1::after {
  content: ""; display: block; width: 84px; height: 5px; margin-top: var(--space-4);
  background: var(--vl-amber-400); border-radius: 3px;
}
.hero__actions .btn--onDark { backdrop-filter: blur(4px); }

/* ---------- Section catégories : composition éditoriale ------------------ */
.section--categories { background: var(--bg); }
.cat-card { min-height: 300px; }
.cat-card--tall { min-height: 620px; }
/* Filet de couleur en pied de carte, révélé au survol : le mouvement se
   voit sans que l'image bouge trop. */
.cat-card__body::before {
  content: ""; position: absolute; left: var(--space-5); bottom: var(--space-4);
  width: 48px; height: 4px; background: var(--accent); border-radius: 2px;
  transition: width var(--dur-base) var(--ease-out);
}
.cat-card:hover .cat-card__body::before { width: calc(100% - var(--space-5) * 2); }
.cat-card__body { padding-bottom: var(--space-6); }
.cat-card__cta { color: var(--vl-amber-400); }

/* ---------- Bandeau promotionnel : le rouge en pleine largeur ------------ */
.promo-band {
  background: var(--accent); color: #fff; position: relative; overflow: hidden;
}
.promo-band::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 30px, transparent 30px 70px);
  pointer-events: none;
}
.promo-band__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-6); align-items: center;
  padding-block: clamp(2rem, 4vw, 3.25rem);
}
.promo-band h2 { color: #fff; font-size: var(--step-4); }
.promo-band p { color: rgba(255,255,255,.9); margin-top: var(--space-2); }
.promo-band .btn { --btn-bg: var(--vl-amber-400); --btn-fg: var(--vl-ink-900); --btn-bd: var(--vl-amber-400); }
.promo-band .btn:hover { --btn-bg: #fff; --btn-fg: var(--vl-ink-900); --btn-bd: #fff; box-shadow: none; }
@media (max-width: 760px) { .promo-band__inner { grid-template-columns: 1fr; } }

/* ---------- Titres de section : ancrage couleur -------------------------- */
.section-head { margin-bottom: var(--space-5); }
.section-title { position: relative; }
.section--warm { border-block: 1px solid var(--vl-sand-200); }

/* ---------- Marques : couleur au survol ---------------------------------- */
.brands a { filter: grayscale(1); opacity: .72; transition: filter var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out); }
.brands a:hover { filter: none; opacity: 1; background: var(--vl-sand-50); }
.brands strong { color: var(--vl-ink-900); }
.brands a:hover strong { color: var(--accent); }

/* ---------- Catalogue : en-tête de rayon coloré -------------------------- */
.shop-hero {
  background: var(--vl-ink-900); color: #fff;
  padding-block: clamp(2rem, 4vw, 3.25rem); position: relative; overflow: hidden;
}
.shop-hero::after {
  content: ""; position: absolute; right: -40px; top: -30px; bottom: -30px; width: 220px;
  background: repeating-linear-gradient(115deg, rgba(229,1,11,.30) 0 20px, transparent 20px 48px);
  pointer-events: none;
}
.shop-hero h1 { color: #fff; }
.shop-hero p { color: rgba(255,255,255,.8); max-width: 68ch; margin-top: var(--space-3); }
.shop-hero .breadcrumb { color: rgba(255,255,255,.62); padding-top: 0; }
.shop-hero .breadcrumb a { color: rgba(255,255,255,.82); }
.shop-hero .breadcrumb a:hover { color: var(--vl-amber-400); }

/* Barre d'outils du catalogue : nombre de produits mis en avant */
.toolbar__count { font-weight: 800; font-size: var(--step--1); }
.toolbar__count b { color: var(--accent); }

/* ---------- Filtres : titres colorés ------------------------------------- */
.filters__title {
  font-family: var(--font-text); font-size: var(--step--1); font-weight: 800;
  text-transform: uppercase; letter-spacing: .1em;
  padding-bottom: var(--space-3); margin-bottom: var(--space-2);
  border-bottom: 3px solid var(--accent);
}

/* ---------- Fiche produit : bloc d'achat qui accroche l'œil -------------- */
.pdp__buybox {
  background: var(--vl-sand-50); border: 1px solid var(--vl-sand-200);
  border-radius: var(--radius-lg); padding: var(--space-5);
}
.pdp__reassurance {
  display: grid; gap: var(--space-2); margin-top: var(--space-4);
  padding-top: var(--space-4); border-top: 1px dashed var(--vl-sand-200);
  list-style: none;
}
.pdp__reassurance li {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--step--1); font-weight: 600; color: var(--vl-ink-700);
}
.pdp__reassurance .i { color: var(--vl-success-500); flex: none; }

/* ---------- Densité générale --------------------------------------------- */
.section { padding-block: var(--section-y); }
.section--hero-next { padding-top: var(--space-6); }

/* ---------- Conseils : cartes éditoriales -------------------------------- */
/* auto-fill et non auto-fit : avec un seul article publié, auto-fit étirait la
   carte sur toute la largeur et son visuel 16/10 occupait 900 px de vide. */
/* ---------- Nos conseils -------------------------------------------------
 * Trois cartes de hauteur identique : la grille etire les elements, la carte
 * est une colonne flex et le bouton est pousse en bas par `margin-top:auto`.
 * Sans cela, une carte au texte plus court remonte son bouton et la rangee
 * perd son alignement.
 * ---------------------------------------------------------------------- */
.advice {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  align-items: stretch;
}
.advice > * { min-width: 0; }
@media (min-width: 700px)  { .advice { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .advice { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.advice-card__icon {
  display: inline-grid; place-items: center;
  width: 52px; height: 52px; flex: none;
  border-radius: var(--radius-sm);
  background: var(--vl-red-50); color: var(--accent);
  margin-bottom: var(--space-2);
}
.advice-card__btn {
  margin-top: auto; align-self: flex-start;
  padding-block: .8rem; padding-inline: 1.3rem;
  font-size: var(--step--1);
  white-space: normal; text-align: center;
}
@media (max-width: 480px) {
  .advice-card__btn { align-self: stretch; }
}
.advice-card {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  overflow: hidden; height: 100%;
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.advice-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.advice-card__media { display: block; aspect-ratio: 16 / 10; background: var(--vl-sand-100); overflow: hidden; }
.advice-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.advice-card:hover .advice-card__media img { transform: scale(1.05); }
.advice-card__body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); flex: 1; }
.advice-card__cat {
  align-self: flex-start; font-size: var(--step--2); font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
}
.advice-card h3 { font-family: var(--font-text); font-size: var(--step-1); line-height: 1.25; letter-spacing: 0; }
.advice-card h3 a { text-decoration: none; }
.advice-card p { font-size: var(--step--1); color: var(--text-muted); }
.advice-card__more {
  margin-top: auto; padding-top: var(--space-3);
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-weight: 800; font-size: var(--step--1); color: var(--vl-ink-900);
}
.advice-card:hover .advice-card__more { color: var(--accent); }
.advice-card__more .i { transition: transform var(--dur-base) var(--ease-out); }
.advice-card:hover .advice-card__more .i { transform: translateX(4px); }