/* CHINA FACTORY — catalogue de gros.

   Parti pris : la grille produit est UNE FEUILLE, pas des fenetres eparpillees.
   Le defaut de babaashop n'est pas son fond sombre, c'est que ses vignettes
   sont des rectangles blancs disparates qui crevent le noir. Ici toutes les
   images sont detourees sur le meme papier et les tuiles sont collees bord a
   bord avec une goutiere d'encre d'un pixel : l'ensemble se lit comme une
   planche contact posee sur l'encre.

   Tout le reste reste calme. Une seule audace par page. */

:root {
  --encre: #111113;
  --papier: #EFECE8;
  --accent: #C8352B;
  --acier: #8A8F98;

  /* derives */
  --encre-haute: #1B1B1F;       /* surfaces posees sur l'encre */
  --trait: rgba(239, 236, 232, .14);
  --trait-papier: rgba(17, 17, 19, .12);
  --papier-doux: #E4E0D9;       /* fond des images, un cran sous le papier */

  /* couleurs officielles des messageries, pour le bouton flottant */
  --wa-vert: #25D366;
  --snap-jaune: #FFFC00;

  --r: 2px;                      /* commandes : boutons, champs */
  --r-tuile: 0;                  /* la feuille : les tuiles se touchent */

  --pas: 4px;
  --max: 1440px;

  --t-xs: 11px;
  --t-sm: 13px;
  --t-md: 15px;
  --t-lg: 19px;
}

/* Largeur etendue pour les titres : l'echo du logotype. */
.d, h1, h2.sec, .hero h1, .p-price, .card-price, .cat-head h1 {
  font-family: var(--sans);
  font-variation-settings: "wdth" 118;
  font-weight: 700;
  letter-spacing: -.012em;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--encre);
  color: var(--papier);
  font-family: var(--sans);
  font-size: var(--t-md);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

.container {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 calc(var(--pas) * 6);
}

:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

mark.todo {
  background: var(--accent);
  color: var(--papier);
  padding: 1px 6px;
  font-size: var(--t-xs);
  font-weight: 600;
}

/* ------------------------------------------------------------------ entete */
.header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--encre);
  border-bottom: 1px solid var(--trait);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: calc(var(--pas) * 8);
  height: 62px;
}

.brand {
  display: flex;
  align-items: center;
  gap: calc(var(--pas) * 2.5);
  flex: 0 0 auto;
}

.logo-mark { width: 26px; height: 26px; filter: invert(1); }

.logo-mot {
  font-variation-settings: "wdth" 118;
  font-weight: 700;
  font-size: var(--t-md);
  letter-spacing: .02em;
}

.nav {
  display: flex;
  gap: calc(var(--pas) * 6);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--t-sm);
  overflow: hidden;
}

.nav a { color: var(--acier); white-space: nowrap; }
.nav a:hover, .nav a[aria-current] { color: var(--papier); }

.header-actions {
  margin-left: auto;
  display: flex;
  gap: calc(var(--pas) * 2);
  align-items: center;
}

.icon-btn {
  position: relative;
  background: none;
  border: 0;
  color: var(--papier);
  padding: calc(var(--pas) * 1.5);
  cursor: pointer;
  line-height: 0;
}

.icon-btn svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.burger { display: none; }

.cart-count {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--accent);
  color: var(--papier);
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

.cart-count[data-empty] { display: none; }

/* -------------------------------------------------------------------- hero */
/* Bande, pas plein ecran : un acheteur veut arriver vite aux references. */
.hero {
  position: relative;
  min-height: clamp(380px, 52vh, 560px);
  display: flex;
  align-items: center;
  background: var(--encre) url("/assets/brand/hero-desktop.jpg") center right / cover no-repeat;
  border-bottom: 1px solid var(--trait);
}

/* Sans ce degrade, le mur sombre de la photo s'arrete net et le bloc de titre
   se lit comme un rectangle noir pose dessus. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    var(--encre) 0%,
    rgba(17, 17, 19, .94) 24%,
    rgba(17, 17, 19, .55) 44%,
    rgba(17, 17, 19, 0) 66%);
}

.hero .container { position: relative; z-index: 1; }

.hero-copy { max-width: 32rem; padding: calc(var(--pas) * 12) 0; }

.hero-kicker {
  margin: 0 0 calc(var(--pas) * 3);
  font-size: var(--t-sm);
  color: var(--accent);
  font-weight: 600;
}

.hero h1 {
  margin: 0 0 calc(var(--pas) * 4);
  font-size: clamp(38px, 5.4vw, 68px);
  line-height: .98;
}

.hero-text {
  margin: 0 0 calc(var(--pas) * 7);
  color: var(--acier);
  font-size: var(--t-lg);
  line-height: 1.45;
  max-width: 30rem;
}

/* ----------------------------------------------------------------- boutons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--pas) * 2);
  padding: 13px 22px;
  border: 1px solid var(--papier);
  border-radius: var(--r);
  background: var(--papier);
  color: var(--encre);
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 600;
  cursor: pointer;
}

.btn:hover { background: #fff; border-color: #fff; }

.btn-ghost {
  background: none;
  color: var(--papier);
  border-color: var(--trait);
}

.btn-ghost:hover { background: none; border-color: var(--papier); }

.btn-block { display: flex; width: 100%; }

.btn[disabled] { opacity: .45; cursor: not-allowed; }

.hero .btn + .btn { margin-left: calc(var(--pas) * 2); }

/* ------------------------------------------------------- bandeau de chiffres */
.bandeau {
  border-bottom: 1px solid var(--trait);
  background: var(--encre-haute);
}

.bandeau-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--trait);
}

.bandeau-grid > div {
  background: var(--encre-haute);
  padding: calc(var(--pas) * 6);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bandeau-grid b {
  font-variation-settings: "wdth" 118;
  font-size: 26px;
  line-height: 1;
}

.bandeau-grid span { color: var(--acier); font-size: var(--t-sm); }

/* --------------------------------------------------------------- titres de section */
h2.sec {
  margin: calc(var(--pas) * 14) 0 calc(var(--pas) * 5);
  font-size: 22px;
}

h2.sec:first-child { margin-top: calc(var(--pas) * 10); }

/* ------------------------------------------------- tuiles de rubrique */
/* Vraies photos du catalogue : une image generee posee a cote de 2 165 photos
   reelles se repere immediatement. */
.tuiles {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px;
  background: var(--trait);
  border: 1px solid var(--trait);
}

.tuile {
  display: flex;
  flex-direction: column;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--papier-doux);
}

.tuile img {
  flex: 1;
  width: 100%;
  min-height: 0;
  object-fit: contain;
  padding: calc(var(--pas) * 4);
}

.tuile-bas {
  background: var(--encre-haute);
  padding: calc(var(--pas) * 3) calc(var(--pas) * 4);
  border-top: 1px solid var(--trait);
}

.tuile-n { display: block; color: var(--acier); font-size: var(--t-xs); }
.tuile-l { display: block; font-weight: 600; font-size: var(--t-md); }
.tuile:hover .tuile-bas { background: var(--encre); }

/* ================================================================ LA FEUILLE */
/* Les tuiles se touchent, separees par un trait d'encre : la grille se lit
   comme une seule planche, pas comme des fenetres posees sur du noir. */
.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(236px, 1fr));
  /* voir plus bas : toutes les colonnes sont bornees en minmax(0, 1fr) */
  gap: 1px;
  background: var(--trait-papier);
  border: 1px solid var(--trait-papier);
}

.card {
  background: var(--papier);
  color: var(--encre);
  border-radius: var(--r-tuile);
  overflow: hidden;
}

.card > a {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card-media {
  position: relative;
  aspect-ratio: 1;
  background: var(--papier-doux);
}

.card-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: calc(var(--pas) * 3);
}

.card-body {
  padding: calc(var(--pas) * 3) calc(var(--pas) * 3.5) calc(var(--pas) * 4);
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.card-brand { color: #6B7079; font-size: var(--t-xs); }

.card-title {
  margin: 0;
  font-size: var(--t-sm);
  font-weight: 500;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-price {
  margin-top: calc(var(--pas) * 1.5);
  font-size: 17px;
}

/* La serie de tailles, pas « 8 tailles » : c'est la premiere question d'un
   revendeur, et personne ne l'affiche sur la vignette. */
.card-run {
  margin-top: calc(var(--pas) * 1.5);
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  font-size: 10px;
  color: #6B7079;
}

.card-run span {
  border: 1px solid var(--trait-papier);
  padding: 1px 4px;
  line-height: 1.4;
}

.card-ref {
  margin-top: auto;
  padding-top: calc(var(--pas) * 2.5);
  color: #797F88;
  font-size: 10px;
  letter-spacing: .03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* quatre produits lies : une grille pleine largeur, pas un rail a moitie vide */
.products.products-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.products.products-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

@media (max-width: 860px) {
  .products.products-4,
  .products.products-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1080px) {
  .products.products-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.sec-lien { margin: calc(var(--pas) * 5) 0 calc(var(--pas) * 4); }
.sec-lien a { color: var(--acier); font-size: var(--t-sm); border-bottom: 1px solid var(--trait); padding-bottom: 3px; }
.sec-lien a:hover { color: var(--papier); border-color: var(--papier); }

/* rail horizontal sur l'accueil */
.products.is-rail {
  grid-auto-flow: column;
  grid-auto-columns: minmax(212px, 236px);
  grid-template-columns: none;
  overflow-x: auto;
  scrollbar-width: thin;
}

/* --------------------------------------------------- grilles et filtres */
.crumbs {
  padding: calc(var(--pas) * 5) 0 0;
  font-size: var(--t-xs);
  color: var(--acier);
}

.crumbs a:hover { color: var(--papier); }

.cat-head { padding: calc(var(--pas) * 4) 0 calc(var(--pas) * 5); }
.cat-head h1 { margin: 0 0 calc(var(--pas) * 2); font-size: clamp(28px, 3.6vw, 42px); }
.cat-head p { margin: 0; color: var(--acier); max-width: 46rem; }

.toolbar {
  display: flex;
  align-items: center;
  gap: calc(var(--pas) * 4);
  padding-bottom: calc(var(--pas) * 4);
  border-bottom: 1px solid var(--trait);
  margin-bottom: calc(var(--pas) * 6);
}

.count { color: var(--acier); font-size: var(--t-sm); }

.chip {
  background: none;
  border: 1px solid var(--trait);
  border-radius: var(--r);
  color: var(--papier);
  padding: 8px 14px;
  font: inherit;
  font-size: var(--t-sm);
  cursor: pointer;
}

.chip:hover { border-color: var(--papier); }

.layout {
  display: grid;
  grid-template-columns: 216px 1fr;
  gap: calc(var(--pas) * 8);
  align-items: start;
  padding-bottom: calc(var(--pas) * 16);
}

.filters { position: sticky; top: 78px; }
.filters-head { display: none; }

.filter-group { margin-bottom: calc(var(--pas) * 7); }

.filter-group h3 {
  margin: 0 0 calc(var(--pas) * 3);
  font-size: var(--t-sm);
  font-weight: 600;
}

.filter-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 320px;
  overflow-y: auto;
}

.filter-list label, .size-grid label {
  display: flex;
  align-items: center;
  gap: calc(var(--pas) * 2);
  font-size: var(--t-sm);
  color: var(--acier);
  cursor: pointer;
  padding: 3px 0;
}

.filter-list label:hover, .size-grid label:hover { color: var(--papier); }
.filter-list .n { margin-left: auto; font-size: var(--t-xs); opacity: .6; }

.size-grid { display: flex; flex-wrap: wrap; gap: calc(var(--pas) * 2); }
.size-grid label { padding: 5px 9px; border: 1px solid var(--trait); border-radius: var(--r); }

.filters-apply { display: none; }

.empty { padding: calc(var(--pas) * 16) 0; text-align: center; color: var(--acier); }

/* ------------------------------------------------------------ fiche produit */
.product {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: calc(var(--pas) * 12);
  padding: calc(var(--pas) * 6) 0 calc(var(--pas) * 14);
  align-items: start;
}

.gallery { position: sticky; top: 78px; }

.gallery-main {
  background: var(--papier-doux);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

.gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: calc(var(--pas) * 8);
}

.thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 1px;
  margin-top: 1px;
  background: var(--trait-papier);
}

.thumb {
  background: var(--papier-doux);
  border: 0;
  padding: 0;
  cursor: pointer;
  aspect-ratio: 1;
}

.thumb img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.thumb.is-active { outline: 2px solid var(--accent); outline-offset: -2px; }

.p-brand { color: var(--acier); font-size: var(--t-sm); }

.product h1 {
  margin: calc(var(--pas) * 1.5) 0 calc(var(--pas) * 2);
  font-size: clamp(25px, 3vw, 34px);
  line-height: 1.1;
}

.p-color { color: var(--acier); font-size: var(--t-sm); margin-bottom: calc(var(--pas) * 4); }

.p-price { font-size: 30px; }

.p-price-note {
  color: var(--acier);
  font-size: var(--t-sm);
  margin-top: 2px;
  padding-bottom: calc(var(--pas) * 5);
  border-bottom: 1px solid var(--trait);
}

.opt-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: calc(var(--pas) * 5) 0 calc(var(--pas) * 3);
}

.opt-head h2 { margin: 0; font-size: var(--t-sm); font-weight: 600; }
.opt-head span { color: var(--acier); font-size: var(--t-xs); }

.opts { display: flex; flex-wrap: wrap; gap: calc(var(--pas) * 2); }

.opt {
  min-width: 52px;
  padding: 10px 12px;
  background: none;
  border: 1px solid var(--trait);
  border-radius: var(--r);
  color: var(--papier);
  font: inherit;
  font-size: var(--t-sm);
  cursor: pointer;
}

.opt:hover { border-color: var(--papier); }
.opt.is-on { background: var(--papier); color: var(--encre); border-color: var(--papier); }

.qty-row {
  display: flex;
  align-items: center;
  gap: calc(var(--pas) * 3);
  margin: calc(var(--pas) * 5) 0 calc(var(--pas) * 3);
}

.qty {
  display: flex;
  align-items: center;
  border: 1px solid var(--trait);
  border-radius: var(--r);
}

.qty button {
  width: 38px;
  height: 42px;
  background: none;
  border: 0;
  color: var(--papier);
  font-size: 17px;
  cursor: pointer;
}

.qty input {
  width: 46px;
  height: 42px;
  background: none;
  border: 0;
  color: var(--papier);
  font: inherit;
  text-align: center;
  -moz-appearance: textfield;
}

.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.p-actions { display: flex; flex-direction: column; gap: calc(var(--pas) * 2); }

.wa-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--pas) * 2);
  padding: 13px 22px;
  border: 1px solid var(--trait);
  border-radius: var(--r);
  font-size: var(--t-sm);
  color: var(--acier);
}

.wa-line:hover { color: var(--papier); border-color: var(--papier); }
.wa-line svg { width: 17px; height: 17px; fill: currentColor; }

.p-meta {
  margin-top: calc(var(--pas) * 6);
  border-top: 1px solid var(--trait);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.p-meta div {
  padding: calc(var(--pas) * 3) 0;
  border-bottom: 1px solid var(--trait);
  font-size: var(--t-sm);
}

.p-meta dt { color: var(--acier); font-size: var(--t-xs); }

.p-desc {
  margin-top: calc(var(--pas) * 8);
  color: #C8C4BC;
  max-width: 44rem;
}

.p-desc p { margin: 0 0 calc(var(--pas) * 4); line-height: 1.65; }
.p-desc h3 { font-size: var(--t-sm); font-weight: 600; color: var(--papier); margin: calc(var(--pas) * 6) 0 calc(var(--pas) * 2); }
.p-desc ul { margin: 0; padding-left: 1.1em; }
.p-desc li { margin-bottom: 5px; line-height: 1.55; }

.similar { border-top: 1px solid var(--trait); padding: calc(var(--pas) * 10) 0 calc(var(--pas) * 16); }
.similar h2 { margin: 0 0 calc(var(--pas) * 5); font-size: 20px; }

/* ------------------------------------------------------------------ panier */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 12, .62);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s;
  z-index: 50;
}

.drawer-backdrop.is-on { opacity: 1; pointer-events: auto; }

.cart {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(430px, 100%);
  background: var(--encre-haute);
  border-left: 1px solid var(--trait);
  transform: translateX(100%);
  transition: transform .22s ease;
  z-index: 60;
  display: flex;
  flex-direction: column;
}

.cart.is-on { transform: none; }

.cart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--pas) * 4) calc(var(--pas) * 5);
  border-bottom: 1px solid var(--trait);
}

.cart-head h2 { margin: 0; font-size: var(--t-md); font-weight: 600; }

.cart-items { flex: 1; overflow-y: auto; padding: calc(var(--pas) * 2) calc(var(--pas) * 5); }

.cart-empty { padding: calc(var(--pas) * 16) 0; text-align: center; color: var(--acier); font-size: var(--t-sm); }

.cart-line {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: calc(var(--pas) * 3);
  padding: calc(var(--pas) * 4) 0;
  border-bottom: 1px solid var(--trait);
  align-items: start;
}

.cart-line img { width: 56px; height: 56px; object-fit: contain; background: var(--papier-doux); }
.cart-line b { font-size: var(--t-sm); font-weight: 500; display: block; }
.cart-line small { color: var(--acier); font-size: var(--t-xs); }

.cart-line-rm {
  background: none;
  border: 0;
  color: var(--acier);
  cursor: pointer;
  font-size: var(--t-xs);
  padding: 0;
}

.cart-line-rm:hover { color: var(--accent); }

.cart-foot { padding: calc(var(--pas) * 5); border-top: 1px solid var(--trait); }

.cart-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 3px 0;
  font-size: var(--t-sm);
  color: var(--acier);
}

.cart-total b { color: var(--papier); font-size: var(--t-lg); font-variation-settings: "wdth" 118; }

.cart-note { color: var(--acier); font-size: var(--t-xs); line-height: 1.5; margin: calc(var(--pas) * 3) 0 calc(var(--pas) * 4); }

/* ---------------------------------------------------------- bouton flottant
   Un rond qui alterne WhatsApp et Snapchat tant qu'il est fermé ; au clic il
   déplie les deux messageries. Sans JavaScript, le choix reste déplié : le
   bouton seul ne saurait rien ouvrir. */
.fab {
  position: fixed;
  right: calc(var(--pas) * 5);
  bottom: calc(var(--pas) * 5);
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(var(--pas) * 2);
}

.fab-main {
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--encre);
  background: var(--wa-vert);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .42);
  animation: fab-fond 7s infinite;
}

.fab-ico { grid-area: 1 / 1; display: flex; }
.fab-ico svg { width: 27px; height: 27px; fill: currentColor; }
.fab-ico-wa { animation: fab-wa 7s infinite; }
.fab-ico-snap { opacity: 0; animation: fab-snap 7s infinite; }

.fab-croix {
  grid-area: 1 / 1;
  position: relative;
  width: 17px;
  height: 17px;
  opacity: 0;
  transition: opacity .16s ease;
}

.fab-croix::before, .fab-croix::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 17px;
  height: 2px;
  margin-top: -1px;
  border-radius: 1px;
  background: currentColor;
}

.fab-croix::before { transform: rotate(45deg); }
.fab-croix::after { transform: rotate(-45deg); }

.fab-choix {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(var(--pas) * 2);
}

.fab-opt {
  display: flex;
  align-items: center;
  gap: calc(var(--pas) * 2);
  padding: 13px 17px;            /* 46 px de haut, comme les autres commandes */
  border-radius: 40px;
  color: var(--encre);
  font-size: var(--t-sm);
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .38);
}

.fab-opt svg { width: 19px; height: 19px; fill: currentColor; }
.fab-opt-wa { background: var(--wa-vert); }
.fab-opt-snap { background: var(--snap-jaune); }

/* Tant que le JavaScript n'a pas pris la main, rien n'est masqué. */
.fab-js .fab-choix { visibility: hidden; pointer-events: none; }
.fab-js .fab-opt {
  opacity: 0;
  transform: translateY(7px);
  transition: opacity .18s ease, transform .18s ease;
}

.fab-js.is-open .fab-choix { visibility: visible; pointer-events: auto; }
.fab-js.is-open .fab-opt { opacity: 1; transform: none; }
.fab-js.is-open .fab-main { animation: none; background: var(--papier); }
.fab-js.is-open .fab-ico { opacity: 0; animation: none; }
.fab-js.is-open .fab-croix { opacity: 1; }

@keyframes fab-fond {
  0%, 44% { background: var(--wa-vert); }
  50%, 94% { background: var(--snap-jaune); }
  100% { background: var(--wa-vert); }
}

@keyframes fab-wa {
  0%, 44% { opacity: 1; }
  50%, 94% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fab-snap {
  0%, 44% { opacity: 0; }
  50%, 94% { opacity: 1; }
  100% { opacity: 0; }
}

/* Mouvement réduit : plus d'alternance, le bouton reste sur WhatsApp. */
@media (prefers-reduced-motion: reduce) {
  .fab-main, .fab-ico { animation: none; }
  .fab-ico-snap { opacity: 0; }
  .fab-opt { transition: none; }
}

/* ------------------------------------------------------------------- pages */
.legal { padding: calc(var(--pas) * 6) 0 calc(var(--pas) * 18); max-width: 44rem; }
.legal h1 { margin: 0 0 calc(var(--pas) * 6); font-size: clamp(26px, 3.4vw, 38px); }
.legal h2 { font-size: var(--t-lg); margin: calc(var(--pas) * 8) 0 calc(var(--pas) * 2); }
.legal p, .legal li { color: #C8C4BC; line-height: 1.65; }

/* -------------------------------------------------------------- pied de page */
.footer { border-top: 1px solid var(--trait); margin-top: calc(var(--pas) * 6); }

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: calc(var(--pas) * 8);
  padding: calc(var(--pas) * 12) calc(var(--pas) * 6);
}

.footer-logo { margin-bottom: calc(var(--pas) * 3); display: flex; align-items: center; gap: calc(var(--pas) * 2.5); }
.footer-grid p { margin: 0; color: var(--acier); font-size: var(--t-sm); max-width: 24rem; line-height: 1.55; }
.footer-grid h4 { margin: 0 0 calc(var(--pas) * 3); font-size: var(--t-sm); font-weight: 600; }
.footer-grid a { display: block; color: var(--acier); font-size: var(--t-sm); padding: 3px 0; }
.footer-grid a:hover { color: var(--papier); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: calc(var(--pas) * 4);
  padding: calc(var(--pas) * 5) calc(var(--pas) * 6);
  border-top: 1px solid var(--trait);
  color: var(--acier);
  font-size: var(--t-xs);
}

/* --------------------------------------------------------------- menu mobile */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: var(--encre);
  padding: calc(var(--pas) * 5);
  transform: translateX(-100%);
  transition: transform .22s ease;
  overflow-y: auto;
}

.mobile-nav.is-on { transform: none; }
.mobile-nav-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: calc(var(--pas) * 6); }
.mobile-nav > a { display: block; padding: 13px 0; border-bottom: 1px solid var(--trait); font-size: var(--t-lg); }

/* ------------------------------------------------------------------ mobile */
@media (max-width: 1080px) {
  .tuiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .container { padding: 0 calc(var(--pas) * 4); }
  .gallery { position: static; }
  .nav { display: none; }
  .burger { display: block; }

  /* Le tiers bas du hero mobile est mesure a 38/255 : plus clair que le
     desktop. Un voile garantit la lisibilite du titre. */
  .hero {
    min-height: auto;
    align-items: flex-end;
    background-image: url("/assets/brand/hero-mobile.jpg");
    background-position: center top;
  }

  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--encre) 6%, rgba(17, 17, 19, .82) 38%, rgba(17, 17, 19, .25) 72%);
  }

  .hero .container { position: relative; z-index: 1; }
  .hero-copy { padding: 46vh 0 calc(var(--pas) * 9); }
  .hero .btn + .btn { margin: calc(var(--pas) * 2) 0 0; }
  .hero .btn { display: flex; }

  .bandeau-grid { grid-template-columns: 1fr; }
  .layout { grid-template-columns: 1fr; }
  .product { grid-template-columns: 1fr; gap: calc(var(--pas) * 7); }
  .products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-meta { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; }

  .filters {
    position: fixed;
    inset: 0;
    z-index: 70;
    background: var(--encre);
    padding: calc(var(--pas) * 5);
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform .22s ease;
  }

  .filters.is-on { transform: none; }
  .filters-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: calc(var(--pas) * 6); }
  .filters-apply { display: flex; margin-top: calc(var(--pas) * 4); }
  .fab-main { width: 52px; height: 52px; }
  .fab-ico svg { width: 25px; height: 25px; }
}

@media (max-width: 520px) {
  .tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ------------------------------------------------------------ revendeurs */
/* Les trois etapes SONT une sequence : la numerotation encode l'ordre, elle
   ne decore pas. */
.etapes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--trait);
  border: 1px solid var(--trait);
  counter-reset: etape;
}

.etapes > div {
  background: var(--encre-haute);
  padding: calc(var(--pas) * 7);
}

.etapes h3 {
  counter-increment: etape;
  margin: 0 0 calc(var(--pas) * 3);
  font-size: var(--t-md);
  font-weight: 600;
  display: flex;
  gap: calc(var(--pas) * 3);
  align-items: baseline;
}

.etapes h3::before {
  content: counter(etape);
  font-variation-settings: "wdth" 118;
  font-weight: 700;
  font-size: 28px;
  color: var(--accent);
  line-height: 1;
}

.etapes p { margin: 0; color: var(--acier); font-size: var(--t-sm); line-height: 1.6; }

.conditions { margin-bottom: calc(var(--pas) * 4); }
.conditions dd { margin: 2px 0 0; }

.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--pas) * 7) calc(var(--pas) * 10); }
.faq h3 { margin: 0 0 calc(var(--pas) * 2); font-size: var(--t-md); font-weight: 600; }
.faq p { margin: 0; color: var(--acier); line-height: 1.6; }

.cta-bande {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--pas) * 6);
  flex-wrap: wrap;
  margin: calc(var(--pas) * 14) 0 calc(var(--pas) * 16);
  padding: calc(var(--pas) * 9);
  background: var(--encre-haute);
  border: 1px solid var(--trait);
}

.cta-bande h2 { margin: 0 0 calc(var(--pas) * 1.5); font-size: 24px; }
.cta-bande p { margin: 0; color: var(--acier); font-size: var(--t-sm); }

@media (max-width: 860px) {
  .etapes, .faq { grid-template-columns: 1fr; }
  .cta-bande { flex-direction: column; align-items: stretch; }
}

/* ------------------------------------------------ tri par maison */
/* Dans Chaussures, un revendeur cherche « les Dior », pas « des sneakers ». */
.subnav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--pas) * 2);
  padding-bottom: calc(var(--pas) * 5);
}

.subnav-lab {
  color: var(--acier);
  font-size: var(--t-xs);
  margin-right: calc(var(--pas) * 2);
}

.subnav .chip { padding: 6px 12px; font-size: var(--t-xs); }
.subnav .chip .n { color: var(--acier); margin-left: 5px; }
.subnav .chip:hover .n { color: var(--papier); }

/* Machine à écrire (page Revendeurs : étapes et conditions), repris du ChinaBook.
   Sans JS ou en mouvement réduit, tout reste affiché normalement. */
.tw-ready > * { opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .45s ease; }
.tw-ready > .tw-in { opacity: 1; transform: none; }
.tw-c { opacity: 0; position: relative; }
.tw-c.tw-on { opacity: 1; }
.tw-c.tw-caret::after { content: ''; position: absolute; right: -3px; top: .12em; bottom: .08em; width: 2px; border-radius: 1px; background: var(--accent); animation: tw-blink .75s steps(1) infinite; }
@keyframes tw-blink { 50% { opacity: 0; } }
/* Les étapes forment un seul bloc : les cartes restent en place, seul le texte s'écrit. */
.etapes.tw-ready > * { opacity: 1; transform: none; }