/* redesign.css — composants redesign Fable, scopés .mp-rd (opt-in par page). Sources: designs/assets/design-system.css + <style> de designs/index.html. Chrome (header/footer/nav) NON inclus. */

/* ==========================================================================
   FIX DOUBLE SCROLLBAR (audit 25/06) — le bundle CCC theme-*.css contient le reset
   classic `body,html{height:100%}` APRÈS le fix base.css `html,body{height:auto}`,
   donc classic gagne (même spécificité, chargé après) → html ET body deviennent des
   conteneurs de scroll de 900px (hauteur viewport) imbriqués = double/triple scrollbar.
   redesign.css est chargé en direct APRÈS le bundle → ce !important rétablit la hauteur
   naturelle du document et un scroll unique (viewport).
   ========================================================================== */
html, body {
  height: auto !important;
  min-height: 100% !important;
}
/* Audit UX-22 : header sticky (~160px) masquait la cible des ancres (#faq, :target).
   scroll-padding-top décale l'arrivée des ancres sous le header. */
html {
  scroll-padding-top: 160px;
}
/* Audit UX-01 : variables.css est dans le bundle CCC NON régénéré (token figé à #9a7110=4.42:1,
   sous le seuil AA). redesign.css est chargé en direct APRÈS le bundle → on y force la vraie
   valeur accessible. À retirer si/quand le bundle theme-*.css est régénéré avec variables.css. */
:root {
  --mp-accent-text: #7a5a00;
}
/* MP-159 : retirer le paiement en plusieurs fois. Klarna est déjà désactivé comme
   moyen de paiement (STRIPE_ENABLE_KLARNA=0) ; il ne reste que le message publicitaire
   « 3 versements sans intérêts avec Klarna » injecté par le Payment Method Messaging
   Element de stripe_official (module tiers, non éditable). On masque son conteneur. */
#payment-method-messaging-element {
  display: none !important;
}

/* ==========================================================================
   OVERRIDES BUNDLE (live jusqu'à régénération du bundle theme-*.css + purge CDN)
   header.css / footer.css sont dans le bundle CCC ; ces règles miroir rendent les
   correctifs UX-41 (contraste footer/topbar) et UX-12 (cibles tactiles header mobile)
   effectifs sans attendre la régénération. Les sources restent corrigées pour le bundle.
   ========================================================================== */
/* UX-41 — contrastes secondaires */
.mp-footer__copyright,
.mp-newsletter__disclaimer { opacity: 1; }
.mp-topbar,
.mp-topbar__phone { color: rgba(255,255,255,0.72); }

/* Vague 4 (08/08) — trust strip topbar (règles miroir, header.css est en bundle).
   Texte validé user : OE & équivalentes · Expédition 24/48h · Conseillers pros. */
.mp-topbar__inner { min-height: 34px; }
.mp-topbar__trust { display: inline-flex; align-items: center; gap: 6px; }
.mp-topbar__trust svg { color: var(--mp-accent, #e6a817); opacity: .85; }
a.mp-topbar__phone { text-decoration: none; }
a.mp-topbar__phone:hover { color: var(--mp-accent, #e6a817); }
@media (max-width: 640px) {
  .mp-topbar__trust:first-child,
  .mp-topbar__left .mp-topbar__sep:first-of-type,
  .mp-topbar__right { display: none; }
  .mp-topbar__inner { justify-content: center; }
}

/* ── Vague 5 (08/08) : header UNE ligne (maquette) — nav à côté du logo,
   icônes à droite, loupe visible partout. Règles miroir (header.css en bundle). */
@media (min-width: 993px) {
  .mp-header__top { gap: 26px; }
  .mp-header__top .mp-nav { flex: 1; min-width: 0; justify-content: flex-start; padding: 0; border: none; }
  .mp-header__top .mp-nav__center { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; overflow: hidden; }
  .mp-header__top .mp-nav__item { font-size: .78rem; padding: 8px 11px; white-space: nowrap; }
  .mp-header__actions { margin-left: auto; }
  .mp-search-toggle { display: flex; } /* la loupe ouvre l'overlay, sur toutes les pages */
}
.mp-nav__sep { display: none; }

/* Bande noire de recherche (pages catalogue/recherche/marques/résultats) */
.mp-searchband {
  background: #0d0d0d;
  border-top: 1px solid #1e1e1e;
  padding: 16px 0 18px;
}
.mp-searchband__inner { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.mp-searchband .mp-hero-search {
  display: flex; align-items: center; gap: 8px;
  flex: 1; min-width: 280px; max-width: 760px;
  padding: 5px 5px 5px 16px;
  background: #fff; border-radius: 14px;
}
.mp-searchband .mp-hero-search__ico { flex: 0 0 auto; color: #8a8374; }
.mp-searchband .mp-hero-search__input {
  flex: 1; min-width: 0; min-height: 46px;
  border: 0; outline: none; background: transparent;
  font-size: 1rem; color: #1a1a1a;
}
.mp-searchband .mp-hero-search__input::placeholder { color: #9b948a; }
.mp-searchband .mp-hero-search__btn {
  flex: 0 0 auto; min-height: 44px; padding: 0 22px;
  background: #e6a817; color: #1a1a1a;
  font-weight: 700; font-size: .92rem; border: 0; border-radius: 10px; cursor: pointer;
}
.mp-searchband .mp-hero-search__btn:hover { filter: brightness(1.06); }
.mp-searchband .mp-hero-veh {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 5px 7px 5px 14px;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px;
  color: rgba(255, 255, 255, .85); font-size: .85rem;
}
.mp-searchband .mp-hero-veh svg { color: #e6a817; flex-shrink: 0; }
.mp-searchband .mp-hero-veh__label { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-searchband .mp-hero-veh__change {
  min-height: 38px; padding: 0 13px; border: 0; border-radius: 999px;
  background: rgba(230, 168, 23, .14); color: #e6a817;
  font-weight: 700; font-size: .8rem; cursor: pointer;
}
.mp-searchband .mp-hero-veh__change:hover { background: rgba(230, 168, 23, .26); }
@media (max-width: 720px) {
  .mp-searchband { padding: 12px 0 14px; }
  .mp-searchband .mp-hero-veh__label { max-width: 150px; }
}

/* ── Vague 6 : variante HERO de la bande (landing catalogue uniquement) —
   titre 2 lignes + photo voiture. Fondu sur l'IMG, JAMAIS d'opacité sur le
   conteneur (leçon 08/08 : voiture fantôme). ── */
.mp-searchband--hero {
  position: relative;
  overflow: hidden;
  padding: clamp(48px, 7vw, 96px) 0 clamp(36px, 5vw, 64px);
  background:
    radial-gradient(ellipse 55% 70% at 80% 35%, rgba(230, 168, 23, .12) 0%, transparent 60%),
    linear-gradient(100deg, #0d0d0d 0%, #0d0d0d 46%, #16130b 78%, #1d180c 100%);
}
.mp-searchband__scene {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(46%, 640px);
  z-index: 0;
  pointer-events: none;
}
.mp-searchband__photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center right;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 42%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 42%);
}
.mp-searchband--hero .mp-searchband__inner { position: relative; z-index: 1; }
.mp-searchband__title {
  flex: 1 1 100%;
  display: flex; flex-direction: column;
  margin: 0 0 10px;
  color: #fff;
  font-family: var(--mp-font-display, 'Plus Jakarta Sans', sans-serif);
  font-size: clamp(30px, 4.5vw, 52px);
  font-weight: 800; line-height: 1.05; letter-spacing: -.02em;
}
.mp-searchband__title em { font-style: normal; color: #e6a817; }
@media (max-width: 900px) {
  .mp-searchband__scene { display: none; }
  .mp-searchband--hero { padding: 28px 0 24px; }
}
@media (max-width: 560px) {
  .mp-searchband__title { font-size: 26px; }
}

/* Le chip véhicule de la bande remplace le bandeau : masquer ce dernier ici */
body#module-tecdoc_importer-catalogue .mp-vehicle-bar,
body#module-tecdoc_search-search .mp-vehicle-bar,
body#manufacturer .mp-vehicle-bar,
body#module-tecalliance_connector-results .mp-vehicle-bar { display: none; }

/* Le mode sombre forcé (flag Chrome « Auto Dark Mode », extensions type Dark
   Reader) inverse les couleurs de fond et rendait le CTA illisible chez certains
   visiteurs. Déclaré en CSS, color-scheme est respecté par Chrome là où la
   balise <meta> seule ne suffit pas. */
:root { color-scheme: only light; }

/* Vague 4 — CTA or « Inscription Pro » dans la nav (règle miroir).
   L'aplat est peint en background-IMAGE (dégradé d'une seule couleur) : les
   moteurs de mode sombre n'inversent pas les images, le bouton reste donc or
   et lisible même quand le visiteur force le thème sombre. */
.mp-nav__item--cta {
  background-color: var(--mp-accent, #e6a817);
  background-image: linear-gradient(var(--mp-accent, #e6a817), var(--mp-accent, #e6a817));
  color: #1a1a1a !important;
  border-radius: 999px;
  padding: 8px 18px;
  font-weight: 800;
}
.mp-nav__item--cta:hover { filter: brightness(1.07); color: #1a1a1a !important; }
.mp-nav__item--cta.mp-nav__item--active { color: #1a1a1a !important; }
/* Pas de soulignement d'état actif sur un bouton plein */
.mp-nav__item--cta::after,
.mp-nav__item--cta::before { display: none !important; }

/* Même protection pour les autres aplats or du parcours visiteur */
.mp-hero-search__btn,
.mp-searchband .mp-hero-search__btn {
  background-image: linear-gradient(#e6a817, #e6a817);
}

/* Vague 4 — barre de recherche header : focus doux (règle miroir) */
.mp-search-bar form:focus-within,
.mp-search-bar:focus-within { box-shadow: 0 2px 12px rgba(0, 0, 0, .25); border-radius: 12px; }

/* 04/08 — cibles tactiles du FOOTER (mobile).
   Mesuré : les liens du footer faisaient 20px de haut, sur TOUTES les pages du site.
   Au doigt, deux liens voisins séparés de 20px se ratent une fois sur deux. On ne change
   ni la taille du texte ni l'espacement visuel : on élargit la SURFACE cliquable, ce qui
   suffit à rendre le tap fiable (WCAG 2.5.5). */
@media (max-width: 768px) {
  .mp-footer__links a {
    min-height: 40px;
    display: flex;
    align-items: center;
  }
  .mp-footer__contact a,
  .mp-footer__contact li {
    min-height: 40px;
  }
}

/* UX-12 — cibles tactiles header >=40px (mobile) */
@media (max-width: 480px) {
  .mp-header__actions { gap: 4px; }
  .mp-header__cart-btn,
  .mp-search-toggle,
  #mp-devis-btn,
  .mp-header__icon-btn,
  .mp-burger { width: 40px; height: 40px; padding: 0; }
}
@media (max-width: 360px) {
  .mp-header__actions { gap: 4px; }
  .mp-header__cart-btn,
  .mp-search-toggle,
  #mp-devis-btn,
  .mp-header__icon-btn,
  .mp-burger { width: 40px; height: 40px; padding: 0; }
}

/* ==========================================================================
   01. TOKENS — scopés sous .mp-rd, aliasés sur les tokens du thème
   ========================================================================== */
.mp-rd {
  /* --- Couleurs de marque (or) --- */
  --mp-gold:           var(--mp-accent);
  --mp-gold-hover:     var(--mp-accent-hover);
  --mp-gold-text:      var(--mp-accent-text);
  --mp-gold-soft:      #fdf6e3;
  --mp-gold-border:    #f0d9a0;

  /* --- Fonds sombres --- */
  --mp-dark-deep:      var(--mp-bg-deep);
  --mp-dark:           var(--mp-bg-dark);
  --mp-dark-soft:      var(--mp-bg-card-dark);
  --mp-dark-line:      var(--mp-border-dark);

  /* --- Surfaces claires --- */
  --mp-white:          var(--mp-bg-white);
  --mp-surface:        var(--mp-surface-light);

  /* --- Texte --- */
  --mp-text:           var(--mp-text-primary);
  --mp-text-body:      var(--mp-text-secondary);
  --mp-text-muted:     var(--mp-text-muted);
  --mp-text-on-dark:   #f5f5f4;
  --mp-text-on-dark-muted: var(--mp-text-muted-dark);

  /* --- Bordures --- */
  --mp-border:         var(--mp-border-subtle);
  --mp-border-strong:  #d3d7dd;

  /* --- Statuts --- */
  --mp-success:        #16a34a;
  --mp-success-soft:   #ecfdf3;
  --mp-warning:        #d97706;
  --mp-warning-soft:   #fef6e7;
  --mp-danger:         #dc2626;
  --mp-danger-soft:    #fdf0ef;

  /* --- Typographie --- */
  --mp-font-display: var(--mp-font-display);
  --mp-font-body:    var(--mp-font-body);
  --mp-font-mono:    var(--mp-font-mono);

  /* --- Rayons --- */
  --mp-radius-sm:   6px;
  --mp-radius:      10px;
  --mp-radius-lg:   16px;
  --mp-radius-xl:   24px;
  --mp-radius-full: 999px;

  /* --- Ombres --- */
  --mp-shadow-sm:   0 1px 2px rgba(13, 13, 13, .05);
  --mp-shadow:      0 2px 8px rgba(13, 13, 13, .07), 0 1px 2px rgba(13, 13, 13, .05);
  --mp-shadow-md:   0 6px 20px rgba(13, 13, 13, .09), 0 2px 6px rgba(13, 13, 13, .05);
  --mp-shadow-lg:   0 16px 40px rgba(13, 13, 13, .14);
  --mp-shadow-xl:   0 28px 70px rgba(13, 13, 13, .22), 0 10px 24px rgba(13, 13, 13, .12);
  --mp-shadow-gold: 0 6px 18px rgba(230, 168, 23, .35);

  /* --- Espacement (échelle 4px) --- */
  --mp-sp-1:  4px;
  --mp-sp-2:  8px;
  --mp-sp-3:  12px;
  --mp-sp-4:  16px;
  --mp-sp-5:  20px;
  --mp-sp-6:  24px;
  --mp-sp-8:  32px;
  --mp-sp-10: 40px;
  --mp-sp-12: 48px;
  --mp-sp-16: 64px;
  --mp-sp-20: 80px;

  /* --- Transitions --- */
  --mp-ease:      cubic-bezier(.4, 0, .2, 1);
  --mp-t-fast:    150ms var(--mp-ease);
  --mp-t:         220ms var(--mp-ease);
  --mp-t-slow:    350ms var(--mp-ease);

  /* --- Divers --- */
  --mp-container: 1240px;
  --mp-focus-ring: 0 0 0 3px rgba(230, 168, 23, .55);
}

/* ==========================================================================
   03. TYPOGRAPHIE
   ========================================================================== */
.mp-rd .mp-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--mp-sp-2);
  font-family: var(--mp-font-display);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mp-gold-text);
}
.mp-rd .mp-kicker::before {
  content: "";
  width: 24px;
  height: 2px;
  background: var(--mp-gold);
  border-radius: 2px;
}

.mp-rd .mp-section-head { max-width: 640px; margin-bottom: var(--mp-sp-10); }
.mp-rd .mp-section-head h2 { margin: var(--mp-sp-3) 0 var(--mp-sp-3); }
.mp-rd .mp-section-head p { color: var(--mp-text-muted); font-size: 1.05rem; }
.mp-rd .mp-section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.mp-rd .mp-section-head--center .mp-kicker::before { display: none; }

/* ==========================================================================
   04. LAYOUT
   ========================================================================== */
.mp-rd .mp-container {
  width: 100%;
  max-width: var(--mp-container);
  margin-inline: auto;
  padding-inline: var(--mp-sp-4);
}
@media (min-width: 768px) {
  .mp-rd .mp-container { padding-inline: var(--mp-sp-6); }
}

.mp-rd .mp-section { padding-block: var(--mp-sp-12); }
@media (min-width: 768px) {
  .mp-rd .mp-section { padding-block: var(--mp-sp-16); }
}
.mp-rd .mp-section--white { background: var(--mp-white); }
.mp-rd .mp-section--dark  { background: var(--mp-dark); color: var(--mp-text-on-dark); }
.mp-rd .mp-section--dark h2, .mp-rd .mp-section--dark h3 { color: var(--mp-white); }

/* Grille responsive générique : .mp-grid + modificateur de colonnes desktop */
.mp-rd .mp-grid { display: grid; gap: var(--mp-sp-5); grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .mp-rd .mp-grid--2, .mp-rd .mp-grid--3, .mp-rd .mp-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .mp-rd .mp-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .mp-rd .mp-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .mp-rd .mp-grid--4 { grid-template-columns: repeat(4, 1fr); }
  .mp-rd .mp-grid--5 { grid-template-columns: repeat(5, 1fr); }
}
/* Grille dense B2B : 3 col dès 640px, jusqu'à 5 col en grand écran */
@media (min-width: 640px) { .mp-rd .mp-grid--5 { grid-template-columns: repeat(3, 1fr); } }
.mp-rd .mp-grid--tight { gap: var(--mp-sp-4); }

/* ==========================================================================
   05. BOUTONS — .mp-btn
   ========================================================================== */
.mp-rd .mp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mp-sp-2);
  min-height: 46px;
  padding: var(--mp-sp-3) var(--mp-sp-6);
  font-family: var(--mp-font-display);
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.2;
  border-radius: var(--mp-radius);
  border: 1.5px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--mp-t-fast), color var(--mp-t-fast),
              border-color var(--mp-t-fast), box-shadow var(--mp-t-fast),
              transform var(--mp-t-fast);
}
.mp-rd .mp-btn:hover { text-decoration: none; }
.mp-rd .mp-btn:active { transform: translateY(1px); }
.mp-rd .mp-btn svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Primary — or, texte noir (contraste AA sur #e6a817) */
.mp-rd .mp-btn--primary {
  background: linear-gradient(180deg, #f0b52b 0%, var(--mp-gold) 55%, #dd9e10 100%);
  color: var(--mp-dark-deep);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 1px 2px rgba(13, 13, 13, .12);
}
.mp-rd .mp-btn--primary:hover {
  background: linear-gradient(180deg, #e8ab1c 0%, var(--mp-gold-hover) 60%, #c8900c 100%);
  color: var(--mp-dark-deep);
  box-shadow: var(--mp-shadow-gold);
  transform: translateY(-1px);
}

/* Secondary — noir, texte blanc */
.mp-rd .mp-btn--secondary {
  background: var(--mp-dark);
  color: var(--mp-white);
}
.mp-rd .mp-btn--secondary:hover {
  background: var(--mp-dark-deep);
  color: var(--mp-white);
  box-shadow: var(--mp-shadow-md);
  transform: translateY(-1px);
}

/* Outline — bordure, fond transparent (sur fond clair) */
.mp-rd .mp-btn--outline {
  background: var(--mp-white);
  color: var(--mp-text);
  border-color: var(--mp-border-strong);
}
.mp-rd .mp-btn--outline:hover {
  border-color: var(--mp-gold);
  color: var(--mp-text);
  background: var(--mp-gold-soft);
}

/* Ghost — texte seul, hover discret (sur fond clair) */
.mp-rd .mp-btn--ghost {
  background: transparent;
  color: var(--mp-text-body);
}
.mp-rd .mp-btn--ghost:hover { background: rgba(13, 13, 13, .06); color: var(--mp-text); }

/* Variantes pour fonds sombres */
.mp-rd .mp-btn--outline-light {
  background: transparent;
  color: var(--mp-white);
  border-color: rgba(255, 255, 255, .35);
}
.mp-rd .mp-btn--outline-light:hover {
  border-color: var(--mp-gold);
  color: var(--mp-gold);
  background: rgba(230, 168, 23, .08);
}
.mp-rd .mp-btn--ghost-light { background: transparent; color: var(--mp-text-on-dark-muted); }
.mp-rd .mp-btn--ghost-light:hover { color: var(--mp-white); background: rgba(255, 255, 255, .08); }

/* Tailles */
.mp-rd .mp-btn--sm { min-height: 38px; padding: var(--mp-sp-2) var(--mp-sp-4); font-size: .85rem; }
.mp-rd .mp-btn--lg { min-height: 54px; padding: var(--mp-sp-4) var(--mp-sp-8); font-size: 1.05rem; }
.mp-rd .mp-btn--block { width: 100%; }

/* L'état pressé garde la priorité sur les hovers des variantes */
.mp-rd .mp-btn:active, .mp-rd .mp-btn:active:hover { transform: translateY(1px); }

/* ==========================================================================
   06. BADGES — .mp-badge
   ========================================================================== */
.mp-rd .mp-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.4;
  border-radius: var(--mp-radius-full);
  white-space: nowrap;
  background: var(--mp-surface);
  color: var(--mp-text-body);
  border: 1px solid var(--mp-border);
}

/* Pastille de statut (point coloré) */
.mp-rd .mp-badge--stock, .mp-rd .mp-badge--low, .mp-rd .mp-badge--out { border: none; }
.mp-rd .mp-badge--stock::before, .mp-rd .mp-badge--low::before, .mp-rd .mp-badge--out::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.mp-rd .mp-badge--stock { background: var(--mp-success-soft); color: var(--mp-success); }
.mp-rd .mp-badge--low   { background: var(--mp-warning-soft); color: var(--mp-warning); }
.mp-rd .mp-badge--out   { background: var(--mp-danger-soft);  color: var(--mp-danger); }

/* Marque équipementier (BOSCH, VALEO…) */
.mp-rd .mp-badge--brand {
  background: var(--mp-white);
  border: 1px solid var(--mp-border-strong);
  color: var(--mp-text);
  font-family: var(--mp-font-display);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* Mise en avant or */
.mp-rd .mp-badge--gold {
  background: var(--mp-gold-soft);
  border: 1px solid var(--mp-gold-border);
  color: var(--mp-gold-text);
}

/* Sombre (sur fond clair) ou pour overlay image */
.mp-rd .mp-badge--dark { background: var(--mp-dark); border-color: var(--mp-dark); color: var(--mp-white); }

/* Compatibilité véhicule actif — signal de confiance B2B (coche verte) */
.mp-rd .mp-badge--fit {
  background: var(--mp-success-soft);
  color: #15803d;
  border: 1px solid #bbf7d0;
  font-weight: 600;
}
.mp-rd .mp-badge--fit svg { width: 13px; height: 13px; flex-shrink: 0; }

/* Référence technique en monospace (réf / OE / VIN) — signature "réflexe pro" */
.mp-rd .mp-ref {
  font-family: var(--mp-font-mono);
  font-size: .82em;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--mp-text-body);
  white-space: nowrap;
}
.mp-rd .mp-ref--chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: var(--mp-surface);
  border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius-sm);
  color: var(--mp-text);
}

/* ==========================================================================
   07. FORMULAIRES — .mp-input / .mp-select / .mp-search
   ========================================================================== */
.mp-rd .mp-label {
  display: block;
  margin-bottom: var(--mp-sp-2);
  font-size: .85rem;
  font-weight: 600;
  color: var(--mp-text);
}

.mp-rd .mp-input,
.mp-rd .mp-select {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: var(--mp-sp-3) var(--mp-sp-4);
  font-size: .95rem;
  color: var(--mp-text);
  background: var(--mp-white);
  border: 1.5px solid var(--mp-border-strong);
  border-radius: var(--mp-radius);
  transition: border-color var(--mp-t-fast), box-shadow var(--mp-t-fast);
}
.mp-rd .mp-input::placeholder { color: var(--mp-text-muted); }
.mp-rd .mp-input:hover, .mp-rd .mp-select:hover { border-color: #b8bec7; }
.mp-rd .mp-input:focus, .mp-rd .mp-select:focus {
  outline: none;
  border-color: var(--mp-gold);
  box-shadow: var(--mp-focus-ring);
}

.mp-rd .mp-select {
  appearance: none;
  padding-right: var(--mp-sp-10);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--mp-sp-4) center;
  cursor: pointer;
}

/* Groupe de recherche : input + bouton soudés */
.mp-rd .mp-search {
  display: flex;
  width: 100%;
  border-radius: var(--mp-radius);
  box-shadow: var(--mp-shadow);
}
.mp-rd .mp-search .mp-input {
  border-radius: var(--mp-radius) 0 0 var(--mp-radius);
  border-right: none;
}
.mp-rd .mp-search .mp-btn {
  border-radius: 0 var(--mp-radius) var(--mp-radius) 0;
  flex-shrink: 0;
}

/* ==========================================================================
   08. CARTE PRODUIT — .mp-card
   ========================================================================== */
.mp-rd .mp-card {
  display: flex;
  flex-direction: column;
  background: var(--mp-white);
  border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius-lg);
  overflow: hidden;
  transition: box-shadow var(--mp-t), transform var(--mp-t), border-color var(--mp-t);
}
.mp-rd .mp-card:hover {
  box-shadow: var(--mp-shadow-lg);
  transform: translateY(-4px);
  border-color: var(--mp-gold-border);
}

.mp-rd .mp-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--mp-white);
  border-bottom: 1px solid var(--mp-border);
}
.mp-rd .mp-card__media svg { width: 56%; height: auto; opacity: .9; }
.mp-rd .mp-card__media .mp-badge { position: absolute; top: var(--mp-sp-3); left: var(--mp-sp-3); z-index: 2; }

/* Photo réelle de pièce (packshot) : contenue, marge douce, léger zoom au survol */
.mp-rd .mp-card__media img.mp-card__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 9%;
  opacity: 1;
  transition: transform var(--mp-t-slow);
}
.mp-rd .mp-card:hover img.mp-card__photo { transform: scale(1.04); }

/* Variante "cover" : RÉSERVÉE aux visuels éditoriaux/catégories (remplit le cadre) */
.mp-rd .mp-card__media--cover { background: linear-gradient(145deg, #fafbfc 0%, #eef0f3 100%); }
.mp-rd .mp-card__media--cover img.mp-card__photo { object-fit: cover; padding: 0; }
.mp-rd .mp-card:hover .mp-card__media--cover img.mp-card__photo { transform: scale(1.05); }

/* Liseré intérieur discret pour asseoir les photos clair-sur-clair */
.mp-rd .mp-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(13, 13, 13, .05), inset 0 -28px 30px -28px rgba(13, 13, 13, .10);
  pointer-events: none;
  z-index: 1;
}

.mp-rd .mp-card__body { flex: 1; padding: var(--mp-sp-4) var(--mp-sp-4) var(--mp-sp-3); }

.mp-rd .mp-card__brand {
  font-family: var(--mp-font-display);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mp-gold-text);
  margin-bottom: var(--mp-sp-1);
}

.mp-rd .mp-card__name {
  font-family: var(--mp-font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--mp-text);
  line-height: 1.35;
  margin-bottom: var(--mp-sp-1);
}
.mp-rd .mp-card__name a { color: inherit; }
.mp-rd .mp-card__name a:hover { color: var(--mp-gold-text); text-decoration: none; }

.mp-rd .mp-card__ref {
  font-family: var(--mp-font-mono);
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--mp-text-muted);
  margin-bottom: var(--mp-sp-3);
}
.mp-rd .mp-card__ref b, .mp-rd .mp-card__ref strong { color: var(--mp-text-body); font-weight: 600; }

.mp-rd .mp-card__meta { display: flex; flex-wrap: wrap; gap: var(--mp-sp-2); }
/* Miniature listing : le bouton "Ajouter" est dans un <form> — l'aligner dans le footer flex */
.mp-rd .mp-card__form { margin: 0; flex-shrink: 0; }
.mp-rd .mp-card__price--quote { font-size: 1rem; font-weight: 700; color: var(--mp-gold-text); }

/* Grille listing : cartes plus larges/aérées (max 4 col, vs 5 trop dense de products.css) */
.mp-rd .mp-prod-grid { display: grid; gap: var(--mp-sp-5); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px)  { .mp-rd .mp-prod-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1180px) { .mp-rd .mp-prod-grid { grid-template-columns: repeat(4, 1fr); } }
/* footer carte : éviter le tassement/débordement prix+bouton sur cartes étroites */
.mp-rd .mp-card__footer { flex-wrap: wrap; gap: var(--mp-sp-2) var(--mp-sp-3); }
.mp-rd .mp-card__footer .mp-btn--sm { padding: 8px 14px; min-width: 0; }
.mp-rd .mp-card__form { flex: 0 1 auto; }
/* En dessous de ~440px par carte (2 col mobile), le bouton passe pleine largeur sous le prix */
@media (max-width: 600px) {
  .mp-rd .mp-card__footer { gap: 8px; }
  .mp-rd .mp-card__footer .mp-btn { flex: 1 1 100%; width: 100%; }
  .mp-rd .mp-card__form { flex: 1 1 100%; }
}

/* Bandeau catégorie/recherche : alléger (description tronquée, padding réduit) — sinon pavé de texte */
.mp-rd .mp-cat-banner__desc {
  font-size: .9rem;
  max-width: 820px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mp-rd .mp-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mp-sp-3);
  padding: var(--mp-sp-3) var(--mp-sp-4) var(--mp-sp-4);
  border-top: 1px solid var(--mp-border);
}

.mp-rd .mp-card__price {
  font-family: var(--mp-font-display);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--mp-text);
  line-height: 1.1;
  white-space: nowrap;
}
.mp-rd .mp-card__price-note {
  display: block;
  font-family: var(--mp-font-body);
  font-size: .72rem;
  font-weight: 500;
  color: var(--mp-text-muted);
}

/* ==========================================================================
   10. BARRE DE RÉASSURANCE — .mp-trust
   ========================================================================== */
.mp-rd .mp-trust { background: var(--mp-white); border-bottom: 1px solid var(--mp-border); }
/* MP-165 (11/07) : mobile-first. Sur petit mobile, 1 colonne pleine largeur (les
   anciennes règles responsive.css ciblaient .mp-trust__grid, classe qui n'existe plus
   → le texte des engagements débordait en 2 colonnes trop étroites). */
.mp-rd .mp-trust__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mp-sp-4) var(--mp-sp-6);
  padding-block: var(--mp-sp-5);
}
@media (min-width: 480px) {
  .mp-rd .mp-trust__list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  .mp-rd .mp-trust__list { grid-template-columns: repeat(4, 1fr); }
}
.mp-rd .mp-trust__item { display: flex; align-items: center; gap: var(--mp-sp-3); }
/* min-width:0 : sans ça, le bloc texte ne peut pas rétrécir dans la cellule flex/grid
   et le libellé était coupé sur mobile (MP-165). */
.mp-rd .mp-trust__item > div { min-width: 0; }
.mp-rd .mp-trust__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--mp-radius);
  background: var(--mp-gold-soft);
  border: 1px solid var(--mp-gold-border);
  color: var(--mp-gold-text);
  flex-shrink: 0;
}
.mp-rd .mp-trust__icon svg { width: 22px; height: 22px; }
.mp-rd .mp-trust__title {
  font-family: var(--mp-font-display);
  font-size: .9rem;
  font-weight: 700;
  color: var(--mp-text);
  line-height: 1.3;
}
.mp-rd .mp-trust__desc { font-size: .78rem; color: var(--mp-text-muted); line-height: 1.4; }

/* ==========================================================================
   12. COMPOSANTS ANNEXES
   ========================================================================== */

/* Lien fléché "Voir tout →" */
.mp-rd .mp-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mp-font-display);
  font-weight: 700;
  font-size: .92rem;
  color: var(--mp-gold-text);
  text-decoration: none;
}
.mp-rd .mp-link-arrow svg { width: 16px; height: 16px; transition: transform var(--mp-t-fast); }
.mp-rd .mp-link-arrow:hover { color: var(--mp-gold-hover); text-decoration: none; }
.mp-rd .mp-link-arrow:hover svg { transform: translateX(3px); }

/* Séparateur */
.mp-rd .mp-divider { border: none; border-top: 1px solid var(--mp-border); margin-block: var(--mp-sp-8); }

/* Cadre photo éditorial — .mp-figure */
.mp-rd .mp-figure {
  position: relative;
  border-radius: var(--mp-radius-xl);
  overflow: hidden;
  background: var(--mp-dark-soft);
  box-shadow: var(--mp-shadow-xl);
}
.mp-rd .mp-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--mp-t-slow);
}
.mp-rd .mp-figure:hover img { transform: scale(1.03); }
.mp-rd .mp-figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13, 13, 13, .55) 0%, transparent 38%);
  border-bottom: 4px solid var(--mp-gold);
  border-radius: inherit;
  pointer-events: none;
}
.mp-rd .mp-figure__caption {
  position: absolute;
  left: var(--mp-sp-4);
  bottom: var(--mp-sp-4);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--mp-sp-2);
  padding: 7px 14px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--mp-white);
  background: rgba(13, 13, 13, .72);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--mp-radius-full);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.mp-rd .mp-figure__caption::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mp-gold);
  flex-shrink: 0;
}

/* Pile horizontale générique */
.mp-rd .mp-stack { display: flex; flex-wrap: wrap; gap: var(--mp-sp-3); align-items: center; }

/* Tuile catégorie — .mp-cat-tile (Vague 4 08/08 : carte horizontale compacte,
   icône outline dans une boîte or pâle — mêmes pictos que la quickfam catalogue) */
.mp-rd .mp-cat-tile {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--mp-white);
  border: 1px solid #e9e4d8;
  border-radius: 14px;
  padding: 14px 16px;
  min-height: 72px;
  text-decoration: none;
  transition: border-color var(--mp-t), box-shadow var(--mp-t), transform var(--mp-t);
}
.mp-rd .mp-cat-tile:hover {
  text-decoration: none;
  border-color: var(--mp-gold, #e6a817);
  box-shadow: 0 8px 24px rgba(20, 16, 8, .08);
  transform: translateY(-1px);
}
.mp-rd .mp-cat-tile__ico {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(230, 168, 23, .10);
  color: #9a7110;
  transition: background var(--mp-t-fast), color var(--mp-t-fast);
}
.mp-rd .mp-cat-tile__ico svg { width: 22px; height: 22px; }
.mp-rd .mp-cat-tile:hover .mp-cat-tile__ico { background: var(--mp-gold, #e6a817); color: #1a1a1a; }
.mp-rd .mp-cat-tile__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mp-sp-3);
  flex: 1;
  min-width: 0;
  padding: 0;
}
.mp-rd .mp-cat-tile__name {
  font-family: var(--mp-font-display);
  font-size: .92rem;
  font-weight: 700;
  color: var(--mp-text);
  line-height: 1.25;
}
.mp-rd .mp-cat-tile__count { display: block; font-size: .78rem; font-weight: 400; color: var(--mp-text-muted); margin-top: 2px; }
.mp-rd .mp-cat-tile__arrow { color: var(--mp-border-strong); flex-shrink: 0; transition: color var(--mp-t-fast), transform var(--mp-t-fast); }
.mp-rd .mp-cat-tile__arrow svg { width: 20px; height: 20px; }
.mp-rd .mp-cat-tile:hover .mp-cat-tile__arrow { color: var(--mp-gold-text); transform: translateX(3px); }

/* ==========================================================================
   12bis. SIGNATURE "RÉFLEXE PRO" — cote dorée, grille technique
   ========================================================================== */

/* Cote dorée : liseré or 4px en haut d'un panneau clé */
.mp-rd .mp-edge-gold { border-top: 4px solid var(--mp-gold); }
.mp-rd .mp-edge-gold--left { border-top: none; border-left: 4px solid var(--mp-gold); }

/* Grille technique : trame "blueprint" discrète sur les sections sombres */
.mp-rd .mp-tech-grid {
  position: relative;
}
.mp-rd .mp-tech-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(230, 168, 23, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(230, 168, 23, .05) 1px, transparent 1px);
  background-size: 44px 44px;
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 0%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 0%, #000 0%, transparent 75%);
}
.mp-rd .mp-tech-grid > * { position: relative; z-index: 1; }

/* Variante calque autonome */
.mp-rd .mp-tech-grid-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image:
    linear-gradient(rgba(230, 168, 23, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(230, 168, 23, .055) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse 70% 90% at 85% 0%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 85% 0%, #000 0%, transparent 70%);
}

/* ==========================================================================
   12ter. VUE LISTE B2B — .mp-rows / .mp-row
   ========================================================================== */
.mp-rd .mp-rows { display: flex; flex-direction: column; gap: var(--mp-sp-3); }

.mp-rd .mp-row {
  display: grid;
  grid-template-columns: 76px 1fr auto;
  align-items: center;
  gap: var(--mp-sp-4);
  padding: var(--mp-sp-3) var(--mp-sp-4);
  background: var(--mp-white);
  border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius-lg);
  transition: border-color var(--mp-t), box-shadow var(--mp-t);
}
.mp-rd .mp-row:hover { border-color: var(--mp-gold-border); box-shadow: var(--mp-shadow-md); }

.mp-rd .mp-row__media {
  width: 76px;
  height: 76px;
  border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius);
  background: var(--mp-white);
  overflow: hidden;
  flex-shrink: 0;
}
.mp-rd .mp-row__media img { width: 100%; height: 100%; object-fit: contain; padding: 8%; }

.mp-rd .mp-row__main { min-width: 0; }
.mp-rd .mp-row__brand {
  font-family: var(--mp-font-display);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--mp-gold-text);
}
.mp-rd .mp-row__name {
  font-family: var(--mp-font-display);
  font-size: .98rem;
  font-weight: 700;
  color: var(--mp-text);
  line-height: 1.3;
  margin: 1px 0 3px;
}
.mp-rd .mp-row__name a { color: inherit; }
.mp-rd .mp-row__name a:hover { color: var(--mp-gold-text); text-decoration: none; }
.mp-rd .mp-row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mp-sp-2) var(--mp-sp-3); }
.mp-rd .mp-row__meta .mp-ref { color: var(--mp-text-muted); }

/* Colonne droite : stock + prix + actions */
.mp-rd .mp-row__aside {
  display: flex;
  align-items: center;
  gap: var(--mp-sp-5);
  flex-shrink: 0;
}
.mp-rd .mp-row__price {
  font-family: var(--mp-font-display);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--mp-text);
  text-align: right;
  white-space: nowrap;
}
.mp-rd .mp-row__price small {
  display: block;
  font-family: var(--mp-font-body);
  font-size: .68rem;
  font-weight: 500;
  color: var(--mp-text-muted);
}

@media (max-width: 720px) {
  .mp-rd .mp-row { grid-template-columns: 60px 1fr; grid-template-areas: "media main" "aside aside"; row-gap: var(--mp-sp-3); }
  .mp-rd .mp-row__media { width: 60px; height: 60px; }
  .mp-rd .mp-row__aside { grid-area: aside; justify-content: space-between; width: 100%; border-top: 1px solid var(--mp-border); padding-top: var(--mp-sp-3); gap: var(--mp-sp-3); }
  .mp-rd .mp-row__price { text-align: left; }
}

/* --- Barre d'outils liste : compteur + tri + toggle grille/liste --------- */
.mp-rd .mp-listbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--mp-sp-3);
  margin-bottom: var(--mp-sp-5);
}
.mp-rd .mp-listbar__count { font-size: .9rem; color: var(--mp-text-muted); }
.mp-rd .mp-listbar__count strong { color: var(--mp-text); font-weight: 700; }
.mp-rd .mp-listbar__tools { display: flex; align-items: center; gap: var(--mp-sp-3); }

.mp-rd .mp-viewtoggle {
  display: inline-flex;
  padding: 3px;
  background: var(--mp-surface);
  border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius);
}
.mp-rd .mp-viewtoggle__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 34px;
  border-radius: var(--mp-radius-sm);
  color: var(--mp-text-muted);
  transition: background var(--mp-t-fast), color var(--mp-t-fast);
}
.mp-rd .mp-viewtoggle__btn svg { width: 18px; height: 18px; }
.mp-rd .mp-viewtoggle__btn:hover { color: var(--mp-text); }
.mp-rd .mp-viewtoggle__btn[aria-pressed="true"] {
  background: var(--mp-white);
  color: var(--mp-text);
  box-shadow: var(--mp-shadow-sm);
}

/* ==========================================================================
   13. UTILITAIRES
   ========================================================================== */
.mp-rd .mp-text-center  { text-align: center; }
.mp-rd .mp-text-muted   { color: var(--mp-text-muted); }
.mp-rd .mp-text-gold    { color: var(--mp-gold-text); }
.mp-rd .mp-mono         { font-family: var(--mp-font-mono); font-weight: 500; letter-spacing: -.01em; }
.mp-rd .mp-mt-2 { margin-top: var(--mp-sp-2); }
.mp-rd .mp-mt-4 { margin-top: var(--mp-sp-4); }
.mp-rd .mp-mt-6 { margin-top: var(--mp-sp-6); }
.mp-rd .mp-mt-8 { margin-top: var(--mp-sp-8); }
.mp-rd .mp-mb-4 { margin-bottom: var(--mp-sp-4); }
.mp-rd .mp-mb-6 { margin-bottom: var(--mp-sp-6); }
.mp-rd .mp-mb-8 { margin-bottom: var(--mp-sp-8); }

/* Masqué visuellement mais lisible par lecteurs d'écran */
.mp-rd .mp-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   14. ACCESSIBILITÉ
   ========================================================================== */

/* Anneau de focus or, visible uniquement au clavier */
.mp-rd :focus-visible {
  outline: none;
  box-shadow: var(--mp-focus-ring);
  border-radius: var(--mp-radius-sm);
}
.mp-rd .mp-btn:focus-visible,
.mp-rd .mp-input:focus-visible,
.mp-rd .mp-select:focus-visible { border-radius: var(--mp-radius); }

/* Lien d'évitement (peut rester) */
.mp-rd .mp-skip-link {
  position: absolute;
  top: -64px;
  left: var(--mp-sp-4);
  z-index: 200;
  padding: var(--mp-sp-3) var(--mp-sp-5);
  background: var(--mp-gold);
  color: var(--mp-dark-deep);
  font-weight: 700;
  border-radius: 0 0 var(--mp-radius) var(--mp-radius);
  text-decoration: none;
  transition: top var(--mp-t-fast);
}
.mp-rd .mp-skip-link:focus { top: 0; }

/* ==========================================================================
   B. COMPOSITIONS SPÉCIFIQUES HOMEPAGE (designs/index.html)
   ========================================================================== */

/* --- HERO ----------------------------------------------------------------- */
.mp-rd .mp-hero {
  position: relative;
  background:
    radial-gradient(ellipse 900px 500px at 85% -10%, rgba(230, 168, 23, .16), transparent 60%),
    radial-gradient(ellipse 700px 420px at -5% 110%, rgba(230, 168, 23, .07), transparent 55%),
    linear-gradient(160deg, var(--mp-dark-deep) 0%, var(--mp-dark) 55%, #232323 100%);
  color: var(--mp-text-on-dark);
  overflow: hidden;
}
.mp-rd .mp-hero__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 35%;
  opacity: .2; filter: saturate(.8) contrast(1.05);
}
.mp-rd .mp-hero::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(13, 13, 13, .88) 0%, rgba(13, 13, 13, .62) 52%, rgba(13, 13, 13, .35) 100%);
  z-index: 1;
}
.mp-rd .mp-hero__inner {
  display: grid; grid-template-columns: 1fr; gap: var(--mp-sp-10);
  align-items: center; padding-block: var(--mp-sp-12); position: relative; z-index: 2;
}
@media (min-width: 1024px) {
  .mp-rd .mp-hero__inner { grid-template-columns: 1.1fr .9fr; gap: var(--mp-sp-16); padding-block: var(--mp-sp-20); }
}
.mp-rd .mp-hero h1 { color: var(--mp-white); margin: var(--mp-sp-4) 0 var(--mp-sp-5); }
.mp-rd .mp-hero h1 em { font-style: normal; color: var(--mp-gold); }
.mp-rd .mp-hero__lead { font-size: 1.1rem; color: var(--mp-text-on-dark-muted); max-width: 520px; margin-bottom: var(--mp-sp-6); }
.mp-rd .mp-hero__points { display: flex; flex-direction: column; gap: var(--mp-sp-3); margin-bottom: var(--mp-sp-8); }
.mp-rd .mp-hero__point { display: flex; align-items: center; gap: var(--mp-sp-3); font-size: .95rem; color: var(--mp-text-on-dark); }
.mp-rd .mp-hero__point svg { width: 18px; height: 18px; color: var(--mp-gold); flex-shrink: 0; }

.mp-rd .mp-hero__panel {
  background: var(--mp-white); border-radius: var(--mp-radius-xl);
  box-shadow: var(--mp-shadow-xl), 0 0 0 1px rgba(255, 255, 255, .08);
  border-top: 4px solid var(--mp-gold); overflow: hidden;
}
.mp-rd .mp-hero__tabs { display: flex; background: var(--mp-surface); border-bottom: 1px solid var(--mp-border); }
.mp-rd .mp-hero__tab {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--mp-sp-2);
  min-height: 56px; font-family: var(--mp-font-display); font-size: .92rem; font-weight: 700;
  color: var(--mp-text-muted); border-bottom: 3px solid transparent;
  transition: color var(--mp-t-fast), border-color var(--mp-t-fast), background var(--mp-t-fast);
}
.mp-rd .mp-hero__tab svg { width: 18px; height: 18px; }
.mp-rd .mp-hero__tab[aria-selected="true"] { color: var(--mp-text); background: var(--mp-white); border-bottom-color: var(--mp-gold); }
.mp-rd .mp-hero__tabpanel { padding: var(--mp-sp-6); }
.mp-rd .mp-hero__tabpanel[hidden] { display: none; }
.mp-rd .mp-hero__panel-title { font-family: var(--mp-font-display); font-weight: 700; color: var(--mp-text); margin-bottom: var(--mp-sp-4); }
.mp-rd .mp-hero__fields { display: flex; flex-direction: column; gap: var(--mp-sp-3); }
.mp-rd .mp-hero__hint { display: flex; align-items: center; gap: var(--mp-sp-2); margin-top: var(--mp-sp-4); font-size: .8rem; color: var(--mp-text-muted); }
.mp-rd .mp-hero__hint svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--mp-gold-text); }
.mp-rd .mp-hero__hint .mp-mono { color: var(--mp-text-body); }

/* --- BANDEAU MARQUES --------------------------------------------------------- */
.mp-rd .mp-brands { background: var(--mp-white); border-block: 1px solid var(--mp-border); }
.mp-rd .mp-brands__inner { padding-block: var(--mp-sp-8); }
.mp-rd .mp-brands__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--mp-sp-3); }
.mp-rd .mp-brand-chip {
  display: inline-flex; align-items: center; min-height: 48px; padding: var(--mp-sp-2) var(--mp-sp-6);
  font-family: var(--mp-font-display); font-size: 1rem; font-weight: 800; letter-spacing: .08em;
  color: var(--mp-text-muted); background: var(--mp-surface); border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius); text-decoration: none;
  transition: color var(--mp-t-fast), border-color var(--mp-t-fast), background var(--mp-t-fast), transform var(--mp-t-fast), box-shadow var(--mp-t-fast);
}
.mp-rd .mp-brand-chip:hover { color: var(--mp-text); border-color: var(--mp-gold); background: var(--mp-gold-soft); text-decoration: none; transform: translateY(-2px); box-shadow: var(--mp-shadow); }

/* --- BLOC COMPTE PRO ---------------------------------------------------------- */
.mp-rd .mp-pro {
  position: relative;
  background:
    radial-gradient(ellipse 700px 400px at 100% 0%, rgba(230, 168, 23, .16), transparent 55%),
    linear-gradient(150deg, var(--mp-dark-deep), var(--mp-dark) 70%);
  border-radius: var(--mp-radius-xl); color: var(--mp-text-on-dark); overflow: hidden; box-shadow: var(--mp-shadow-xl);
}
.mp-rd .mp-pro__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .14; filter: saturate(.7); }
.mp-rd .mp-pro::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(13, 13, 13, .85) 0%, rgba(13, 13, 13, .55) 60%, rgba(13, 13, 13, .35) 100%); }
.mp-rd .mp-pro__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr; gap: var(--mp-sp-8); padding: var(--mp-sp-8); }
@media (min-width: 1024px) { .mp-rd .mp-pro__inner { grid-template-columns: 1.2fr .8fr; gap: var(--mp-sp-16); padding: var(--mp-sp-12); align-items: center; } }
.mp-rd .mp-pro h2 { color: var(--mp-white); margin: var(--mp-sp-3) 0 var(--mp-sp-4); }
.mp-rd .mp-pro p { color: var(--mp-text-on-dark-muted); max-width: 520px; }
.mp-rd .mp-pro__steps { display: flex; flex-direction: column; gap: var(--mp-sp-4); }
.mp-rd .mp-pro__step { display: flex; gap: var(--mp-sp-4); padding: var(--mp-sp-4) var(--mp-sp-5); background: rgba(20, 20, 20, .55); border: 1px solid rgba(255, 255, 255, .09); border-radius: var(--mp-radius-lg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: border-color var(--mp-t), transform var(--mp-t); }
.mp-rd .mp-pro__step:hover { border-color: rgba(230, 168, 23, .4); transform: translateX(4px); }
.mp-rd .mp-pro__step-num { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--mp-gold); color: var(--mp-dark-deep); font-family: var(--mp-font-display); font-weight: 800; font-size: .95rem; flex-shrink: 0; }
.mp-rd .mp-pro__step strong { display: block; color: var(--mp-white); font-family: var(--mp-font-display); margin-bottom: 2px; }
.mp-rd .mp-pro__step span { font-size: .85rem; color: var(--mp-text-on-dark-muted); }
.mp-rd .mp-pro__phone { display: inline-flex; align-items: center; gap: var(--mp-sp-2); color: var(--mp-text-on-dark-muted); font-size: .9rem; }
.mp-rd .mp-pro__phone svg { width: 16px; height: 16px; color: var(--mp-gold); }
.mp-rd .mp-pro__phone a { color: var(--mp-white); font-weight: 700; font-size: 1.05rem; }
.mp-rd .mp-pro__phone a:hover { color: var(--mp-gold); text-decoration: none; }

/* --- CHIFFRES CLÉS + ATELIER ----------------------------------------------- */
.mp-rd .mp-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--mp-sp-5); }
@media (min-width: 1024px) { .mp-rd .mp-stats { grid-template-columns: repeat(4, 1fr); } }
.mp-rd .mp-stat { position: relative; padding: var(--mp-sp-6); background: var(--mp-white); border: 1px solid var(--mp-border); border-radius: var(--mp-radius-lg); text-align: center; overflow: hidden; transition: transform var(--mp-t), box-shadow var(--mp-t), border-color var(--mp-t); }
.mp-rd .mp-stat::before { content: ""; position: absolute; top: 0; left: 50%; width: 48px; height: 3px; transform: translateX(-50%); background: var(--mp-gold); border-radius: 0 0 3px 3px; opacity: 0; transition: opacity var(--mp-t), width var(--mp-t); }
.mp-rd .mp-stat:hover { transform: translateY(-3px); box-shadow: var(--mp-shadow-md); border-color: var(--mp-gold-border); }
.mp-rd .mp-stat:hover::before { opacity: 1; width: 72px; }
.mp-rd .mp-stat__value { font-family: var(--mp-font-display); font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 800; color: var(--mp-text); line-height: 1.1; }
.mp-rd .mp-stat__value em { font-style: normal; color: var(--mp-gold-text); }
.mp-rd .mp-stat__label { margin-top: var(--mp-sp-2); font-size: .88rem; color: var(--mp-text-muted); }

.mp-rd .mp-atelier { display: grid; grid-template-columns: 1fr; gap: var(--mp-sp-10); align-items: center; }
@media (min-width: 1024px) { .mp-rd .mp-atelier { grid-template-columns: .85fr 1.15fr; gap: var(--mp-sp-16); } }
.mp-rd .mp-atelier__media { aspect-ratio: 4 / 5; max-height: 560px; }
.mp-rd .mp-atelier__points { display: flex; flex-direction: column; gap: var(--mp-sp-4); margin-block: var(--mp-sp-6); }
.mp-rd .mp-atelier__point { display: flex; align-items: flex-start; gap: var(--mp-sp-3); }
.mp-rd .mp-atelier__point svg { width: 22px; height: 22px; color: var(--mp-gold-text); background: var(--mp-gold-soft); border: 1px solid var(--mp-gold-border); border-radius: 50%; padding: 3px; flex-shrink: 0; margin-top: 2px; }
.mp-rd .mp-atelier__point strong { display: block; font-family: var(--mp-font-display); color: var(--mp-text); }
.mp-rd .mp-atelier__point span { font-size: .9rem; color: var(--mp-text-muted); }

/* En-tête de section avec lien "voir tout" à droite */
.mp-rd .mp-row-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--mp-sp-4); flex-wrap: wrap; margin-bottom: var(--mp-sp-8); }
.mp-rd .mp-row-head .mp-section-head { margin-bottom: 0; }

/* ==========================================================================
   BANDEAU VÉHICULE ACTIF — CHROME GLOBAL (volontairement NON scopé .mp-rd).
   Rendu sous le header sur toutes les pages quand un véhicule par défaut existe
   (mondial_garage). Aucune collision (.mp-vehicle-bar* = net-new). Tokens thème.
   ========================================================================== */
.mp-vehicle-bar {
  background: linear-gradient(90deg, rgba(230,168,23,.14), var(--mp-bg-card-dark) 55%);
  border-top: 1px solid var(--mp-border-dark);
  border-bottom: 1px solid var(--mp-border-dark);
  color: var(--mp-text-on-dark);
}
.mp-vehicle-bar__inner {
  max-width: 1600px; margin: 0 auto; padding: 10px 24px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: 'Inter', sans-serif; font-size: .9rem;
}
.mp-vehicle-bar__icon { display: inline-flex; }
.mp-vehicle-bar__icon svg { width: 20px; height: 20px; color: var(--mp-accent); }
.mp-vehicle-bar__label { color: var(--mp-text-muted-dark); }
.mp-vehicle-bar__value { color: #fff; font-weight: 700; }
.mp-vehicle-bar__actions { margin-left: auto; display: flex; gap: 8px; }
.mp-vehicle-bar__btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border: 1px solid rgba(230,168,23,.5); border-radius: 999px;
  color: var(--mp-accent); background: transparent; font-size: .82rem; font-weight: 600;
  text-decoration: none; transition: background .15s, color .15s, border-color .15s;
}
.mp-vehicle-bar__btn svg { width: 15px; height: 15px; }
.mp-vehicle-bar__btn:hover { background: var(--mp-accent); color: var(--mp-bg-deep); border-color: var(--mp-accent); text-decoration: none; }
@media (max-width: 640px) {
  /* ── Bandeau véhicule, refonte mobile (04/08) ──────────────────────────
     Trois défauts constatés en capture :
     1. le nom du véhicule était COUPÉ à droite — dans un conteneur flex, un
        élément porte `min-width: auto` et refuse de rétrécir, donc le texte
        débordait au lieu de passer à la ligne ;
     2. `__actions { width: 100% }` reléguait « Changer » seul sur une ligne,
        déséquilibrant tout le bandeau ;
     3. le dégradé à 90° se coupait brutalement sur un écran étroit.

     On repasse sur UNE rangée : icône · nom (qui passe à la ligne) · bouton
     compact à droite. */
  .mp-vehicle-bar {
    background: linear-gradient(135deg, rgba(230,168,23,.16), var(--mp-bg-card-dark) 70%);
  }
  .mp-vehicle-bar__inner {
    font-size: .82rem;
    padding: 10px 14px;
    gap: 10px;
    flex-wrap: nowrap;          /* une seule rangée */
    align-items: center;
  }
  .mp-vehicle-bar__icon { flex: 0 0 auto; }
  .mp-vehicle-bar__label { display: none; }

  /* Le nom occupe la place restante et passe à la ligne au lieu de déborder.
     Deux lignes suffisent : au-delà, on coupe proprement. */
  .mp-vehicle-bar__value {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
  }

  /* Le bouton reste à droite, compact, sans jamais se faire écraser. */
  .mp-vehicle-bar__actions { margin-left: auto; width: auto; flex: 0 0 auto; }
  .mp-vehicle-bar__btn {
    padding: 0 12px;
    min-height: 44px;
    border-radius: 10px;
    font-size: .78rem;
    white-space: nowrap;
  }
}

/* Très petits écrans : le libellé du bouton s'efface, l'icône suffit —
   la flèche de rechargement est comprise, et on gagne la largeur pour le nom. */
@media (max-width: 400px) {
  .mp-vehicle-bar__btn { font-size: 0; padding: 0; width: 44px; justify-content: center; }
  .mp-vehicle-bar__btn svg { width: 18px; height: 18px; }
}

/* ── Bandeau cookies mobile (audit tunnel 06/08) : il couvrait 42% du viewport
   et masquait le CTA Commander. Compact + scrollable, la lib impose ses styles
   inline d'ou les !important. ── */
@media (max-width: 767px) {
  #tarteaucitronRoot #tarteaucitronAlertBig {
    max-height: 34vh !important;
    overflow-y: auto !important;
    padding: 12px 14px 10px !important;
    font-size: 12px !important;
  }
  #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronDisclaimerAlert {
    font-size: 12px !important;
    line-height: 1.4 !important;
    margin-bottom: 6px !important;
  }
  #tarteaucitronRoot #tarteaucitronAlertBig .tarteaucitronCTAButton,
  #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronCloseAlert,
  #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPrivacyUrl {
    padding: 9px 14px !important;
    margin: 4px 4px 0 0 !important;
    font-size: 12px !important;
  }
}

/* ── Motion discret (07/08) : les sections et cartes se revelent au scroll.
   mp-motion.js pose .mp-reveal puis .mp-in ; sans JS ou avec reduced-motion,
   rien ne change (les elements restent pleinement visibles). ── */
.mp-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s cubic-bezier(.22,.7,.3,1), transform .55s cubic-bezier(.22,.7,.3,1);
  will-change: opacity, transform;
}
.mp-reveal.mp-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .mp-reveal { opacity: 1; transform: none; transition: none; }
}

/* Le hero respire : la photo etait noyee sous l'overlay — on laisse passer la
   lumiere et on signe d'un filet dore en pied de hero. */
.mp-rd .mp-hero { position: relative; }
.mp-rd .mp-hero::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 5%, var(--mp-accent, #e6a817) 50%, transparent 95%);
  opacity: .85;
  pointer-events: none;
}

/* ── WOW vague 2 (07/08) : le hero retrouve sa photo. L'image etait noyee
   (opacite .2 + voile sombre uniforme) : on la laisse respirer a droite, le
   texte garde son assise sombre a gauche, et une lueur doree signe la scene. ── */
.mp-rd .mp-hero__bg {
  opacity: .38;
  filter: saturate(1.05) contrast(1.08);
}
.mp-rd .mp-hero::before {
  background:
    radial-gradient(ellipse 60% 80% at 82% 30%, rgba(230, 168, 23, .10) 0%, transparent 60%),
    linear-gradient(100deg, rgba(13, 13, 13, .92) 0%, rgba(13, 13, 13, .58) 48%, rgba(13, 13, 13, .18) 100%);
}

/* ── HERO V4 (08/08, maquette North Star) : une seule idee — chercher.
   Pas de photo obligatoire (.mp-hero__photo optionnelle, masquee par onerror) :
   scene composee degrade noir profond + lueurs dorees + silhouette voiture. ── */
.mp-rd .mp-hero--v4 {
  background:
    radial-gradient(ellipse 55% 70% at 80% 35%, rgba(230, 168, 23, .14) 0%, transparent 60%),
    radial-gradient(ellipse 40% 50% at 88% 75%, rgba(230, 168, 23, .07) 0%, transparent 65%),
    linear-gradient(100deg, #0d0d0d 0%, #0d0d0d 46%, #16130b 75%, #1d180c 100%);
}
.mp-rd .mp-hero--v4::before { content: none; }
.mp-rd .mp-hero--v4 .mp-hero__inner,
.mp-rd .mp-hero--v4 .mp-hero__inner .mp-hero__text { position: relative; z-index: 2; }
.mp-rd .mp-hero--v4 .mp-hero__inner { padding-block: clamp(56px, 9vw, 118px); }
@media (min-width: 1024px) {
  .mp-rd .mp-hero--v4 .mp-hero__inner { grid-template-columns: 1fr; gap: 0; }
}
.mp-rd .mp-hero__scene {
  position: absolute; inset: 0 0 0 42%;
  pointer-events: none;
  z-index: 1;
}
/* Silhouette en ::before avec SA PROPRE opacite : sur le conteneur, elle
   eteignait aussi la photo (lecon du 08/08 — voiture fantome ambree). */
.mp-rd .mp-hero__scene::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 100' fill='none' stroke='%23e6a817' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 72h14a14 14 0 0 1 28 0h94a14 14 0 0 1 28 0h22c8 0 13-4 13-11 0-8-6-12-16-14l-34-6-27-22a25 25 0 0 0-16-6h-38a30 30 0 0 0-21 9L38 42l-21 5C9 49 4 54 4 61c0 7 3 11 8 11Z'/%3E%3Ccircle cx='40' cy='76' r='11'/%3E%3Ccircle cx='162' cy='76' r='11'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6% bottom 16%;
  background-size: min(620px, 82%);
  opacity: .14;
}
.mp-rd .mp-hero__photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center right;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 38%);
}
.mp-rd .mp-hero__title {
  display: flex; flex-direction: column;
  font-size: clamp(2.4rem, 5.5vw, 4.2rem);
  font-weight: 800; line-height: 1.04; letter-spacing: -.02em;
  color: #fff; margin: 14px 0 28px;
}
.mp-rd .mp-hero-search {
  display: flex; align-items: center; gap: 8px;
  max-width: 640px; padding: 6px 6px 6px 18px;
  background: #fff; border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
}
.mp-rd .mp-hero-search__ico { flex: 0 0 auto; color: #8a8374; }
.mp-rd .mp-hero-search__input {
  flex: 1; min-width: 0; min-height: 52px;
  border: 0; outline: none; background: transparent;
  font-size: 1.05rem; color: #1a1a1a;
}
.mp-rd .mp-hero-search__input::placeholder { color: #9b948a; }
.mp-rd .mp-hero-search__btn {
  flex: 0 0 auto; min-height: 52px; padding: 0 26px;
  background: var(--mp-gold, #e6a817); color: #1a1a1a;
  font-family: var(--mp-font-display); font-weight: 700; font-size: 1rem;
  border: 0; border-radius: 12px; cursor: pointer;
  transition: filter .15s, transform .15s;
}
.mp-rd .mp-hero-search__btn:hover { filter: brightness(1.06); }
.mp-rd .mp-hero-veh {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 16px; padding: 6px 8px 6px 14px;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px;
  color: rgba(255, 255, 255, .85); font-size: .88rem;
}
.mp-rd .mp-hero-veh svg { color: var(--mp-gold, #e6a817); flex-shrink: 0; }
.mp-rd .mp-hero-veh__label { max-width: 380px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-rd .mp-hero-veh__change {
  min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px;
  background: rgba(230, 168, 23, .14); color: var(--mp-gold, #e6a817);
  font-weight: 700; font-size: .82rem; cursor: pointer;
  transition: background .15s;
}
.mp-rd .mp-hero-veh__change:hover { background: rgba(230, 168, 23, .26); }
.mp-rd .mp-vehfinder { background: #f6f4ee; }
.mp-rd .mp-vehfinder .mp-hero__widget { max-width: 860px; margin-inline: auto; }
/* (Vague 6 : le hero original est de retour sur la home — le bandeau véhicule
   header y est de nouveau visible, comme à l'origine.) */
@media (max-width: 720px) {
  .mp-rd .mp-hero__scene { inset: auto 0 0 0; height: 46%; }
  .mp-rd .mp-hero__scene::before { opacity: .06; background-position: right -8% bottom 4%; }
  .mp-rd .mp-hero__photo { display: none; }
  .mp-rd .mp-hero-search { flex-wrap: wrap; padding: 8px; gap: 6px; }
  .mp-rd .mp-hero-search__ico { display: none; }
  .mp-rd .mp-hero-search__input { min-height: 46px; flex: 1 1 100%; padding: 0 10px; }
  .mp-rd .mp-hero-search__btn { flex: 1 1 100%; min-height: 48px; }
  .mp-rd .mp-hero-veh__label { max-width: 200px; }
}

/* Fiche produit : l'image sur une vraie scene — fond radial chaud, zoom doux
   au survol. Une courroie a 24 EUR merite d'etre presentee comme une piece. */
.mpProd__cover {
  background: radial-gradient(ellipse at 50% 42%, #ffffff 52%, #f4f0e7 100%);
}
.mpProd__cover-img {
  transition: transform .45s cubic-bezier(.22,.7,.3,1);
}
.mpProd__cover:hover .mpProd__cover-img {
  transform: scale(1.045);
}