/* ==========================================================================
   DoxaMarket — feuille de style unique, pensée mobile d'abord.
   Les media queries ajoutent la mise en page large, jamais l'inverse :
   sur téléphone rien n'est masqué, tout est simplement empilé.

   Identité : vert profond pour la marque, la confiance et les prix ;
   orange pour les appels à l'action ; crème pour les fonds de mise en avant.
   ========================================================================== */

:root {
  --green: #0b5c3f;
  --green-dark: #084430;
  --green-soft: #e8f2ee;
  --orange: #e8722f;
  --orange-dark: #cf5f20;
  --orange-soft: #fdefe6;
  --cream: #faf5ee;
  --ink: #1b1f1d;
  --muted: #6b7a74;
  --line: #e5eae7;
  --bg: #ffffff;
  --band: #f5f7f6;
  --card: #fff;
  --ok: #157347;
  --danger: #b42318;
  --warn: #9a6700;
  --info: #1b5aa8;
  --radius: 14px;
  --radius-lg: 20px;
  --shadow: 0 1px 2px rgba(27, 31, 29, .05), 0 8px 22px rgba(27, 31, 29, .05);
  --shadow-hover: 0 2px 6px rgba(27, 31, 29, .07), 0 14px 34px rgba(27, 31, 29, .09);
  --nav-height: 64px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px));
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* Filet de sécurité. Nos pictogrammes n'ont pas d'attributs width/height : sans
   règle CSS, un navigateur les dessine à leur taille de remplacement, soit
   300 px, ce qui disloque toute la page. Cette règle, de spécificité minimale,
   ne prend le dessus sur aucune taille définie plus bas. */
svg { width: 20px; height: 20px; flex: none; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; letter-spacing: -.015em; }
h1 { font-size: 27px; }
h2 { font-size: 21px; }
h3 { font-size: 17px; }
p { margin: 0 0 1em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 20px 0; }

.wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 16px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.mt { margin-top: 20px; }
.mb { margin-bottom: 20px; }
.hide-mobile { display: none; }
.only-mobile { display: initial; }

/* --------------------------------------------------------------------------
   En-tête
   -------------------------------------------------------------------------- */

.brand-promise {
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
  text-align: center;
}
.brand-promise .wrap {
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.topbar {
  background: #fff;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 30;
}
.topbar .wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 82px;
}

.brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  text-decoration: none;
}
.brand-logo {
  display: block;
  width: clamp(170px, 15vw, 230px);
  height: auto;
  max-height: 70px;
  object-fit: contain;
}

/* Menu des rayons */
.mainnav { display: none; margin-left: 10px; gap: 2px; }
.mainnav a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 10px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
}
.mainnav a:hover { background: var(--green-soft); color: var(--green); }
.mainnav a.on { color: var(--green); }
.mainnav svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.mainnav .navgroup { position: relative; display: flex; align-items: center; }
.mainnav .navgroup > .navroot { height: 100%; }
.mainnav .navgroup.on > .navroot { color: var(--green); }
.mainnav .chevron { margin-left: -3px; font-size: 13px; line-height: 1; opacity: .55; }
.mainnav .submenu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 45;
  min-width: 230px;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 18px 45px rgba(18, 33, 27, .13);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.mainnav .navgroup:hover .submenu,
.mainnav .navgroup:focus-within .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mainnav .submenu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  padding: 10px 11px;
  border-radius: 9px;
  white-space: nowrap;
}
.mainnav .submenu a small { color: var(--muted); font-size: 11px; font-weight: 700; }
.mainnav .submenu a:hover,
.mainnav .submenu a.on { background: var(--green-soft); color: var(--green); }
.subchips { margin-top: -6px; padding-top: 0; }


.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* --------------------------------------------------------------------------
   Présentation du catalogue par rubrique
   Un visuel plein cadre, le nom en capitales espacées, le prix d'entrée réel
   et un bouton. Angles quasi droits : le visuel doit primer sur le cadre.
   -------------------------------------------------------------------------- */

.catalogue { padding: 34px 0 8px; }
.cat-title {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 20px;
  font-weight: 700;
  color: var(--green, #0b5c3f);
  margin: 0 0 8px;
}
.cat-sub {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 12px;
  color: var(--muted, #667b74);
  margin: 0 0 26px;
}
.cat-sub span {
  color: var(--orange, var(--gold, #c9821f));
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}

.catrow { display: grid; grid-template-columns: 1fr; gap: 26px 20px; }

.catblock { display: block; text-align: center; }
.catblock .shot {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 3px;
  background: var(--band, #f5f7f6);
  margin-bottom: 14px;
}
.catblock .shot img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.catblock:hover .shot img { transform: scale(1.04); }
.catblock .noshot { position: absolute; inset: 0; display: grid; place-items: center; }
.catblock .noshot svg { width: 46px; height: 46px; stroke: rgba(11, 92, 63, .25); fill: none; }

.catblock .tagpromo {
  position: absolute; top: 12px; left: 12px;
  background: var(--green, #0b5c3f);
  color: #fff;
  font-size: 12px; font-weight: 700;
  letter-spacing: .04em;
  padding: 5px 11px;
  border-radius: 2px;
}

.cb-name {
  display: block;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 15px;
  font-weight: 700;
  color: var(--green, #0b5c3f);
  margin-bottom: 6px;
}
.cb-price { display: block; font-size: 14px; color: var(--muted, #667b74); }
.cb-price b { color: var(--orange, var(--gold, #c9821f)); font-weight: 800; }
.cb-count { display: block; font-size: 12px; color: var(--muted, #667b74); margin-top: 2px; }

.cb-cta {
  display: inline-block;
  margin-top: 14px;
  padding: 11px 26px;
  background: var(--orange, var(--gold, #c9821f));
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 12px;
  font-weight: 700;
  border-radius: 2px;
  transition: background .16s;
}
.catblock:hover .cb-cta { background: var(--orange-dark, #a86a15); }

@media (min-width: 600px) {
  .catrow { grid-template-columns: repeat(2, 1fr); gap: 32px 22px; }
}
@media (min-width: 900px) {
  .catalogue { padding: 48px 0 12px; }
  .cat-title { font-size: 26px; }
  .catrow { grid-template-columns: repeat(3, 1fr); gap: 38px 26px; }
  .catrow.two { grid-template-columns: repeat(2, 1fr); }
  .catrow.two .shot { aspect-ratio: 4 / 3; }
  .cb-name { font-size: 17px; }
}

/* --------------------------------------------------------------------------
   Coloris d'un même modèle
   Chaque teinte est un article distinct : ces vignettes mènent à sa fiche,
   elles ne changent pas l'article courant.
   -------------------------------------------------------------------------- */

.colorway { margin-top: 18px; }
.cw-title {
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 10px;
}
.cw-list { display: flex; flex-wrap: wrap; gap: 8px; }
.cw-item {
  display: block;
  width: 62px; height: 62px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--line, #e5eae7);
  background: var(--band, #f5f7f6);
  position: relative;
}
.cw-item { background: #fff; }
.cw-item img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.cw-item:hover { border-color: var(--green, #0f4c3a); }
/* Le coloris affiché est souligné, à la manière d'un onglet actif. */
.cw-item.on { border-color: transparent; box-shadow: inset 0 -3px 0 var(--orange, #e8871e); }
.cw-current { margin-top: 8px; font-size: 14px; font-weight: 600; }

.pcard .colorcount { color: var(--orange, #e8871e); font-weight: 700; }

/* Accès au compte client, à côté du panier. */
.acctbtn { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.acctbtn:hover { color: var(--orange, var(--gold, #c9821f)); }
.acctbtn svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.7; }

/* Surtitre des pages annexes : compte, à propos, contact. */
.eyebrow-dark {
  display: flex; align-items: center; gap: 10px;
  text-transform: uppercase; letter-spacing: .16em;
  font-size: 12px; font-weight: 700;
  color: var(--orange, var(--gold, #c9821f));
  margin-bottom: 8px;
}
.eyebrow-dark::before {
  content: ""; width: 26px; height: 2px;
  background: var(--orange, var(--gold, #c9821f));
}

/* Recherche */
.searchbar { display: flex; gap: 8px; width: 100%; }
.searchbar input { flex: 1; }
.search-inline { display: none; flex: 1 1 260px; max-width: 340px; margin-left: auto; position: relative; }
.search-inline input {
  padding-left: 42px;
  border-radius: 999px;
  background: var(--band);
  border-color: transparent;
  min-height: 44px;
}
.search-inline input:focus { background: #fff; }
.search-inline svg {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; stroke: var(--muted); fill: none; stroke-width: 1.9;
  pointer-events: none;
}

.cartbtn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px; min-height: 44px;
  border: 1px solid var(--line); border-radius: 999px;
  font-weight: 700; font-size: 15px; background: #fff;
}
.cartbtn:hover { border-color: var(--green); color: var(--green); }
.cartbtn svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.cartbtn .n {
  min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 11px; background: var(--green); color: #fff;
  font-size: 12px; line-height: 22px; text-align: center;
}
.cartbtn .n.zero { background: var(--band); color: var(--muted); }

/* --------------------------------------------------------------------------
   Navigation basse — mobile uniquement
   -------------------------------------------------------------------------- */

.bottomnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex;
  background: #fff;
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -2px 12px rgba(27, 31, 29, .06);
}
.bottomnav a {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  height: var(--nav-height);
  font-size: 11px; font-weight: 600; color: var(--muted);
  position: relative;
}
.bottomnav a.on { color: var(--green); }
.bottomnav svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.bottomnav .count {
  position: absolute; top: 6px; left: 50%; margin-left: 4px;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 9px; background: var(--orange); color: #fff;
  font-size: 10px; line-height: 17px; text-align: center;
}

/* --------------------------------------------------------------------------
   Boutons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 18px;
  min-height: 46px;
  border-radius: 11px;
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--ink);
  font: inherit; font-weight: 700; font-size: 15px;
  cursor: pointer; text-align: center;
  transition: background .15s, border-color .15s, color .15s;
}
.btn:hover { border-color: #cfd8d4; }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--orange); border-color: var(--orange); color: #fff; }
.btn.primary:hover { background: var(--orange-dark); border-color: var(--orange-dark); color: #fff; }
.btn.outline { background: #fff; border-color: var(--orange); color: var(--orange); }
.btn.outline:hover { background: var(--orange-soft); color: var(--orange-dark); }
.btn.green { background: var(--green); border-color: var(--green); color: #fff; }
.btn.green:hover { background: var(--green-dark); border-color: var(--green-dark); color: #fff; }
.btn.whatsapp { background: #25d366; border-color: #25d366; color: #fff; }
.btn.whatsapp:hover { background: #1eb455; border-color: #1eb455; color: #fff; }
.btn.ghost { background: transparent; }
.btn.danger { background: #fff4f2; border-color: #f3ccc6; color: var(--danger); }
.btn.block { width: 100%; }
.btn.small { min-height: 38px; padding: 8px 13px; font-size: 14px; border-radius: 9px; }
.btn[disabled], .btn.disabled { opacity: .45; pointer-events: none; }
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; }

/* --------------------------------------------------------------------------
   Formulaires
   -------------------------------------------------------------------------- */

input, select, textarea {
  width: 100%;
  padding: 12px 14px;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 16px;              /* évite le zoom automatique sur iOS */
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--green);
  outline-offset: -1px;
  border-color: var(--green);
}
textarea { min-height: 110px; resize: vertical; }
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7a74' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px;
}
label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 5px; }
.field { margin-bottom: 14px; }
.field .hint { font-size: 13px; color: var(--muted); margin-top: 4px; }
.stack { display: grid; gap: 14px; }
.grid2, .grid3 { display: grid; gap: 14px; grid-template-columns: 1fr; }
.inline { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin: 0 0 16px; }
legend { font-weight: 700; padding: 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }

/* --------------------------------------------------------------------------
   Cartes et blocs
   -------------------------------------------------------------------------- */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
}
.card + .card { margin-top: 16px; }

.pagehead {
  display: flex; flex-wrap: wrap; gap: 12px;
  align-items: flex-start; justify-content: space-between;
  margin: 20px 0 16px;
}
.pagehead h1 { margin-bottom: 2px; }
.pagehead p { margin: 0; }

/* Titre de section avec action à droite */
.sechead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 28px 0 14px;
}
.sechead h2 { display: flex; align-items: center; gap: 8px; margin: 0; }
.sechead h2 svg { width: 20px; height: 20px; stroke: var(--orange); fill: none; stroke-width: 1.9; }
.sechead .more { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; color: var(--muted); }
.sechead .more:hover { color: var(--green); }
.sechead .more svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
.railnav { display: none; gap: 6px; }
.railnav button {
  width: 34px; height: 34px; min-height: 0; padding: 0;
  border: 1px solid var(--line); border-radius: 50%;
  background: #fff; cursor: pointer;
  display: grid; place-items: center;
}
.railnav button:hover { border-color: var(--green); }
.railnav svg { width: 16px; height: 16px; stroke: var(--ink); fill: none; stroke-width: 2; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

/* Bandeau pleine largeur : il court d'un bord à l'autre de l'écran, mais son
   texte reste aligné sur le conteneur du site grâce au padding calculé.
   1280px = largeur max du conteneur, 16px = son padding latéral. */
.hero {
  background: var(--cream);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  padding-left: max(16px, calc((100% - 1280px) / 2 + 16px));
}
.hero .copy { padding: 26px 16px 30px 0; }
.hero h1 { font-size: 29px; margin-bottom: 12px; }
.hero h1 .accent { color: var(--green); }
.hero .lead { color: #45514c; font-size: 16px; margin-bottom: 18px; }
.hero .visual { min-height: 210px; background: var(--green-soft); }
.hero .visual img { width: 100%; height: 100%; object-fit: cover; }

/* Sans visuel chargé, le bloc occupe toute la largeur au lieu de laisser
   une moitié vide — la colonne image n'est alors même pas rendue. */
.hero.no-visual { padding-right: max(16px, calc((100% - 1280px) / 2 + 16px)); }
.hero.no-visual .copy { max-width: 760px; }

/* Bande de garanties, juste sous le hero. Elle était logée dans la colonne
   texte : à cette largeur, « Livraison locale en 12 h » ne tenait plus sur une
   ligne. En pleine largeur les quatre promesses se lisent d'un trait, et le
   bandeau récupère la hauteur qu'elles lui prenaient. */
.promises { background: var(--bg); border-bottom: 1px solid var(--line); }
.promises .wrap {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px;
  padding-top: 18px; padding-bottom: 18px;
}
.promises .wrap > div { display: flex; align-items: center; gap: 10px; }
.promises .ic {
  flex: 0 0 34px; width: 34px; height: 34px;
  display: grid; place-items: center;
  background: var(--green-soft); border-radius: 50%;
}
.promises svg { width: 17px; height: 17px; stroke: var(--green); fill: none; stroke-width: 1.9; }
.promises b { display: block; font-size: 13px; font-weight: 600; line-height: 1.25; }
.promises b + span { display: block; color: var(--muted); font-size: 12px; line-height: 1.35; }

.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-cta .btn { flex: 1 1 auto; }

/* --------------------------------------------------------------------------
   Pastilles
   -------------------------------------------------------------------------- */

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; line-height: 1.5;
  background: var(--green-soft); color: var(--green);
  white-space: nowrap;
}
.badge.express { background: #e4f4ea; color: var(--ok); }
.badge.import { background: var(--band); color: #4b5a54; }
.badge.tested { background: var(--orange-soft); color: #a1521c; }
.badge.ok { background: #e4f4ea; color: var(--ok); }
.badge.warn { background: #fdf3e0; color: var(--warn); }
.badge.danger { background: #fdeceb; color: var(--danger); }
.badge.info { background: #eef2fb; color: var(--info); }
.badge.grey { background: var(--band); color: var(--muted); }
.badge svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.2; }

/* --------------------------------------------------------------------------
   Grille produits
   -------------------------------------------------------------------------- */

.products { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }

.pcard {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow .18s, transform .18s;
}
.pcard:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
/* Les visuels fournisseur sont des packshots sur fond blanc, aux proportions
   variables. « cover » les recadrait au carré et coupait les chaussures :
   « contain » les montre entiers, et le fond blanc rend les marges invisibles. */
.pcard .thumb { position: relative; aspect-ratio: 1 / 1; background: #fff; overflow: hidden; }
.pcard .thumb img { width: 100%; height: 100%; object-fit: contain; padding: 6%; }
.pcard .thumb .badge {
  position: absolute; top: 9px; left: 9px;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(3px);
  box-shadow: 0 1px 3px rgba(27, 31, 29, .12);
}
.pcard .body { padding: 11px 12px 14px; display: flex; flex-direction: column; flex: 1; gap: 3px; }
.pcard .name { font-weight: 700; font-size: 14px; line-height: 1.35; }
.pcard .meta { font-size: 12px; color: var(--muted); }
.pcard .price { font-weight: 800; font-size: 16px; color: var(--green); margin-top: auto; padding-top: 8px; }
.pcard .old { font-weight: 500; font-size: 13px; color: var(--muted); text-decoration: line-through; margin-left: 6px; }

/* Bouton favori — mémorisé dans le navigateur, sans compte client */
.fav {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 32px; height: 32px; min-height: 0; padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 1px 3px rgba(27, 31, 29, .14);
  cursor: pointer;
  display: grid; place-items: center;
}
.fav svg { width: 17px; height: 17px; stroke: var(--muted); fill: none; stroke-width: 1.9; }
.fav:hover svg { stroke: var(--orange); }
.fav[aria-pressed="true"] svg { stroke: var(--orange); fill: var(--orange); }

/* Rail horizontal : coups de cœur */
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(268px, 1fr);
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 6px;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }

.fcard {
  display: flex; gap: 14px; align-items: center;
  background: #fbfbfa;
  border: 1px solid #eef1ef;
  border-radius: var(--radius);
  padding: 14px;
  transition: box-shadow .18s, background .18s;
}
.fcard:hover { background: #fff; box-shadow: var(--shadow-hover); }
.fcard .pic {
  flex: 0 0 78px; width: 78px; height: 78px;
  border-radius: 10px; overflow: hidden; background: var(--band);
}
.fcard .pic { background: #fff; }
.fcard .pic img { width: 100%; height: 100%; object-fit: contain; padding: 5%; }
.fcard .info { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.fcard .name { font-weight: 700; font-size: 14px; line-height: 1.3; }
.fcard .price { font-weight: 800; font-size: 15px; color: var(--green); }

.empty { text-align: center; padding: 40px 16px; color: var(--muted); }

/* Filtres horizontaux défilables */
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 12px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto;
  padding: 9px 15px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff;
  font-size: 14px; font-weight: 600; white-space: nowrap;
}
.chip:hover { border-color: var(--green); color: var(--green); }
.chip.on { background: var(--green); border-color: var(--green); color: #fff; }

/* --------------------------------------------------------------------------
   Bandeau de réassurance
   -------------------------------------------------------------------------- */

.trustbar {
  background: var(--band);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin: 30px 0 10px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.trustbar > div { display: flex; gap: 12px; align-items: flex-start; }
.trustbar svg { flex: 0 0 26px; width: 26px; height: 26px; stroke: var(--green); fill: none; stroke-width: 1.6; }
.trustbar .t { font-weight: 700; font-size: 15px; margin-bottom: 2px; }
.trustbar .d { font-size: 13px; color: var(--muted); line-height: 1.45; }

/* --------------------------------------------------------------------------
   Fiche produit
   -------------------------------------------------------------------------- */

.gallery { display: grid; gap: 10px; }
.gallery .main {
  aspect-ratio: 1 / 1; background: var(--band);
  border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line);
}
.gallery .main img { width: 100%; height: 100%; object-fit: contain; padding: 4%; }
.gallery .thumbs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.gallery .thumbs::-webkit-scrollbar { display: none; }
.gallery .thumbs button {
  flex: 0 0 66px; width: 66px; height: 66px; padding: 0; min-height: 0;
  border-radius: 10px; border: 2px solid var(--line);
  overflow: hidden; background: #fff; cursor: pointer;
}
.gallery .thumbs button.on { border-color: var(--green); }
.gallery .thumbs img { width: 100%; height: 100%; object-fit: contain; padding: 4px; background: #fff; }

.price-main { font-size: 28px; font-weight: 800; color: var(--green); }

.options { display: flex; flex-wrap: wrap; gap: 8px; }
.options input { position: absolute; opacity: 0; pointer-events: none; }
.options label {
  margin: 0; min-width: 50px; padding: 10px 14px;
  border: 1.5px solid var(--line); border-radius: 10px; background: #fff;
  font-weight: 700; font-size: 15px; text-align: center;
  cursor: pointer; user-select: none;
}
.options input:checked + label { border-color: var(--green); background: var(--green); color: #fff; }
.options input:disabled + label { opacity: .35; cursor: not-allowed; text-decoration: line-through; }
.swatch { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); vertical-align: -2px; margin-right: 6px; }

.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 11px; overflow: hidden; background: #fff; }
.qty button { width: 44px; height: 46px; min-height: 0; border: 0; background: #fff; font-size: 20px; cursor: pointer; color: var(--green); }
.qty input {
  width: 52px; border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line);
  border-radius: 0; text-align: center; font-weight: 700; -moz-appearance: textfield;
}
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.buybar {
  position: fixed; left: 0; right: 0;
  bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px));
  z-index: 35;
  background: #fff; border-top: 1px solid var(--line);
  padding: 10px 16px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: 0 -2px 12px rgba(27, 31, 29, .07);
}
.buybar .price { font-weight: 800; font-size: 18px; color: var(--green); white-space: nowrap; }
.buybar .btn { flex: 1; }

.specs { list-style: none; padding: 0; margin: 0; }
.specs li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.specs li:last-child { border-bottom: 0; }
.specs .k { color: var(--muted); }
.specs .v { font-weight: 600; text-align: right; }

.trust { display: grid; gap: 10px; }
.trust div { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.trust svg { flex: 0 0 20px; width: 20px; height: 20px; stroke: var(--green); fill: none; stroke-width: 1.8; margin-top: 1px; }

/* --------------------------------------------------------------------------
   Panier et lignes de commande
   -------------------------------------------------------------------------- */

.line { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.line:last-child { border-bottom: 0; }
.line .pic { flex: 0 0 74px; width: 74px; height: 74px; border-radius: 10px; overflow: hidden; background: var(--band); }
.line .pic { background: #fff; }
.line .pic img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.line .info { flex: 1; min-width: 0; }
.line .info .t { font-weight: 700; font-size: 15px; }
.line .actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }

/* --------------------------------------------------------------------------
   Lots
   Un lot est une ligne facturée pour plusieurs articles livrés : le prix est
   celui de l'offre, le détail de la composition vit sous l'intitulé.
   -------------------------------------------------------------------------- */

.line.lot { background: var(--cream); border-radius: 12px; padding: 14px 12px; margin-bottom: 10px; border-bottom: 0; }
.lot-items { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 3px; }
.lot-items li { font-size: 13px; line-height: 1.35; padding-left: 12px; position: relative; }
.lot-items li::before { content: "·"; position: absolute; left: 2px; color: var(--muted); }
.lot-items a { font-weight: 600; }

/* Place encore libre dans le lot en cours de composition. */
.line.lotslot .pic {
  background: var(--band);
  border: 1px dashed var(--line);
  display: grid; place-items: center;
}
.line.lotslot .info { display: flex; align-items: center; }

/* Choix d'une taille puis ajout, directement sous la vignette. */
.lotpick .body { gap: 6px; }
.lotadd { display: flex; gap: 6px; margin-top: auto; padding-top: 8px; }
.lotadd select { flex: 1; min-width: 0; min-height: 40px; padding: 6px 8px; font-size: 14px; }
.lotadd .btn { flex: 0 0 auto; white-space: nowrap; }

/* La barre fixe rappelle l'état du lot ; sur téléphone le récapitulatif est
   très loin sous la liste des articles. */
.lotbar { justify-content: space-between; }
.lotbar .muted { white-space: nowrap; }

/* Les offres de lot proposées sur la fiche article. */
.lotoffers h2 { margin-bottom: 4px; }
.lotoffer {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; margin-top: 10px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--bg); color: inherit;
}
.lotoffer:hover { border-color: var(--green); background: var(--green-soft); }
.lotoffer .l, .lotoffer .r { display: grid; gap: 2px; }
.lotoffer .r { text-align: right; }
.lotoffer .r b { color: var(--green); font-size: 17px; }
.lotoffer .save { color: var(--orange); font-size: 12px; font-weight: 700; }

/* Rappel des lots sur l'accueil. */
.lotband { background: var(--band); padding: 26px 0; margin-top: 26px; }
.lotband h2 { margin: 0 0 4px; }
.lotband > .wrap > .muted { margin: 0 0 14px; font-size: 15px; }
.lotband-list { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 700px) {
  .lotband-list { grid-template-columns: repeat(2, 1fr); }
}

/* Bouton qui doit se lire comme un lien : « Retirer », « Annuler »… */
.linkbtn {
  background: none; border: 0; padding: 4px 0; margin-top: 4px;
  color: var(--danger); font: inherit; font-size: 13px; font-weight: 600;
  text-decoration: underline; cursor: pointer;
}

/* Visible des seuls lecteurs d'écran. */
.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;
}

.totals { display: grid; gap: 8px; }
.totals div { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.totals .grand { border-top: 1px solid var(--line); padding-top: 10px; font-size: 19px; font-weight: 800; color: var(--green); }

/* --------------------------------------------------------------------------
   Alertes
   -------------------------------------------------------------------------- */

.alert { padding: 12px 14px; border-radius: 11px; margin: 0 0 14px; font-size: 15px; border: 1px solid transparent; }
.alert.ok { background: #e4f4ea; border-color: #bfe4cb; color: #0f5c38; }
.alert.danger { background: #fdeceb; border-color: #f5cdc8; color: #8c1d16; }
.alert.info { background: #eef2fb; border-color: #cfdcf3; color: #17457f; }
.alert.warn { background: #fdf3e0; border-color: #f0dcb4; color: #7a5109; }

/* --------------------------------------------------------------------------
   Suivi de commande
   -------------------------------------------------------------------------- */

.steps { list-style: none; margin: 0; padding: 0; }
.steps li { position: relative; padding: 0 0 22px 30px; }
.steps li:last-child { padding-bottom: 0; }
.steps li::before {
  content: ""; position: absolute; left: 0; top: 4px;
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--line); background: #fff;
}
.steps li::after {
  content: ""; position: absolute; left: 6px; top: 20px; bottom: 0;
  width: 2px; background: var(--line);
}
.steps li:last-child::after { display: none; }
.steps li.done::before { border-color: var(--green); background: var(--green); }
.steps li.done::after { background: var(--green); }
.steps li.current::before { border-color: var(--orange); background: var(--orange); box-shadow: 0 0 0 4px rgba(232, 114, 47, .2); }
.steps .t { font-weight: 700; }
.steps .d { font-size: 13px; color: var(--muted); }

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */

.footer { padding: 28px 0 22px; color: var(--muted); font-size: 14px; border-top: 1px solid var(--line); margin-top: 34px; background: #fff; }
.footer .links { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 10px; font-weight: 600; color: var(--ink); }
.footer .links a:hover { color: var(--green); }

/* --------------------------------------------------------------------------
   Administration — reste sobre, en vert
   -------------------------------------------------------------------------- */

.admin { background: var(--band); }
.admin .btn.primary { background: var(--green); border-color: var(--green); color: #fff; }
.admin .btn.primary:hover { background: var(--green-dark); border-color: var(--green-dark); }

.adminbar { background: var(--green-dark); color: #fff; position: sticky; top: 0; z-index: 30; }
.adminbar .wrap { display: flex; align-items: center; gap: 12px; min-height: 56px; }
.adminbar .brand .name, .adminbar .brand .name b { color: #fff; }
.adminbar .brand .mark { background: rgba(255,255,255,.16); }
.adminbar .who { margin-left: auto; font-size: 13px; color: rgba(255,255,255,.75); }

.sidebar { display: none; }

.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 18px; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); }
.stat .k { font-size: 13px; color: var(--muted); font-weight: 600; }
.stat .v { font-size: 26px; font-weight: 800; line-height: 1.2; margin-top: 2px; }
.stat.alert-stat { border-color: #f0dcb4; background: #fffaf0; }

.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th, .table td { padding: 12px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; }
.table tr:last-child td { border-bottom: 0; }

/* Tableaux : cartes empilées sur téléphone */
@media (max-width: 767px) {
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table thead { display: none; }
  .table tr {
    border: 1px solid var(--line); border-radius: var(--radius);
    background: #fff; padding: 6px 12px; margin-bottom: 10px; box-shadow: var(--shadow);
  }
  .table td { border-bottom: 1px solid var(--line); padding: 9px 0; display: flex; justify-content: space-between; gap: 14px; }
  .table td:last-child { border-bottom: 0; }
  .table td::before {
    content: attr(data-label);
    font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
    color: var(--muted); font-weight: 700; flex: 0 0 auto;
  }
  .table td > * { text-align: right; margin-left: auto; }
}

.wizard { display: flex; gap: 8px; margin-bottom: 18px; font-size: 13px; font-weight: 700; }
.wizard span { flex: 1; padding: 8px 10px; border-radius: 10px; background: #fff; border: 1px solid var(--line); color: var(--muted); text-align: center; }
.wizard span.on { background: var(--green); border-color: var(--green); color: #fff; }

.preview { display: grid; gap: 14px; }
.preview .shots, .shots { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; }
.shots label { flex: 0 0 96px; margin: 0; cursor: pointer; position: relative; }
.shots img { width: 96px; height: 96px; object-fit: contain; background: #fff; padding: 4px; border-radius: 10px; border: 2px solid var(--line); }
.shots input { position: absolute; opacity: 0; }
.shots input:checked + img { border-color: var(--green); }
.shots input:not(:checked) + img { opacity: .4; }

.pricebox { background: var(--green-soft); border-radius: 12px; padding: 14px; }
.pricebox .row { display: flex; justify-content: space-between; font-size: 14px; padding: 3px 0; }
.pricebox .row.total { font-weight: 800; font-size: 17px; border-top: 1px solid rgba(11, 92, 63, .18); margin-top: 6px; padding-top: 8px; }

.variants { width: 100%; border-collapse: collapse; font-size: 14px; }
.variants th { font-size: 12px; text-transform: uppercase; color: var(--muted); text-align: left; padding: 8px 6px; }
.variants td { padding: 5px 6px; border-top: 1px solid var(--line); }
.variants input[type="text"], .variants input[type="number"] { min-height: 40px; padding: 8px 10px; font-size: 15px; }
.variants .del { color: var(--danger); font-weight: 700; cursor: pointer; background: none; border: 0; min-height: 0; padding: 6px; }

/* --------------------------------------------------------------------------
   Tableau de saisie de l'administration
   Pensé pour la saisie en série : lignes denses, colonnes fixes, en-tête qui
   reste visible pendant le défilement, bouton d'enregistrement collé en bas.
   -------------------------------------------------------------------------- */

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.sheet-tools { position: sticky; top: 0; z-index: 12; }
.sheet-wrap { overflow-x: auto; max-height: 70vh; overflow-y: auto; }

.sheet { width: 100%; border-collapse: collapse; font-size: 14px; }
.sheet thead th {
  position: sticky; top: 0; z-index: 3;
  background: var(--band, #f5f7f6);
  text-align: left;
  font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted, #6b7a74);
  padding: 10px;
  border-bottom: 1px solid var(--line, #e5eae7);
  white-space: nowrap;
}
.sheet td { padding: 6px 10px; border-bottom: 1px solid var(--line, #e5eae7); vertical-align: middle; }
.sheet tr.on td { background: #fdf6ec; }
/* Un filet marque le passage d'un modèle au suivant. */
.sheet tr.group-start td { border-top: 2px solid var(--line, #e5eae7); }
.sheet tr.lonely .c-model input { border-color: var(--orange, #e8871e); background: #fffaf2; }

.sheet .c-check { width: 34px; }
.sheet .c-pic { width: 62px; }
.sheet .c-pic img {
  width: 52px; height: 52px; object-fit: contain;
  background: #fff; border: 1px solid var(--line, #e5eae7); border-radius: 5px; padding: 3px;
}
.sheet .c-model { width: 210px; }
.sheet .c-color { width: 180px; }
.sheet .c-num { width: 92px; text-align: right; white-space: nowrap; }
.sheet input[type="text"] { min-height: 36px; padding: 6px 9px; font-size: 14px; }

.lonely-tag {
  display: inline-block; padding: 1px 7px; border-radius: 4px;
  background: #fffaf2; border: 1px solid var(--orange, #e8871e);
  color: #a1651c; font-size: 12px; font-weight: 700;
}

.sheet-save {
  position: sticky; bottom: 0; z-index: 12;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--line, #e5eae7); border-radius: var(--radius, 14px);
  padding: 12px 16px; margin-top: 14px;
  box-shadow: 0 -2px 10px rgba(27, 31, 29, .06);
}

@media (max-width: 767px) {
  .sheet .c-pic, .sheet .c-num { display: none; }
  .sheet .c-model, .sheet .c-color { width: auto; }
}

.sizegrid { display: flex; flex-wrap: wrap; gap: 7px; }
.sizegrid label { margin: 0; }
.sizegrid input { position: absolute; opacity: 0; }
.sizegrid input + span {
  display: inline-block; padding: 9px 13px;
  border: 1.5px solid var(--line); border-radius: 9px; background: #fff;
  font-weight: 700; font-size: 14px; cursor: pointer;
}
.sizegrid input:checked + span { border-color: var(--green); background: var(--green); color: #fff; }

.auth-page { display: grid; place-items: center; min-height: 100vh; padding: 20px 20px 40px; }
.auth-card { width: min(430px, 100%); }

/* --------------------------------------------------------------------------
   Tablette
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
  body { padding-bottom: 0; }
  h1 { font-size: 32px; }
  h2 { font-size: 24px; }
  .bottomnav { display: none; }
  .hide-mobile { display: initial; }
  .only-mobile { display: none; }

  .search-inline { display: block; }

  /* auto-fill plutôt qu'un nombre fixe : la grille passe d'elle-même de 3 à 6
     colonnes selon la largeur, sans multiplier les points de rupture. */
  .products { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px; }
  .grid2 { grid-template-columns: 1fr 1fr; }
  .grid3 { grid-template-columns: repeat(3, 1fr); }
  .stats { grid-template-columns: repeat(4, 1fr); }
  .card { padding: 20px; }

  .hero { grid-template-columns: minmax(0, .67fr) minmax(0, 1fr); }
  .hero.no-visual { grid-template-columns: 1fr; }
  .hero .copy { padding: 34px 34px 34px 0; align-self: center; }
  .hero h1 { font-size: 36px; margin-bottom: 9px; }
  .hero .lead { font-size: 16px; margin-bottom: 14px; max-width: 520px; }
  .hero .visual { min-height: 350px; }
  .hero-cta .btn { flex: 0 0 auto; padding: 12px 22px; min-height: 46px; }

  .trustbar { grid-template-columns: repeat(2, 1fr); gap: 24px 32px; padding: 26px 30px; }
  .rail { grid-auto-columns: minmax(300px, 1fr); gap: 16px; }
  .railnav { display: flex; }

  .buybar { position: static; box-shadow: none; border: 0; padding: 0; margin-top: 18px; }
  .buybar .price { display: none; }
  .pcard .name { font-size: 15px; }
  .pcard .price { font-size: 18px; }

  .split { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: start; }
  .split-wide { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; align-items: start; }
}

@media (max-width: 767px) {
  .brand-promise {
    font-size: 11px;
  }
  .brand-promise .wrap {
    min-height: 26px;
  }
  .topbar .wrap {
    min-height: 66px;
  }
  .brand-logo {
    width: 152px;
    max-height: 54px;
  }
}

@media (min-width: 768px) and (max-width: 1099px) {
  .brand-logo {
    width: 185px;
    max-height: 62px;
  }
  .search-inline {
    max-width: 290px;
  }
}

/* --------------------------------------------------------------------------
   Ordinateur
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
  .mainnav { display: flex; }
  .trustbar { grid-template-columns: repeat(4, 1fr); }
  .trustbar > div + div { border-left: 1px solid var(--line); padding-left: 26px; }

  .adminlayout { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
  .sidebar { display: block; background: var(--green-dark); color: #fff; padding: 20px 14px; }
  .sidebar .brand { margin-bottom: 22px; padding: 0 8px; }
  .sidebar .brand .name, .sidebar .brand .name b { color: #fff; }
  .sidebar .brand .mark { background: rgba(255,255,255,.16); }
  .sidebar a {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 10px; margin-bottom: 3px;
    color: rgba(255,255,255,.8); font-weight: 600; font-size: 15px;
  }
  .sidebar a:hover { background: rgba(255,255,255,.09); color: #fff; }
  .sidebar a.on { background: rgba(255,255,255,.15); color: #fff; }
  .sidebar svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.8; }
  .sidebar .sep { border-top: 1px solid rgba(255,255,255,.15); margin: 14px 0; }
  .adminlayout .adminbar { display: none; }
  .adminlayout .content { padding: 8px 26px 40px; }
  .adminlayout .content .wrap { padding: 0; max-width: none; }
}

@media print {
  .bottomnav, .topbar, .adminbar, .sidebar, .buybar, .btn, .fav { display: none !important; }
  body { padding: 0; background: #fff; }
  .card { box-shadow: none; border-color: #ccc; }
}

/* ========================================================================== 
   DoxaMarket — finitions premium validées (07/08/2026)
   Ajustements purement visuels : aucun changement de palette ni de structure.
   ========================================================================== */

/* Cartes : rendu plus net et plus haut de gamme, sans modifier le design. */
.pcard {
  box-shadow: 0 8px 24px rgba(27, 31, 29, .045);
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.pcard:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 38px rgba(27, 31, 29, .085);
}
.pcard .thumb {
  background: #fff;
}
.pcard .thumb img {
  object-fit: contain;
  padding: 16px;
  transform: scale(.96);
  transition: transform .28s ease;
}
.pcard:hover .thumb img {
  transform: scale(1);
}
.pcard .body {
  padding: 13px 14px 16px;
}
.pcard .price {
  font-size: 18px;
  letter-spacing: -.015em;
}
.pcard .thumb .badge {
  padding: 4px 9px;
  box-shadow: 0 2px 8px rgba(27, 31, 29, .08);
}

/* Boutons : micro-relief discret. */
.btn {
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease,
              border-color .18s ease, color .18s ease;
}
.btn:hover {
  transform: translateY(-1px);
}
.btn.primary:hover,
.btn.green:hover,
.btn.whatsapp:hover {
  box-shadow: 0 9px 20px rgba(27, 31, 29, .10);
}

/* Hero : fondu progressif entre la zone texte et le visuel. */
.hero .visual {
  position: relative;
  overflow: hidden;
}
.hero .visual img {
  position: relative;
  z-index: 0;
}
.hero .visual::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0 auto 0 0;
  width: clamp(72px, 11vw, 175px);
  pointer-events: none;
  background: linear-gradient(
    90deg,
    var(--cream) 0%,
    rgba(250, 245, 238, .92) 26%,
    rgba(250, 245, 238, .64) 52%,
    rgba(250, 245, 238, .26) 76%,
    rgba(250, 245, 238, 0) 100%
  );
}

/* Un peu plus d'air dans les sections sans changer leur structure. */
.sechead {
  margin-top: 30px;
  margin-bottom: 15px;
}
.footer {
  padding-top: 22px;
  padding-bottom: 18px;
}

@media (min-width: 768px) {
  .hero .copy {
    padding-top: 34px;
    padding-bottom: 34px;
  }
  .hero .visual {
    min-height: 350px;
  }
  .hero .visual::before {
    width: clamp(90px, 9vw, 150px);
  }
  .pcard .thumb img {
    padding: 20px;
  }
}

@media (max-width: 767px) {
  /* Sur mobile l'image est sous le texte : fondu vertical plutôt qu'horizontal. */
  .hero .visual::before {
    inset: 0 0 auto 0;
    width: 100%;
    height: 52px;
    background: linear-gradient(
      180deg,
      var(--cream) 0%,
      rgba(250, 245, 238, .72) 42%,
      rgba(250, 245, 238, 0) 100%
    );
  }
  .pcard .thumb img {
    padding: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pcard,
  .pcard .thumb img,
  .btn {
    transition: none;
  }
}

/* ==========================================================================
   Téléphone et tablette
   Tout ce bloc vit sous 1024 px : le rendu de bureau est hors de portée.
   ========================================================================== */

/* Barre de rayons : le menu principal étant masqué sous 1024 px, c'est le
   seul chemin vers le catalogue depuis un téléphone. */
.mobilebar {
  display: none;
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: 10px 0 8px;
}
.mobilebar .mb-search { position: relative; margin: 0 16px 9px; }
.mobilebar .mb-search input {
  width: 100%;
  padding-left: 40px;
  border-radius: 999px;
  background: var(--band);
  border-color: transparent;
  min-height: 44px;
}
.mobilebar .mb-search input:focus { background: #fff; }
.mobilebar .mb-search svg {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; stroke: var(--muted); fill: none; stroke-width: 1.9;
  pointer-events: none;
}

.mobilebar .mb-chips {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 2px 16px 4px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.mobilebar .mb-chips::-webkit-scrollbar { display: none; }
.mobilebar .mb-chips a {
  flex: 0 0 auto;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  background: #fff;
}
/* Les sous-rubriques restent visibles mais en retrait de l'univers. */
.mobilebar .mb-chips a.sub { font-weight: 500; color: var(--muted); }
.mobilebar .mb-chips a.promo { border-color: var(--orange); color: var(--orange); }
.mobilebar .mb-chips a.on { background: var(--green); border-color: var(--green); color: #fff; }

@media (max-width: 1023px) {
  .mobilebar { display: block; }
}

@media (max-width: 767px) {
  /* Le visuel passe devant le texte : sur un écran étroit, c'est la photo
     qui doit accrocher, pas trois lignes de titre. */
  .hero .visual { order: -1; min-height: 0; aspect-ratio: 4 / 3; }
  .hero .visual img { height: 100%; }
  /* Le fondu bascule donc en bas de l'image, vers le texte qui la suit. */
  .hero .visual::before {
    inset: auto 0 0 0;
    height: 46px;
    background: linear-gradient(
      0deg,
      var(--cream) 0%,
      rgba(250, 245, 238, .72) 42%,
      rgba(250, 245, 238, 0) 100%
    );
  }
  .hero .copy { padding: 4px 16px 24px; }
  .hero h1 { font-size: 26px; }
  .hero .lead { font-size: 15px; }
  .hero-cta { flex-direction: column; }
  .hero-cta .btn { width: 100%; }

  /* Confort de lecture et de pouce sur les listes d'articles. */
  .products { gap: 10px; }
  .pcard .name { font-size: 13.5px; line-height: 1.3; }
  .pcard .price { font-size: 15px; }
  .pcard .body { padding: 9px 10px 12px; }
  /* Cible tactile agrandie sans changer l'apparence du cœur. */
  .fav { width: 38px; height: 38px; }

  /* Les blocs de rubrique deviennent un carrousel plutôt qu'une longue pile. */
  .catrow {
    grid-auto-flow: column;
    grid-auto-columns: 72%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
    scrollbar-width: none;
  }
  .catrow::-webkit-scrollbar { display: none; }
  .catrow .catblock { scroll-snap-align: start; }

  /* Le titre de section et son lien restent sur une ligne lisible. */
  .sechead { align-items: flex-end; gap: 8px; }
  .sechead h2 { font-size: 19px; }
  .sechead .more { font-size: 13px; white-space: nowrap; }

  /* Les ancres ne doivent pas se glisser sous l'en-tête collant. */
  html { scroll-padding-top: 72px; }

  /* Pas de halo gris au tap sur iOS et Android. */
  a, button, .chip, .cw-item { -webkit-tap-highlight-color: rgba(11, 92, 63, .12); }

  /* Le pied de page respire moins, il est loin du contenu utile. */
  .footer { padding: 20px 0 14px; }
  .footer .links { gap: 10px 14px; font-size: 14px; }

  /* Sur la fiche produit, la barre d'achat se superpose à la barre basse :
     le corps ne réservait que la hauteur de cette dernière, et le bas de page
     restait caché. On réserve la hauteur des deux. */
  body:has(.buybar) {
    padding-bottom: calc(var(--nav-height) + 76px + env(safe-area-inset-bottom, 0px));
  }
  .buybar { padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); }

  /* Galerie : vignettes un peu plus grandes, plus faciles à viser. */
  .gallery .thumbs button { flex: 0 0 58px; width: 58px; height: 58px; }

  /* Tailles et coloris : cibles tactiles confortables. */
  .options label { min-width: 56px; padding: 12px 16px; }
  .cw-item { width: 56px; height: 56px; }

  /* Panier : la ligne reste lisible même avec un nom de produit long. */
  .line .info .t { font-size: 14px; }
  .line .actions { flex-wrap: wrap; gap: 8px; }

  /* Suivi de commande : la frise garde ses repères sans déborder. */
  .steps li { padding-left: 26px; padding-bottom: 18px; }
}

@media (max-width: 400px) {
  /* Très petits écrans : une carte par ligne se lit mieux que deux minuscules. */
  .catrow { grid-auto-columns: 82%; }
  .hero h1 { font-size: 24px; }
  .promises .wrap { grid-template-columns: 1fr; gap: 12px; }
}

@media (min-width: 1280px) {
  .brand-logo {
    width: 230px;
    max-height: 72px;
  }
  .search-inline {
    max-width: 360px;
  }
}

@media (min-width: 1180px) {
  .hero .copy {
    padding-right: 28px;
  }
  .hero .visual {
    min-height: 348px;
  }
}

/* --------------------------------------------------------------------------
   Hero : la photo prend la place
   La colonne texte passait de 40 % à 60 % de la largeur ; elle descend ici à
   un cinquième pour laisser respirer le visuel. Ce qu'il reste — titre,
   accroche, boutons — se répartit sur la hauteur au lieu de s'empiler en haut,
   et les quatre garanties sont sorties du bandeau (voir .promises).
   Un minimum en pixels protège la lisibilité du titre sur les écrans moyens.
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
  .hero { grid-template-columns: minmax(240px, 30%) minmax(0, 70%); }
  .hero.no-visual { grid-template-columns: 1fr; }
  .hero .copy { padding: 28px 24px 28px 0; align-self: center; }
  .hero h1 { font-size: 27px; margin-bottom: 10px; }
  .hero .lead { font-size: 14px; line-height: 1.45; margin-bottom: 16px; max-width: none; }

  .hero-cta { flex-direction: row; gap: 8px; }
  .hero-cta .btn { flex: 1 1 auto; min-height: 42px; padding: 10px 14px; font-size: 14px; }

  .promises .wrap { grid-template-columns: repeat(4, 1fr); gap: 18px; }
}

@media (min-width: 1180px) {
  .hero { grid-template-columns: minmax(250px, 21%) minmax(0, 79%); }
  .hero.no-visual { grid-template-columns: 1fr; }

  /* À cette largeur, le titre doit descendre d'un cran pour que
     « Nous sélectionnons. » tienne encore sur une seule ligne. */
  .hero h1 { font-size: 24px; line-height: 1.18; margin-bottom: 12px; }
  .hero .lead { margin-bottom: 18px; }

  /* Deux boutons côte à côte dans une colonne de 250 px se retrouveraient à
     l'étroit : ils sont empilés et pleine largeur, ce qui aligne leur bord
     gauche sur celui du titre. */
  .hero-cta { flex-direction: column; gap: 8px; }
  .hero-cta .btn { width: 100%; flex: 0 0 auto; }

  /* L'accroche est bornée à trois lignes : sa longueur est libre en réglages,
     elle ne doit pas pouvoir repousser la hauteur du bandeau. */
  .hero .lead {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Hauteur inchangée par rapport à la version précédente. */
  .hero .visual { min-height: 348px; }
}