/* PARADISE MALL — feuille de style unique.
   Les tokens sont identiques à app/globals.css du projet Next.js. */

:root {
  --forest: #16341c;
  --snow: #ffffff;
  --stone: #f4f4f2;
  --sap: #cdefa0;
  --pewter: #6b6b66;
  --line: #e8e8e4;
  --ink: #000000;
  --sale: #b3261e;

  --cat-maquillage: #a5806f;
  --cat-cheveux: #7f8a76;
  --cat-soin-visage: #6c8e7c;
  --cat-corps-bain: #90a0a4;
  --cat-bebe: #c2b49b;
  --cat-bien-etre: #9a9459;

  --display: "Instrument Serif", Georgia, serif;
  --sans: "Instrument Sans", system-ui, -apple-system, sans-serif;
  --wordmark: "Instrument Serif", Georgia, serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pad: clamp(20px, 5vw, 56px);
  --section: clamp(64px, 9vw, 128px);
  --max: 1320px;
}

* { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; scroll-behavior: smooth; overflow-x: hidden; }

body {
  margin: 0;
  overflow-x: hidden; /* le menu hors-écran ne doit pas élargir la page */
  background: var(--snow);
  color: var(--forest);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

h1, h2, h3 {
  font-family: var(--sans);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.12;
  text-transform: none;
  margin: 0;
}

h1 { font-size: clamp(30px, 4.2vw, 46px); }
h2 { font-size: clamp(22px, 2.6vw, 30px); }
h3 { font-size: clamp(17px, 1.8vw, 20px); }

p { margin: 0 0 1em; }
.measure { max-width: 58ch; }
.muted { color: var(--pewter); }
.micro { font-size: 13px; letter-spacing: 0.02em; }
.price { font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

:focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; }
::selection { background: var(--sap); color: var(--forest); }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.section { padding: var(--section) 0; }
.deep { background: var(--forest); color: var(--snow); }
.deep h1, .deep h2, .deep h3 { color: var(--snow); }
.deep .muted { color: #b9c3b5; }

/* ---------- boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 28px;
  border-radius: 2px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease);
}
.btn-primary { background: var(--forest); color: var(--snow); }
.btn-primary:hover { background: #0e2313; }
.btn-outline { border: 1px solid var(--forest); color: var(--forest); }
.btn-outline:hover { background: var(--forest); color: var(--snow); }
.deep .btn-outline { border-color: var(--snow); color: var(--snow); }
.deep .btn-outline:hover { background: var(--snow); color: var(--forest); }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

.link-u {
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding-bottom: 3px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .4s var(--ease);
}
.link-u:hover { background-size: 0% 1px; }

.badge {
  display: inline-block;
  background: var(--sap);
  color: var(--forest);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 9px;
}
.badge-out { background: var(--stone); color: var(--pewter); }

/* ---------- bandeau + header ---------- */
.promo {
  background: var(--forest);
  color: var(--snow);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  padding: 10px 16px;
}

header.site {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--snow);
  border-bottom: 1px solid var(--line);
}
.nav-row {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 74px;
}
.brand { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.brand .word {
  font-family: var(--wordmark);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
}
.nav-links { display: flex; gap: 20px; margin-left: 22px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.nav-links::-webkit-scrollbar { display: none; }
.nav-links a {
  white-space: nowrap;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 0;
  position: relative;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: currentColor;
  transition: width .34s var(--ease);
}
.nav-links a:hover::after, .nav-links a[aria-current]::after { width: 100%; }
.nav-actions { display: flex; align-items: center; gap: 2px; margin-left: auto; flex: 0 0 auto; }
.icon-btn {
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  transition: opacity .2s var(--ease);
}
.icon-btn:hover { opacity: .6; }
.icon-btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.4; }
.count {
  position: absolute; top: 5px; right: 3px;
  min-width: 17px; height: 17px; padding: 0 4px;
  background: var(--forest); color: var(--snow);
  border-radius: 9px;
  font-size: 10px; font-weight: 600;
  display: none; align-items: center; justify-content: center;
}
.count.on { display: flex; }
.burger { display: none; }

/* recherche déroulante */
.searchbar {
  border-bottom: 1px solid var(--line);
  max-height: 0; overflow: hidden;
  transition: max-height .4s var(--ease);
}
.searchbar.open { max-height: 120px; }
.searchbar form { display: flex; gap: 12px; padding: 18px 0; }
.searchbar input {
  flex: 1; border: 0; border-bottom: 1px solid var(--line);
  background: none; font: inherit; font-size: 18px; padding: 8px 0; color: inherit;
}
.searchbar input:focus { outline: none; border-color: var(--forest); }

/* ---------- hero ---------- */
.hero { padding: clamp(40px, 7vw, 84px) 0 clamp(52px, 7vw, 96px); }
.hero-grid { display: grid; gap: clamp(28px, 4vw, 56px); align-items: end; }
.hero .eyebrow { font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--pewter); margin-bottom: 18px; }
.hero h1 { margin-bottom: 20px; }
.hero .lede { font-size: clamp(16px, 1.7vw, 19px); color: var(--pewter); max-width: 46ch; margin-bottom: 30px; }
.hero-visual { position: relative; background: #f7f7f5; aspect-ratio: 4 / 5; overflow: hidden; }
.hero-visual img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- titres de section ---------- */
.sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: clamp(26px, 3.4vw, 46px); }
/* Sans min-width:0, un element de boite flexible refuse de descendre sous la
   largeur de son contenu : les onglets « Soin du visage / Cheveux / … » ne
   defilaient pas, ils poussaient l'en-tete hors de l'ecran. */
.sec-head > * { min-width: 0; }
.sec-head p { margin: 10px 0 0; max-width: 46ch; }

/* ---------- catégories ---------- */
.cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; }
.cat-card {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 210px; padding: 22px;
  background: var(--stone);
  overflow: hidden;
  transition: transform .5s var(--ease);
}
.cat-card .tint { position: absolute; inset: 0; opacity: .16; transition: opacity .5s var(--ease); }
.cat-card:hover .tint { opacity: .3; }
.cat-card .shape { position: absolute; right: -10px; top: -10px; width: 120px; opacity: .5; }
.cat-card span.n { position: relative; font-family: var(--display); font-size: clamp(22px, 3vw, 34px); text-transform: uppercase; letter-spacing: 0.02em; }
/* « COMPLEMENTS » en un seul mot depasse sa carte. Ce n'est pas propre aux
   telephones : la grille passe a trois puis cinq colonnes, donc les cartes
   retrecissent aussi sur grand ecran. La cesure s'applique donc partout —
   hyphens:auto coupe proprement en francais, la page etant en lang="fr". */
.cat-card span.n { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
@media (max-width: 699px) {
  .cat-card span.n { font-size: clamp(16px, 4.6vw, 24px); }
}
.cat-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.cat-card span.c { position: relative; font-size: 12px; color: var(--pewter); letter-spacing: 0.08em; text-transform: uppercase; }

/* ---------- grille produits ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(18px, 2.4vw, 34px) clamp(12px, 1.8vw, 24px);
}
.grid.cols-3 { grid-template-columns: repeat(2, 1fr); }

.card { position: relative; }
.card .media {
  position: relative;
  background: #f3f3ee;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  margin-bottom: 14px;
}
.card .media img { width: 100%; height: 100%; object-fit: cover; }
.card .media .alt { position: absolute; inset: 0; opacity: 0; transition: opacity .45s var(--ease); }
.card:hover .media .alt { opacity: 1; }
.card .media .flag { position: absolute; top: 12px; left: 12px; }
.card .brand-l { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pewter); }
.card .name { font-size: 15px; margin: 4px 0 2px; }
.card .size { font-size: 13px; color: var(--pewter); }
.card .price { margin-top: 8px; font-size: 15px; }
.card .price s { color: var(--pewter); font-weight: 400; margin-left: 8px; }
.card .quick {
  position: absolute; left: 12px; right: 12px; bottom: 12px;
  opacity: 0; transform: translateY(8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.card .media:hover .quick, .card:focus-within .quick { opacity: 1; transform: translateY(0); }
.quick .btn { min-height: 42px; font-size: 12px; width: 100%; background: var(--snow); color: var(--forest); }
.quick .btn:hover { background: var(--forest); color: var(--snow); }

/* ---------- bandeau marques ---------- */
.brands { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); }
.brands div {
  background: var(--snow);
  padding: 26px 12px;
  text-align: center;
  font-family: var(--wordmark);
  font-size: 15px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pewter);
  transition: color .3s var(--ease);
}
.brands div:hover { color: var(--forest); }
.deep .brands { background: #2a4a30; }
.deep .brands div { background: var(--forest); color: #b9c3b5; }

/* ---------- éditorial ---------- */
.split { display: grid; gap: clamp(26px, 4vw, 64px); align-items: center; }
.split .visual { background: var(--stone); aspect-ratio: 1 / 1; }
.deep .split .visual { background: #224128; }

/* ---------- services ---------- */
.services { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); }
.service { background: var(--snow); padding: clamp(20px, 3vw, 34px); }
.service svg { width: 26px; height: 26px; stroke: var(--forest); fill: none; stroke-width: 1.3; margin-bottom: 16px; }
.service h3 { font-size: 20px; margin-bottom: 8px; }
.service p { font-size: 14px; color: var(--pewter); margin: 0; }

/* ---------- newsletter ---------- */
.news form { display: flex; flex-wrap: wrap; gap: 12px; max-width: 520px; }
.news input {
  flex: 1 1 240px; min-height: 50px; padding: 0 14px;
  background: none; border: 1px solid rgba(250,250,245,.4); color: var(--snow);
  font: inherit; font-size: 15px;
}
.news input::placeholder { color: rgba(250,250,245,.55); }
.news input:focus { outline: none; border-color: var(--snow); }

/* ---------- footer ---------- */
footer.site { border-top: 1px solid var(--line); padding: clamp(46px, 6vw, 76px) 0 30px; }
.foot-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 34px 20px; }
.foot-grid > * { min-width: 0; overflow-wrap: break-word; overflow-wrap: anywhere; }
/* Sur un ecran de 320 px, une colonne de pied de page fait 130 px : le logo
   « PARADISE MALL » et sa signature n'y tiennent pas. On lui donne donc toute
   la largeur, les trois autres colonnes restant cote a cote. */
@media (max-width: 480px) {
  .foot-grid > .foot-col:first-child { grid-column: 1 / -1; }
}
.foot-col h4 { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 14px; }
.foot-col a { display: block; font-size: 14px; color: var(--pewter); padding: 5px 0; transition: color .2s var(--ease); }
.foot-col a:hover { color: var(--forest); }
.foot-bottom {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  margin-top: 46px; padding-top: 22px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--pewter);
}

/* ---------- tiroir panier ---------- */
.scrim {
  position: fixed; inset: 0; background: rgba(22,52,28,.4);
  opacity: 0; pointer-events: none; transition: opacity .4s var(--ease); z-index: 90;
}
.scrim.on { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(420px, 100%);
  background: var(--snow);
  transform: translateX(100%);
  transition: transform .45s var(--ease);
  z-index: 100;
  display: flex; flex-direction: column;
}
.drawer.on { transform: translateX(0); }
.drawer header { display: flex; align-items: center; justify-content: space-between; padding: 22px var(--pad) 16px; border-bottom: 1px solid var(--line); }
.drawer .body { flex: 1; overflow-y: auto; padding: 8px var(--pad); }
.drawer .foot { border-top: 1px solid var(--line); padding: 18px var(--pad) 24px; }

.line { display: grid; grid-template-columns: 72px 1fr; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.line .thumb { background: #f3f3ee; aspect-ratio: 4/5; }
.line .n { font-size: 14px; }
.line .v { font-size: 13px; color: var(--pewter); }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); margin-top: 10px; }
.qty button { width: 32px; height: 32px; line-height: 1; font-size: 16px; }
.qty span { min-width: 28px; text-align: center; font-size: 14px; font-variant-numeric: tabular-nums; }
.rm { font-size: 12px; color: var(--pewter); text-decoration: underline; margin-left: 12px; }

.totals { font-size: 14px; }
.totals div { display: flex; justify-content: space-between; gap: 16px; padding: 5px 0; }
.totals .grand { font-size: 17px; font-weight: 600; border-top: 1px solid var(--line); margin-top: 8px; padding-top: 12px; }

/* ---------- formulaires ---------- */
.field { margin-bottom: 20px; }
.field label { display: block; font-size: 13px; letter-spacing: 0.04em; margin-bottom: 7px; }
.field input, .field textarea, .field select {
  width: 100%; min-height: 50px; padding: 12px 14px;
  background: #fff; border: 1px solid var(--line); border-radius: 2px;
  font: inherit; font-size: 15px; color: var(--forest);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--forest); }
.field .err { display: none; color: var(--sale); font-size: 13px; margin-top: 6px; }
.field.bad input, .field.bad textarea { border-color: var(--sale); }
.field.bad .err { display: block; }

.pay { display: grid; gap: 12px; }
.pay label {
  display: flex; gap: 14px; align-items: flex-start;
  border: 1px solid var(--line); padding: 18px; cursor: pointer;
  transition: border-color .25s var(--ease);
}
.pay label:hover { border-color: var(--forest); }
.pay label.sel { border-color: var(--forest); }
.pay label.off { opacity: .5; cursor: not-allowed; }
.pay .t { font-size: 15px; font-weight: 500; }
.pay .d { font-size: 13px; color: var(--pewter); }

/* ---------- filtres boutique ---------- */
.shop { display: grid; gap: 34px; }
.filters { border-top: 1px solid var(--line); }
.fgroup { border-bottom: 1px solid var(--line); padding: 18px 0; }
.fgroup h4 { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 12px; }
.fgroup label { display: flex; align-items: center; gap: 10px; font-size: 14px; padding: 5px 0; cursor: pointer; }
.toolbar { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.toolbar select { border: 1px solid var(--line); min-height: 42px; padding: 0 12px; background: #fff; font: inherit; font-size: 14px; border-radius: 2px; }

/* ---------- fiche produit ---------- */
.pdp { display: grid; gap: clamp(26px, 4vw, 56px); }
.gallery { display: grid; gap: 10px; }
.gallery .main { background: #f3f3ee; aspect-ratio: 4/5; }
.gallery .thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.gallery .thumbs button { background: #f3f3ee; aspect-ratio: 1/1; border: 1px solid transparent; }
.gallery .thumbs button.sel { border-color: var(--forest); }
.variants { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 26px; }
.variants button {
  border: 1px solid var(--line); padding: 11px 18px; font-size: 14px; border-radius: 2px;
  transition: border-color .25s var(--ease);
}
.variants button.sel { border-color: var(--forest); }
.variants button[disabled] { opacity: .4; text-decoration: line-through; }
.swatch { width: 14px; height: 14px; border-radius: 50%; display: inline-block; margin-right: 8px; vertical-align: -2px; }
.acc { border-top: 1px solid var(--line); }
.acc button { display: flex; width: 100%; justify-content: space-between; align-items: center; padding: 18px 0; font-size: 14px; letter-spacing: 0.04em; }
.acc .panel { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); }
.acc .panel.on { max-height: 460px; }
.acc .panel p { font-size: 14px; color: var(--pewter); padding-bottom: 18px; margin: 0; }
.acc > div { border-bottom: 1px solid var(--line); }

/* ---------- faq ---------- */
.faq { border-top: 1px solid var(--line); max-width: 780px; }

/* ---------- whatsapp ---------- */
.wa {
  position: fixed; right: 18px; bottom: 18px; z-index: 70;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--forest); color: var(--snow);
  display: none; align-items: center; justify-content: center;
  transition: transform .3s var(--ease);
}
.wa.on { display: flex; }
.wa:hover { transform: scale(1.06); }
.wa svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.5; }

/* ---------- notice ---------- */
.notice {
  background: var(--stone); padding: 14px 16px; font-size: 13px; color: var(--pewter);
  border-left: 2px solid var(--sap);
}

/* ---------- reveal ---------- */
.rv { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.rv.in { opacity: 1; transform: none; }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px);
  background: var(--forest); color: var(--snow);
  padding: 13px 22px; font-size: 14px; z-index: 120;
  opacity: 0; pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- responsive ---------- */
@media (min-width: 700px) {
  .grid, .grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
  .brands { grid-template-columns: repeat(3, 1fr); }
  .services { grid-template-columns: repeat(2, 1fr); }
  .split, .hero-grid, .pdp { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1000px) {
  /* quatre colonnes seulement a partir d'ici : en dessous, une colonne sur
     quatre est trop etroite pour « PARADISE MALL » et le nom etait tronque. */
  .foot-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .grid { grid-template-columns: repeat(4, 1fr); }
  .grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .cat-grid { grid-template-columns: repeat(5, 1fr); }
  .brands { grid-template-columns: repeat(6, 1fr); }
  .services { grid-template-columns: repeat(4, 1fr); }
  .hero-grid { grid-template-columns: 1.05fr 1fr; }
  .pdp { grid-template-columns: 1.1fr 1fr; }
}

@media (max-width: 899px) {
  .nav-links {
    position: fixed; inset: 0 0 0 auto;
    width: min(320px, 86%);
    background: var(--snow);
    flex-direction: column; gap: 0;
    margin: 0; padding: 96px var(--pad) 30px;
    border-left: 1px solid var(--line);
    transform: translateX(100%);
    transition: transform .42s var(--ease);
    z-index: 80;
  }
  .nav-links.on { transform: translateX(0); }
  .nav-links a { font-size: 18px; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .burger { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .rv { opacity: 1; transform: none; }
}

/* ---------- ajouts : puces besoins, marques, suggestions ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); background: #fff;
  padding: 8px 14px; font-size: 13px; border-radius: 2px;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.chip:hover { border-color: var(--forest); }
.chip.on { background: var(--forest); color: var(--snow); border-color: var(--forest); }
.chip .muted { font-size: 12px; }

.marques-row { display: flex; flex-wrap: wrap; gap: 1px; background: var(--line); }
.marques-row a {
  flex: 1 1 150px; background: var(--snow); padding: 18px 12px; text-align: center;
  font-family: var(--wordmark); font-size: 14px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--pewter); transition: color .3s var(--ease), background .3s var(--ease);
}
.marques-row a:hover { color: var(--forest); background: #fff; }

.marques-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); }
.marque-card { background: var(--snow); padding: 22px 18px; transition: background .3s var(--ease); }
.marque-card:hover { background: #fff; }
.marque-card .mn { display: block; font-family: var(--wordmark); font-size: 16px; letter-spacing: .12em; text-transform: uppercase; }
.marque-card .mc { display: block; margin-top: 4px; }

.searchbar { position: relative; }
#suggestions { position: absolute; left: 0; right: 0; background: var(--snow); border-bottom: 1px solid var(--line); z-index: 70; }
#suggestions .sg {
  display: flex; justify-content: space-between; gap: 14px; align-items: center;
  padding: 12px var(--pad); border-top: 1px solid var(--line); font-size: 14px;
}
#suggestions .sg:hover { background: var(--stone); }
#suggestions .sg.tout { font-weight: 600; font-size: 13px; letter-spacing: .04em; }

.stats { display: flex; gap: 26px; flex-wrap: wrap; font-size: 13px; color: var(--pewter); }
.stats strong { color: var(--forest); font-size: 22px; font-weight: 600; display: block; }

.gallery .main svg, .card .media svg, .line .thumb svg { width: 100%; height: 100%; display: block; }
.card .media svg.alt { position: absolute; inset: 0; opacity: 0; transition: opacity .45s var(--ease); }
.card:hover .media svg.alt { opacity: 1; }

@media (min-width: 700px) { .marques-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .marques-grid { grid-template-columns: repeat(4, 1fr); } }

/* Les enfants de grille ne doivent jamais déborder de leur colonne. */
.pdp > *, .shop > *, .split > *, .grid > *, .hero-grid > * { min-width: 0; }
.gallery .main { max-width: 100%; }

@media (max-width: 699px) {
  .toolbar { gap: 10px; }
  .toolbar form { flex: 1 1 100%; }
  .toolbar select, .toolbar .btn { flex: 1 1 auto; }
  .promo { font-size: 10px; letter-spacing: .06em; }
}

/* =========================================================
   Refonte d'après les maquettes : en-tête, accueil, cartes
   ========================================================= */

:root { --cream: #ffffff; --creamd: #f4f4f2; --vert-pale: #f4f7f2; }

.serif { font-family: var(--sans); text-transform: none; letter-spacing: 0; line-height: 1.15; font-weight: 500; }

/* --- barre utilitaire --- */
.utility { background: var(--forest); color: var(--snow); font-size: 11.5px; letter-spacing: .04em; }
.utility .wrap { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-top: 9px; padding-bottom: 9px; }
.utility span, .utility a { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
/* Sur un telephone etroit, « Livraison offerte des 399 MAD… » ne tient pas sur
   une ligne : le texte etait tout simplement coupe au bord de l'ecran, et c'est
   le message commercial le plus important du site. On le laisse donc passer a
   la ligne, centre, et on retire le lien de contact qui fait doublon avec le
   bouton WhatsApp present sur toutes les pages. */
@media (max-width: 620px) {
  .utility .wrap { justify-content: center; gap: 0; }
  .utility span { white-space: normal; text-align: center; }
  .utility a { display: none; }
}
.utility svg { stroke: currentColor; fill: none; }
.utility a:hover { text-decoration: underline; }

/* --- en-tête principal --- */
header.site { border-bottom: 0; }
.head-main { display: flex; align-items: center; gap: 22px; height: auto; padding-top: 16px; padding-bottom: 16px; }
.brand { color: var(--forest); gap: 10px; }
.brand-txt { display: flex; flex-direction: column; line-height: 1.1; }
.brand-txt .word { font-size: 19px; font-weight: 700; letter-spacing: .1em; }
.brand-txt .tag { font-size: 9px; letter-spacing: .24em; text-transform: uppercase; color: var(--pewter); margin-top: 3px; }
.searchwrap { position: relative; flex: 1 1 380px; max-width: 540px; display: flex; }
.searchwrap input {
  flex: 1; min-height: 46px; padding: 0 52px 0 18px;
  border: 1px solid var(--line); border-radius: 999px; background: #fff;
  font: inherit; font-size: 14px; color: var(--forest);
}
.searchwrap input:focus { outline: none; border-color: var(--forest); }
.searchwrap .s-go {
  position: absolute; right: 5px; top: 5px; width: 36px; height: 36px;
  border-radius: 50%; background: var(--forest); color: var(--snow);
  display: flex; align-items: center; justify-content: center;
}
.searchwrap .s-go svg { stroke: currentColor; fill: none; }
.nav-actions { gap: 14px; }
.icon-btn { width: auto; height: auto; flex-direction: column; gap: 3px; padding: 4px 6px; }
.icon-btn em { font-style: normal; font-size: 10.5px; letter-spacing: .05em; color: var(--pewter); }
.icon-btn .count { top: -2px; right: 2px; }
#suggestions { top: 52px; left: 0; right: 0; border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 10px 30px rgba(22,52,28,.07); overflow: hidden; }
#suggestions .sg { padding: 11px 16px; }

/* --- barre de navigation --- */
.navbar { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--snow); }
.navbar .nav-links { display: flex; gap: 26px; margin: 0; overflow-x: auto; padding-top: 13px; padding-bottom: 13px; }
.navbar .nav-links a { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.navbar .promo-lien { color: #2f7d4a; font-weight: 600; }

@media (max-width: 899px) {
  .utility .u-mid { display: none; }
  .head-main { flex-wrap: wrap; row-gap: 12px; }
  .searchwrap { order: 3; flex: 1 1 100%; max-width: none; }
  .nav-actions { margin-left: auto; }
  .icon-btn em { display: none; }
  .navbar .nav-links {
    position: static; width: auto; background: none; flex-direction: row;
    padding: 12px var(--pad); border: 0; transform: none; z-index: auto;
  }
  .navbar .nav-links a { font-size: 11.5px; padding: 0; border: 0; }
  .burger { display: none; }
}

/* --- héros --- */
.hero-v2 { background: #ffffff; border-bottom: 1px solid var(--line); }
.hero-grid2 { display: grid; gap: 0; align-items: center; }
.hero-txt { padding: clamp(32px, 5vw, 70px) 0; }
.hero-txt h1 { font-size: clamp(38px, 5.2vw, 70px); }
.hero-txt .lede { font-size: clamp(15px, 1.5vw, 18px); color: #55605a; margin: 18px 0 26px; max-width: 42ch; }
.hero-txt .eyebrow { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--pewter); margin-bottom: 16px; }
.trust { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 30px; font-size: 12.5px; color: #55605a; }
.trust span { display: inline-flex; align-items: center; gap: 8px; }
.trust svg { stroke: var(--forest); fill: none; }
.hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 900px) {
  .hero-grid2 { grid-template-columns: 1.05fr 1fr; align-items: center; }
  .hero-img { height: 100%; min-height: 440px; }
  .hero-txt { padding-right: 32px; }
  /* la vitrine respire autant que le texte, en haut comme en bas */
  .hero-vitrine { margin: clamp(32px, 5vw, 70px) 0; }
}

/* --- tuiles univers --- */
.tuiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.tuile { display: block; }
.tuile .t-img { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--stone); }
.tuile img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.tuile:hover img { transform: scale(1.04); }
.tuile .t-nom { display: block; margin-top: 12px; font-size: 13px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
.tuile .t-sous { display: block; font-size: 13px; color: var(--pewter); }
.tuile .t-cnt { display: block; margin-top: 2px; }
@media (min-width: 700px) { .tuiles { grid-template-columns: repeat(4, 1fr); } }

/* --- marques --- */
.logos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.logos a {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 78px; padding: 12px; background: #fff; border: 1px solid var(--line);
  font-family: var(--wordmark); font-size: 14px; letter-spacing: .1em; text-transform: uppercase;
  color: #3d463f; transition: border-color .3s var(--ease), color .3s var(--ease);
}
.logos a:hover { border-color: var(--forest); color: var(--forest); }
@media (min-width: 700px) { .logos { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1000px) { .logos { grid-template-columns: repeat(8, 1fr); } }

/* --- bande routine --- */
.routine { background: #ffffff; border-top: 1px solid var(--line); padding: clamp(40px, 5vw, 72px) 0; }
.routine-grid { display: grid; gap: 30px; align-items: center; }
.routine h2 { font-size: clamp(26px, 3vw, 40px); color: var(--forest); }
.besoins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; background: rgba(255,255,255,.7); padding: 18px; }
.besoin { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 6px; text-align: center; font-size: 11.5px; color: var(--forest); }
.besoin .b-ico { width: 42px; height: 42px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; transition: background .3s var(--ease), color .3s var(--ease); }
.besoin:hover .b-ico { background: var(--forest); color: var(--snow); }
@media (min-width: 700px) { .routine-grid { grid-template-columns: 1fr 1.5fr; } .besoins { grid-template-columns: repeat(5, 1fr); } }

/* --- bandeaux --- */
.bandeaux { display: grid; gap: 16px; }
.bandeau { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--vert-pale); min-height: 132px; overflow: hidden; }
.bandeau > span { padding: 22px 0 22px 26px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.bandeau b { font-size: clamp(18px, 2vw, 25px); font-weight: 500; }
.bandeau .btn { min-height: 38px; padding: 0 18px; font-size: 11px; }
.bandeau img { width: 42%; height: 132px; object-fit: cover; }
@media (min-width: 700px) { .bandeaux { grid-template-columns: 1fr 1fr; } }

/* --- onglets --- */
.onglets { display: flex; gap: 20px; flex-wrap: wrap; }
/* Sur petit écran, quatre onglets qui passent à la ligne mangent tout l'espace
   avant les produits. Ils défilent alors sur une seule ligne. */
@media (max-width: 699px) {
  .onglets {
    flex-wrap: nowrap; overflow-x: auto; gap: 18px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin: 4px calc(var(--pad) * -1) 0; padding: 0 var(--pad) 2px;
  }
  .onglets::-webkit-scrollbar { display: none; }
  .onglets button { white-space: nowrap; flex: 0 0 auto; }
  /* le titre et les onglets s'empilent proprement au lieu de se disputer la ligne */
  .sec-head > div[style*="display:flex"] { display: block !important; }
  /* …et le lien « Voir tous les produits » passe dessous plutot que de sortir
     de l'ecran : il ne peut pas se couper en deux (white-space:nowrap). */
  .sec-head { flex-wrap: wrap; align-items: flex-start; gap: 10px 20px; }
}
.onglets button { font-size: 13px; color: var(--pewter); padding-bottom: 5px; border-bottom: 2px solid transparent; }
.onglets button.on { color: var(--forest); border-color: var(--forest); font-weight: 500; }

/* --- bloc maison --- */
.maison { display: grid; gap: 24px; align-items: center; background: #ffffff; padding: clamp(20px, 3vw, 36px) 0; border-top: 1px solid var(--line); }
.maison h2 { font-size: clamp(24px, 2.6vw, 36px); color: var(--forest); }
.maison .filet { display: block; width: 46px; height: 2px; background: var(--forest); margin: 18px 0; }
.maison img { width: 100%; height: 100%; max-height: 300px; object-fit: cover; }
@media (min-width: 700px) { .maison { grid-template-columns: 1.4fr 1fr; } }

/* --- carte produit façon maquette --- */
.card { background: #fff; border: 1px solid var(--line); padding: 10px; display: flex; flex-direction: column; transition: border-color .3s var(--ease); }
.card:hover { border-color: #cfd4cc; }
.card .media { margin-bottom: 12px; background: #fbfbfa; }
.card .fav { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.9); display: flex; align-items: center; justify-content: center; }
.card .fav svg { width: 15px; height: 15px; stroke: var(--forest); fill: none; }
.card .fav.on svg { fill: var(--forest); }

/* LE COEUR DES FAVORIS SUR TELEPHONE.
   A la souris, un petit trait fin suffit : le curseur est precis et le survol
   signale le bouton. Au doigt, non. 30 px de cote, c'est sous le minimum de
   44 px recommande par Apple : on vise a cote. Et un trait de 15 px sur une
   photo de produit blanche ne se voit pas.
   Sur tout appareil sans survol — donc tous les telephones et tablettes — le
   bouton passe donc a 44 px, l'icone grossit, et une ombre legere le detache
   du fond clair des photos. */
@media (hover: none), (pointer: coarse) {
  .card .fav {
    width: 44px; height: 44px; top: 2px; right: 2px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 1px 4px rgba(22,52,28,.16);
  }
  .card .fav svg { width: 20px; height: 20px; stroke-width: 1.7; }
}
.card .c-txt { display: block; flex: 1; }
.card .c-act { display: grid; gap: 8px; margin-top: 12px; }
.card .c-act .btn { min-height: 40px; font-size: 11px; padding: 0 10px; }
.card .quick { display: none; }
@media (min-width: 560px) { .card .c-act { grid-template-columns: 1fr auto; } }

/* --- services --- */
.services { background: var(--line); }
.service { background: transparent; }

.link-u { white-space: nowrap; }
.hero-txt h1 { font-size: clamp(30px, 3.8vw, 48px); letter-spacing: -0.025em; }
.card .name { min-height: 2.7em; }

@media (max-width: 560px) {
  .utility .wrap { justify-content: center; font-size: 10.5px; }
  .utility a[data-wa] { display: none; }
}

/* --- grille de marques --- */
.logos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.marques-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.logo-card, .marque-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  min-height: 104px; padding: 20px 14px; background: #fff; text-align: center;
  transition: background .3s var(--ease);
}
.logo-card:hover, .marque-card:hover { background: #fafafa; }
.logo-card img, .marque-card img { max-height: 40px; max-width: 88%; width: auto; object-fit: contain; }
.logo-card .logo-txt, .marque-card .logo-txt {
  display: none; font-family: var(--wordmark); font-size: 13px; letter-spacing: .12em;
  text-transform: uppercase; color: #3d463f; line-height: 1.3;
}
/* emplacement en attente : sobre, jamais un logo emprunté */
.logo-card.sans-logo, .marque-card.sans-logo { background: var(--snow); }
.logo-card.sans-logo .logo-txt, .marque-card.sans-logo .logo-txt { display: block; }
.marque-card { min-height: 128px; }
.marque-card .mc { font-size: 11px; }

/* --- logo en tête de page marque --- */
.logo-head {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 150px; min-height: 84px; padding: 14px 22px;
  background: #fff; border: 1px solid var(--line); margin-bottom: 20px;
}
.logo-head img { max-height: 54px; max-width: 200px; object-fit: contain; }
.logo-head .logo-txt { display: none; }
.logo-head.sans-logo .logo-txt { display: block; font-family: var(--wordmark); font-size: 15px; letter-spacing: .12em; text-transform: uppercase; }

@media (min-width: 620px) { .logos, .marques-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1000px) { .logos { grid-template-columns: repeat(6, 1fr); } .marques-grid { grid-template-columns: repeat(5, 1fr); } }

/* --- progression vers la livraison offerte --- */
.jauge { font-size: 13px; color: var(--pewter); margin-bottom: 14px; }
.jauge strong { color: var(--forest); }
.jauge.atteint { color: var(--forest); font-weight: 600; }
.jauge .barre { display: block; height: 3px; background: var(--line); margin-top: 8px; }
.jauge .barre span { display: block; height: 3px; background: var(--forest); transition: width .5s var(--ease); }

.brand svg { flex: 0 0 auto; }
.brand-txt .tag { letter-spacing: .26em; }

/* --- chargement du catalogue : on montre que ça travaille --- */
.skel { aspect-ratio: 3 / 4.6; background: #f1f1ec; border: 1px solid var(--line); position: relative; overflow: hidden; }
.skel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
  transform: translateX(-100%); animation: glisse 1.4s infinite;
}
@keyframes glisse { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .skel::after { animation: none; } }

/* --- suggestions de recherche avec vignette --- */
#suggestions .sg-prod { display: flex; align-items: center; gap: 14px; padding: 10px 16px; }
#suggestions .sg-vis { flex: 0 0 44px; width: 44px; height: 56px; background: #f6f6f2; overflow: hidden; }
#suggestions .sg-vis svg { width: 100%; height: 100%; display: block; }
#suggestions .sg-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#suggestions .sg-nom { font-size: 14px; line-height: 1.3; }
#suggestions .sg-prod .price { font-size: 14px; white-space: nowrap; }
#suggestions .besoin { flex-direction: row; justify-content: flex-start; gap: 10px; align-items: center; padding: 11px 16px; }
#suggestions .besoin .badge { flex: 0 0 auto; }

/* --- allègement visuel : le blanc porte la page --- */
.section { padding: clamp(40px, 5vw, 72px) 0; }
.sec-head { margin-bottom: clamp(18px, 2.2vw, 26px); }
.sec-head p { font-size: 14px; }
.tuile .t-nom { font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.card .name { font-size: 14px; min-height: 2.6em; }
.card .price { font-size: 15px; }
.promo { font-size: 11px; letter-spacing: .06em; }
.btn { letter-spacing: .03em; text-transform: none; font-size: 13px; }
.badge { text-transform: none; letter-spacing: .02em; }
.brand-txt .tag { letter-spacing: .18em; }
.navbar .nav-links a { letter-spacing: .04em; text-transform: none; font-size: 13.5px; }
.utility { font-size: 11px; letter-spacing: 0; }

/* =========================================================
   Refonte : blanc, typographie Instrument, filtres
   ========================================================= */
h1, h2, h3 { font-family: var(--display); font-weight: 400; letter-spacing: -0.005em; line-height: 1.1; }
.hero-txt h1 { font-size: clamp(32px, 4.2vw, 52px); }
.hero-txt h1 em { font-style: italic; color: var(--forest); }
.brand-txt .word { font-family: var(--wordmark); font-weight: 400; font-size: 21px; letter-spacing: .06em; }

/* héros */
.hero-v2 { border-bottom: 1px solid var(--line); }
.hero-grid2 { gap: clamp(24px, 4vw, 48px); }
.chip { border-radius: 100px; padding: 6px 14px; font-size: 12.5px; }
/* --- hero -----------------------------------------------------------------
   Le message a gauche, une vitrine de trois produits reels a droite. Les
   photos viennent du catalogue et changent a chaque visite : rien n'est
   dessine, aucune marque n'est installee durablement en devanture.         */
.hero-txt .lede { max-width: 46ch; }
.hero-vitrine {
  display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr;
  gap: clamp(8px, 1.2vw, 14px); aspect-ratio: 4 / 3; min-height: 0;
}
.hero-vitrine:empty { display: none; }
/* fond blanc, comme celui des photos : la tuile disparait derriere le produit
   au lieu de l'encadrer d'un rectangle gris */
.hv-item {
  background: #fff; overflow: hidden; border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  transition: border-color .4s var(--ease);
}
.hv-item img {
  width: 100%; height: 100%; object-fit: contain; padding: 4%;
  transition: transform .6s var(--ease);
}
.hv-item:hover { border-color: var(--forest); }
.hv-item:hover img { transform: scale(1.05); }
.hv-1 { grid-row: 1 / 3; }
@media (max-width: 899px) {
  /* sur une colonne, la vitrine a besoin de son propre espace avant la
     section suivante */
  .hero-vitrine { margin-bottom: clamp(32px, 7vw, 56px); }
}
@media (max-width: 599px) {
  .hero-vitrine { aspect-ratio: 3 / 2; gap: 8px; }
}

/* univers en texte */
.cats-txt { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.cat-txt { border: 1px solid var(--line); border-radius: 3px; padding: 16px 14px; transition: border-color .25s var(--ease); }
.cat-txt:hover { border-color: var(--forest); }
.cat-txt b { display: block; font-weight: 500; font-size: 14px; }
.cat-txt span { font-size: 11.5px; color: var(--pewter); }
@media (min-width: 700px) { .cats-txt { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .cats-txt { grid-template-columns: repeat(5, 1fr); } }

/* cartes produit sans cadre */
.card { border: 0; padding: 0; background: none; }
.card:hover { border: 0; }
.card .media { background: #fafaf9; border-radius: 3px; margin-bottom: 12px; aspect-ratio: 1 / 1; }
.card .fav { background: rgba(255,255,255,.92); }
.card .c-act { display: block; margin: 0; }
.card .c-act [data-buy] { display: none; }
.card .c-act .btn { position: absolute; left: 10px; right: 10px; bottom: 10px; background: #fff; border: 1px solid var(--forest); color: var(--forest); border-radius: 100px; min-height: 38px; opacity: 0; transform: translateY(6px); transition: opacity .25s var(--ease), transform .25s var(--ease); }
.card { position: relative; }
.card:hover .c-act .btn { opacity: 1; transform: none; }
.card .brand-l { font-size: 10.5px; letter-spacing: .1em; }
@media (hover: none) { .card .c-act .btn { opacity: 1; transform: none; position: static; margin-top: 10px; } }

/* --- panneau de filtres ---------------------------------------------------
   Un seul comportement, sur tous les écrans : les filtres vivent dans un
   tiroir refermé. La liste de produits occupe toute la largeur, et le client
   n'ouvre le panneau que lorsqu'il veut vraiment trier. Sur grand écran le
   tiroir vient de la droite, sur mobile il monte du bas.                    */
.filters {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 120;
  width: min(360px, 92vw); background: #fff;
  border-left: 1px solid var(--line);
  display: flex; flex-direction: column;
  transform: translateX(101%);
  transition: transform .34s var(--ease);
  box-shadow: -18px 0 50px rgba(20, 30, 22, .10);
}
.filters.on { transform: none; }
.fhead {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px var(--pad); border-bottom: 1px solid var(--line); flex: 0 0 auto;
}
.fhead strong { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.fhead button { font-size: 28px; line-height: 1; color: var(--pewter); }
.fhead button:hover { color: var(--ink); }
#panneauFiltres { flex: 1 1 auto; overflow-y: auto; padding: 0 var(--pad) 12px; }
.ffoot {
  display: grid; grid-template-columns: 1fr 1.5fr; gap: 10px; flex: 0 0 auto;
  padding: 14px var(--pad) calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
}
.ffoot .btn { min-height: 48px; padding: 0 12px; font-size: 13px; white-space: nowrap; }
.fgroup { border-bottom: 1px solid var(--line); padding: 16px 0; }
.fgroup:last-child { border-bottom: 0; }
.fgroup h4 { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--pewter); margin: 0 0 10px; }
.fopt { display: flex; align-items: center; gap: 9px; font-size: 13.5px; padding: 5px 0; cursor: pointer; }
.fopt .fn { margin-left: auto; font-size: 11.5px; color: var(--pewter); }
.fprix { display: flex; align-items: center; gap: 8px; }
.fprix input { width: 100%; min-height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 3px; font: inherit; font-size: 13.5px; }

/* le bouton porte le nombre de filtres actifs : c'est le seul rappel visible
   une fois le tiroir refermé */
#btnFiltres { display: inline-flex; }
#btnFiltres[data-actifs]::after {
  content: attr(data-actifs);
  margin-left: 8px; min-width: 19px; height: 19px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--forest); color: #fff; border-radius: 10px;
  font-size: 11px; font-weight: 600;
}
/* rappel des filtres posés, sous la barre d'outils */
.fbadges { display: flex; flex-wrap: wrap; gap: 8px; margin: -8px 0 22px; }
.fbadge {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 10px 5px 12px; font-size: 12.5px; background: #fff;
}
.fbadge button { font-size: 15px; line-height: 1; color: var(--pewter); }
.fbadge button:hover { color: var(--ink); }
.fbadge.vider { border-style: dashed; color: var(--pewter); cursor: pointer; }

@media (max-width: 599px) {
  .filters {
    left: 0; top: auto; width: auto; max-height: 88vh;
    border-left: 0; border-top: 1px solid var(--line);
    border-radius: 12px 12px 0 0;
    transform: translateY(101%);
    box-shadow: 0 -18px 50px rgba(20, 30, 22, .12);
  }
}

/* --- survol de carte : visible, sans excès --- */
.card .media svg { transition: transform .55s var(--ease); }
.card:hover .media svg { transform: scale(1.06); }
.card .media { transition: background .35s var(--ease); }
.card:hover .media { background: #f4f4f1; }
.card .nm, .card .name { transition: color .25s var(--ease); }
.card:hover .name { color: var(--forest); }
.cat-txt b { display: block; }
.cat-txt span { display: block; font-size: 11px; color: var(--pewter); }

/* --- pied de page en vert profond --- */
footer.site { background: var(--forest); color: var(--snow); border-top: 0; }
footer.site .brand { color: var(--snow); }
footer.site .brand-txt .word { color: var(--snow); }
footer.site .foot-col h4 { color: var(--snow); opacity: .65; }
footer.site .foot-col a { color: #cfd8cd; }
footer.site .foot-col a:hover { color: var(--snow); }
footer.site .micro.muted { color: #a9b6a7; }
footer.site .foot-bottom { border-top: 1px solid rgba(250,250,245,.16); color: #a9b6a7; }
footer.site svg path { fill: var(--snow); stroke: var(--snow); }
footer.site svg path:last-child { fill: var(--forest); stroke: none; }

/* --- besoins en grille --- */
.besoins-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.bes-card { border: 1px solid var(--line); border-radius: 3px; padding: 16px 14px; transition: border-color .25s var(--ease), background .25s var(--ease); }
.bes-card:hover { border-color: var(--forest); background: #fafafa; }
.bes-card b { display: block; font-weight: 500; font-size: 14px; }
.bes-card span { font-size: 11.5px; color: var(--pewter); }
@media (min-width: 700px) { .besoins-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .besoins-grid { grid-template-columns: repeat(5, 1fr); } }

.badge.remise { background: var(--forest); color: var(--snow); }
.card .price s { color: var(--pewter); font-weight: 400; margin-left: 6px; font-size: 13px; }
#rejouer { background: none; border: 0; cursor: pointer; }

/* --- bouton d'ajout : plein, vert profond --- */
.card .c-act .btn {
  background: var(--forest);
  border-color: var(--forest);
  color: var(--snow);
  font-weight: 500;
}
.card .c-act .btn:hover { background: #0e2413; border-color: #0e2413; color: var(--snow); }

/* --- bouton d'ajout : toujours visible, sous la carte --- */
.card .c-act { display: block; margin-top: 12px; }
.card .c-act .btn {
  position: static;
  opacity: 1;
  transform: none;
  width: 100%;
  min-height: 42px;
}
.card:hover .c-act .btn { opacity: 1; transform: none; }
@media (hover: none) { .card .c-act .btn { margin-top: 0; } }

/* --- vraies photos produit --- */
.card .media img.photo, .card .media img.alt, .gallery .main img, .line .thumb img, .sg-vis img {
  width: 100%; height: 100%; object-fit: contain; display: block; background: #fff;
}
.gallery .thumbs button img { width: 100%; height: 100%; object-fit: contain; display: block; background: #fff; }
.card .media img.alt { position: absolute; inset: 0; opacity: 0; transition: opacity .45s var(--ease); }
.card:hover .media img.alt { opacity: 1; }
.card .media:has(img.photo) { background: #fff; }
.gallery .main:has(img) { background: #fff; }

/* --- zoom au survol : vignette produit et grande photo de la fiche --- */
.card .media img.photo, .card .media svg,
.gallery .main img, .gallery .main svg,
.marque-card img, .logo-card img {
  transform: scale(1);
  transition: transform .6s var(--ease);
}
.card:hover .media img.photo,
.card:focus-within .media img.photo,
.card:hover .media svg          { transform: scale(1.09); }
.gallery .main                  { overflow: hidden; }
.gallery .main:hover img,
.gallery .main:hover svg        { transform: scale(1.16); }
.marque-card:hover img, .logo-card:hover img { transform: scale(1.06); }

@media (hover: none) {   /* au doigt, pas de zoom bloque sur la derniere carte touchee */
  .card:hover .media img.photo, .card:focus-within .media img.photo,
  .card:hover .media svg, .gallery .main:hover img, .gallery .main:hover svg,
  .marque-card:hover img, .logo-card:hover img { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .card .media img.photo, .card .media svg, .gallery .main img,
  .gallery .main svg, .marque-card img, .logo-card img {
    transition: none; transform: none !important;
  }
}

/* --- pages juridiques -----------------------------------------------------
   Texte long, lu en diagonale : mesure courte, titres nets, et surtout des
   marques bien visibles la ou une information manque encore. Personne ne doit
   pouvoir publier ces pages avec des trous sans les avoir vus.            */
.legal { max-width: 78ch; margin-top: 40px; }
.legal h2 {
  font-size: clamp(18px, 2.1vw, 22px); margin: 44px 0 14px;
  padding-top: 22px; border-top: 1px solid var(--line);
}
.legal h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 34px; }
.legal p { margin: 0 0 14px; line-height: 1.75; }
.legal ul { margin: 0 0 18px; padding-left: 20px; }
.legal li { margin-bottom: 8px; line-height: 1.7; }
.legal a { text-decoration: underline; text-underline-offset: 3px; }
.legal .avis {
  background: #fbf7ec; border-left: 3px solid #c99a2e;
  padding: 16px 18px; margin-bottom: 34px; font-size: 14.5px;
}
.afaire {
  background: #fff2a8; color: #5a4a00; padding: 1px 6px;
  border-radius: 2px; font-size: .94em; font-style: italic;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

/* disponibilite sur la carte produit : une pastille et un mot, rien de plus */
.card .dispo {
  display: flex; align-items: center; gap: 6px;
  margin-top: 6px; font-size: 11.5px; letter-spacing: .01em;
}
.card .dispo::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex: 0 0 auto;
}
.card .dispo.oui { color: #2f6b45; }
.card .dispo.non { color: var(--pewter); }

/* deux zones de livraison, mises en regard en haut de la page Livraison */
.tarifs { display: grid; gap: 14px; margin: 30px 0 42px; }
.tz { border: 1px solid var(--line); padding: 22px 24px; background: #fafbfa; }
.tz h3 { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--pewter); margin: 0 0 12px; font-weight: 500; }
.tz .gros { font-family: var(--serif, Georgia, serif); font-size: clamp(30px, 4vw, 42px); margin: 0; color: var(--forest); line-height: 1; }
.tz .cond { margin: 10px 0 0; font-size: 13.5px; color: #55605a; }
@media (min-width: 700px) { .tarifs { grid-template-columns: 1fr 1fr; gap: 18px; } }


/* ---------------- espace client ---------------- */

.cmd-compte{border:1px solid var(--line);padding:18px 20px;margin-bottom:14px}
.cmd-compte header{display:flex;justify-content:space-between;align-items:center;
  gap:14px;flex-wrap:wrap;margin-bottom:14px}
.cmd-compte .lignes-cmd div{display:flex;justify-content:space-between;gap:14px;
  padding:7px 0;border-bottom:1px solid var(--line);font-size:14px}
.cmd-compte .lignes-cmd div:last-child{border-bottom:0}
.cmd-compte footer{display:flex;justify-content:space-between;align-items:center;
  gap:14px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:2px solid var(--forest)}

/* L'etat se lit d'un coup d'oeil : la couleur double le mot, elle ne le
   remplace pas — un daltonien lit la meme information. */
.etat-cmd{font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;white-space:nowrap;background:#f1f1ec;color:#5a5a52}
.etat-recue{background:#eef2ee;color:#2f5236}
.etat-confirmee{background:#e8f0e9;color:#1f4327}
.etat-preparee{background:#fdf3e4;color:#8a6420}
.etat-expediee{background:#eaf0f6;color:#2d5278}
.etat-livree{background:#16341c;color:#fafaf5}
.etat-annulee{background:#f8eceb;color:#8c2f28}

/* POURQUOI « minmax(0,1fr) » ET NON « 1fr » :
   dans une grille, une colonne 1fr ne descend pas en dessous de la largeur
   de son contenu le plus large. Un nom de produit long faisait donc gonfler
   la colonne — 602 px dans un telephone de 390 px — et la carte sortait de
   l'ecran, emportant le bouton « Retirer » avec elle. minmax(0,1fr) autorise
   la colonne a retrecir, et le texte passe a la ligne.
   Meme raison pour les min-width:0 et les overflow-wrap ci-dessous. */
.grid-compte{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;container-type:inline-size}
.fav-compte{display:grid;grid-template-columns:62px minmax(0,1fr) auto;gap:14px;align-items:center;
  border:1px solid var(--line);padding:12px 14px}
.fav-compte>*{min-width:0}
/* .link-u interdit la coupure de ligne, ce qui convient a un lien court
   (« Aller a la boutique ») mais pas a un nom de produit de 88 caracteres :
   il sortait de la carte. Ici, et ici seulement, on l'autorise a passer a
   la ligne. */
.fav-compte .link-u{white-space:normal}
.fav-compte .link-u,.fav-compte .brand-l{overflow-wrap:break-word;overflow-wrap:anywhere}
/* Des que la carte elle-meme descend sous 430 px — que ce soit parce que
   l'ecran est petit ou parce que l'espace client est passe en deux colonnes —
   les boutons descendent sur leur propre ligne. La media query plus bas fait
   la meme chose pour les navigateurs anciens. */
@container (max-width: 430px){
  .fav-compte{grid-template-columns:52px minmax(0,1fr)}
  .fav-compte img,.fav-compte .sans-photo{width:52px;height:52px}
  .fav-compte .fav-actions{grid-column:1 / -1;flex-direction:row;
    align-items:center;justify-content:space-between}
}
.fav-compte img{width:62px;height:62px;object-fit:contain;display:block}
.fav-compte .sans-photo{width:62px;height:62px;background:#f4f4f0}
.fav-compte .brand-l{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#8a8a84}
.fav-compte .price{font-size:14px;margin-top:3px}
.fav-actions{display:flex;flex-direction:column;align-items:flex-end;gap:7px}

/* ---------------- carnet d'adresses ---------------- */

.grid-adr{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr));gap:14px}
.carte-adr{border:1px solid var(--line);padding:16px 18px;display:flex;flex-direction:column}
.carte-adr.defaut{border-color:var(--forest);border-width:2px;padding:15px 17px}
.carte-adr header{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.carte-adr p{font-size:14px;line-height:1.6;color:#4a4a44;margin:0 0 14px;flex:1;overflow-wrap:break-word;overflow-wrap:anywhere}
.carte-adr footer{display:flex;gap:14px;flex-wrap:wrap;margin-top:auto}
.etiq{font-size:10px;letter-spacing:.09em;text-transform:uppercase;background:var(--forest);
  color:#fafaf5;padding:3px 8px;border-radius:999px}
.lien-act{background:none;border:0;padding:0;font:inherit;font-size:13px;cursor:pointer;
  color:var(--forest);text-decoration:underline;text-underline-offset:3px}
.lien-act.danger{color:#8c2f28}
.bloc-form-adr{border:1px solid var(--line);padding:20px 22px;margin:16px 0 30px;max-width:460px}

/* ---------------- formulaires ---------------- */

.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.case{display:flex;align-items:flex-start;gap:10px;margin:4px 0 18px;font-size:14px;
  line-height:1.5;cursor:pointer}
.case input{margin-top:3px;flex:0 0 auto;width:16px;height:16px;accent-color:#16341c}
.mdp-champ{position:relative;display:flex;align-items:center}
.mdp-champ input{flex:1;padding-right:84px}
/* Le bouton est dans le champ : sur un telephone, taper douze caracteres a
   l'aveugle est la premiere cause d'abandon. */
.voir-mdp{position:absolute;right:10px;background:none;border:0;padding:4px 6px;
  font:inherit;font-size:12px;cursor:pointer;color:#6a6a62;text-decoration:underline;
  text-underline-offset:3px}

#espace .err-compte,#reinit .err-compte{margin-bottom:14px}

@media (max-width:620px){
  .duo{grid-template-columns:1fr;gap:0}
  .cmd-compte{padding:15px 16px}
  .grid-adr{grid-template-columns:minmax(0,1fr)}
}

/* Secours pour les navigateurs qui ne connaissent pas @container (iOS 15 et
   anterieurs). La regle de conteneur plus haut fait ce travail proprement
   quand elle est comprise ; celle-ci couvre la zone ou la carte redevient
   etroite parce que l'espace client est passe en deux colonnes. Les deux
   donnent la meme mise en page, aucune ne gene l'autre. */
@media (max-width:899px){
  .fav-compte{grid-template-columns:52px minmax(0,1fr)}
  .fav-compte img,.fav-compte .sans-photo{width:52px;height:52px}
  .fav-compte .fav-actions{grid-column:1 / -1;flex-direction:row;
    align-items:center;justify-content:space-between}
}