/* ============================================================
   market.css — Place de marché AHITCHE
   ------------------------------------------------------------
   Charge après tokens.css · base.css · components.css.
   Réutilise .btn / .field / .input / .toast / .modal / .loader.
   ============================================================ */

:root {
  --font-display: "Bricolage Grotesque", "Spline Sans", sans-serif;
  --mkt-maxw: 1180px;
}

body { background: var(--bg); }

.mkt { min-height: 100vh; display: flex; flex-direction: column; }
.mkt-main { flex: 1; }

.wrap {
  max-width: var(--mkt-maxw);
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 32px);
}

/* ============================================================
   EN-TÊTE
   ============================================================ */
.mkt-header { position: relative; z-index: 40; }

/* Barre supérieure — gages de confiance */
.mkt-topbar {
  background: #11261b;
  color: #c4cfc7;
  font-size: var(--fs-xs);
}
.mkt-topbar__inner {
  max-width: var(--mkt-maxw);
  margin: 0 auto;
  padding: 7px clamp(16px, 4vw, 32px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}
.mkt-topbar__items { display: flex; gap: clamp(12px, 2.4vw, 28px); flex-wrap: wrap; }
.mkt-topbar__item { display: inline-flex; align-items: center; gap: 6px; }
.mkt-topbar__contact { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.mkt-topbar svg { width: 14px; height: 14px; color: #5fb98a; flex: none; }

/* Barre principale — collante */
.mkt-mainbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.mkt-header__inner {
  max-width: var(--mkt-maxw);
  margin: 0 auto;
  padding: 10px clamp(16px, 4vw, 32px);
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.6vw, 20px);
}
.mkt-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  cursor: pointer;
  background: none;
  border: none;
}
.mkt-brand__mark {
  width: 42px; height: 42px;
  flex: none;
  display: grid; place-items: center;
  background: var(--green);
  color: #fff;
  border-radius: 11px;
}
.mkt-brand__mark svg { width: 24px; height: 24px; }
.mkt-brand__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -.02em;
  line-height: 1;
}
.mkt-brand__tag {
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  margin-top: 2px;
  white-space: nowrap;
}
/* Navigation */
.mkt-nav { display: flex; align-items: center; gap: 2px; margin-right: auto; }
.mkt-nav__link {
  padding: 8px 12px;
  background: none;
  border: none;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  color: var(--ink-soft);
  transition: color var(--tr), background var(--tr);
}
.mkt-nav__link:hover { color: var(--green); background: var(--green-tint); }

.mkt-header__actions { display: flex; align-items: center; gap: var(--sp-2); }

/* Recherche intégrée */
.mkt-search { position: relative; display: flex; align-items: center; }
.mkt-search > svg {
  position: absolute;
  left: 13px;
  width: 16px; height: 16px;
  color: var(--ink-mute);
  pointer-events: none;
}
.mkt-search__input {
  width: 188px;
  height: 42px;
  padding-left: 38px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  font-size: var(--fs-sm);
}
.mkt-search__input:focus { background: var(--surface); }

/* Bouton « Se connecter » + menu */
.mkt-login-wrap { position: relative; }
.mkt-login {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 42px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  color: var(--ink);
  transition: border-color var(--tr);
}
.mkt-login:hover { border-color: var(--green); }
.mkt-login svg { width: 17px; height: 17px; }
.mkt-login__chev { display: inline-flex; transition: transform var(--tr); }
.mkt-login__chev svg { width: 13px; height: 13px; color: var(--ink-mute); }
.mkt-login-wrap.is-open .mkt-login { border-color: var(--green); }
.mkt-login-wrap.is-open .mkt-login__chev { transform: rotate(180deg); }

.mkt-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 272px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-2);
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--tr), transform var(--tr), visibility var(--tr);
}
.mkt-login-wrap.is-open .mkt-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mkt-menu__head {
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-mute);
  padding: 8px 10px 6px;
}
.mkt-menu__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 10px;
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--ink);
  transition: background var(--tr);
}
.mkt-menu__item:hover { background: var(--surface-2); }
.mkt-menu__ico {
  flex: none;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: var(--green-tint);
  color: var(--green);
  border-radius: var(--r-md);
}
.mkt-menu__ico svg { width: 18px; height: 18px; }
.mkt-menu__item strong { display: block; font-size: var(--fs-sm); }
.mkt-menu__desc { font-size: var(--fs-xs); color: var(--ink-soft); }

.mkt-cart-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 9px 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: border-color var(--tr), background var(--tr);
}
.mkt-cart-btn:hover { border-color: var(--green); }
.mkt-cart-btn svg { width: 18px; height: 18px; }
.mkt-cart-btn__count {
  position: absolute;
  top: -6px; right: -6px;
  min-width: 19px; height: 19px;
  padding: 0 5px;
  display: grid; place-items: center;
  background: var(--green);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: var(--r-pill);
  border: 2px solid var(--surface);
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  background:
    radial-gradient(680px 360px at 88% -10%, rgba(28,107,67,.16), transparent 70%),
    linear-gradient(170deg, #eef4ec 0%, #f4f1e6 70%, var(--bg) 100%);
  border-bottom: 1px solid var(--line);
}
.hero__inner {
  max-width: var(--mkt-maxw);
  margin: 0 auto;
  padding: clamp(36px, 6vw, 76px) clamp(16px, 4vw, 32px);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(20px, 4vw, 56px);
}
.hero__content { min-width: 0; }
.hero__art { position: relative; }
.hero-art {
  display: block;
  width: 100%;
  height: auto;
  max-width: 440px;
  margin: 0 auto;
  animation: ha-in .9s var(--ease) both;
}

/* Animations de l'illustration */
@keyframes ha-in {
  from { opacity: 0; transform: translateY(20px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
@keyframes ha-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
@keyframes ha-bob-a {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-16px); }
}
@keyframes ha-bob-b {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(12px); }
}
@keyframes ha-twinkle {
  0%, 100% { opacity: .2; transform: scale(.55); }
  50%      { opacity: 1;  transform: scale(1); }
}
.ha-figure  { animation: ha-float 5.5s ease-in-out infinite; }
.ha-float-a { animation: ha-bob-a 4.3s ease-in-out infinite; }
.ha-float-b { animation: ha-bob-b 5s ease-in-out infinite .4s; }
.ha-float-c { animation: ha-bob-a 4.8s ease-in-out infinite .7s; }
.ha-badge   { animation: ha-bob-b 4.6s ease-in-out infinite .2s; }
.ha-spark   {
  transform-box: fill-box;
  transform-origin: center;
  animation: ha-twinkle 3.2s ease-in-out infinite;
}
.ha-spark-2 { animation-delay: 1.1s; }
.ha-spark-3 { animation-delay: 2.1s; }
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--green);
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 5px 12px;
  border-radius: var(--r-pill);
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.1rem, 5.4vw, 3.7rem);
  line-height: 1.04;
  letter-spacing: -.035em;
  margin-top: var(--sp-4);
  max-width: 16ch;
}
.hero__title em { font-style: normal; color: var(--green); }
.hero__text {
  font-size: var(--fs-md);
  color: var(--ink-soft);
  margin-top: var(--sp-4);
  max-width: 52ch;
  line-height: 1.6;
}
.hero__search {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
  max-width: 540px;
}
.hero__search .search-field { flex: 1; }
.hero__search .input {
  height: 52px;
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: var(--fs-base);
}
.hero__search .search-field svg { left: 18px; }
.hero__search .search-field .input { padding-left: 46px; }
.hero__search .btn { height: 52px; padding-inline: 24px; }

.hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 5vw, 52px);
  margin-top: var(--sp-6);
}
.hero__stat-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.9rem;
  letter-spacing: -.03em;
  color: var(--green);
}
.hero__stat-label { font-size: var(--fs-xs); color: var(--ink-soft); }

/* ============================================================
   SECTIONS
   ============================================================ */
.section { padding: clamp(32px, 5vw, 56px) 0; }
.section__head { margin-bottom: var(--sp-5); }
.section__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xl);
  letter-spacing: -.025em;
}
.section__sub { font-size: var(--fs-sm); color: var(--ink-soft); margin-top: 3px; }
.section--tint { background: linear-gradient(180deg, #edf3eb, var(--bg)); }
.section__head--center {
  text-align: center;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

/* Comment ça marche */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}
.step {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  text-align: center;
  box-shadow: var(--shadow-xs);
}
.step__num {
  position: absolute;
  top: -16px; left: 50%;
  transform: translateX(-50%);
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: var(--green);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  border-radius: 50%;
}
.step__icon {
  width: 56px; height: 56px;
  margin: 4px auto var(--sp-3);
  display: grid; place-items: center;
  background: var(--green-tint);
  color: var(--green);
  border-radius: 50%;
}
.step__icon svg { width: 26px; height: 26px; }
.step__titre { font-size: var(--fs-md); font-weight: 600; }
.step__texte { font-size: var(--fs-sm); color: var(--ink-soft); margin-top: 6px; line-height: 1.55; }

/* Nos engagements */
.values {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
}
.value {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-xs);
  transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr);
}
.value:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-sm);
  border-color: var(--line-strong);
}
.value__icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--green-tint);
  color: var(--green);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-3);
}
.value__icon svg { width: 22px; height: 22px; }
.value__titre { font-size: var(--fs-md); font-weight: 600; }
.value__texte { font-size: var(--fs-sm); color: var(--ink-soft); margin-top: 5px; line-height: 1.55; }

/* Bande d'appel à l'action */
.cta-band {
  background: linear-gradient(150deg, var(--green-700), var(--green));
  color: #fff;
}
.cta-band__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  flex-wrap: wrap;
  padding-top: clamp(36px, 5vw, 60px);
  padding-bottom: clamp(36px, 5vw, 60px);
}
.cta-band__eyebrow {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}
.cta-band__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  letter-spacing: -.025em;
  margin-top: 6px;
}
.cta-band__text {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, .85);
  margin-top: 8px;
  max-width: 48ch;
}
.btn--cta {
  flex: none;
  background: #fff;
  color: var(--green);
}
.btn--cta:hover { background: #eef0ea; }

/* Filtres par catégorie */
.cat-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}
.cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-soft);
  transition: all var(--tr);
}
.cat-chip:hover { border-color: var(--green); color: var(--ink); }
.cat-chip.is-active {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
.cat-chip__n { font-size: var(--fs-xs); opacity: .7; }

/* ============================================================
   GRILLE & CARTES PRODUIT
   ============================================================ */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: var(--sp-4);
}
.product-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr);
  animation: rise .4s var(--ease) both;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-strong);
}

/* Visuel par catégorie */
.product-visual {
  position: relative;
  aspect-ratio: 5 / 3;
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 120% at 75% 12%, color-mix(in srgb, var(--hue-deep) 14%, var(--hue)) 0%, var(--hue) 60%);
  color: var(--hue-deep);
  overflow: hidden;
}
.product-visual::before {
  content: "";
  position: absolute;
  width: 150px; height: 150px;
  right: -38px; top: -46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .35);
}
.product-visual svg { width: 58px; height: 58px; position: relative; }
.product-visual--lg { aspect-ratio: 4 / 3; border-radius: var(--r-lg); }
.product-visual--lg svg { width: 92px; height: 92px; }
.product-visual__cat {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 2;
  font-size: var(--fs-xs);
  font-weight: 600;
  background: rgba(255, 255, 255, .92);
  color: var(--ink);
  padding: 3px 9px;
  border-radius: var(--r-pill);
  box-shadow: 0 1px 4px rgba(20, 24, 20, .12);
}

/* Photo de produit (recouvre la vignette de catégorie) */
.product-photo {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Teintes par catégorie (--hue clair, --hue-deep foncé) */
.cat--fruits     { --hue: #e7f1e2; --hue-deep: #3f8a44; }
.cat--cereales   { --hue: #f4ecd6; --hue-deep: #b08820; }
.cat--poisson    { --hue: #ddeaf0; --hue-deep: #2f7390; }
.cat--transformes{ --hue: #f6e7d6; --hue-deep: #bd6a2c; }
.cat--viandes    { --hue: #f3e1db; --hue-deep: #b04a38; }
.cat--epices     { --hue: #f4e2d2; --hue-deep: #b3551e; }
.cat--bienetre   { --hue: #dcece8; --hue-deep: #2f8672; }
.cat--artisanat  { --hue: #ece4d7; --hue-deep: #8a6a3f; }
.cat--autre      { --hue: #e9e9e3; --hue-deep: #6b6f69; }

.product-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--sp-4);
  flex: 1;
}
.product-card__name {
  font-weight: 600;
  font-size: var(--fs-md);
  line-height: 1.25;
}
.product-card__producer {
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 5px;
}
.product-card__meta {
  font-size: var(--fs-xs);
  color: var(--ink-mute);
  display: flex;
  align-items: center;
  gap: 5px;
}
.product-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-top: auto;
  padding-top: var(--sp-3);
}
.product-card__price {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-md);
  letter-spacing: -.02em;
}
.icon-btn {
  flex: none;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: none;
  border-radius: var(--r-md);
  background: var(--green);
  color: #fff;
  transition: background var(--tr), transform var(--tr);
}
.icon-btn:hover { background: var(--green-700); }
.icon-btn:active { transform: scale(.93); }
.icon-btn svg { width: 18px; height: 18px; }

/* ============================================================
   FICHE PRODUIT
   ============================================================ */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-soft);
  background: none;
  border: none;
  padding: var(--sp-3) 0;
}
.back-link:hover { color: var(--green); }
.back-link svg { width: 16px; height: 16px; }

.product-detail {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(20px, 4vw, 44px);
  align-items: start;
}
.product-detail__info { display: flex; flex-direction: column; }
.product-detail__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  letter-spacing: -.03em;
  line-height: 1.1;
  margin-top: var(--sp-3);
}
.product-detail__price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.7rem;
  color: var(--green);
  margin: var(--sp-4) 0;
}
.spec-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.spec {
  background: var(--surface);
  padding: var(--sp-3) var(--sp-4);
}
.spec__k {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-mute);
  font-weight: 600;
}
.spec__v { font-size: var(--fs-sm); margin-top: 2px; }

.producer-box {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--tr);
}
.producer-box:hover { border-color: var(--green); }
.producer-box__avatar {
  flex: none;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--green-tint);
  color: var(--green);
  font-weight: 700;
}
.producer-box__name { font-weight: 600; }
.producer-box__loc { font-size: var(--fs-xs); color: var(--ink-soft); }
.producer-box__go { margin-left: auto; color: var(--ink-mute); }
.producer-box__go svg { width: 18px; height: 18px; }

.qty-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: var(--sp-5) 0 var(--sp-3);
}
.stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.stepper button {
  width: 40px; height: 44px;
  border: none;
  background: var(--surface);
  color: var(--ink);
  display: grid; place-items: center;
}
.stepper button:hover { background: var(--surface-2); }
.stepper button svg { width: 15px; height: 15px; }
.stepper__val {
  width: 46px;
  text-align: center;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.quality-note {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  background: var(--green-tint);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}
.quality-note b { color: var(--ink); font-weight: 600; }

/* ============================================================
   FICHE PRODUCTEUR
   ============================================================ */
.producer-head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  margin-bottom: var(--sp-5);
}
.producer-head__avatar {
  flex: none;
  width: 68px; height: 68px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--green-tint);
  color: var(--green);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.6rem;
}
.producer-head__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xl);
  letter-spacing: -.025em;
}
.producer-head__meta { font-size: var(--fs-sm); color: var(--ink-soft); margin-top: 2px; }

/* ============================================================
   PANIER
   ============================================================ */
.cart-layout {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(20px, 4vw, 36px);
  align-items: start;
}
.cart-line {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  margin-bottom: var(--sp-2);
}
.cart-line__visual {
  position: relative;
  overflow: hidden;
  flex: none;
  width: 64px; height: 64px;
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: var(--hue);
  color: var(--hue-deep);
}
.cart-line__visual svg { width: 28px; height: 28px; }
.cart-line__body { flex: 1; min-width: 0; }
.cart-line__name { font-weight: 600; font-size: var(--fs-sm); }
.cart-line__producer { font-size: var(--fs-xs); color: var(--ink-soft); }
.cart-line__remove {
  background: none; border: none;
  color: var(--ink-mute);
  padding: 6px;
}
.cart-line__remove:hover { color: var(--neg); }
.cart-line__remove svg { width: 16px; height: 16px; }

.cart-aside {
  position: sticky;
  top: 86px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
}
.cart-aside h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-md);
}

/* ============================================================
   PIED DE PAGE
   ============================================================ */
.mkt-footer {
  background: #11261b;
  color: #cdd6cf;
}
.mkt-footer__inner {
  max-width: var(--mkt-maxw);
  margin: 0 auto;
  padding: clamp(36px, 5vw, 56px) clamp(16px, 4vw, 32px) var(--sp-5);
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--sp-6);
}
.mkt-footer__brand { display: flex; align-items: center; gap: 10px; }
.mkt-footer__mark {
  width: 34px; height: 34px;
  flex: none;
  display: grid; place-items: center;
  background: var(--green);
  color: #fff;
  border-radius: 9px;
}
.mkt-footer__mark svg { width: 20px; height: 20px; }
.mkt-footer__brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: #fff;
}
.mkt-footer__about {
  font-size: var(--fs-sm);
  color: #9fb0a4;
  margin-top: var(--sp-3);
  max-width: 40ch;
  line-height: 1.6;
}
.mkt-footer__col h4 {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #8fa295;
  margin-bottom: var(--sp-3);
}
.mkt-footer__link {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-sm);
  color: #cdd6cf;
  background: none;
  border: none;
  padding: 5px 0;
  text-decoration: none;
  transition: color var(--tr);
}
.mkt-footer__link:hover { color: #fff; }
.mkt-footer__link svg { width: 15px; height: 15px; }
.mkt-footer__bar {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding: var(--sp-4) clamp(16px, 4vw, 32px);
  max-width: var(--mkt-maxw);
  margin: 0 auto;
  font-size: var(--fs-xs);
  color: #7e9186;
}

/* ============================================================
   ÉTAT VIDE / RESPONSIVE
   ============================================================ */
.mkt-empty {
  text-align: center;
  padding: var(--sp-8) var(--sp-5);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  color: var(--ink-mute);
}
.mkt-empty svg { width: 48px; height: 48px; margin: 0 auto var(--sp-3); opacity: .5; }
.mkt-empty h3 { font-size: var(--fs-md); color: var(--ink-soft); }
.mkt-empty p { font-size: var(--fs-sm); margin-top: 4px; }
.success-action { margin-top: var(--sp-4); }

/* ---- Tailles d'icônes ------------------------------------ */
.hero__eyebrow svg { width: 14px; height: 14px; }
.product-card__producer svg,
.product-card__meta svg {
  width: 14px; height: 14px;
  flex: none;
  color: var(--ink-mute);
}
.section__title { line-height: 1.15; }

@media (max-width: 860px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__art { order: -1; }
  .hero-art { max-width: 300px; }
  .product-detail { grid-template-columns: 1fr; }
  .cart-layout { grid-template-columns: 1fr; }
  .cart-aside { position: static; }
  .mkt-footer__inner { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr; }
  .values { grid-template-columns: repeat(2, 1fr); }
  .cta-band__inner { flex-direction: column; align-items: flex-start; }
  .mkt-nav { display: none; }
  .mkt-search { display: none; }
  .mkt-topbar__contact { display: none; }
}
@media (max-width: 560px) {
  .hero__search { flex-direction: column; }
  .hero__search .btn { width: 100%; }
  .spec-grid { grid-template-columns: 1fr; }
  .mkt-footer__inner { grid-template-columns: 1fr; }
  .mkt-brand__tag { display: none; }
  .values { grid-template-columns: 1fr; }
  .mkt-topbar { display: none; }
  .mkt-login__label { display: none; }
  .mkt-cart-btn__label { display: none; }
}