/* =========================================================================
   Lupéo — design system « La bonne pièce » (refonte du 19/09/2026)
   =========================================================================
   Source : dossier « exemple new site » (prototype statique, 22 écrans +
   design system). Les jetons de couleur, de police et d'espacement vivent
   dans style.css (--lp-*) ; cette feuille ne pose que des COMPOSANTS.

   Plan
     1. Socle — fond, texte, liens, focus
     2. Mise en page — conteneur, sections, entêtes de section
     3. Boutons et liens d'action
     4. Badges, pastilles de stock, compatibilité (trois états)
     5. Cartes — rayon, marque, puce modèle, carte produit (.lupeo-card)
     6. En-tête — bandeau, barre Blocksy, méga-menu, recherche, panier
     7. Pied de page — réassurance, marques, colonnes, paiements
     8. WooCommerce — boutons d'achat au vert action, ariane, champs

   Règles de la maison, rappelées ici parce qu'elles se cassent en CSS :
     · la couleur seule ne dit jamais un état : couleur + icône + mot ;
     · le vert action (#00D36B) porte un texte #06231A, jamais blanc ;
     · aucun !important, sauf pour neutraliser un !important existant
       (section 8, signalé sur place) ;
     · aucun sélecteur global sur une balise nue hors de la section 1.
   ========================================================================= */

/* ---------- 1. Socle ---------------------------------------------------- */

/* Palette Blocksy. Elle vit dans le personnalisateur (theme_mods, en BASE),
   encore aux valeurs du 07/09 : fond de page #F6F8F4, titres #4A453E, liens
   #0B996E. La doctrine du thème veut qu'on la corrige dans le
   personnalisateur ; mais une écriture en base n'est pas un déploiement de
   code. Pendant la refonte, elle est donc surchargée ICI — `html:root` pour
   passer après le <style> que Blocksy imprime plus tard dans le <head>.
   👉 À la promotion : aligner le personnalisateur (script daté) puis retirer
   ce bloc. */
html:root{
  --theme-palette-color-1:#007C75;
  --theme-palette-color-2:#005F59;
  --theme-palette-color-3:#0A0F0D;
  --theme-palette-color-4:#0A0F0D;
  --theme-palette-color-5:#E4E8E6;
  --theme-palette-color-6:#EEF1F0;
  --theme-palette-color-7:#FFFFFF;
  --theme-palette-color-8:#FFFFFF;
  --theme-text-color:#59635F;
  --theme-headings-color:#0A0F0D;
  --theme-link-initial-color:#007C75;
  --theme-link-hover-color:#00A896;
  --theme-selection-background-color:#E6F5EF;
  --theme-selection-text-color:#0A0F0D;
  --theme-button-background-initial-color:#007C75;
  --theme-button-background-hover-color:#005F59;
  --theme-button-font-weight:600;
  --theme-button-min-height:44px;
  --theme-form-field-border-focus-color:#007C75;
  --theme-form-selection-field-active-color:#007C75;
}

body{
  background-color:var(--lp-surface);
  color:var(--lp-ink-2);
  font-family:var(--lp-sans);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
:where(h1,h2,h3,h4,h5,h6){color:var(--lp-ink);font-family:var(--lp-sans)}
:where(a){color:var(--lp-green-600)}
:where(a:hover){color:var(--lp-green-500)}
:focus-visible{outline:2px solid var(--lp-green-600);outline-offset:3px}
/* Champs de formulaire : Blocksy et WooCommerce leur posent un contour transparent, plus précis
   que la règle ci-dessus — au clavier, on n'y voyait qu'un filet de bordure de 1 px. */
body :is(input,select,textarea):focus-visible{outline:2px solid var(--lp-green-600);outline-offset:2px}
::selection{background:var(--lp-green-100);color:var(--lp-ink)}

.lp-ico{display:inline-block;flex:none;vertical-align:middle}
.lp-mono{font-family:var(--lp-mono)}

/* ---------- 2. Mise en page -------------------------------------------- */
.lp-wrap{
  max-width:calc(var(--lp-wrap) + 2 * var(--lp-gouttiere));
  margin-inline:auto;
  padding-inline:var(--lp-gouttiere);
}
.lp-section{padding-block:var(--lp-section);background:var(--lp-surface)}
.lp-section--atelier{background:var(--lp-surface-2)}
.lp-section--brume{background:var(--lp-green-50)}
.lp-section + .lp-section{border-top:1px solid var(--lp-line)}

.lp-eyebrow{
  margin:0 0 14px;
  font-family:var(--lp-mono);
  font-size:11px;
  font-weight:400;
  line-height:1.4;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--lp-ink-3);
}
.lp-h1{
  margin:0;
  font-size:clamp(34px,4vw,44px);
  line-height:1.05;
  letter-spacing:-.028em;
  font-weight:700;
  color:var(--lp-ink);
}
.lp-h2{
  margin:0;
  font-size:clamp(28px,3.3vw,44px);
  line-height:1.04;
  letter-spacing:-.03em;
  font-weight:700;
  color:var(--lp-ink);
}
.lp-chapo{
  margin:14px 0 0;
  max-width:58ch;
  font-size:clamp(15.5px,1.2vw,17px);
  line-height:1.6;
  color:var(--lp-ink-2);
}

/* Entête de section : sur-titre + titre à gauche, lien « tout voir » à droite. */
.lp-entete{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px 40px;
  flex-wrap:wrap;
  margin-bottom:clamp(24px,3vw,36px);
}
.lp-entete > div{max-width:760px}
.lp-entete .lp-h2{max-width:18ch}

/* ---------- 3. Boutons et liens d'action -------------------------------- */
.lp-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  min-height:48px;
  padding:14px 24px;
  border:1px solid transparent;
  border-radius:var(--lp-r-2);
  font-family:var(--lp-sans);
  font-size:15.5px;
  font-weight:600;
  line-height:1.2;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .15s,border-color .15s,color .15s;
}
.lp-btn .lp-ico{width:18px;height:18px}
.lp-btn--primaire{background:var(--lp-green-600);color:#fff}
.lp-btn--primaire:hover,.lp-btn--primaire:focus-visible{background:var(--lp-green-800);color:#fff}
.lp-btn--action{background:var(--lp-green-400);color:var(--lp-green-400-ink);font-weight:700}
.lp-btn--action:hover,.lp-btn--action:focus-visible{background:#00BE60;color:var(--lp-green-400-ink)}
.lp-btn--contour{background:var(--lp-surface);color:var(--lp-ink);border-color:var(--lp-line-forte)}
.lp-btn--contour:hover,.lp-btn--contour:focus-visible{border-color:var(--lp-ink);color:var(--lp-ink)}
.lp-btn[aria-disabled="true"]{background:var(--lp-line);color:var(--lp-ink-3);cursor:not-allowed}

/* Lien d'action : souligné du vert action, jamais un bouton déguisé. */
.lp-lien{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding-bottom:3px;
  border-bottom:2px solid var(--lp-green-400);
  font-size:15px;
  font-weight:600;
  line-height:1.3;
  color:var(--lp-ink);
  text-decoration:none;
  white-space:nowrap;
}
.lp-lien:hover,.lp-lien:focus-visible{color:var(--lp-green-600)}
.lp-lien .lp-ico{width:17px;height:17px}

/* ---------- 4. Badges, stock, compatibilité ----------------------------- */
.lp-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 10px;
  border-radius:var(--lp-r-1);
  font-size:12.5px;
  font-weight:600;
  line-height:1.25;
  background:var(--lp-surface-2);
  color:var(--lp-ink);
}
.lp-badge .lp-ico{width:15px;height:15px}
.lp-badge--compat{background:var(--lp-green-100);color:var(--lp-green-600)}
.lp-badge--compat .lp-ico{color:var(--lp-green-450)}
.lp-badge--verifier{background:var(--lp-amber-50);color:var(--lp-amber-ink)}
.lp-badge--verifier .lp-ico{color:var(--lp-amber-500)}
.lp-badge--sombre{background:var(--lp-ink);color:#fff}
.lp-badge--ref{font-family:var(--lp-mono);font-weight:500;font-size:11.5px;letter-spacing:.04em}

.lp-stock{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:13px;
  font-weight:600;
  color:var(--lp-ink);
}
.lp-stock::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--lp-green-450)}
.lp-stock--rupture{color:var(--lp-ink-3)}
.lp-stock--rupture::before{background:var(--lp-line-forte)}

/* ---------- 5. Cartes ---------------------------------------------------- */

/* 5a. Carte de rayon (famille de pièces). */
.lp-carte-rayon{
  position:relative;
  display:flex;
  flex-direction:column;
  height:100%;
  border:1px solid var(--lp-line);
  border-radius:var(--lp-r-3);
  background:var(--lp-surface);
  overflow:hidden;
  color:var(--lp-ink);
  text-decoration:none;
  transition:box-shadow .2s,border-color .2s;
}
.lp-carte-rayon:hover,.lp-carte-rayon:focus-visible{box-shadow:var(--lp-ombre-2);border-color:#D2DAD6;color:var(--lp-ink)}
.lp-carte-rayon__media{
  position:relative;
  aspect-ratio:4/3;
  background:var(--lp-surface-2);
  border-bottom:1px solid var(--lp-line-2);
}
.lp-carte-rayon__media img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:contain;
  padding:12%;
  mix-blend-mode:multiply;
}
.lp-carte-rayon__ico{
  position:absolute;
  left:16px;bottom:-19px;
  z-index:1;
  display:grid;place-items:center;
  width:38px;height:38px;
  border-radius:var(--lp-r-2);
  background:var(--lp-surface);
  color:var(--lp-green-600);
  box-shadow:0 1px 3px rgba(10,15,13,.12),0 0 0 1px var(--lp-line-2);
}
.lp-carte-rayon__corps{display:flex;flex-direction:column;flex:1;padding:32px 20px 18px}
.lp-carte-rayon__nom{margin:0;font-size:19px;line-height:1.25;letter-spacing:-.015em;font-weight:700;color:var(--lp-ink)}
.lp-carte-rayon__texte{margin:8px 0 0;font-size:14px;line-height:1.55;color:var(--lp-ink-2)}
.lp-carte-rayon__pied{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:auto;padding-top:16px;
  border-top:1px solid var(--lp-line-2);
  font-family:var(--lp-mono);font-size:12px;color:var(--lp-ink-3);
}
.lp-carte-rayon__corps .lp-carte-rayon__texte + .lp-carte-rayon__pied,
.lp-carte-rayon__nom + .lp-carte-rayon__pied{margin-top:auto}
.lp-carte-rayon__nom + .lp-carte-rayon__pied{margin-top:18px}
.lp-carte-rayon__pied .lp-ico{width:18px;height:18px;color:var(--lp-ink)}

/* 5b. Carte de marque. */
.lp-carte-marque{
  display:flex;flex-direction:column;
  height:100%;
  padding:16px;
  border:1px solid var(--lp-line);
  border-radius:var(--lp-r-3);
  background:var(--lp-surface);
}
.lp-carte-marque__tete{display:flex;align-items:center;gap:12px;color:var(--lp-ink);text-decoration:none}
.lp-carte-marque__logo{
  display:grid;place-items:center;
  width:44px;height:44px;flex:none;
  border-radius:var(--lp-r-2);
  background:var(--lp-surface-2);
  overflow:hidden;
}
.lp-carte-marque__logo img,.lp-carte-marque__logo svg{max-width:34px;max-height:26px;width:auto;height:auto;object-fit:contain}
.lp-carte-marque__nom{display:block;font-size:18px;line-height:1.2;font-weight:700;letter-spacing:-.015em}
.lp-carte-marque__nb{display:block;margin-top:3px;font-family:var(--lp-mono);font-size:11.5px;color:var(--lp-ink-3)}
.lp-carte-marque__modeles{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 0;padding:0;list-style:none}
.lp-carte-marque__pied{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:auto;padding-top:14px;
  border-top:1px solid var(--lp-line-2);
  font-size:14.5px;font-weight:600;color:var(--lp-ink);text-decoration:none;
}
.lp-carte-marque__modeles + .lp-carte-marque__pied{margin-top:14px}
.lp-carte-marque__pied:hover,.lp-carte-marque__pied:focus-visible{color:var(--lp-green-600)}
.lp-carte-marque__pied .lp-ico{width:18px;height:18px}

/* 5c. Puce de modèle (tag cliquable). */
.lp-puce{
  display:inline-flex;align-items:baseline;gap:8px;
  padding:6px 10px;
  border-radius:var(--lp-r-1);
  background:var(--lp-green-100);
  font-size:13px;font-weight:500;line-height:1.3;
  color:var(--lp-ink);
  text-decoration:none;
}
.lp-puce:hover,.lp-puce:focus-visible{background:#D5EEE4;color:var(--lp-ink)}
.lp-puce--contour{padding:8px 13px;border:1px solid var(--lp-line);border-radius:var(--lp-r-pill);background:var(--lp-surface)}
.lp-puce--contour:hover,.lp-puce--contour:focus-visible{border-color:var(--lp-ink);background:var(--lp-surface)}
.lp-puce small{font-family:var(--lp-mono);font-size:11px;color:var(--lp-ink-3)}

/* 5d. Carte produit — LE composant unique : accueil, rayons, recherche,
   produits liés, pages « Ma trottinette » (Lupeo_Catalogue::carte).
   Le balisage est celui de la boutique ; lupeo-boutique.css le décrit avec
   des sélecteurs à deux classes. `body` en tête ici : même poids qu'eux, en
   plus précis, sans !important. Pas de bouton : toute la carte est le lien. */
body .lupeo-card{
  height:100%;
  border:1px solid var(--lp-line);
  border-radius:var(--lp-r-3);
  background:var(--lp-surface);
  box-shadow:none;
  overflow:hidden;
  transition:box-shadow .2s,border-color .2s;
}
body .lupeo-card:hover{transform:none;border-color:#D2DAD6;box-shadow:var(--lp-ombre-2)}
body .lupeo-card .lupeo-card__lien{display:flex;flex-direction:column;height:100%;color:var(--lp-ink);text-decoration:none}
body .lupeo-card .lupeo-card__lien:hover{color:var(--lp-ink)}
body .lupeo-card .lupeo-vignette{background:var(--lp-surface-2);border-bottom:1px solid var(--lp-line-2);border-radius:0}
body .lupeo-card .lupeo-vignette__img{padding:14px;mix-blend-mode:multiply}
body .lupeo-card:hover .lupeo-vignette__img{transform:none}
body .lupeo-card .lupeo-card__pastille{
  top:12px;left:12px;
  padding:4px 10px;
  border-radius:var(--lp-r-pill);
  background:var(--lp-ink);
  color:#fff;
  font-size:11.5px;font-weight:600;letter-spacing:0;text-transform:none;
}
/* Réduction : ruban en diagonale dans l'angle haut droit de la vignette (« −40 % » avec une étiquette).
   Vert Lupéo, texte blanc (5:1). Décoratif pour la souris : le lien de la carte reste cliquable dessous. */
body :is(.lupeo-card,.lp-carte-machine) .lupeo-card__remise{
  position:absolute;top:0;right:0;z-index:3;
  width:104px;height:104px;overflow:hidden;
  pointer-events:none;
}
body :is(.lupeo-card,.lp-carte-machine) .lupeo-card__remise-bande{
  position:absolute;top:21px;right:-36px;
  width:150px;padding:5px 0;
  display:flex;align-items:center;justify-content:center;gap:5px;
  transform:rotate(45deg);
  background:var(--lp-green-600);color:#fff;
  box-shadow:0 1px 3px rgba(1,60,56,.28);
  font-size:13px;font-weight:700;line-height:1.1;letter-spacing:0;white-space:nowrap;
}
body :is(.lupeo-card,.lp-carte-machine) .lupeo-card__remise-bande svg{flex:none}
@media (max-width:480px){
  body :is(.lupeo-card,.lp-carte-machine) .lupeo-card__remise{width:88px;height:88px}
  body :is(.lupeo-card,.lp-carte-machine) .lupeo-card__remise-bande{top:17px;right:-37px;width:128px;font-size:12px}
}
/* Compte à rebours d'une carte en promotion (date de fin planifiée dans WooCommerce) : pastille sombre en verre
   dépoli en bas à gauche de la vignette, chiffres à chasse fixe. Dernier jour : rouge promotion, les jours
   s'effacent. Offre échue : « Offre terminée ». Décompté par lupeo-promo.js ; la carte reste cliquable dessous. */
body :is(.lupeo-card,.lp-carte-machine) .lupeo-card__chrono{
  position:absolute;left:10px;bottom:10px;z-index:3;
  display:inline-flex;align-items:center;gap:6px;max-width:calc(100% - 20px);
  padding:5px 10px 5px 8px;border-radius:var(--lp-r-pill,999px);
  background:rgba(4,38,34,.84);color:#fff;
  -webkit-backdrop-filter:blur(8px) saturate(1.3);backdrop-filter:blur(8px) saturate(1.3);
  box-shadow:0 4px 14px rgba(1,40,36,.22),inset 0 0 0 1px rgba(255,255,255,.12);
  font-size:12px;line-height:1;white-space:nowrap;pointer-events:none;
}
body :is(.lupeo-card,.lp-carte-machine) .lupeo-card__chrono svg{flex:none;width:14px;height:14px;color:#00D36B}
body :is(.lupeo-card,.lp-carte-machine) .lupeo-card__chrono-txt{font-weight:500;color:rgba(255,255,255,.78)}
body :is(.lupeo-card,.lp-carte-machine) .lupeo-card__chrono-digits{
  display:inline-flex;align-items:baseline;gap:1px;
  font-family:var(--lp-mono);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:0;
}
body :is(.lupeo-card,.lp-carte-machine) .lupeo-card__chrono-digits b{font-weight:600}
body :is(.lupeo-card,.lp-carte-machine) .lupeo-card__chrono-digits i{font-style:normal;opacity:.55;padding:0 1px}
body :is(.lupeo-card,.lp-carte-machine) .lupeo-card__chrono-j{margin-right:6px}
body :is(.lupeo-card,.lp-carte-machine) :is(.lupeo-card__chrono-j,.lupeo-card__chrono-digits)[hidden]{display:none}
body :is(.lupeo-card,.lp-carte-machine) .lupeo-card__chrono.est-dernier-jour{background:rgba(200,16,46,.92)}
body :is(.lupeo-card,.lp-carte-machine) .lupeo-card__chrono.est-dernier-jour svg{color:#fff}
body :is(.lupeo-card,.lp-carte-machine) .lupeo-card__chrono.est-finie{background:rgba(63,97,90,.9)}
body :is(.lupeo-card,.lp-carte-machine) .lupeo-card__chrono.est-finie svg{animation:none;color:#fff}
@media (prefers-reduced-motion:no-preference){
  body :is(.lupeo-card,.lp-carte-machine) .lupeo-card__chrono.est-dernier-jour svg{animation:lupeo-chrono-pouls 1s ease-in-out infinite}
}
@keyframes lupeo-chrono-pouls{50%{opacity:.45}}
/* Prix barré des cartes : rouge promotion, plus léger que le prix payé (qui reste en gras et en noir). */
body :is(.lupeo-card,.lp-carte-machine) del{color:var(--lp-promo,#C8102E);font-weight:500;text-decoration-thickness:2px}
body :is(.lupeo-card,.lp-carte-machine) ins{text-decoration:none}
/* La marque : son logo réel, en surtitre discret du titre (plus de filet). */
body .lupeo-card .lupeo-marque,
body .lupeo-card--piece .lupeo-marque{height:auto;padding:14px 18px 0;border:0}
body .lupeo-card .lupeo-marque .lupeo-marque__logo,
body .lupeo-card--piece .lupeo-marque .lupeo-marque__logo{max-height:20px;max-width:104px}
body .lupeo-card .lupeo-marque__txt{font-family:var(--lp-mono);font-size:10.5px;font-weight:500;letter-spacing:.14em;color:var(--lp-ink-3)}
body .lupeo-card .lupeo-card__corps{gap:8px;padding:12px 18px 18px}
body .lupeo-card--piece .lupeo-card__corps{gap:8px;padding:12px 18px 18px}
body .lupeo-card .lupeo-marque + .lupeo-card__corps{padding-top:10px}
/* Bandeau de marque réservé (accueil) : même hauteur qu'avec un logo de 20 px (14 px de marge + 20 px), pour que les noms restent alignés. */
body .lupeo-card .lupeo-marque--vide{height:34px}
body .lupeo-card .lupeo-card__famille{
  font-family:var(--lp-mono);
  font-size:10.5px;
  font-weight:400;
  letter-spacing:.14em;
  line-height:1.4;
  text-transform:uppercase;
  color:var(--lp-ink-3);
}
body .lupeo-card .lupeo-puce{
  padding:4px 9px;
  border-radius:var(--lp-r-1);
  background:var(--lp-green-100);
  font-size:12px;font-weight:600;
  color:var(--lp-green-600);
}
body .lupeo-card .lupeo-card__titre,
body .lupeo-card--piece .lupeo-card__titre{
  margin:0;
  min-height:0;
  font-family:var(--lp-sans);
  font-size:16px;
  line-height:1.3;
  letter-spacing:-.01em;
  font-weight:600;
  color:var(--lp-ink);
  -webkit-line-clamp:3;
}
body .lupeo-card:hover .lupeo-card__titre{color:var(--lp-green-600)}
body .lupeo-card .lupeo-specs{gap:6px 14px;padding-top:10px;border-top:1px solid var(--lp-line-2);font-family:var(--lp-mono);font-size:12px;color:var(--lp-ink-2)}
body .lupeo-card .lupeo-specs .lupeo-i{color:var(--lp-green-600)}
/* Compatibilité : le composant à trois états du design system — couleur,
   icône ET mot, jamais une pastille seule. */
body .lupeo-card .lupeo-compat{
  display:flex;align-items:flex-start;gap:7px;
  min-height:0;
  margin:0;
  padding:7px 10px;
  border:0;
  border-radius:var(--lp-r-1);
  background:var(--lp-green-100);
  font-size:12.5px;
  line-height:1.4;
  color:var(--lp-ink);
}
body .lupeo-card .lupeo-compat .lp-ico{width:15px;height:15px;margin-top:1px;color:var(--lp-green-450)}
body .lupeo-card .lupeo-compat b{font-weight:600;color:var(--lp-ink)}
body .lupeo-card__badge{
  align-self:flex-start;
  display:inline-flex;align-items:center;gap:6px;
  margin:2px 0 0;
  padding:5px 10px;
  border-radius:var(--lp-r-1);
  font-size:12.5px;font-weight:600;line-height:1.25;
}
body .lupeo-card__badge svg{width:15px;height:15px;flex:none}
body .lupeo-card__badge--ok{background:var(--lp-green-100);color:var(--lp-green-600)}
body .lupeo-card__badge--ok svg{color:var(--lp-green-450)}
body .lupeo-card__badge--verifier{background:var(--lp-amber-50);color:var(--lp-amber-ink)}
body .lupeo-card__badge--verifier svg{color:var(--lp-amber-500)}
body .lupeo-card__badge--universel{background:var(--lp-surface-2);color:var(--lp-ink)}
/* Pied : le prix à gauche, la disponibilité à droite. */
body .lupeo-card .lupeo-card__pied{
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:6px 12px;
  margin-top:auto;
  padding-top:12px;
}
body .lupeo-card .lupeo-card__prix,
body .lupeo-card .lupeo-card__prix .amount,
body .lupeo-card .lupeo-card__prix bdi,
body .lupeo-card--piece .lupeo-card__prix,
body .lupeo-card--piece .lupeo-card__prix .amount{
  font-family:var(--lp-sans);
  font-size:20px;
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.2;
  font-variant-numeric:normal;
  color:var(--lp-ink);
}
body .lupeo-card:not(.lupeo-card--piece) .lupeo-card__prix,
body .lupeo-card:not(.lupeo-card--piece) .lupeo-card__prix .amount,
body .lupeo-card:not(.lupeo-card--piece) .lupeo-card__prix bdi{font-size:22px}
body .lupeo-card .lupeo-card__prix .woocommerce-Price-taxLabel,
body .lupeo-card .lupeo-card__prix .woocommerce-price-suffix{
  margin-left:5px;
  font-family:var(--lp-mono);
  font-size:11px;
  font-weight:400;
  letter-spacing:0;
  color:var(--lp-ink-3);
}
body .lupeo-card .lupeo-card__prix del{font-size:14px;font-weight:500;color:var(--lp-promo,#C8102E);opacity:1}
body .lupeo-card .lupeo-card__prix ins{text-decoration:none}
body .lupeo-card .lupeo-card__stock{
  display:inline-flex;align-items:center;gap:7px;
  padding:0;
  background:none;
  font-size:13px;font-weight:600;
  color:var(--lp-ink);
}
body .lupeo-card .lupeo-card__stock::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--lp-green-450)}
body .lupeo-card .lupeo-card__stock--rupture{color:var(--lp-ink-3)}
body .lupeo-card .lupeo-card__stock--rupture::before{background:var(--lp-line-forte)}
body .lupeo-card .lupeo-card__stock--commande::before{background:var(--lp-amber-500)}
body .lupeo-card .lupeo-card__cta,
body .lupeo-card--piece .lupeo-card__cta{
  padding:0 0 2px;
  border:0;
  border-bottom:2px solid var(--lp-green-400);
  border-radius:0;
  background:none;
  font-size:13.5px;font-weight:600;
  color:var(--lp-ink);
  text-align:left;
}
body .lupeo-card:hover .lupeo-card__cta{border-color:var(--lp-green-400);background:none;color:var(--lp-ink)}
/* Rupture : la carte reste lisible, l'étiquette jaune d'origine devient le
   signal « à vérifier » du design system. */
body .lupeo-tuile.outofstock .lupeo-vignette::before{background:rgba(255,255,255,.5)}
/* 5d-bis. Carte produit alignée sur le prototype « Catégorie » (cotes mesurées le
   19/09/2026 : 13 px d'arrondi, filet #EEF1F0, corps 15/16/17 px, nom 14,5 px,
   pastille de compatibilité sur UNE ligne, prix 19 px, disponibilité 12 px à point
   de 6 px). Les espacements passent des `gap` aux marges du prototype : 7 px sous la
   famille, 10 sous le nom, 13 sous la pastille. */
body .lupeo-card{border-color:var(--lp-line-2);border-radius:13px}
body .lupeo-card:hover{border-color:#C9D2CE;box-shadow:0 2px 4px rgba(10,15,13,.04),0 12px 30px rgba(10,15,13,.055)}
body .lupeo-card .lupeo-card__corps,
body .lupeo-card--piece .lupeo-card__corps{gap:0;padding:15px 16px 17px}
body .lupeo-card .lupeo-marque + .lupeo-card__corps{padding-top:10px}
body .lupeo-card .lupeo-marque,
body .lupeo-card--piece .lupeo-marque{padding:14px 16px 0}
body .lupeo-card .lupeo-card__famille{margin:0 0 7px;letter-spacing:.12em}
body .lupeo-card .lupeo-card__titre,
body .lupeo-card--piece .lupeo-card__titre{margin:0 0 10px;font-size:14.5px;line-height:1.35}
body .lupeo-card .lupeo-compat{
  align-self:flex-start;max-width:100%;margin:0 0 13px;padding:5px 9px;gap:7px;
  border-radius:6px;font-size:11.5px;font-weight:600;line-height:1.2;color:#00524D;
}
body .lupeo-card .lupeo-compat > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body .lupeo-card .lupeo-compat b{color:inherit}
body .lupeo-card .lupeo-compat .lp-ico{width:13px;height:13px;margin-top:0;flex:none}
body .lupeo-card__badge{margin:0 0 13px;padding:5px 9px;border-radius:6px;font-size:11.5px;gap:7px}
body .lupeo-card__badge svg{width:13px;height:13px}
body .lupeo-card .lupeo-card__pied{align-items:baseline;gap:6px 12px;padding-top:0}
body .lupeo-card .lupeo-card__prix,
body .lupeo-card .lupeo-card__prix .amount,
body .lupeo-card .lupeo-card__prix bdi,
body .lupeo-card--piece .lupeo-card__prix,
body .lupeo-card--piece .lupeo-card__prix .amount{font-size:19px}
body .lupeo-card .lupeo-card__prix .woocommerce-Price-taxLabel,
body .lupeo-card .lupeo-card__prix .woocommerce-price-suffix{font-family:var(--lp-sans)}
body .lupeo-card .lupeo-card__stock{gap:6px;font-size:12px;color:#00524D}
body .lupeo-card .lupeo-card__stock::before{width:6px;height:6px;background:#00B85D}
body .lupeo-card .lupeo-card__stock--rupture{color:var(--lp-ink-3)}
body .lupeo-card .lupeo-card__stock--rupture::before{background:var(--lp-line-forte)}
body .lupeo-card .lupeo-card__stock--commande{color:var(--lp-amber-ink)}
body .lupeo-card .lupeo-card__stock--commande::before{background:var(--lp-amber-500)}

@media (max-width:560px){
  body .lupeo-card .lupeo-card__pied{flex-direction:row}
  body .lupeo-card .lupeo-card__titre{font-size:15.5px}
}

/* 5e. Carte de machine (trottinette complète). */
.lp-carte-machine{
  display:flex;flex-direction:column;height:100%;
  border:1px solid var(--lp-line);
  border-radius:var(--lp-r-3);
  background:var(--lp-surface);
  overflow:hidden;
  color:var(--lp-ink);
  text-decoration:none;
  transition:box-shadow .2s,border-color .2s;
}
.lp-carte-machine:hover,.lp-carte-machine:focus-visible{box-shadow:var(--lp-ombre-2);border-color:#D2DAD6;color:var(--lp-ink)}
.lp-carte-machine__media{position:relative;aspect-ratio:16/10;background:var(--lp-surface-2)}
.lp-carte-machine__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:6%;mix-blend-mode:multiply}
.lp-carte-machine__corps{display:flex;flex-direction:column;flex:1;padding:18px 20px 20px}
.lp-carte-machine__marque{font-family:var(--lp-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--lp-ink-3)}
.lp-carte-machine__nom{margin:6px 0 0;font-size:20px;line-height:1.2;letter-spacing:-.018em;font-weight:700;color:var(--lp-ink)}
.lp-carte-machine__specs{display:flex;flex-wrap:wrap;gap:4px 16px;margin:12px 0 0;padding:0;list-style:none;font-family:var(--lp-mono);font-size:12px;color:var(--lp-ink-2)}
.lp-carte-machine__pied{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:16px;border-top:1px solid var(--lp-line-2)}
.lp-carte-machine__specs + .lp-carte-machine__pied,.lp-carte-machine__nom + .lp-carte-machine__pied{margin-top:18px}
.lp-carte-machine__prix{font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--lp-ink)}
.lp-carte-machine__prix .woocommerce-price-suffix{font-family:var(--lp-mono);font-size:11px;font-weight:400;color:var(--lp-ink-3)}
.lp-carte-machine__voir{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600}
.lp-carte-machine__voir .lp-ico{width:17px;height:17px}

/* 5f. Carte éditoriale (article du blog) — accueil, blog, archives, recherche,
   articles liés : UN composant (Lupeo_Catalogue::carte_article). Une vraie
   image (16:10 et 13 px d'arrondi comme le prototype « Guides » ; la vignette de la médiathèque), puis la rubrique et la
   durée de lecture en petit, le titre, un court extrait. Toute la carte est le
   lien. Le cadre neutre (sans image) reste une exception. */
.lp-guide-carte{margin:0;min-width:0}
.lp-guide{display:flex;flex-direction:column;height:100%;color:var(--lp-ink);text-decoration:none;border-radius:13px}
.lp-guide__media{
  position:relative;display:block;
  aspect-ratio:16/10;
  border-radius:13px;
  background:var(--lp-surface-2);
  overflow:hidden;
}
.lp-guide__media::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(10,15,13,.08);pointer-events:none}
.lp-guide__img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.6,.2,1)}
.lp-guide:hover .lp-guide__img,.lp-guide:focus-visible .lp-guide__img{transform:scale(1.035)}
/* Sans image : le mot Lupéo sur vert brume — jamais un pictogramme de document. */
.lp-guide__media--vide{background:var(--lp-green-50) url("logo-lupeo-mot-vert.svg") center/34% auto no-repeat}
.lp-guide__meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-top:16px;font-family:var(--lp-mono);font-size:10.5px;letter-spacing:.14em;line-height:normal;text-transform:uppercase}
.lp-guide__rubrique{color:var(--lp-ink-3);font-weight:400}
.lp-guide__duree{color:var(--lp-ink-3)}
.lp-guide__rubrique + .lp-guide__duree::before{content:"";display:inline-block;width:3px;height:3px;margin:0 10px 2px 0;border-radius:50%;background:#C9D2CE;vertical-align:middle}
.lp-guide__titre{margin:10px 0 9px;font-size:19px;line-height:1.24;letter-spacing:-.02em;font-weight:700;color:var(--lp-ink);text-wrap:pretty}
.lp-guide:hover .lp-guide__titre{color:var(--lp-green-600)}
.lp-guide__chapo{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
  font-size:14.5px;line-height:1.6;color:var(--lp-ink-2);
}
.lp-guide:focus-visible{outline:2px solid var(--lp-green-600);outline-offset:5px}
@media (prefers-reduced-motion:reduce){.lp-guide__img{transition:none}.lp-guide:hover .lp-guide__img,.lp-guide:focus-visible .lp-guide__img{transform:none}}

/* Grilles communes. */
.lp-grille{margin:0;padding:0;list-style:none;display:grid;gap:clamp(14px,1.6vw,20px);grid-template-columns:repeat(4,minmax(0,1fr))}
.lp-grille--3{grid-template-columns:repeat(3,minmax(0,1fr))}
/* Grilles de 4 : 4 puis 2 colonnes — jamais 3, qui laisse des orphelines sur 8 cartes. */
@media (max-width:860px){.lp-grille,.lp-grille--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){
  .lp-grille--3{grid-template-columns:minmax(0,1fr)}
  .lp-carte-rayon__texte{display:none}
  .lp-carte-rayon__corps{padding:28px 14px 14px}
  .lp-carte-rayon__nom{font-size:16.5px}
}

/* ---------- 6. En-tête ---------------------------------------------------- */

/* 6a. Bandeau du haut — vert profond, promesses à gauche, aide à droite. */
/* « body » : le bandeau imprime son propre <style> dans le <body>, après
   cette feuille ; à spécificité égale il gagnerait. */
body .lupeo-annonce{
  justify-content:space-between;
  gap:10px 26px;
  min-height:38px;
  padding:8px var(--lp-gouttiere);
  background:var(--lp-green-900);
  color:var(--lp-green-texte-900);
  font-size:12.5px;
  font-weight:400;
}
.lupeo-annonce__promesses{display:flex;align-items:center;gap:8px 26px;flex-wrap:wrap}
.lupeo-annonce__item{gap:8px}
.lupeo-annonce .lupeo-i,.lupeo-annonce .lp-ico{width:15px;height:15px;color:var(--lp-green-lien-900)}
.lupeo-annonce__aide{color:var(--lp-green-lien-900);font-weight:500;text-decoration:none;white-space:nowrap}
.lupeo-annonce__aide:hover,.lupeo-annonce__aide:focus-visible{color:#fff}
@media (min-width:1841px){
  body .lupeo-annonce{padding-inline:calc((100vw - 1840px) / 2 + 44px)}
}
@media (max-width:860px){
  body .lupeo-annonce{justify-content:center}
  .lupeo-annonce__aide{display:none}
}

/* 6b. Barre principale (Blocksy « type-1 »). */
/* `#header` en tête : le <style> dynamique de Blocksy, imprimé APRÈS cette
   feuille, pose `--height:120px` avec la même spécificité sans l'identifiant
   — il gagnait, et la barre faisait 120 px au lieu de 74 (relevé au banc du
   19/09 : panneau du méga-menu décalé de 46 px vers le bas). */
#header[data-id][data-id] [data-row*="middle"],
[data-header*="type-1"] .ct-header [data-row*="middle"]{
  --height:74px;
  border-bottom:1px solid var(--lp-line);
  background-color:var(--lp-surface);
}
#header{position:sticky;top:0;z-index:60}
#header [data-row*="middle"] > .ct-container{
  width:100%;
  max-width:var(--lp-cadre,1840px);
  padding-inline:clamp(20px,3vw,44px);
}
#header [data-device="desktop"] [data-column="end"]{justify-content:flex-start}
/* ⚠️ Espacements en MARGES, jamais en `gap`. Le menu adaptatif de Blocksy
   (repli des entrées en trop dans « Plus », 892.*.js) calcule la place du
   menu en retranchant la largeur ET les marges du logo, de la recherche et
   du panier — il ignore `gap`. Avec des `gap`, il croyait que tout tenait :
   à 1024 px le panier sortait de l'écran (banc du 19/09, menu de prod). */
#header [data-device="desktop"] [data-column="end"] > [data-items]{flex:1;justify-content:flex-start;gap:0}
#header [data-device="desktop"] [data-column="end"] > [data-items] > [data-id]{margin-left:clamp(10px,1.4vw,20px);margin-right:0}
#header [data-device="desktop"] [data-column="end"] > [data-items] > [data-id^="menu"]{margin-left:clamp(18px,3vw,44px)}
#header .site-logo-container img{height:30px;width:auto}
#header [data-device="mobile"] .site-logo-container img{height:25px}

/* Liens du menu : casse normale, 14,5 px, encre ; survol au vert Lupéo. */
#header .header-menu-1 > ul > li > .ct-menu-link{
  padding-inline:2px;
  font-family:var(--lp-sans);
  font-size:14.5px;
  font-weight:500;
  letter-spacing:0;
  text-transform:none;
  color:var(--lp-ink);
}
#header .header-menu-1 > ul{gap:clamp(10px,1.4vw,24px)}
#header .header-menu-1 > ul > li > .ct-menu-link:hover,
#header .header-menu-1 > ul > li.current-menu-item > .ct-menu-link,
#header .header-menu-1 > ul > li.ct-active > .ct-menu-link{color:var(--lp-green-600)}

/* « Trouver mes pièces » : la pastille vert pâle du prototype. Reconnue par
   sa classe (posée par Lupeo_Menu) ou, à défaut, par son adresse. */
#header .header-menu-1 > ul > li.lupeo-menu-cta > .ct-menu-link,
#header .header-menu-1 > ul > li > .ct-menu-link[href$="/ma-trottinette/"]{
  height:auto;
  padding:8px 12px;
  border:0;
  border-radius:7px;
  background:var(--lp-green-100);
  font-weight:600;
  color:var(--lp-ink);
  box-shadow:none;
}
#header .header-menu-1 > ul > li.lupeo-menu-cta > .ct-menu-link:hover,
#header .header-menu-1 > ul > li > .ct-menu-link[href$="/ma-trottinette/"]:hover{background:#D5EEE4;color:var(--lp-ink)}
/* Place du bouton : le prototype le met en tête, juste après le logo ; le module l'envoie en
   dernier (`order:99`). Il était déjà le premier élément du menu dans le balisage — seul l'ordre
   visuel change, donc le repli « Plus » de Blocksy (qui retire les derniers éléments) ne bouge pas. */
#header .header-menu-1 > ul > li.lupeo-menu-cta{order:-1;margin-left:0}
#header .header-menu-1 > ul > li.lupeo-menu-cta .lupeo-i{width:16px;height:16px;flex:none}
#header .header-menu-1 > ul > li > .ct-menu-link[href$="/ma-trottinette/"]::before{
  content:"";
  width:16px;height:16px;margin-right:8px;flex:none;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.8'/%3E%3Cpath d='m8.4 12.2 2.5 2.5 4.8-5.2'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.8'/%3E%3Cpath d='m8.4 12.2 2.5 2.5 4.8-5.2'/%3E%3C/svg%3E") center/contain no-repeat;
}
#header .header-menu-1 > ul > li.lupeo-menu-cta > .ct-menu-link[href$="/ma-trottinette/"]::before{content:none}

/* Méga-menu (Lupeo_Menu) : panneau blanc, tuiles d'icône, compteurs mono. */
#header .header-menu-1 > ul > li.lupeo-menu-mega > .sub-menu{
  /* En-tête collant : sur un écran court, le bas du panneau ne peut pas être
     atteint en faisant défiler la page. Il défile donc lui-même — jamais
     coupé. Sans effet dès que l'écran est assez haut. */
  max-height:calc(100vh - 130px);
  overflow-y:auto;
  overscroll-behavior:contain;
  border:1px solid var(--lp-line);
  border-radius:0 0 var(--lp-r-4) var(--lp-r-4);
  background:var(--lp-surface);
  box-shadow:0 24px 48px -24px rgba(10,15,13,.18);
}
#header .header-menu-1 > ul > li.lupeo-menu-mega > .sub-menu .ct-menu-link{
  border-radius:9px;
  font-size:14px;font-weight:500;letter-spacing:0;text-transform:none;
  color:var(--lp-ink);
}
#header .header-menu-1 > ul > li.lupeo-menu-mega > .sub-menu .ct-menu-link:hover{background:var(--lp-green-50);color:var(--lp-green-600)}
#header .header-menu-1 > ul > li.lupeo-menu-mega > .sub-menu .lupeo-i{color:var(--lp-green-600)}
/* Encart « Vous cherchez pour une machine précise ? » : vert profond, texte
   clair, bouton au vert action (le prototype). Les couleurs de lupeo-menu.css
   (texte encre, fond vert pâle) sont reprises une à une : un fond sombre sans
   elles rendait le titre illisible (constaté au banc du 19/09). */
#header .header-menu-1 > ul > li.lupeo-menu-mega > .sub-menu > li.lupeo-menu-encart > .ct-menu-link{
  background:var(--lp-green-900);
  border-radius:var(--lp-r-4);
  --theme-link-initial-color:#fff;
  --theme-link-hover-color:#fff;
}
#header .header-menu-1 > ul > li.lupeo-menu-mega > .sub-menu > li.lupeo-menu-encart > .ct-menu-link:hover{background:var(--lp-green-900)}
#header .header-menu-1 .lupeo-menu-encart .lupeo-menu-nom{color:#fff;font-family:var(--lp-sans);font-size:17px;line-height:1.25}
#header .header-menu-1 .lupeo-menu-encart .lupeo-menu-texte{color:#A9D6CF;font-size:14px}
#header .header-menu-1 .lupeo-menu-encart .lupeo-menu-bouton{background:var(--lp-green-400);color:var(--lp-green-400-ink);border-radius:var(--lp-r-2);font-weight:700}
#header .header-menu-1 .lupeo-menu-encart .lupeo-menu-bouton .lupeo-i{padding:0;background:none;width:19px;height:19px}

/* Tuiles d'icône et compteurs monospace, comme le panneau du prototype. */
#header .header-menu-1 > ul > li.lupeo-menu-mega > .sub-menu .ct-menu-link > .lupeo-i{
  box-sizing:border-box;
  width:34px;height:34px;padding:7px;
  border-radius:var(--lp-r-2);
  background:var(--lp-surface-2);
  color:var(--lp-green-600);
}
#header .header-menu-1 > ul > li.lupeo-menu-mega > .sub-menu .ct-menu-link:hover > .lupeo-i{background:#fff}
#header .header-menu-1 .lupeo-menu-compte{font-family:var(--lp-mono);font-size:11px;color:var(--lp-ink-3)}
#header .header-menu-1 > ul > li.lupeo-menu-mega > .sub-menu .lupeo-menu-tout .ct-menu-link{
  padding-left:10px;
  font-weight:600;
  color:var(--lp-ink);
  text-decoration:underline;
  text-decoration-color:var(--lp-green-400);
  text-decoration-thickness:2px;
  text-underline-offset:5px;
}

/* Le <nav> DOIT pouvoir rétrécir (flex-shrink, min-width:0) : Blocksy ne
   charge son repli « Plus » (892.*.js) que s'il constate que la liste du menu
   déborde sur un voisin. Un `flex:none` posé ici le 19/09 rendait ce
   débordement invisible — le module ne se chargeait pas et, à 1024 px, le
   panier sortait de l'écran. La recherche, elle, part d'une base nulle
   (flex-basis 0) : elle ne prend que la place que le menu laisse libre, et
   ne le comprime jamais tant qu'il tient. */
#header [data-device="desktop"] .header-menu-1{flex:0 1 auto;min-width:0}

/* Sous-menus SIMPLES de Blocksy (dont « Plus », où Blocksy replie les
   entrées qui ne tiennent pas) : le même panneau blanc que le méga-menu, au
   lieu du panneau noir natif. Les méga-menus (li.lupeo-menu-mega) gardent
   leurs propres règles ci-dessus. */
#header .header-menu-1 .sub-menu{
  --theme-link-initial-color:var(--lp-ink);
  --theme-link-hover-color:var(--lp-green-600);
  --dropdown-divider:1px solid var(--lp-line-2);
}
#header .header-menu-1 > ul > li:not(.lupeo-menu-mega) .sub-menu{
  border:1px solid var(--lp-line);
  border-radius:var(--lp-r-3);
  background:var(--lp-surface);
  box-shadow:0 24px 48px -24px rgba(10,15,13,.18);
}
#header .header-menu-1 > ul > li:not(.lupeo-menu-mega) .sub-menu .ct-menu-link{
  font-size:14px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--lp-ink);
}
#header .header-menu-1 > ul > li:not(.lupeo-menu-mega) .sub-menu .ct-menu-link:hover{background:var(--lp-green-50);color:var(--lp-green-600)}

/* Recherche : l'icône de Blocksy devient un champ (elle ouvre la même modale). */
#header [data-device="desktop"] .ct-header-search{
  flex:1 1 0;
  min-width:150px;
  max-width:440px;
  justify-content:flex-start;
  gap:10px;
  height:auto;
  padding:11px 14px;
  border:1px solid var(--lp-line-forte);
  border-radius:var(--lp-r-2);
  background:var(--lp-surface);
  color:var(--lp-ink-3);
  cursor:text;
  --theme-icon-color:var(--lp-ink-3);
}
#header [data-device="desktop"] .ct-header-search::after{
  content:"Rechercher une pièce, une marque ou un modèle…";
  overflow:hidden;
  font-size:14px;
  font-weight:400;
  white-space:nowrap;
  text-overflow:ellipsis;
  color:var(--lp-ink-3);
}
#header [data-device="desktop"] .ct-header-search:hover{border-color:var(--lp-ink)}
#header [data-device="desktop"] .ct-header-search svg{width:17px;height:17px;flex:none}

/* Panier : icône seule, pastille de compte au vert stock. */
#header .ct-header-cart .ct-label{display:none}
#header .ct-header-cart .ct-cart-item{
  display:grid;place-items:center;
  width:44px;height:44px;
  border-radius:var(--lp-r-2);
  --theme-icon-color:var(--lp-ink);
}
#header .ct-header-cart .ct-cart-item:hover{background:#F2F4F3}
#header .ct-dynamic-count-cart{
  min-width:17px;height:17px;
  padding:0 4px;
  border-radius:var(--lp-r-pill);
  background:var(--lp-green-450);
  color:#052C1D;
  font-size:10.5px;font-weight:700;
}
#header .ct-dynamic-count-cart[data-count="0"]{display:none}
/* Cibles tactiles de 44 × 44 px au mobile (règle du design system) : la
   loupe et le bouton menu natifs de Blocksy ne mesuraient que 15 et 18 px.
   Seule la zone cliquable grandit ; l'icône garde sa taille. */
#header [data-device="mobile"] .ct-header-search,
#header [data-device="mobile"] .ct-header-trigger{
  --theme-icon-color:var(--lp-ink);
  display:inline-grid;
  place-items:center;
  box-sizing:border-box;
  min-width:44px;
  min-height:44px;
  border-radius:var(--lp-r-2);
}
#header [data-device="mobile"] .ct-header-search:hover,
#header [data-device="mobile"] .ct-header-trigger:hover{background:#F2F4F3}

/* Entre 1000 et 1240 px, le menu complet et le champ ne tiennent pas
   ensemble : le champ redevient une loupe. */
@media (max-width:1240px){
  #header [data-device="desktop"] .ct-header-search{flex:0 0 auto;min-width:0;padding:11px;border-color:transparent}
  #header [data-device="desktop"] .ct-header-search::after{content:none}
  #header [data-device="desktop"] .ct-header-search:hover{background:#F2F4F3;border-color:transparent}
}

/* 6c. Panneau mobile : le vert profond du prototype pour l'accès modèle. */
#offcanvas .mobile-menu > ul > li > .ct-menu-link[href$="/ma-trottinette/"],
#offcanvas .mobile-menu > ul > li.lupeo-menu-cta > .ct-menu-link{background:var(--lp-green-900);color:#fff;border-radius:11px}

/* Boutons de dépliage des sous-menus du tiroir : 25 px natifs → 44 px. */
#offcanvas .mobile-menu .ct-toggle-dropdown-mobile{min-width:44px;min-height:44px;justify-content:center}

/* 6d. Mobile — barre, champ de recherche et tiroir, d'après le prototype « Mobile » (écrans 01 et 02).
   Cotes mesurées sur le prototype : barre de 62 px (boutons de 44, marges de 6), champ de 47 px à
   9 px d'arrondi, carte d'accès de 69 px à 11 px, lignes de 71 px (tuile de 38 px, intitulé 16/600,
   dessous en mono 10,5 px), bas de tiroir en lignes de 46 px. */

/* Barre : menu à gauche, puis le logo ; loupe et panier à droite. Les deux colonnes de Blocksy
   disparaissent de la mise en page (`display:contents`) et les quatre éléments se rangent par
   `order` : le balisage et le comportement du thème ne bougent pas. */
#header[data-id][data-id] [data-device="mobile"] [data-row*="middle"]{--height:62px}
#header [data-device="mobile"] [data-row*="middle"] > .ct-container{display:flex;align-items:center;padding-inline:6px}
#header [data-device="mobile"] [data-column],
#header [data-device="mobile"] [data-column] > [data-items]{display:contents}
#header [data-device="mobile"] .ct-header-trigger{order:-2}
#header [data-device="mobile"] .site-branding{order:-1;margin-left:2px}
#header [data-device="mobile"] .ct-header-search{order:1;margin-left:auto}
#header [data-device="mobile"] .ct-header-cart{order:2}

/* Champ de recherche (accueil et tiroir) : la recherche native, en champ plein. */
.lp-mrech-bande{display:none}
.lp-mrech{margin:0}
body .lp-mrech__champ{display:flex;align-items:center;gap:10px;box-sizing:border-box;min-height:47px;padding:13px 14px;border:1px solid var(--lp-line-forte);border-radius:9px;background:var(--lp-surface);color:var(--lp-ink-3);transition:border-color .15s,box-shadow .15s}
body .lp-mrech__champ:focus-within{border-color:var(--lp-green-600);box-shadow:0 0 0 3px rgba(0,124,117,.18)}
body .lp-mrech__ico{flex:none;width:19px;height:19px}
body .lp-mrech input[type="search"]{flex:1;min-width:0;width:auto;height:auto;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;outline:0;font:400 14.5px/1.3 var(--lp-sans);color:var(--lp-ink);-webkit-appearance:none;appearance:none}
body .lp-mrech input[type="search"]::placeholder{color:var(--lp-ink-3);opacity:1}
body .lp-mrech input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none}

@media (max-width:999.98px){
  .lp-mrech-bande{display:block;padding:14px 16px}

  /* Tiroir : plein écran, entête = logo + croix à la hauteur de la barre. */
  [data-header] #offcanvas.ct-panel{--side-panel-width:100vw}
  [data-header] #offcanvas.ct-panel .ct-panel-actions{box-sizing:border-box;min-height:62px;padding:6px 6px 12px 16px;align-items:center;border-bottom:0}
  #offcanvas .ct-panel-actions::before{content:"";flex:none;width:60px;height:25px;margin-right:auto;background:url("logo-lupeo-mot-vert.svg") left center/contain no-repeat}
  #offcanvas .ct-toggle-close{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  [data-header] #offcanvas.ct-panel .ct-panel-content-inner{padding:0 16px 16px}
  #offcanvas .lp-mrech{align-self:stretch;width:100%;box-sizing:border-box;padding:2px 0 16px}

  /* Liste : flex, pour ranger « Accueil », « Mon compte » et « SAV » au bas sans toucher au menu. */
  #offcanvas .mobile-menu > ul{display:flex;flex-direction:column}
  #offcanvas .mobile-menu > ul > li{border-bottom:1px solid var(--lp-line-2)}

  /* Carte d'accès : titre, ce qu'elle fait, flèche. */
  #offcanvas .mobile-menu > ul > li.lupeo-menu-cta{order:-1;padding:0 0 16px;border-bottom:0}
  #offcanvas .mobile-menu > ul > li.lupeo-menu-cta > .ct-menu-link{
    justify-content:flex-start;gap:14px;padding:16px;text-align:left;
    border-radius:11px;background:var(--lp-green-900);color:#fff;font-weight:400;letter-spacing:0;
  }
  #offcanvas .mobile-menu > ul > li.lupeo-menu-cta > .ct-menu-link .lupeo-i:first-child{flex:none;width:24px;height:24px;color:var(--lp-green-400)}
  #offcanvas .mobile-menu > ul > li.lupeo-menu-cta > .ct-menu-link .lupeo-i:last-child{flex:none;width:18px;height:18px;color:#fff}
  #offcanvas .mobile-menu > ul > li.lupeo-menu-cta > .ct-menu-link .lupeo-menu-texte-bloc{flex:1;min-width:0;gap:3px}
  #offcanvas .mobile-menu > ul > li.lupeo-menu-cta > .ct-menu-link .lupeo-menu-nom{font:700 16px/1.25 var(--lp-sans);color:#fff}
  #offcanvas .mobile-menu > ul > li.lupeo-menu-cta > .ct-menu-link .lupeo-menu-sous{font:400 12.5px/1.25 var(--lp-sans);color:#A9D6CF}

  /* Lignes : tuile d'icône, intitulé, dessous en mono. */
  #offcanvas .mobile-menu > ul > li:not(.lupeo-menu-cta):not(.lupeo-menu-mobile) > .ct-menu-link,
  #offcanvas .mobile-menu > ul > li:not(.lupeo-menu-cta):not(.lupeo-menu-mobile) > .ct-sub-menu-parent > .ct-menu-link,
  #offcanvas .mobile-menu > ul > li.lupeo-menu-guides > .ct-menu-link{
    display:flex;align-items:center;gap:14px;box-sizing:border-box;min-height:71px;padding:16px 2px;
    font:600 16px/1.25 var(--lp-sans);letter-spacing:0;color:var(--lp-ink);
  }
  #offcanvas .mobile-menu > ul > li:not(.lupeo-menu-cta) > .ct-menu-link > .lp-ico,
  #offcanvas .mobile-menu > ul > li:not(.lupeo-menu-cta) > .ct-sub-menu-parent > .ct-menu-link > .lp-ico{
    flex:none;box-sizing:content-box;width:22px;height:22px;padding:8px;border-radius:9px;background:var(--lp-surface-2);color:var(--lp-ink);
  }
  #offcanvas .lupeo-menu-texte-bloc{display:flex;flex-direction:column;gap:3px;min-width:0}
  #offcanvas .mobile-menu > ul > li > .ct-menu-link .lupeo-menu-nom,
  #offcanvas .mobile-menu > ul > li > .ct-sub-menu-parent > .ct-menu-link .lupeo-menu-nom{font:600 16px/1.25 var(--lp-sans);letter-spacing:0;color:var(--lp-ink)}
  #offcanvas .mobile-menu > ul > li > .ct-menu-link .lupeo-menu-sous,
  #offcanvas .mobile-menu > ul > li > .ct-sub-menu-parent > .ct-menu-link .lupeo-menu-sous{font:400 10.5px/1.3 var(--lp-mono);letter-spacing:0;color:var(--lp-ink-3)}
  /* Une ligne qui mène quelque part (et non qui déplie) porte le chevron du prototype. */
  #offcanvas .mobile-menu > ul > li:not(.menu-item-has-children):not(.lupeo-menu-cta):not(.lupeo-menu-mobile) > .ct-menu-link::after,
  #offcanvas .mobile-menu > ul > li.lupeo-menu-guides > .ct-menu-link::after{
    content:"";flex:none;width:17px;height:17px;margin-left:auto;background:var(--lp-ink-3);
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8.8 4.8 7 7.2-7 7.2'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8.8 4.8 7 7.2-7 7.2'/%3E%3C/svg%3E") center/contain no-repeat;
  }
  #offcanvas .mobile-menu .ct-toggle-dropdown-mobile{padding:0 2px 0 6px;color:var(--lp-ink-3)}

  /* Bas du tiroir : compte, accueil et SAV — lignes de 46 px, pictogramme de 20 px. */
  #offcanvas .mobile-menu > ul > li.lupeo-menu-mobile:not(.lupeo-menu-guides){order:90;border-bottom:0}
  #offcanvas .mobile-menu > ul > li.lupeo-menu-compte-lien.lupeo-menu-mobile:not(.lupeo-menu-guides){order:89;margin-top:22px;border-top:1px solid var(--lp-line-2)}
  #offcanvas .mobile-menu > ul > li.lupeo-menu-compte-lien.lupeo-menu-mobile:not(.lupeo-menu-guides):first-child{margin-top:0}
  #offcanvas .mobile-menu > ul > li.lupeo-menu-mobile:not(.lupeo-menu-guides) > .ct-menu-link{
    display:flex;align-items:center;gap:12px;box-sizing:border-box;min-height:46px;padding:13px 2px;
    font:400 15px/1.3 var(--lp-sans);letter-spacing:0;color:var(--lp-ink);
  }
  #offcanvas .mobile-menu > ul > li.lupeo-menu-mobile:not(.lupeo-menu-guides) > .ct-menu-link .lupeo-menu-nom{font:400 15px/1.3 var(--lp-sans);color:var(--lp-ink)}
  #offcanvas .mobile-menu > ul > li.lupeo-menu-mobile:not(.lupeo-menu-guides) > .ct-menu-link::before{
    content:"";flex:none;width:20px;height:20px;background:var(--lp-ink-2);
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11.2 12 4l8 7.2V19a1.4 1.4 0 0 1-1.4 1.4H15v-5.2H9v5.2H5.4A1.4 1.4 0 0 1 4 19z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11.2 12 4l8 7.2V19a1.4 1.4 0 0 1-1.4 1.4H15v-5.2H9v5.2H5.4A1.4 1.4 0 0 1 4 19z'/%3E%3C/svg%3E") center/contain no-repeat;
  }
  #offcanvas .mobile-menu > ul > li.lupeo-menu-compte-lien.lupeo-menu-mobile:not(.lupeo-menu-guides) > .ct-menu-link::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.4' r='3.8'/%3E%3Cpath d='M4.6 20c1.4-3.8 4.2-5.8 7.4-5.8s6 2 7.4 5.8'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.4' r='3.8'/%3E%3Cpath d='M4.6 20c1.4-3.8 4.2-5.8 7.4-5.8s6 2 7.4 5.8'/%3E%3C/svg%3E")}
  #offcanvas .mobile-menu > ul > li.lupeo-menu-mobile:not(.lupeo-menu-guides) > .ct-menu-link[href$="/sav/"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.8a8 8 0 0 1 16 0'/%3E%3Crect x='2.6' y='12.4' width='4' height='6.4' rx='1.8'/%3E%3Crect x='17.4' y='12.4' width='4' height='6.4' rx='1.8'/%3E%3Cpath d='M19.4 18.8v.6a2.2 2.2 0 0 1-2.2 2.2H14'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.8a8 8 0 0 1 16 0'/%3E%3Crect x='2.6' y='12.4' width='4' height='6.4' rx='1.8'/%3E%3Crect x='17.4' y='12.4' width='4' height='6.4' rx='1.8'/%3E%3Cpath d='M19.4 18.8v.6a2.2 2.2 0 0 1-2.2 2.2H14'/%3E%3C/svg%3E")}
}

/* ---------- 7. Pied de page ------------------------------------------------ */
.lp-reassurance{
  border-block:1px solid var(--lp-line);
  background:var(--lp-green-50);
}
.lp-reassurance ul{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:10px 34px;
  max-width:var(--lp-cadre,1840px);margin:0 auto;padding:16px var(--lp-gouttiere);
  list-style:none;
}
.lp-reassurance li{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;color:var(--lp-green-600)}
.lp-reassurance .lp-ico{width:18px;height:18px}

/* 7b. Bandeau défilant des marques (Lupeo_Pied::bande_marques). Toutes les
   marques du parcours « Ma trottinette », leur logo quand il existe, leur nom
   sinon. Défilement CSS pur, lent (≈ 38 px/s), boucle sans coupure (la piste
   est faite de copies de la liste), pause au survol, au focus et par le bouton.
   Sans animation demandée, la piste devient une rangée qu'on fait défiler à la
   main. Les logos sont cadrés sur leur boîte dessinée : même présence pour tous. */
.lp-marquee{position:relative;border-bottom:1px solid var(--lp-line);background:var(--lp-surface);overflow:hidden}
.lp-marquee__vue{
  overflow:hidden;
  padding-block:clamp(22px,2.6vw,32px);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
}
.lp-marquee__piste{display:flex;width:max-content;animation:lp-defile var(--lp-duree,90s) linear infinite;will-change:transform}
.lp-marquee__liste{display:flex;flex:none;align-items:center;gap:64px;margin:0;padding:0 64px 0 0;list-style:none}
.lp-marquee__liste li{flex:none;margin:0}
@keyframes lp-defile{to{transform:translate3d(calc(-100% / var(--lp-copies,2)),0,0)}}
.lp-marquee__marque{
  display:flex;align-items:center;justify-content:center;
  min-height:44px;padding:2px;
  border-radius:6px;
  color:var(--lp-ink);text-decoration:none;
  opacity:.58;
  transition:opacity .25s ease;
}
.lp-marquee__marque:hover,.lp-marquee__marque:focus-visible{opacity:1;color:var(--lp-ink)}
/* Nom en lettres (marque sans logo) : c'est du TEXTE, il doit tenir le contraste AA (axe : 2,5:1 à 58 % d'opacité) — plein, en gris de texte secondaire. */
.lp-marquee__marque--texte{opacity:1;color:var(--lp-ink-2)}
.lp-marquee__marque--texte:hover,.lp-marquee__marque--texte:focus-visible{color:var(--lp-ink)}
.lp-marquee__marque:focus-visible{outline:2px solid var(--lp-green-600);outline-offset:6px}
.lp-marquee__logo{position:relative;display:block;flex:none;overflow:hidden}
.lp-marquee__logo img{position:absolute;display:block;max-width:none;height:auto;mix-blend-mode:multiply}
.lp-marquee__logo--simple{overflow:visible}
.lp-marquee__logo--simple img{position:static;width:auto;max-width:150px;height:calc(34px * var(--lp-e,1))}
.lp-marquee__nom{font-size:15px;font-weight:700;letter-spacing:.09em;line-height:1.2;text-transform:uppercase;white-space:nowrap}
@media (hover:hover){.lp-marquee:hover .lp-marquee__piste{animation-play-state:paused}}
.lp-marquee:focus-within .lp-marquee__piste,.lp-marquee.is-pause .lp-marquee__piste{animation-play-state:paused}
.lp-marquee__pause{
  position:absolute;right:var(--lp-gouttiere);top:50%;z-index:2;
  display:grid;place-items:center;
  width:32px;height:32px;margin-top:-16px;padding:0;
  border:1px solid var(--lp-line);border-radius:50%;
  background:var(--lp-surface);color:var(--lp-ink-2);
  cursor:pointer;
}
.lp-marquee__pause::after{content:"";position:absolute;inset:-6px}
.lp-marquee__pause:hover,.lp-marquee__pause:focus-visible{border-color:var(--lp-ink);color:var(--lp-ink)}
.lp-marquee__pause:focus-visible{outline:2px solid var(--lp-green-600);outline-offset:3px}
.lp-marquee__ico--lire,.lp-marquee.is-pause .lp-marquee__ico--pause{display:none}
.lp-marquee.is-pause .lp-marquee__ico--lire{display:block}
@media (max-width:640px){
  .lp-marquee{--lp-e:1.18}
  .lp-marquee__liste{gap:48px;padding-right:48px}
  .lp-marquee__nom{font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  .lp-marquee__piste{animation:none;width:auto;will-change:auto}
  .lp-marquee__vue{overflow-x:auto;-webkit-mask-image:none;mask-image:none;scrollbar-width:thin}
  .lp-marquee__liste{padding-inline:var(--lp-gouttiere)}
  .lp-marquee__liste[aria-hidden="true"],.lp-marquee__pause{display:none}
}

.lupeo-pied{padding:0;border-top:0;background:var(--lp-surface-2);color:var(--lp-ink-2)}
.lupeo-pied__in{width:100%;max-width:var(--lp-cadre,1840px);padding:clamp(40px,5vw,64px) var(--lp-gouttiere) 40px}
.lupeo-pied h2{
  margin:0 0 16px;
  font-family:var(--lp-sans);
  font-size:14.5px;font-weight:700;letter-spacing:0;text-transform:none;
  color:var(--lp-ink);
}
.lupeo-pied a{color:var(--lp-ink-2);font-size:14.5px;text-decoration:none}
.lupeo-pied a:hover,.lupeo-pied a:focus-visible{color:var(--lp-green-600)}
.lupeo-pied__logo,.lupeo-pied__logo svg{color:var(--lp-green-600)}
.lupeo-pied__logo svg{height:64px;width:auto}
.lupeo-pied__marque p{font-size:14.5px;line-height:1.6;color:var(--lp-ink-2)}
.lupeo-pied__promesses .lupeo-i,.lupeo-pied__paiement .lupeo-i{color:var(--lp-green-600)}
.lupeo-pied__paiements{
  display:flex;align-items:center;flex-wrap:wrap;gap:12px 14px;
  max-width:var(--lp-cadre,1840px);margin:0 auto;padding:18px var(--lp-gouttiere) 22px;
  border-top:1px solid var(--lp-line);
}
.lupeo-pied__paiements > span{margin-right:6px;font-size:13px;font-weight:600;color:var(--lp-ink)}
.lupeo-pied__paiements img{
  height:24px;width:auto;
  padding:3px 7px;
  border:1px solid var(--lp-line);
  border-radius:5px;
  background:#fff;
  box-sizing:content-box;
}
[data-footer*="type-1"] .ct-footer{background-color:var(--lp-surface-2)}
[data-footer*="type-1"] .ct-footer [data-row*="bottom"] > div{border-top:1px solid var(--lp-line)}
[data-footer*="type-1"] [data-id="copyright"]{font-size:13px;color:var(--lp-ink-3)}

/* ---------- 8. WooCommerce ------------------------------------------------- */

/* Le vert action porte un texte sombre. Les règles historiques écrivaient
   « color:#fff » pour l'orange : elles sont corrigées ici. */
.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce div.product form.cart .single_add_to_cart_button:hover,
.lupeo-achat__btn,
.lupeo-achat__btn:hover,
.lupeo-tiroir__mini-cart .woocommerce-mini-cart__buttons .checkout,
.lupeo-tiroir__mini-cart .woocommerce-mini-cart__buttons .checkout:hover,
.lupeo-tiroir__mini-cart .woocommerce-mini-cart__buttons .checkout:focus-visible{
  color:var(--lupeo-cta-texte);
  box-shadow:none;
}
/* ⚠️ Seuls !important de la feuille : lupeo-rayon.css pose les siens sur ces
   boutons (produits liés, ventes croisées). Sans eux, le texte resterait
   blanc sur vert action — 2:1, illisible. À retirer quand lupeo-rayon.css
   abandonnera les siens. */
.related.products ul.products li.product a.add_to_cart_button,
.up-sells ul.products li.product a.add_to_cart_button,
.related.products ul.products li.product a.add_to_cart_button:hover,
.up-sells ul.products li.product a.add_to_cart_button:hover,
.wp-block-woocommerce-product-collection button.add_to_cart_button,
.wp-block-woocommerce-product-collection button.add_to_cart_button:hover{
  color:var(--lupeo-cta-texte) !important;
}
/* Produits associés du panier (bloc WooCommerce) : le fond était le vert profond du thème
   (`lupeo-vert`) sous un texte sombre — 3,3:1. Même vert action que tous les boutons d'ajout. */
.wp-block-woocommerce-product-collection button.add_to_cart_button{background-color:var(--lupeo-cta)}
.wp-block-woocommerce-product-collection button.add_to_cart_button:hover{background-color:var(--lupeo-cta-deep)}

/* Fil d'Ariane : monospace discret, comme la maquette. */
.ct-breadcrumbs,.woocommerce-breadcrumb{
  font-family:var(--lp-mono);
  font-size:12px;
  letter-spacing:.02em;
  color:var(--lp-ink-3);
}
.ct-breadcrumbs a,.woocommerce-breadcrumb a{color:var(--lp-ink-3)}
.ct-breadcrumbs a:hover,.woocommerce-breadcrumb a:hover{color:var(--lp-green-600)}

/* Champs : contour #D5DBD8, focus vert Lupéo, erreur à l'orange brûlé. */
:where(.woocommerce,.woocommerce-page) :where(input[type="text"],input[type="email"],input[type="tel"],input[type="search"],input[type="password"],input[type="number"],select,textarea){
  border-color:var(--lp-line-forte);
  border-radius:var(--lp-r-2);
}
:where(.woocommerce,.woocommerce-page) :where(input,select,textarea):focus{border-color:var(--lp-green-600)}
:where(.woocommerce-invalid) :where(input,select){border-color:var(--lp-danger)}

@media (prefers-reduced-motion:reduce){
  .lp-carte-rayon,.lp-carte-machine,.lupeo-card,.lp-btn{transition:none}
}

/* Un prix ne se coupe jamais : « 1 599,00 € » passe à la ligne d'un bloc, pas « 1 » d'un côté
   et « 599,00 € » de l'autre (30/09/2026). */
body .woocommerce-Price-amount,
body .woocommerce-Price-amount bdi{white-space:nowrap}

/* Focus clavier : le contour du design system, partout où un élément se
   focalise — sans lui le parcours au clavier est invisible (Blocksy retire
   l'outline par défaut). Les composants qui ont leur propre forme de focus
   (.lp-guide, carte…) gardent la leur, plus spécifique. */
body a:focus-visible,
body button:focus-visible,
body summary:focus-visible,
body input:focus-visible,
body select:focus-visible,
body textarea:focus-visible,
body [tabindex]:focus-visible{
  outline:2px solid var(--lp-green-600);
  outline-offset:3px;
  border-radius:4px;
}
/* Champs de saisie : UN seul contour, net (filet vert + halo doux), à la place du double
   liseré « bordure + contour décalé » qui faisait brouillon (30/09/2026). Le contour reste
   lisible : le filet passe au vert de marque, le halo dessine la zone active. */
body input:is([type="text"],[type="email"],[type="tel"],[type="password"],[type="search"],[type="number"],[type="url"]):focus-visible,
body textarea:focus-visible,
body select:focus-visible{
  outline:none;
  border-color:var(--lp-green-600);
  box-shadow:0 0 0 3px rgba(0,124,117,.18);
}