/* Archivo, variable, servi depuis ce domaine.

   Une seule famille, lue sur son axe de LARGEUR : le logotype livre est une
   grotesque large, on reprend cette largeur pour les titres (wdth 118) et la
   largeur normale pour le texte. La page decoule de la marque au lieu de lui
   tenir tete. Accessoirement, un axe de largeur encaisse « Ensemble 3 Pieces
   Sport Femme ALO – Legging Taille Haute » sans quatre retours a la ligne.

   Rapatriee plutot que servie par Google Fonts : un @import bloque le rendu,
   et une requete chez Google transmet l'IP du visiteur — sujet sensible pour
   un site francais. Ici le site ne depend d'aucun tiers et la page
   confidentialite n'a rien a declarer.

   La pile de repli est reelle : si le woff2 ne charge pas, la page reste
   composee, pas nue. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("/assets/fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("/assets/fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --sans: "Archivo", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
}

/* 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);
}

/* Un titre que seules les aides techniques lisent : les grilles de produits
   enchainaient le h1 de la page et les h3 des vignettes, en sautant un rang. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

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

/* Le rouge de marque sur le papier du theme donne 4,46:1 : sous le seuil pour
   du 11px. L'encart garde son rouge, d'un cran plus fonce, et passe au blanc. */
mark.todo {
  background: #B82C22;
  color: #fff;
  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;
  /* Le catalogue pose 458 vignettes d'un coup : calculer le style et la mise
     en page de celles qu'on ne voit pas coute des centaines de millisecondes
     de blocage au chargement. Le navigateur les saute tant qu'elles sont hors
     champ et retient leur taille reelle apres le premier affichage. Le filtre
     continue de fonctionner : ce n'est pas un display:none. */
  content-visibility: auto;
  contain-intrinsic-size: auto 300px;
}

.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: #5A5F68; 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: #5A5F68;
}

.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: #656A73;
  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 h2 {
  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); }
/* Le compte etait l'acier a 60 % d'opacite, soit 2,86:1 sur l'encre.
   La hierarchie tient par la couleur, pas par la transparence. */
.filter-list .n { margin-left: auto; font-size: var(--t-xs); color: var(--acier); }

.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 h2 { 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; }

:root{--encre:#111113;--papier:#EFECE8;--accent:#c8352b;--acier:#8A8F98;--r:2px}
.products{grid-template-columns:repeat(auto-fill,minmax(336px,1fr))}
/* CHINA FACTORY — enhance.css
   Charger après site.css ET le bloc de réglages <style> existant.
   Aucun changement de police, de contenu ou de logique JavaScript. */

:root {
  --r: 8px;
  --r-tuile: 0;
  --cf-rayon: 8px;
  --cf-rayon-surface: 12px;
  --cf-wa: #25D366;
  --cf-court: 160ms;
  --cf-tiroir: 240ms;
  --cf-courbe: cubic-bezier(.22, .68, .26, 1);
  --cf-filtre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EFECE8' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 17h16'/%3E%3Ccircle cx='9' cy='7' r='2' fill='%23111113'/%3E%3Ccircle cx='15' cy='17' r='2' fill='%23111113'/%3E%3C/svg%3E");
  --cf-regle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8F98' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='10' rx='2'/%3E%3Cpath d='M7 7v4m5-4v6m5-6v4'/%3E%3C/svg%3E");
  --cf-livraison: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8F98' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 16V5h11v11M14 9h4l3 4v3h-2M5 16h10'/%3E%3Ccircle cx='7' cy='17' r='2'/%3E%3Ccircle cx='17' cy='17' r='2'/%3E%3C/svg%3E");
  --cf-whatsapp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111113' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11.5a8 8 0 0 1-12 7L3 20l1.5-5A8 8 0 1 1 20 11.5Z'/%3E%3Cpath d='M8 7.5c-.5 3.8 2.7 7 6.5 7.5l1-2-2-1-1 1c-1.2-.5-2.1-1.4-2.6-2.6l1-1-1-2Z'/%3E%3C/svg%3E");
}

/* Les commandes s'adoucissent ; leurs dimensions restent prévisibles. */
.btn.btn, .chip.chip, .opt.opt, .qty.qty, .wa-line.wa-line {
  border-radius: var(--cf-rayon);
  transition: background-color var(--cf-court) ease,
    border-color var(--cf-court) ease, color var(--cf-court) ease,
    box-shadow var(--cf-court) ease;
}
.btn.btn, .wa-line.wa-line { min-height: 46px; }
.icon-btn.icon-btn {
  border-radius: var(--cf-rayon);
  min-width: 44px;
  min-height: 44px;
}
.icon-btn.icon-btn, .nav a, .footer-grid a, .sec-lien a,
.mobile-nav > a, .filter-list label, .size-grid label {
  transition: color var(--cf-court) ease,
    background-color var(--cf-court) ease,
    border-color var(--cf-court) ease;
}
.size-grid label { border-radius: 6px; min-height: 40px; }
.filter-list input, .size-grid input { accent-color: var(--accent); }
.size-grid label:has(input:checked) {
  border-color: var(--papier);
  background: var(--encre-haute);
  color: var(--papier);
}
.opt.opt.is-on { box-shadow: inset 0 0 0 1px var(--papier); }
.btn.btn:disabled { box-shadow: none; }
.qty.qty { background: var(--encre-haute); }
.qty button {
  border-radius: 6px;
  transition: background-color var(--cf-court) ease;
}
.qty:focus-within { border-color: var(--papier); }

/* La planche reste jointive : aucune carte arrondie ni carte qui se soulève.
   Seul le contour extérieur de la feuille reçoit un léger rayon. */
.products.products, .tuiles.tuiles {
  gap: 1px;
  border-radius: var(--cf-rayon-surface);
  overflow: hidden;
}
.card.card, .card-media.card-media, .tuile.tuile { border-radius: 0; }
.card.card { min-width: 0; }
.card > a:focus-visible, .tuile:focus-visible { outline-offset: -3px; }
.card-media { overflow: hidden; }
.card-media img, .tuile img {
  transition: transform 260ms var(--cf-courbe);
}
.card-body { transition: background-color var(--cf-court) ease; }
.card-run span { border-radius: 3px; }
.tuile-bas { transition: background-color var(--cf-court) ease; }
.tuile-l {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.tuile-l::after {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: .55;
}

/* La galerie, indépendante de la planche, peut arrondir chaque vignette :
   un vrai espace sépare les miniatures et garde la sélection bien lisible. */
.gallery-main.gallery-main {
  border-radius: var(--cf-rayon-surface);
  overflow: hidden;
}
.thumbs.thumbs { gap: 8px; margin-top: 10px; background: none; }
.thumb.thumb {
  border-radius: var(--cf-rayon);
  overflow: hidden;
  transition: box-shadow var(--cf-court) ease;
}
.thumb.thumb.is-active {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.cart-items img { border-radius: 6px; }
.p-meta dd { margin: 3px 0 0; overflow-wrap: anywhere; }
.p-meta > div { min-width: 0; padding-right: 12px; }
.p-desc { overflow-wrap: anywhere; }

/* Deux dégradés utiles, aucun sur les cartes.
   1. Le voile existant du hero relie la photo au fond et protège le texte.
   L'image de fond et sa version mobile restent celles du thème. */
.hero.hero::before {
  background: linear-gradient(100deg, var(--encre) 0%,
    rgba(17,17,19,.96) 24%, rgba(17,17,19,.6) 44%,
    rgba(17,17,19,0) 72%);
}
/* 2. Deux tons d'encre donnent de la profondeur au seul appel revendeur. */
.cta-bande.cta-bande {
  border-radius: var(--cf-rayon-surface);
  background: linear-gradient(125deg, var(--encre-haute), var(--encre));
}
.etapes.etapes {
  border-radius: var(--cf-rayon-surface);
  overflow: hidden;
}
.hero-text { color: #C8C4BC; }

/* Icônes décoratives locales : le libellé reste le nom accessible.
   Les icônes WhatsApp déjà présentes dans le HTML ne sont pas dupliquées. */
.toolbar button.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.toolbar button.chip::before,
.opt-head h2::before, .bandeau-grid > div:last-child > span::before,
#wa-order::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  background: center / contain no-repeat;
}
.toolbar button.chip::before { background-image: var(--cf-filtre); }
.opt-head h2 { display: flex; align-items: center; gap: 8px; }
.opt-head h2::before { background-image: var(--cf-regle); }
.bandeau-grid > div:last-child > span {
  display: flex;
  align-items: center;
  gap: 7px;
}
.bandeau-grid > div:last-child > span::before {
  background-image: var(--cf-livraison);
}
#wa-order::before { background-image: var(--cf-whatsapp); }

/* WhatsApp : même vert officiel aux trois endroits, texte encre contrasté.
   Aucun dégradé ou halo vert : ce repère suffit à identifier l'action. */
.wa-line.wa-line, #wa-order {
  background: var(--cf-wa);
  border: 1px solid var(--cf-wa);
  border-radius: var(--cf-rayon);
  color: var(--encre);
  font-weight: 600;
  transition: box-shadow var(--cf-court) ease,
    border-color var(--cf-court) ease;
}
.wa-line svg, .fab-opt svg, .fab-ico svg { flex-shrink: 0; }
.fab-main:focus-visible, .fab-opt:focus-visible,
.wa-line:focus-visible, #wa-order:focus-visible {
  outline: 2px solid var(--papier);
  outline-offset: 3px;
}

/* Ouverture : on conserve les transforms et is-on du thème.
   visibility empêche de tabuler dans un panneau fermé ; son délai permet
   de finir le mouvement de fermeture avant de masquer le panneau. */
.cart.cart, .mobile-nav.mobile-nav {
  visibility: hidden;
  pointer-events: none;
  transition: transform var(--cf-tiroir) var(--cf-courbe),
    visibility 0s var(--cf-tiroir);
}
.cart.cart.is-on, .mobile-nav.mobile-nav.is-on {
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.cart.cart { max-width: 100%; border-radius: 12px 0 0 12px; }
.cart.cart.is-on { box-shadow: -12px 0 40px rgba(0,0,0,.28); }
.drawer-backdrop.drawer-backdrop {
  transition: opacity var(--cf-tiroir) ease;
}
.cart-items.cart-items { min-height: 0; overscroll-behavior-y: contain; }
.cart-head.cart-head, .cart-foot.cart-foot { flex-shrink: 0; }
.cart-foot.cart-foot {
  padding-bottom: max(20px, env(safe-area-inset-bottom));
}
.mobile-nav.mobile-nav { overscroll-behavior-y: contain; }
.mobile-nav > a {
  border-radius: 6px;
  padding-left: 10px;
  padding-right: 10px;
}

/* Apparition limitée aux premières zones : pas 458 animations produit.
   Aucune dépendance au scroll ou à un script de révélation. */
@keyframes cf-apparition {
  from { opacity: .3; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.hero-copy, .cat-head, .gallery-main {
  animation: cf-apparition 380ms var(--cf-courbe) both;
}

/* Survol réservé aux appareils disposant d'un vrai pointeur.
   Le zoom reste dans l'image : la grille et les textes ne bougent pas. */
@media (hover: hover) and (pointer: fine) {
  .card:hover .card-media img, .tuile:hover img {
    transform: scale(1.035);
  }
  .card:hover .card-body { background: var(--papier-doux); }
  .thumb.thumb:hover {
    box-shadow: inset 0 0 0 1px var(--encre);
  }
  .icon-btn.icon-btn:hover, .qty button:hover,
  .mobile-nav > a:hover { background: var(--encre-haute); }
  .btn.btn:not(:disabled):hover {
    background: var(--papier-doux);
    border-color: var(--papier-doux);
  }
  .btn.btn-ghost:hover {
    background: var(--encre-haute);
    border-color: var(--papier);
  }
  .wa-line.wa-line:hover, #wa-order:hover {
    background: var(--cf-wa);
    border-color: var(--cf-wa);
    color: var(--encre);
    box-shadow: 0 0 0 3px rgba(37,211,102,.18);
  }
}

/* Largeurs réelles : minmax(0,...) empêche les références longues de pousser
   les colonnes. La grille générale conserve la largeur produit réglée à 336px. */
.layout.layout { grid-template-columns: 216px minmax(0,1fr); }
.layout > *, .product > *, .footer-grid > *, .cta-bande > * {
  min-width: 0;
}
.products.products {
  grid-template-columns: repeat(auto-fill, minmax(min(100%,336px),1fr));
}
.products.products-4 {
  grid-template-columns: repeat(4,minmax(0,1fr));
}
.products.products-6 {
  grid-template-columns: repeat(6,minmax(0,1fr));
}
.toolbar.toolbar, .qty-row.qty-row, .opt-head.opt-head {
  flex-wrap: wrap;
}
.crumbs, .cat-head h1, .product h1, .footer-bottom, .cart-items {
  overflow-wrap: anywhere;
}
.wa-line.wa-line, #wa-order {
  white-space: normal;
  text-align: center;
}
.header-actions { flex-shrink: 0; }

@media (min-width: 861px) {
  .filters.filters {
    padding: 16px;
    border: 1px solid var(--trait);
    border-radius: var(--cf-rayon-surface);
  }
}
@media (max-width: 1080px) {
  .products.products-6 {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }
}
@media (max-width: 860px) {
  .layout.layout { grid-template-columns: minmax(0,1fr); }
  .products.products, .products.products-4, .products.products-6 {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .hero.hero::before {
    background: linear-gradient(to top, var(--encre) 6%,
      rgba(17,17,19,.88) 38%, rgba(17,17,19,.25) 76%);
  }
  .filters.filters {
    visibility: hidden;
    pointer-events: none;
    overscroll-behavior-y: contain;
    transition: transform var(--cf-tiroir) var(--cf-courbe),
      visibility 0s var(--cf-tiroir);
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }
  .filters.filters.is-on {
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }
  .fab {
    right: 16px;
    bottom: max(16px, env(safe-area-inset-bottom));
  }
}
@media (max-width: 520px) {
  .header-inner.header-inner { gap: 10px; }
  .brand.brand { gap: 7px; min-width: 0; }
  .logo-mot.logo-mot { font-size: 13px; }
  .header-actions.header-actions { gap: 4px; }
  .cart.cart { border-radius: 0; }
  .cta-bande.cta-bande { padding: 24px; }
  .wa-line.wa-line { padding: 13px 14px; }
}

/* Accessibilité : couper aussi les déplacements de survol et les délais
   de visibility. Les états ouverts/fermés restent ceux du JavaScript. */
@media (prefers-reduced-motion: reduce) {
  .hero-copy, .cat-head, .gallery-main { animation: none; }
  .btn, .chip, .opt, .qty, .qty button, .icon-btn, .nav a,
  .footer-grid a, .sec-lien a, .mobile-nav > a, .filter-list label,
  .size-grid label, .card-media img, .tuile img, .card-body,
  .tuile-bas, .thumb, .fab-opt, .fab-croix, .wa-line, #wa-order,
  .cart.cart, .mobile-nav.mobile-nav, .filters.filters,
  .drawer-backdrop.drawer-backdrop { transition: none; }
  .card:hover .card-media img, .tuile:hover img { transform: none; }
}

/* CHINA FACTORY — accueil, octobre 2026.
   Complément du thème actuel : photo responsive et ruban de réassurance. */

.hero.hero-street {
  isolation: isolate;
  min-height: clamp(520px, 66vh, 720px);
  background: var(--encre);
  overflow: hidden;
}
.hero-street .hero-visual {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hero-street .hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
}
.hero.hero-street::before {
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(17,17,19,.96) 0%,
    rgba(17,17,19,.85) 25%, rgba(17,17,19,.35) 48%,
    rgba(17,17,19,0) 68%);
}
.hero.hero-street .container { z-index: 2; }
.hero-street .hero-copy { max-width: 33rem; }
.hero-street .hero-kicker {
  color: var(--papier);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.hero-street .hero-kicker::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--accent);
}
.hero-street .hero-text { max-width: 28rem; color: #D3CEC7; }

/* Deux groupes strictement identiques rendent la boucle continue.
   Le doublon est aria-hidden : une seule lecture pour les aides techniques. */
.bandeau.bandeau-marquee {
  position: relative;
  background: var(--encre);
  border-top: 1px solid var(--trait);
  border-bottom: 1px solid var(--trait);
}
.bandeau-marquee .marquee-window {
  overflow: hidden;
  min-width: 0;
  margin-right: 64px;
  mask-image: linear-gradient(90deg, transparent, #000 28px,
    #000 calc(100% - 28px), transparent);
}
.bandeau-marquee .marquee-track {
  display: flex;
  width: max-content;
  animation: cf-ruban 32s linear infinite;
}
.bandeau-marquee .marquee-group {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex: 0 0 auto;
  gap: clamp(32px, 4vw, 64px);
  min-width: max(960px, calc(100vw - 64px));
  padding: 22px 24px;
  margin: 0;
  list-style: none;
}
.bandeau-marquee .marquee-group li {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  font-size: 13px;
  color: var(--acier);
}
.bandeau-marquee .marquee-group li::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: 0 0 5px;
  background: var(--accent);
  transform: rotate(45deg);
}
.bandeau-marquee .marquee-group strong {
  color: var(--papier);
  font-weight: 600;
}
.bandeau-marquee .marquee-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--trait);
  border-radius: 8px;
  background: var(--encre-haute);
  color: var(--papier);
  cursor: pointer;
}
.marquee-toggle svg { width: 16px; height: 16px; fill: currentColor; }
.marquee-toggle .marquee-play { display: none; }
.marquee-toggle[aria-pressed="true"] .marquee-pause { display: none; }
.marquee-toggle[aria-pressed="true"] .marquee-play { display: block; }
.bandeau-marquee.is-paused .marquee-track,
.bandeau-marquee:focus-within .marquee-track { animation-play-state: paused; }
@media (hover: hover) {
  .bandeau-marquee:hover .marquee-track { animation-play-state: paused; }
  .bandeau-marquee .marquee-toggle:hover { border-color: var(--papier); }
}
@keyframes cf-ruban { to { transform: translateX(-50%); } }

/* Mobile : photo dans la partie haute, visage dégagé, texte sur l'encre.
   Le ruban reste une seule ligne, plutôt que trois gros blocs empilés. */
@media (max-width: 860px) {
  .hero.hero-street { min-height: 0; }
  .hero-street .hero-visual {
    bottom: auto;
    height: clamp(390px, 62svh, 520px);
  }
  .hero-street .hero-visual img { object-position: center 20%; }
  .hero.hero-street::before {
    background: linear-gradient(to bottom, rgba(17,17,19,.04) 0%,
      rgba(17,17,19,.08) 28%, rgba(17,17,19,.76) 48%,
      var(--encre) 66%);
  }
  .hero-street .hero-copy {
    padding: clamp(330px, 52svh, 440px) 0 32px;
    max-width: 34rem;
  }
  .hero-street .hero-text { font-size: 17px; margin-bottom: 24px; }
  .bandeau-marquee .marquee-group { padding-top: 18px; padding-bottom: 18px; }
}

/* Réduction des mouvements : afficher tous les faits dans une grille fixe.
   Le bouton n'est plus nécessaire et le doublon disparaît. */
@media (prefers-reduced-motion: reduce) {
  .bandeau-marquee .marquee-window { margin-right: 0; mask-image: none; }
  .bandeau-marquee .marquee-track { width: auto; animation: none; }
  .bandeau-marquee .marquee-group {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    min-width: 0;
    gap: 18px;
  }
  .bandeau-marquee .marquee-group li { white-space: normal; flex-wrap: wrap; }
  .bandeau-marquee .marquee-group[aria-hidden="true"],
  .bandeau-marquee .marquee-toggle { display: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 600px) {
  .bandeau-marquee .marquee-group { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}