@import url('https://fonts.googleapis.com/css2?family=Anton&family=Barlow:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: #DEDEDE;
  color: #000;
  font-family: 'Barlow', sans-serif;
  -webkit-font-smoothing: antialiased;
  cursor: default;
}
a, button, .dropdown__toggle, .dropdown__item, [data-menu-toggle], .product-card, label { cursor: pointer; }
/* No `a:visited` rule on purpose: an author `a{color:#000}` already beats the
   browser's default purple-visited (author origin always wins over user-agent
   origin, regardless of specificity). Adding `:visited` here would instead
   raise this rule's OWN specificity above single-class overrides like
   .cta-dark/.cta-light/.site-footer a, silently reverting them to black on
   any link the browser considers visited — that was a real bug, not a screenshot artifact. */
a { color: #000; text-decoration: none; }
a:hover { color: #666; }
::selection { background: #000; color: #fff; }
img { max-width: 100%; display: block; }
/* h1/h2 were plain divs originally; converting them to real headings (for
   SEO/accessibility) pulled in the browser's default `font-weight: bold`,
   which visibly thickened the Anton display type and its outline-stroke
   text. Reset weight/margin so every heading looks exactly as it did
   as a div — the tag changes, the appearance doesn't. */
h1, h2, h3 { font-weight: normal; margin: 0; }

.page { width: 1440px; max-width: 100%; margin: 0 auto; background: #fff; color: #000; overflow: hidden; }
@media (max-width: 1500px) and (min-width: 901px) { body { overflow-x: auto; } }
body { overflow-x: hidden; }
.cta-dark { color: #000; transition: background .18s, color .18s; }
.cta-dark:hover { background: #000; color: #fff; }
.cta-light { color: #fff; transition: background .18s, color .18s; }
.cta-light:hover { background: #fff; color: #000; }
.btn-cart { background: #000; color: #fff; border: none; cursor: pointer; }
.btn-cart:hover { background: #222; }
.opt:not([disabled]):hover { border-color: #000; background: #F4F4F4; }
.opt.is-active:hover { background: #000; }

.mono { font-family: 'IBM Plex Mono', monospace; }
.anton { font-family: 'Anton', sans-serif; }

/* ---------- back link ---------- */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #666;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: color .15s;
}
.back-link:hover { color: #000; }
.back-link svg { width: 14px; height: 14px; flex: none; }

/* ---------- header ---------- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 32px;
  border-bottom: 1px solid #E6E6E6;
  position: relative;
  z-index: 101;
  background: #fff;
}
.site-header__logo img { height: 48px; }
.site-header__nav {
  display: flex;
  gap: 32px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.nav-close { display: none; }
/* le panier n'apparait que dans le menu mobile : sur ordinateur il est deja
   presente comme bouton dans l'en-tete, l'afficher deux fois ferait doublon */
.nav-cart { display: none; }
.site-header__cart {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  border: 1px solid #000;
  padding: 12px 20px;
  transition: background .15s, color .15s;
}
.site-header__cart:hover { background: #000; color: #fff; }

.site-header__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  align-items: center;
}
.site-header__burger span { display: block; width: 24px; height: 2px; background: #000; border-radius: 1px; transition: transform .25s ease, opacity .2s ease, width .2s ease; }
.site-header__burger span:nth-child(2) { width: 17px; align-self: flex-end; margin-right: 2px; }
.site-header__burger:hover span { width: 24px; }
.site-header__nav.is-open .site-header__burger span:nth-child(1),
.site-header__burger.is-active span:nth-child(1) { transform: translateY(8px) rotate(45deg); width: 24px; }
.site-header__burger.is-active span:nth-child(2) { opacity: 0; }
.site-header__burger.is-active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); width: 24px; }
.btn {
  border: 1px solid #000;
  padding: 12px 22px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #000;
  display: inline-block;
  transition: background 0.15s, color 0.15s;
}
.btn:hover { background: #000; color: #fff; }
.btn--invert { border-color: #fff; color: #fff; }
.btn--invert:hover { background: #fff; color: #000; }
.btn:disabled { opacity: 0.5; cursor: default; }
button.btn { font-family: 'IBM Plex Mono', monospace; background: none; cursor: pointer; }

/* ---------- swatches / size picker ---------- */
.swatch {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  border: 1px solid #000;
  padding: 10px 12px;
  background: none;
  cursor: pointer;
}
.swatch.is-active { background: #000; color: #fff; border-width: 1.5px; }

.size-opt {
  flex: 1;
  border: 1px solid #000;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  background: none;
  cursor: pointer;
  font-family: 'Barlow', sans-serif;
}
.size-opt.is-active { background: #000; color: #fff; border-width: 1.5px; font-weight: 500; }
.size-opt.is-off { border-color: #E4E4E4; color: #C4C4C4; text-decoration: line-through; cursor: not-allowed; }

.add-to-cart {
  background: #000;
  color: #fff;
  height: 60px;
  border: none;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: 'Barlow', sans-serif;
}
.add-to-cart:disabled { background: #333; cursor: default; }

/* ---------- placeholder image system ---------- */
.ph {
  position: relative;
  background: #fff;
  overflow: hidden;
}
.ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.ph--contain img { object-fit: contain; }
.product-card:hover .ph img { transform: scale(1.06); }
.ph__label {
  position: absolute;
  inset: 8px;
  display: none;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: #999;
  border: 1px dashed #ccc;
  line-height: 1.6;
}
.ph--empty img { display: none; }
.ph--empty .ph__label { display: flex; }
.ph--dark .ph__label { color: #ccc; border-color: #444; }

/* ---------- footer ---------- */
.site-footer {
  background: #000;
  color: #fff;
  padding: 64px 32px 32px;
}
.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
  gap: 40px;
}
.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #BBB;
}
.site-footer__col-title { color: #fff; font-weight: 600; }
.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 56px;
  padding-top: 20px;
  border-top: 1px solid #222;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: #666;
}
.site-footer__bottom a { color: #666; margin-left: 20px; }

/* footer nav links: must be more specific than the global `a` rule above,
   otherwise they inherit color:#000 and vanish on the black background.
   No `:visited` variants here either, see note above. */
.site-footer a { color: #fff; }
.site-footer a:hover { color: #999; }
.site-footer__bottom a { color: #666; }
.site-footer__bottom a:hover { color: #999; }
.site-footer__logo { display: inline-block; }

/* ---------- product gallery ---------- */
.gallery { display: flex; flex-direction: column; gap: 3px; }
.gallery__main { height: 560px; }
.gallery__thumbs { display: flex; flex-wrap: wrap; gap: 3px; }
/* fixed width rather than flex:1 — the on-model shots are portrait, and a
   stretched thumb would shrink them to a stamp floating in a wide box */
.gallery__thumb {
  flex: 0 0 auto;
  width: 104px;
  height: 132px;
  padding: 0;
  border: 1px solid #E4E4E4;
  background: #fff;
  cursor: pointer;
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.gallery__thumb.is-active { border-color: #000; }

/* prev/next arrows over the main image. The .ph parent is position:relative,
   so these anchor to the photo itself rather than the page. */
.gallery__main { position: relative; }
.gallery__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #E0E0E0;
  background: rgba(255,255,255,0.92);
  color: #000;
  cursor: pointer;
  padding: 0;
  transition: background .15s, color .15s, border-color .15s, opacity .15s;
}
.gallery__arrow:hover { background: #000; color: #fff; border-color: #000; }
.gallery__arrow svg { width: 20px; height: 20px; }
.gallery__arrow--prev { left: 16px; }
.gallery__arrow--next { right: 16px; }
/* a single-photo product has nothing to page through */
.gallery__arrow[hidden] { display: none; }
.gallery__counter {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 3;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: #000;
  background: rgba(255,255,255,0.92);
  border: 1px solid #E0E0E0;
  padding: 5px 10px;
}

/* ---------- cart / checkout ---------- */
.cart-line {
  display: grid;
  grid-template-columns: 120px minmax(0,1fr) auto auto;
  gap: 24px;
  align-items: center;
  padding: 24px 0;
  border-bottom: 1px solid #EDEDED;
}
.cart-line__thumb { width: 120px; height: 120px; background: #fff; border: 1px solid #EDEDED; }
.cart-line__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cart-line__remove {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: #999;
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}
.cart-line__remove:hover { color: #000; }
.cart-summary {
  border: 1px solid #000;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cart-summary__row { display: flex; justify-content: space-between; font-size: 14px; }
.cart-summary__row--total { font-size: 18px; font-weight: 500; border-top: 1px solid #000; padding-top: 16px; }

.form-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.form-field label { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.12em; color: #666; text-transform: uppercase; }
.form-field input, .form-field select, .form-field textarea {
  font-family: 'Barlow', sans-serif;
  font-size: 15px;
  padding: 14px;
  border: 1px solid #000;
  background: #fff;
  color: #000;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: 2px solid #000; outline-offset: 2px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-note { font-size: 12px; color: #999; margin-top: -8px; margin-bottom: 20px; }

/* ---------- product card (image zoom on hover, background fixed to white) ---------- */
.product-card { display: block; }
.product-card .ph { background: #fff; }

/* ---------- collection filter/sort dropdowns ---------- */
.dropdown { position: relative; }
.dropdown__toggle {
  border: 1px solid #CCC;
  background: #fff;
  font: inherit;
  letter-spacing: inherit;
  color: #333;
  cursor: pointer;
  padding: 10px 16px;
  border-radius: 100px;
  transition: border-color .15s, color .15s;
  white-space: nowrap;
}
.dropdown__toggle:hover { border-color: #000; color: #000; }
.dropdown.is-open .dropdown__toggle, .dropdown__toggle.is-set { border-color: #000; color: #000; background: #F4F4F4; }
.dropdown__menu {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  background: #fff;
  border: 1px solid #000;
  min-width: 180px;
  z-index: 20;
  padding: 8px 0;
}
.dropdown.is-open .dropdown__menu { display: block; }
.dropdown__item {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  padding: 10px 16px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: #333;
  cursor: pointer;
}
.dropdown__item:hover { background: #F4F4F4; color: #000; }
.dropdown__item.is-selected { color: #000; font-weight: 500; }
.dropdown__item.is-selected::before { content: "✓ "; }

/* ---------- generic layout helpers ---------- */
.section { padding: 0 32px; }
.hero-title {
  font-family: 'Anton', sans-serif;
  font-size: clamp(48px, 10vw, 120px);
  line-height: 0.95;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: #888;
}

/* ---------- blog / articles ---------- */
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 56px 40px; }
.blog-card { display: block; }
.blog-card .ph { height: 300px; background: #F4F4F4; }
.blog-card__tag {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: #999;
  text-transform: uppercase;
  margin-top: 18px;
}
.blog-card__title {
  font-family: 'Anton', sans-serif;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-top: 10px;
}
.blog-card:hover .blog-card__title { color: #666; }
.blog-card__excerpt { font-size: 14px; font-weight: 300; line-height: 1.7; color: #666; margin-top: 10px; }

/* article body: a single readable column, generous line-height. The measure
   is capped in ch so the line length stays comfortable at any font size. */
.article { max-width: 68ch; }
.article p { font-size: 16px; font-weight: 300; line-height: 1.85; color: #222; margin: 0 0 22px; }
.article h2 {
  font-family: 'Anton', sans-serif;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 52px 0 18px;
}
.article h3 { font-size: 17px; font-weight: 600; letter-spacing: 0.02em; margin: 32px 0 10px; }
.article ul, .article ol { margin: 0 0 22px; padding-left: 22px; }
.article li { font-size: 16px; font-weight: 300; line-height: 1.85; color: #222; margin-bottom: 10px; }
.article strong { font-weight: 600; }
.article a { text-decoration: underline; text-underline-offset: 3px; }
.article__lead { font-size: 19px !important; line-height: 1.6 !important; color: #000 !important; }
.article__note {
  border-left: 2px solid #000;
  padding: 4px 0 4px 22px;
  margin: 0 0 26px;
}
.article__note p { margin: 0; font-size: 16px; color: #000; }
.article figure { margin: 36px 0; }
/* portrait shots would otherwise run ~900px tall in a 68ch column and push
   the whole article down; cap the height and crop rather than shrink */
.article figure img { width: 100%; display: block; max-height: 520px; object-fit: cover; }
.article figcaption {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: #999;
  margin-top: 10px;
}
.article-meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: #888;
  text-transform: uppercase;
}
/* in-article product callout: the commercial payoff of an editorial page */
.article-cta {
  border: 1px solid #000;
  padding: 28px;
  margin: 44px 0;
  display: grid;
  grid-template-columns: 120px minmax(0,1fr);
  gap: 24px;
  align-items: center;
}
.article-cta img { width: 120px; height: 120px; object-fit: contain; display: block; background: #fff; }
.article-cta__title { font-family: 'Anton', sans-serif; font-size: 20px; letter-spacing: 0.04em; text-transform: uppercase; }
.article-cta__text { font-size: 14px; font-weight: 300; line-height: 1.7; color: #555; margin-top: 8px; }

/* ---------- article rhythm blocks ----------
   An article made only of <p> + <figure> reads flat. These break the column
   at regular intervals so the eye has somewhere to rest. They deliberately
   escape the 68ch measure to change the page's texture. */

/* image pair, side by side, wider than the text column */
.article-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  margin: 44px 0;
  width: min(880px, 92vw);
}
.article-duo img { width: 100%; height: 300px; object-fit: cover; display: block; }
.article-duo figcaption { grid-column: 1 / -1; }

/* full-bleed band: image edge to edge of the article area */
.article-wide { width: min(1000px, 94vw); margin: 48px 0; }
.article-wide img { width: 100%; height: 420px; object-fit: cover; display: block; }

/* pull quote to break a long run of paragraphs */
.article-quote {
  font-family: 'Anton', sans-serif;
  font-size: 27px;
  line-height: 1.25;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 48px 0;
  padding: 28px 0;
  border-top: 2px solid #000;
  border-bottom: 2px solid #000;
}

/* numbered key figures, three across */
.article-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 24px;
  margin: 44px 0;
  width: min(880px, 92vw);
}
.article-stats__n { font-family: 'Anton', sans-serif; font-size: 40px; letter-spacing: 0.03em; line-height: 1; }
.article-stats__l {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #888;
  margin-top: 10px;
  line-height: 1.5;
}

/* link out to a demonstration video */
.article-video {
  display: flex;
  align-items: center;
  gap: 18px;
  border: 1px solid #000;
  padding: 18px 22px;
  margin: 26px 0;
  transition: background .15s, color .15s;
}
.article-video:hover { background: #000; color: #fff; }
.article-video:hover .article-video__src { color: #bbb; }
.article-video__play { flex: none; width: 34px; height: 34px; }
/* both are spans inside an <a>, so they inherit inline display and would run
   together on one line without this */
.article-video__t { display: block; font-size: 15px; font-weight: 500; line-height: 1.4; }
.article-video__src {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: #888;
  margin-top: 5px;
}
.article-video, .article-video:hover { text-decoration: none; }
.article-credit { display: block; }
/* the credit line a CC licence requires */
.article-credit {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: #AAA;
  margin-top: 6px;
}
.article-credit a { color: #AAA; text-decoration: underline; }

/* ==================================================================
   RESPONSIVE — the design was built fixed-width (1440px) with the
   product/grid layouts written as inline `style="display:grid;..."`.
   Inline styles can't be reached by a media query, so every container
   that must reflow on a phone was given one of the classes below
   instead of (or alongside) its inline grid-template-columns. Nothing
   above this point changes on desktop.
   ================================================================== */

.grid-2 { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); }
/* ---------- composition de l'accueil ----------
   La video produit est verticale (9:16). Plutot que de l'etirer ou de la
   rogner pour tenir dans une case large, elle occupe une colonne dont la
   LARGEUR est deduite de la hauteur du bloc via aspect-ratio : elle garde
   donc ses proportions exactes. Les photos remplissent l'espace restant de
   part et d'autre, et l'ensemble reste un grand bloc plein. */
.hero-wrap { padding: 18px 24px 0; }
/* La video horizontale occupe une case au ratio 16:9 exact : sa largeur se
   deduit de la hauteur du bloc, elle est donc montree en entier, sans recadrage
   ni etirement. Les deux photos empilees prennent la largeur restante. */
.hero-grid {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 3px;
  background: #fff;
  height: 560px;
}
.hero-stack { display: grid; grid-template-rows: 1fr 1fr; gap: 3px; min-height: 0; }
.hero-ph { position: relative; overflow: hidden; min-height: 0; }
.hero-ph img { width: 100%; height: 100%; object-fit: cover; display: block; filter: contrast(1.04); }

/* la video porte desormais le logo et le bouton : il lui faut un contexte de
   positionnement. Son ratio fixe le calcul de largeur a partir de la hauteur. */
.hero-video { position: relative; height: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.hero-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* voile sombre en bas : sans lui, un bouton blanc pose sur une image qui bouge
   devient illisible des qu'un plan clair passe */
.hero-video::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 45%;
  background: linear-gradient(to top, rgba(0,0,0,0.62), rgba(0,0,0,0));
  pointer-events: none;
}
.hero-kabuto {
  position: absolute;
  right: 24px;
  top: 24px;
  z-index: 2;
  height: 74px;
  width: auto;
  pointer-events: none;
}

/* CTA pose sur la grande photo de l'accueil. Meme traitement que .cta-light :
   contour blanc sur l'image, inversion en blanc plein au survol. Le survol est
   declenche par le lien parent, pour que toute la photo reponde d'un bloc. */
.hero-cta {
  position: absolute;
  left: 36px;
  bottom: 36px;
  z-index: 2;
  display: inline-block;
  border: 1px solid #fff;
  color: #fff;
  padding: 18px 44px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: background .18s, color .18s;
  pointer-events: none;
}
.hero-grid:hover .hero-cta { background: #fff; color: #000; }

@media (max-width: 900px) {
  /* header: collapse the inline nav behind a burger. Sticky + z-index above
     the fixed nav overlay so the burger (which turns into an X) stays
     visible and tappable as a close button, even if the page was scrolled
     before opening the menu. */
  .site-header { padding: 16px 20px; position: sticky; top: 0; }
  .site-header__logo img { height: 34px; }
  .site-header__burger { display: flex; }
  .site-header__nav {
    display: none;
    position: fixed;
    inset: 0;
    background: #fff;
    z-index: 100;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    padding: 90px 28px 28px;
  }
  .site-header__nav.is-open { display: flex; }
  .site-header__nav a { width: 100%; padding: 18px 0; border-bottom: 1px solid #EDEDED; font-size: 16px; }
  .nav-close {
    display: flex;
    align-items: center;
    gap: 10px;
    position: absolute;
    top: 28px;
    left: 28px;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #000;
  }
  .nav-close svg { width: 16px; height: 16px; }
  /* dans le menu plein ecran, le panier devient une entree a part entiere.
     Il porte data-cart-count, son libelle affiche donc le nombre d'articles. */
  .nav-cart { display: block; }
  .site-header__cart { font-size: 10px; padding: 9px 14px; }
  .site-header > .cta-dark { display: none; }

  /* generic section padding: 48px everywhere on desktop is too wide on a phone */
  .section, main > div { padding-left: 14px !important; padding-right: 14px !important; }

  /* grids collapse: text/image pairs and the asymmetric hero go to a single
     column; product grids (3 or 4 up) go to 2-up, which still reads fine
     as a shop grid on a phone instead of one huge column of cards */
  .grid-2, .hero-grid { grid-template-columns: minmax(0,1fr) !important; }
  .grid-2 { gap: 32px !important; }

  /* footer keeps 3 columns on mobile (brand full-width on top, then
     Boutique / Maison / Suivre side by side) instead of one long stacked
     list — stays compact instead of turning the footer into a scroll.
     Desktop grid (4 columns) is untouched outside this media query. */
  .site-footer { padding: 40px 20px 24px !important; }
  .site-footer__grid { grid-template-columns: repeat(3, minmax(0,1fr)) !important; gap: 24px 14px !important; }
  .site-footer__grid > div:first-child { grid-column: 1 / -1; margin-bottom: 4px; }
  .site-footer__col { font-size: 10px !important; gap: 8px !important; }
  .grid-3, .grid-4 { grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; gap: 28px 16px !important; }
  .grid-3 .ph, .grid-4 .ph { height: 220px !important; }
  /* Équipement/Streetwear tiles on the homepage: fixed at 620px for the
     desktop 2-up layout, way too tall once stacked full-width on a phone —
     object-fit:contain then centers the photo in a huge empty box */
  .tile-photo { height: 340px !important; }
  .stack-mobile { padding-bottom: 40px !important; }
  /* stack the 2fr/1fr hero grid but keep every tile square, like the
     desktop composition, instead of squashing them into thin bands */
  /* sur telephone : la video en pleine largeur d'abord, c'est elle qui vend,
     puis les deux photos cote a cote en dessous. La video garde son format,
     seule sa hauteur est bornee (object-fit:cover recadre, ne deforme pas). */
  /* le bloc media part bord a bord : sur un telephone, chaque pixel de marge
     est pris sur la video, qui est l'element qui vend. Le titre garde un
     petit retrait, ce decalage volontaire entre texte inserre et media
     pleine largeur est un parti pris, pas un defaut d'alignement. */
  .hero-title-wrap { padding: 16px 12px 0 !important; }
  .hero-wrap { padding: 10px 0 0 !important; }
  .hero-grid {
    grid-template-columns: minmax(0,1fr) !important;
    height: auto !important;
    gap: 3px !important;
  }
  /* sur telephone c'est le fichier vertical qui est charge : on rend la case
     libre en hauteur et on la borne, object-fit:cover recadre sans deformer */
  .hero-video {
    aspect-ratio: auto !important;
    height: 62vh !important;
    max-height: 520px;
  }
  .hero-stack { grid-template-rows: none !important; grid-template-columns: 1fr 1fr !important; }
  /* la source est verticale : recadree dans une case plus large, le centre
     tombe sur le torse. On remonte le cadrage pour garder le visage. */
  .hero-video video { object-position: center 28%; }
  .hero-ph { height: 190px; }
  .hero-kabuto { height: 50px; right: 16px; top: 16px; }
  .hero-cta { left: 18px; bottom: 18px; padding: 13px 24px; font-size: 11px; letter-spacing: 0.14em; }

  /* oversized display type: the Anton headlines were sized for a
     1440px canvas (up to 150px), way too big for a 375–430px screen */
  .fs-hero { font-size: 15vw !important; }
  .fs-display { font-size: 12vw !important; }
  /* 2026-09-11 : le titre de la boutique porte maintenant une formulation
     complete au lieu d'un seul mot. A 12vw il occuperait trois lignes. */
  .fs-display--long { font-size: 8.5vw !important; line-height: 1.05 !important; }
  .fs-h1 { font-size: 34px !important; }
  .fs-h2 { font-size: 26px !important; }
  .fs-stat { font-size: 40px !important; }

  .tabs-scroll { overflow-x: auto; flex-wrap: nowrap !important; gap: 24px !important; padding-bottom: 4px; }
  .tabs-scroll a { white-space: nowrap; }
  .filter-controls { flex-wrap: wrap !important; row-gap: 14px !important; column-gap: 20px !important; }
  /* right:0 (desktop default) anchors the menu to the toggle's right edge —
     fine when the toggle sits near the right of a wide bar, but on a phone
     the TAILLE/COULEUR toggles sit near the left edge, so a right-anchored
     menu wider than the toggle gets pushed off-screen to the left. Anchor
     left instead: it only ever grows further into the viewport. */
  .dropdown__menu { left: 0; right: auto; max-width: calc(100vw - 40px); }

  .photo-grid { grid-template-columns: minmax(0,1fr) !important; }
  .form-row { grid-template-columns: minmax(0,1fr) !important; gap: 0 !important; }
  .hero-media { height: 460px !important; }
  .hero-media > div { left: 20px !important; bottom: 28px !important; right: 20px; }

  /* size guide table: a fixed min-width table forces a horizontal scroll
     that's invisible on most phones (no persistent scrollbar), so the
     table reads as cut off in half. Reflow it into stacked label/value
     cards instead — no scrolling needed. */
  .size-table { min-width: 0 !important; }
  .size-table thead { display: none; }
  .size-table, .size-table tbody, .size-table tr, .size-table td { display: block; width: 100% !important; }
  .size-table tr { border: 1px solid #EDEDED; margin-bottom: 16px; padding: 4px 16px; }
  .size-table td { display: flex !important; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0 !important; border-bottom: 1px solid #F4F4F4 !important; }
  .size-table td:last-child { border-bottom: none !important; }
  .size-table td::before { content: attr(data-label); font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.08em; color: #999; text-transform: uppercase; flex: none; }
  .size-table td:first-child { font-size: 17px; }
  .size-table td:first-child::before { content: ''; }

  .article-duo, .article-wide, .article-stats { width: 100% !important; }
  .article-duo img { height: 200px; }
  .article-wide img { height: 260px; }
  .article-quote { font-size: 21px; margin: 36px 0; padding: 22px 0; }
  .article-stats { grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; gap: 20px !important; }
  .article-stats__n { font-size: 32px; }
  .article-video { flex-direction: column; align-items: flex-start; gap: 12px; }

  .blog-grid { grid-template-columns: minmax(0,1fr) !important; gap: 40px !important; }
  .blog-card .ph { height: 240px; }
  .article h2 { font-size: 24px; margin-top: 40px; }
  .article__lead { font-size: 17px !important; }
  .article-cta { grid-template-columns: minmax(0,1fr) !important; text-align: left; padding: 22px; }
  .gallery__arrow { width: 40px; height: 40px; }
  .gallery__arrow--prev { left: 8px; }
  .gallery__arrow--next { right: 8px; }

  .product-detail { padding: 24px 20px !important; }
  .gallery__main { height: 380px !important; }
  .site-footer__bottom { flex-direction: column; gap: 16px; text-align: center; }
  .site-footer__bottom > img, .site-footer__bottom > a { order: -1; }
  .stack-mobile { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; }
  /* le bloc porte un max-width de 420px en style en ligne, plus large que
     l'ecran d'un telephone : le texte debordait a droite. */
  .stack-mobile > div { max-width: 100% !important; }
}

/* ==================================================================
   WOOCOMMERCE
   Le site statique n'avait pas de moteur de boutique : ces regles
   habillent les elements que WooCommerce genere lui-meme (grille,
   pagination, messages, formulaires) au design Senshu.
   ================================================================== */

/* grille de la boutique : WooCommerce sort un <ul>, on le passe en grille */
ul.products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 88px 44px;
  list-style: none;
  margin: 0;
  padding: 0;
}
ul.products li.product { margin: 0; padding: 0; list-style: none; }
ul.products li.product::before { content: none; }

/* pagination */
.woocommerce-pagination ul { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
.woocommerce-pagination a, .woocommerce-pagination span {
  display: block;
  min-width: 42px;
  padding: 11px 14px;
  text-align: center;
  border: 1px solid #E0E0E0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  transition: background .15s, color .15s, border-color .15s;
}
.woocommerce-pagination a:hover { background: #000; color: #fff; border-color: #000; }
.woocommerce-pagination .current { background: #000; color: #fff; border-color: #000; }

/* messages WooCommerce (ajout au panier, erreurs, informations) */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  border-left: 2px solid #000;
  background: #F7F7F7;
  padding: 18px 22px;
  margin: 0 0 28px;
  font-size: 15px;
  font-weight: 300;
  list-style: none;
}
.woocommerce-error { border-left-color: #B00020; }
.woocommerce-message a, .woocommerce-info a { text-decoration: underline; text-underline-offset: 3px; }
/* Le bouton « Voir le panier » est place avant le texte par WooCommerce.
   Sans mise en page, il se superpose au message sur un ecran etroit. */
.woocommerce-message, .woocommerce-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.woocommerce-message > .button, .woocommerce-info > .button { order: 2; flex: 0 0 auto; }

/* boutons WooCommerce : meme traitement que .add-to-cart du site */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .wc-block-components-button {
  background: #000;
  color: #fff;
  border: 1px solid #000;
  border-radius: 0;
  padding: 16px 32px;
  font-family: 'Barlow', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover, .woocommerce #respond input#submit:hover {
  background: #fff;
  color: #000;
}
.woocommerce a.button.alt, .woocommerce button.button.alt { background: #000; color: #fff; }

/* champs de formulaire : commande, compte client */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="password"] {
  font-family: 'Barlow', sans-serif;
  font-size: 15px;
  padding: 14px;
  border: 1px solid #000;
  border-radius: 0;
  background: #fff;
  width: 100%;
}
.woocommerce form .form-row label,
.woocommerce-account label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: #666;
  text-transform: uppercase;
  display: block;
  margin-bottom: 8px;
}

/* tableaux du panier et des commandes */
.woocommerce table.shop_table {
  border: none;
  border-collapse: collapse;
  width: 100%;
}
.woocommerce table.shop_table th {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #888;
  text-align: left;
  padding: 16px 12px;
  border-bottom: 1px solid #000;
}
.woocommerce table.shop_table td {
  padding: 20px 12px;
  border-bottom: 1px solid #EDEDED;
  font-size: 15px;
}

/* navigation de l'espace client */
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid #EDEDED;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.woocommerce-MyAccount-navigation li.is-active a { color: #000; }
.woocommerce-MyAccount-navigation li:not(.is-active) a { color: #999; }

@media (max-width: 900px) {
  ul.products { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 32px 16px !important; }
  ul.products li.product .ph { height: 220px !important; }
  .woocommerce a.button, .woocommerce button.button { padding: 14px 22px; font-size: 12px; }
}

/* La hauteur de 560px vient du site statique, ou les photos etaient calibrees.
   Les visuels importes dans WordPress ont des proportions variables : on laisse
   la case s'adapter en gardant un rapport constant, ce qui aligne les cartes
   sans laisser de vide sous les images. */
ul.products li.product .ph {
  height: auto !important;
  aspect-ratio: 1 / 1;
}
ul.products li.product .ph img { object-fit: contain; }

/* Defilement : sous WordPress, overflow-y du body se calcule a hidden alors
   qu'il vaut auto sur le site statique, ce qui bloque la molette. On le force. */
body { overflow-y: auto !important; }

/* ---------- panier et commande ----------
   Les gabarits classiques de WooCommerce comptaient sur sa feuille de style,
   que nous avons retiree : sans ces regles la photo s'etire et le tableau
   reste comprime a gauche. */
.woocommerce-cart-form { width: 100%; }
.woocommerce table.shop_table { width: 100%; table-layout: auto; }
.woocommerce table.shop_table .product-thumbnail { width: 110px; }
.woocommerce table.shop_table .product-thumbnail img {
  width: 96px;
  height: 96px;
  object-fit: contain;
  display: block;
  background: #fff;
}
.woocommerce table.shop_table td.product-remove { width: 40px; text-align: center; }
.woocommerce table.shop_table td.product-remove a {
  font-size: 18px;
  line-height: 1;
  color: #999;
  text-decoration: none;
}
.woocommerce table.shop_table td.product-remove a:hover { color: #000; }
.woocommerce table.shop_table td.product-name a { font-weight: 500; text-decoration: none; }
.woocommerce table.shop_table td.product-quantity input.qty {
  width: 72px;
  padding: 10px;
  border: 1px solid #000;
  text-align: center;
  font-family: 'Barlow', sans-serif;
}
/* bloc des totaux : encadre, comme le recapitulatif du site */
.cart_totals {
  border: 1px solid #000;
  padding: 32px;
  max-width: 420px;
  margin-left: auto;
}
.cart_totals h2 {
  font-family: 'Anton', sans-serif;
  font-size: 22px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 20px;
}
.cart_totals table.shop_table th { border-bottom: none; padding: 12px 0; }
.cart_totals table.shop_table td { border-bottom: none; padding: 12px 0; text-align: right; }
.wc-proceed-to-checkout { margin-top: 20px; }
.wc-proceed-to-checkout a.button { display: block; text-align: center; width: 100%; }
.woocommerce .cart-collaterals { width: 100%; margin-top: 48px; }

/* tunnel de commande : deux colonnes, formulaire puis recapitulatif */
.woocommerce-checkout .col2-set { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review { max-width: 520px; }
.woocommerce-checkout h3 {
  font-family: 'Anton', sans-serif;
  font-size: 22px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 20px;
}

@media (max-width: 900px) {
  .cart_totals { max-width: none; margin-left: 0; padding: 22px; }
  .woocommerce-message, .woocommerce-info { flex-direction: column; align-items: flex-start; }
  .woocommerce-message > .button, .woocommerce-info > .button { width: 100%; text-align: center; }
  .woocommerce-checkout .col2-set { grid-template-columns: 1fr; gap: 24px; }
  .woocommerce table.shop_table .product-thumbnail { width: 76px; }
  .woocommerce table.shop_table .product-thumbnail img { width: 64px; height: 64px; }
}

/* Tunnel de commande : les champs WooCommerce doivent s'empiler (etiquette
   au-dessus du champ). Sans cela ils heritent de la grille deux colonnes de
   .form-row du formulaire de contact, ce qui separe l'etiquette de son champ. */
.woocommerce form .form-row {
  display: block;
  width: 100%;
  margin: 0 0 22px;
  padding: 0;
  float: none;
}
.woocommerce form .form-row label { display: block; margin-bottom: 8px; }
.woocommerce form .form-row .woocommerce-input-wrapper { display: block; width: 100%; }
.woocommerce form .form-row-first,
.woocommerce form .form-row-last { width: 100%; }
.woocommerce form .select2-container .select2-selection--single,
.woocommerce form .form-row select {
  height: auto;
  border: 1px solid #000;
  border-radius: 0;
  padding: 13px 14px;
}
.woocommerce form .required { color: #000; text-decoration: none; }

/* recapitulatif : il occupe toute la largeur sous le formulaire */
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review { max-width: none; }
.woocommerce-checkout #order_review_heading { margin-top: 56px; }
.woocommerce-checkout table.shop_table { width: 100%; }
.woocommerce-checkout table.shop_table td,
.woocommerce-checkout table.shop_table th { text-align: left; }
.woocommerce-checkout table.shop_table td.product-total,
.woocommerce-checkout table.shop_table th.product-total,
.woocommerce-checkout table.shop_table tfoot td { text-align: right; }

/* moyens de paiement */
.woocommerce-checkout #payment { background: #FAFAFA; padding: 28px; margin-top: 28px; }
.woocommerce-checkout #payment ul.payment_methods { list-style: none; margin: 0; padding: 0 0 20px; border-bottom: 1px solid #E5E5E5; }
.woocommerce-checkout #payment ul.payment_methods li { margin-bottom: 12px; }
.woocommerce-checkout #payment ul.payment_methods label {
  display: inline; font-family: 'Barlow', sans-serif; font-size: 15px;
  letter-spacing: 0; text-transform: none; color: #000;
}
.woocommerce-checkout #payment .payment_box {
  background: none; padding: 12px 0 0; margin: 0;
  font-size: 14px; font-weight: 300; color: #555;
}
.woocommerce-checkout #payment .payment_box::before { display: none; }
.woocommerce-checkout #payment .form-row.place-order { margin: 24px 0 0; }
.woocommerce-checkout #payment #place_order { width: 100%; padding: 18px; float: none; }
.woocommerce-privacy-policy-text { font-size: 13px; font-weight: 300; color: #666; }

/* ---------- page Mon compte ---------- */

/* Les titres « Se connecter » et « S'inscrire » arrivent en police de texte,
   alors que tous les titres du site sont en Anton. */
.woocommerce-account h2,
.woocommerce-account .u-column1 h2,
.woocommerce-account .u-column2 h2 {
  font-family: 'Anton', sans-serif;
  font-size: 22px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 20px;
}

/* Connexion et inscription cote a cote, comme les deux colonnes du tunnel. */
.woocommerce-account #customer_login.col2-set {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
}
.woocommerce-account #customer_login .col-1,
.woocommerce-account #customer_login .col-2 { width: 100%; float: none; }

/* Le bouton « afficher le mot de passe » de WooCommerce n'a pas d'icone sans
   la feuille de style de l'extension : il ne resterait qu'une pastille grise. */
.woocommerce-account .show-password-input,
.woocommerce-checkout .show-password-input { display: none; }

.woocommerce-account .woocommerce-form-login__rememberme,
.woocommerce-account .woocommerce-form__label-for-checkbox { font-family: 'Barlow', sans-serif; }
.woocommerce-account .lost_password { margin: 14px 0 0; font-size: 14px; }
.woocommerce-account .woocommerce-privacy-policy-text { margin: 16px 0; }

@media (max-width: 900px) {
  .woocommerce-account #customer_login.col2-set { grid-template-columns: 1fr; gap: 44px; }
}

/* ---------- confirmation de commande et détail d'une commande ---------- */

/* Ces titres arrivent en police de texte, comme sur Mon compte. */
.woocommerce-order h2,
.woocommerce-order h3,
.woocommerce-order-details__title,
.woocommerce-column__title,
.woocommerce-customer-details h2 {
  font-family: 'Anton', sans-serif;
  font-size: 22px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 36px 0 18px;
}

/* Le récapitulatif du haut est une liste à puces par défaut. */
.woocommerce-order .woocommerce-order-overview {
  list-style: none;
  margin: 24px 0 28px;
  padding: 22px;
  border: 1px solid #E5E5E5;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
}
.woocommerce-order .woocommerce-order-overview li {
  margin: 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #888;
}
.woocommerce-order .woocommerce-order-overview li strong {
  display: block;
  margin-top: 6px;
  font-family: 'Barlow', sans-serif;
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  color: #000;
}

/* La taille choisie s'affichait en puce, sur deux lignes. */
.wc-item-meta,
.woocommerce-table__product-name .wc-item-meta {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  font-size: 13px;
  color: #666;
}
.wc-item-meta li { margin: 0; }
.wc-item-meta li strong,
.wc-item-meta li p {
  display: inline;
  margin: 0;
  font-size: 13px;
  font-weight: 400;
}

/* Les deux adresses côte à côte, sans italique. */
.woocommerce-customer-details .woocommerce-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}
.woocommerce-customer-details address {
  font-style: normal;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.8;
  border: none;
  padding: 0;
}

@media (max-width: 900px) {
  .woocommerce-customer-details .woocommerce-columns { grid-template-columns: 1fr; gap: 28px; }
  .woocommerce-order .woocommerce-order-overview { flex-direction: column; gap: 16px; }
}

/* WordPress ajoute automatiquement des <br> entre deux images voisines dans le
   contenu d'un article. Dans une grille, ce <br> occupe une case et repousse la
   seconde image à la ligne suivante : le duo « à gauche / à droite » se
   retrouvait empilé, en contradiction avec sa légende. */
.article-duo > br,
.article-stats > br,
.article-wide > br { display: none; }

/* ==================================================================
   PAGE PANIER — mise en page en deux colonnes
   Le tableau et le total etaient empiles : il fallait faire defiler
   la page pour voir le montant et le bouton de commande.
   ================================================================== */

.woocommerce-cart .woocommerce {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 0 56px;
  align-items: start;
}
.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper,
.woocommerce-cart .woocommerce > .woocommerce-message,
.woocommerce-cart .woocommerce > .woocommerce-info,
.woocommerce-cart .woocommerce > .woocommerce-error { grid-column: 1 / -1; }

.woocommerce-cart .woocommerce-cart-form { grid-column: 1; margin: 0; }

.woocommerce-cart .cart-collaterals {
  grid-column: 2;
  width: 100%;
  margin: 0;
  position: sticky;
  top: 24px;
}
.woocommerce-cart .cart-collaterals .cart_totals { width: 100%; margin: 0; }

/* ---------- la ligne produit ---------- */
.woocommerce-cart table.shop_table .product-thumbnail { width: 96px; }
.woocommerce-cart table.shop_table .product-thumbnail img { width: 84px; height: 84px; object-fit: contain; }
.woocommerce-cart table.shop_table td { vertical-align: middle; }
.woocommerce-cart table.shop_table td.product-name a { font-size: 15px; }

/* la taille s'affichait sur deux lignes, sous forme de liste de definitions */
.woocommerce table.shop_table .variation,
.woocommerce table.shop_table dl.variation {
  margin: 5px 0 0;
  font-size: 13px;
  color: #777;
  line-height: 1.5;
}
.woocommerce table.shop_table dl.variation dt,
.woocommerce table.shop_table dl.variation dd,
.woocommerce table.shop_table dl.variation dd p {
  display: inline;
  margin: 0;
  padding: 0;
  font-weight: 400;
  float: none;
  clear: none;
}
.woocommerce table.shop_table dl.variation dd::after { content: ""; display: none; }

/* la quantite */
.woocommerce-cart table.shop_table td.product-quantity input.qty {
  width: 64px;
  padding: 10px;
  text-align: center;
  border: 1px solid #000;
  border-radius: 0;
  font-family: 'Barlow', sans-serif;
}

/* ---------- la ligne des boutons, qui se chevauchaient ---------- */
.woocommerce table.shop_table td.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 26px 0 0;
  border-bottom: none;
}
.woocommerce table.shop_table td.actions .coupon {
  display: flex;
  align-items: stretch;
  gap: 10px;
  flex: 1 1 300px;
  max-width: 440px;
  padding: 0;
  border: none;
}
.woocommerce table.shop_table td.actions .coupon input#coupon_code {
  flex: 1 1 auto;
  min-width: 0;
  font-family: 'Barlow', sans-serif;
  font-size: 14px;
  padding: 12px 14px;
  border: 1px solid #000;
  border-radius: 0;
  background: #fff;
  color: #000;
}
.woocommerce table.shop_table td.actions .button {
  flex: 0 0 auto;
  width: auto;
  display: inline-flex;
  align-items: center;
  padding: 13px 22px;
  font-size: 11px;
  letter-spacing: 0.14em;
  line-height: 1.1;
  white-space: nowrap;
}
.woocommerce table.shop_table td.actions button[name="update_cart"] {
  background: #fff;
  color: #000;
  border: 1px solid #000;
}
.woocommerce table.shop_table td.actions button[name="update_cart"]:hover:not([disabled]) { background: #000; color: #fff; }
.woocommerce table.shop_table td.actions button[name="update_cart"][disabled] { opacity: .3; cursor: default; }

/* ---------- le bloc du total ---------- */
.woocommerce-cart .cart_totals h2 {
  font-family: 'Anton', sans-serif;
  font-size: 20px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 18px;
}

@media (max-width: 1000px) {
  .woocommerce-cart .woocommerce { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .woocommerce-cart .woocommerce-cart-form,
  .woocommerce-cart .cart-collaterals { grid-column: 1; position: static; }
  .woocommerce table.shop_table td.actions { flex-direction: column; align-items: stretch; }
  .woocommerce table.shop_table td.actions .coupon { max-width: none; }
  .woocommerce table.shop_table td.actions .button { justify-content: center; }
}

/* Largeurs des colonnes du panier : sans elles, le navigateur donnait tout
   l'espace disponible aux deux premieres colonnes et laissait un grand vide
   a gauche, en repoussant le nom du produit vers la droite. */
.woocommerce-cart table.shop_table { table-layout: fixed; }
.woocommerce-cart table.shop_table th.product-remove,
.woocommerce-cart table.shop_table td.product-remove { width: 34px; padding-left: 0; padding-right: 0; }
.woocommerce-cart table.shop_table th.product-thumbnail,
.woocommerce-cart table.shop_table td.product-thumbnail { width: 96px; }
.woocommerce-cart table.shop_table th.product-name,
.woocommerce-cart table.shop_table td.product-name { width: auto; text-align: left; }
.woocommerce-cart table.shop_table th.product-price,
.woocommerce-cart table.shop_table td.product-price { width: 86px; text-align: right; }
.woocommerce-cart table.shop_table th.product-quantity,
.woocommerce-cart table.shop_table td.product-quantity { width: 96px; text-align: center; }
.woocommerce-cart table.shop_table th.product-subtotal,
.woocommerce-cart table.shop_table td.product-subtotal { width: 96px; text-align: right; }
.woocommerce-cart table.shop_table td.actions { width: auto; }

/* la ligne du code promo tient sur une seule ligne tant qu'il y a la place */
@media (min-width: 1001px) {
  .woocommerce table.shop_table td.actions { flex-wrap: nowrap; }
  .woocommerce table.shop_table td.actions .coupon { max-width: 380px; }
}

/* ---------- bloc « Total panier » : la ligne d'expedition ----------
   WooCommerce sort les modes de livraison sous forme de liste a puces,
   ce qui donnait une puce isolee et un texte hache dans une colonne
   etroite. On empile l'intitule et la valeur, et on retire la puce. */
.woocommerce-cart .cart_totals table.shop_table tr { display: block; }
.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0;
}
.woocommerce-cart .cart_totals table.shop_table tr { padding: 14px 0; border-bottom: 1px solid #EDEDED; }
.woocommerce-cart .cart_totals table.shop_table tr:last-child { border-bottom: none; }
.woocommerce-cart .cart_totals table.shop_table th {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 6px;
}
.woocommerce-cart .cart_totals table.shop_table td { font-size: 15px; color: #000; }
.woocommerce-cart .cart_totals .order-total td { font-size: 20px; }

.woocommerce-cart .cart_totals ul#shipping_method,
.woocommerce-cart .cart_totals ul.woocommerce-shipping-methods {
  list-style: none;
  margin: 0;
  padding: 0;
}
.woocommerce-cart .cart_totals ul#shipping_method li { margin: 0 0 6px; padding: 0; }
.woocommerce-cart .cart_totals ul#shipping_method li:last-child { margin-bottom: 0; }
.woocommerce-cart .cart_totals ul#shipping_method label { font-size: 15px; color: #000; }
.woocommerce-cart .cart_totals .woocommerce-shipping-destination,
.woocommerce-cart .cart_totals .shipping-calculator-button {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 300;
  color: #777;
}
.woocommerce-cart .cart_totals .shipping-calculator-button { color: #000; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- bloc produit dans les articles ----------
   WordPress laisse une balise </p> orpheline apres l'image du bloc, que le
   navigateur transforme en paragraphe vide. Dans une grille, ce paragraphe
   occupait la colonne du texte et poussait tout le contenu dans la colonne
   etroite de l'image. On passe en disposition souple et on neutralise les
   paragraphes vides, quelle que soit la facon dont l'editeur reformate. */
.article-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
  grid-template-columns: none;
}
.article-cta > img {
  flex: 0 0 130px;
  width: 130px;
  height: 130px;
}
.article-cta > div {
  flex: 1 1 280px;
  min-width: 0;
}
.article-cta > p:empty,
.article-duo > p:empty,
.article-stats > p:empty,
.article-wide > p:empty { display: none; }
.article-cta p { margin: 0; }
.article-cta .btn { margin-top: 18px; display: inline-block; }
.article-cta__text { max-width: 52ch; }

@media (max-width: 900px) {
  .article-cta { gap: 20px; }
  .article-cta > img { flex: 0 0 96px; width: 96px; height: 96px; }
  .article-cta > div { flex: 1 1 100%; }
}

/* ==================================================================
   VERSION TELEPHONE — pied de page et menu
   ================================================================== */
@media (max-width: 900px) {

  /* Le pied de page etait fige a trois colonnes alors qu'il n'y a que deux
     blocs de liens : tout se tassait a gauche en laissant un vide a droite.
     Deux colonnes egales remplissent la largeur, et une troisieme famille
     reviendra proprement a la ligne le jour ou elle existera. */
  .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 32px 20px !important;
  }
  .site-footer__grid > div:first-child {
    grid-column: 1 / -1;
    margin-bottom: 8px;
  }
  .site-footer__col-title { margin-bottom: 12px; }
  .site-footer__col a { padding: 3px 0; }

  /* Le menu deroulant manquait d'air : les entrees se touchaient. */
  .site-header__nav {
    padding: 96px 26px 40px !important;
    gap: 0 !important;
  }
  .site-header__nav a {
    width: 100%;
    padding: 22px 2px !important;
    border-bottom: 1px solid #EDEDED;
    font-size: 19px !important;
    letter-spacing: 0.06em;
    line-height: 1.3;
  }
  .site-header__nav a:last-child { border-bottom: none; }
  .site-header__nav .nav-cart {
    margin-top: 22px;
    border: 1px solid #000;
    border-bottom: 1px solid #000;
    padding: 20px 2px !important;
    text-align: center;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px !important;
    letter-spacing: 0.16em;
  }
  .nav-close { top: 30px !important; left: 26px !important; }
}

/* Les trois chiffres de la fiche produit se touchaient sur telephone :
   trois colonnes de 150 px, les intitules se rejoignaient visuellement. */
@media (max-width: 900px) {
  .produit-chiffres { gap: 18px; }
  .produit-chiffres > div { padding: 20px 0 !important; }
  .produit-chiffres > div > div:first-child { font-size: 24px !important; }
  .produit-chiffres > div > div:last-child { font-size: 10px !important; line-height: 1.4; }
}

/* WordPress laisse des paragraphes vides un peu partout dans le contenu
   importe. Ils n'ont aucun sens et ajoutent des espaces au hasard. */
.article p:empty,
.woocommerce-page-full p:empty { display: none; }

/* ==================================================================
   MENU DE NAVIGATION
   WordPress rend les entrees sous forme de <li>. Le theme ne stylait
   que les <a> : les <li> gardaient leur puce, leur hauteur par defaut,
   et c'est le <li> et non le lien qui portait la zone cliquable.
   D'ou les puces visibles, l'absence d'espacement, et un clic sur deux
   qui ouvrait la mauvaise page.
   ================================================================== */
.site-header__nav li,
.site-header__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-header__nav li::marker { content: none; }

@media (max-width: 900px) {
  .site-header__nav { padding: 100px 26px 40px !important; }

  /* chaque entree occupe toute la largeur : la zone cliquable correspond
     enfin a ce que l'on voit */
  .site-header__nav li { width: 100%; display: block; }
  .site-header__nav li > a,
  .site-header__nav > a:not(.nav-cart) {
    display: block;
    width: 100%;
    padding: 21px 2px !important;
    font-size: 19px !important;
    letter-spacing: 0.06em;
    line-height: 1.25;
    border-bottom: 1px solid #ECECEC;
  }
  /* la derniere entree de la liste, pas le bouton panier */
  .site-header__nav li:last-of-type > a { border-bottom: none; }

  /* le bouton panier gardait une bordure basse supprimee par une regle
     :last-child : le cadre paraissait ouvert en bas */
  .site-header__nav .nav-cart {
    display: block;
    width: 100%;
    margin-top: 26px;
    padding: 20px 2px !important;
    border: 1px solid #000 !important;
    text-align: center;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px !important;
    letter-spacing: 0.16em;
    line-height: 1.2;
  }
  .site-header__nav .nav-cart:hover { background: #000; color: #fff; }
}

/* ==================================================================
   PAGE COMMANDE — deux colonnes
   Tout etait empile sur une seule colonne : coordonnees, notes,
   recapitulatif puis paiement. La page faisait plusieurs ecrans de haut
   et le montant n'etait jamais visible en meme temps que le formulaire.
   ================================================================== */
.woocommerce-checkout form.checkout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: 0 56px;
  align-items: start;
}
.woocommerce-checkout form.checkout > #customer_details { grid-column: 1; grid-row: 1 / 3; }
.woocommerce-checkout form.checkout > #order_review_heading { grid-column: 2; grid-row: 1; margin-top: 0 !important; }
.woocommerce-checkout form.checkout > #order_review {
  grid-column: 2;
  grid-row: 2;
  position: sticky;
  top: 24px;
  border: 1px solid #000;
  padding: 26px;
}
.woocommerce-checkout form.checkout > .woocommerce-notices-wrapper,
.woocommerce-checkout form.checkout > .woocommerce-form-login-toggle,
.woocommerce-checkout form.checkout > .woocommerce-form-coupon-toggle,
.woocommerce-checkout form.checkout > .woocommerce-form-login,
.woocommerce-checkout form.checkout > .checkout_coupon { grid-column: 1 / -1; }

/* les coordonnees sur une seule colonne, le bloc etant deja plus etroit */
.woocommerce-checkout #customer_details.col2-set { display: block; }
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 { width: 100%; float: none; }
.woocommerce-checkout #customer_details .col-2 { margin-top: 36px; }

/* prenom/nom et code postal/ville sur la meme ligne : quatre lignes de
   moins a faire defiler, et c'est la disposition attendue d'un formulaire */
.woocommerce-checkout .col-1 .woocommerce-billing-fields__field-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 20px;
}
.woocommerce-checkout .col-1 .woocommerce-billing-fields__field-wrapper > p { grid-column: 1 / -1; }
.woocommerce-checkout .col-1 .woocommerce-billing-fields__field-wrapper > p.form-row-first { grid-column: 1; }
.woocommerce-checkout .col-1 .woocommerce-billing-fields__field-wrapper > p.form-row-last { grid-column: 2; }

/* le recapitulatif tient dans son cadre */
.woocommerce-checkout #order_review table.shop_table { margin: 0; }
.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td { padding: 10px 0; font-size: 14px; }
.woocommerce-checkout #order_review .product-name { padding-right: 12px; }
.woocommerce-checkout #order_review #payment { background: none; padding: 22px 0 0; margin-top: 18px; border-top: 1px solid #E5E5E5; }
.woocommerce-checkout #order_review #payment ul.payment_methods { padding-bottom: 16px; }

@media (max-width: 1000px) {
  .woocommerce-checkout form.checkout { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .woocommerce-checkout form.checkout > #customer_details,
  .woocommerce-checkout form.checkout > #order_review_heading,
  .woocommerce-checkout form.checkout > #order_review {
    grid-column: 1;
    grid-row: auto;
    position: static;
  }
  .woocommerce-checkout .col-1 .woocommerce-billing-fields__field-wrapper { grid-template-columns: 1fr; gap: 0; }
  .woocommerce-checkout .col-1 .woocommerce-billing-fields__field-wrapper > p.form-row-first,
  .woocommerce-checkout .col-1 .woocommerce-billing-fields__field-wrapper > p.form-row-last { grid-column: 1; }
}

/* ---------- « À associer » : une ligne qui defile ----------
   Trois grandes vignettes empilaient plusieurs centaines de pixels en bas
   de chaque fiche. Une rangee horizontale montre autant de produits sans
   allonger la page, et se prolonge naturellement si le catalogue grandit. */
.produits-associes {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 14px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #C9C9C9 transparent;
}
.produits-associes > a {
  flex: 0 0 clamp(170px, 22vw, 250px);
  scroll-snap-align: start;
}
.produits-associes::-webkit-scrollbar { height: 6px; }
.produits-associes::-webkit-scrollbar-track { background: #F0F0F0; }
.produits-associes::-webkit-scrollbar-thumb { background: #C9C9C9; }
.produits-associes::-webkit-scrollbar-thumb:hover { background: #9A9A9A; }
.produits-associes .ph { height: 230px; }
.produits-associes > a > div:nth-child(2) { font-size: 14px; margin-top: 14px; }

@media (max-width: 900px) {
  .produits-associes { gap: 14px; margin-right: -14px; padding-right: 14px; }
  .produits-associes > a { flex: 0 0 min(58vw, 220px); }
  .produits-associes .ph { height: 190px; }
}

/* la ligne d'expedition du recapitulatif de commande, meme puce parasite
   que dans le panier */
.woocommerce-checkout #order_review ul#shipping_method,
.woocommerce-checkout #order_review .woocommerce-shipping-methods {
  list-style: none;
  margin: 0;
  padding: 0;
}
.woocommerce-checkout #order_review ul#shipping_method li { margin: 0 0 4px; padding: 0; }
.woocommerce-checkout #order_review ul#shipping_method li:last-child { margin-bottom: 0; }
.woocommerce-checkout #order_review tr.woocommerce-shipping-totals td { text-align: right; }

/* ==================================================================
   PIED DE PAGE — recentre et resserre
   La marque etait callee a gauche et le bloc respirait trop : sur un
   site de vetements, un pied de page centre et compact se lit d'un coup
   d'oeil et ne detourne pas de la boutique.
   ================================================================== */
.site-footer { padding: 44px 32px 24px; }

.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, max-content));
  justify-content: center;
  gap: 30px 64px;
  text-align: center;
}
.site-footer__grid > div:first-child {
  grid-column: 1 / -1;
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.site-footer__grid > div:first-child > div { max-width: none !important; margin-top: 0 !important; }
.site-footer__col { align-items: center; gap: 9px; }
.site-footer__col-title { margin-bottom: 2px; }

.site-footer__bottom { margin-top: 34px; padding-top: 18px; }

@media (max-width: 900px) {
  .site-footer { padding: 34px 20px 20px !important; }
  .site-footer__grid {
    grid-template-columns: repeat(auto-fit, minmax(110px, max-content)) !important;
    justify-content: center !important;
    gap: 26px 44px !important;
  }
  .site-footer__bottom { margin-top: 26px; }
}

/* ---------- rangee « A associer » : on suggere qu'elle continue ----------
   Un degrade sur le bord droit indique qu'il reste des pieces a decouvrir
   en faisant glisser, plutot que de laisser croire que la rangee s'arrete. */
.produits-associes-cadre { position: relative; }
.produits-associes-cadre::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 14px;
  width: 64px;
  background: linear-gradient(to right, rgba(255,255,255,0), #fff);
  pointer-events: none;
}

/* ==================================================================
   BLOC PRODUIT DANS LES ARTICLES
   Un cadre blanc au milieu d'un texte blanc ne se voit pas. En noir,
   avec le produit detoure sur fond clair, il coupe la lecture et se
   remarque, comme les encarts des marques de JJB.
   ================================================================== */
.article-cta {
  background: #000;
  color: #fff;
  border: none;
  padding: 0;
  overflow: hidden;
  align-items: stretch;
  gap: 0;
  margin: 52px 0;
}
.article-cta > img {
  flex: 0 0 190px;
  width: 190px;
  height: auto;
  min-height: 190px;
  object-fit: contain;
  background: #F4F4F4;
  padding: 16px;
  align-self: stretch;
}
.article-cta > div {
  flex: 1 1 300px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 28px 32px;
}
.article-cta__title {
  color: #fff;
  font-size: 25px;
  letter-spacing: 0.05em;
  line-height: 1.1;
}
.article-cta__text {
  color: #ADADAD;
  margin-top: 12px;
  max-width: 46ch;
}
.article-cta .btn {
  align-self: flex-start;
  margin-top: 20px;
  border: 1px solid #fff;
  color: #fff;
  background: transparent;
  padding: 13px 26px;
  transition: background .18s, color .18s;
}
.article-cta .btn:hover { background: #fff; color: #000; }

@media (max-width: 900px) {
  .article-cta { flex-direction: column; margin: 40px 0; }
  .article-cta > img { flex: none; width: 100%; height: 200px; min-height: 0; padding: 20px; }
  .article-cta > div { padding: 24px 22px 28px; }
  .article-cta__title { font-size: 21px; }
  .article-cta .btn { align-self: stretch; text-align: center; }
}

/* Le pied de page en grille auto-fit ne se centrait pas : les colonnes
   restaient a gauche. Une disposition souple centre reellement le contenu. */
.site-footer__grid {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 30px 72px !important;
  grid-template-columns: none !important;
}
.site-footer__grid > div:first-child { flex: 0 0 100%; }
.site-footer__grid > .site-footer__col { flex: 0 0 auto; min-width: 120px; }

@media (max-width: 900px) {
  .site-footer__grid { gap: 26px 48px !important; }
  .site-footer__grid > .site-footer__col { min-width: 108px; }
}

/* ==================================================================
   VIGNETTES DE LA GALERIE PRODUIT
   Elles passaient a la ligne des la quatrieme et n'avaient pas la meme
   allure : les visuels detoures flottaient sur du blanc pendant que les
   photos portees remplissaient leur cadre. Une seule rangee qui defile,
   toutes au meme format carre, avec le cadrage qui remplit la vignette.
   ================================================================== */
.gallery__thumbs {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 10px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #CFCFCF transparent;
}
.gallery__thumbs::-webkit-scrollbar { height: 5px; }
.gallery__thumbs::-webkit-scrollbar-track { background: #F2F2F2; }
.gallery__thumbs::-webkit-scrollbar-thumb { background: #CFCFCF; }

.gallery__thumb {
  flex: 0 0 92px;
  width: 92px;
  height: 92px;
  padding: 0;
  border: 1px solid #E4E4E4;
  background: #fff;
  cursor: pointer;
  overflow: hidden;
  scroll-snap-align: start;
  transition: border-color .15s;
}
.gallery__thumb img {
  width: 100%;
  height: 100%;
  /* « cover » plutot que « contain » : les visuels produit sont carres, ils
     ne perdent rien, et les photos portees remplissent enfin leur cadre au
     lieu de laisser deux bandes grises. */
  object-fit: cover;
  display: block;
}
.gallery__thumb.is-active { border-color: #000; }
.gallery__thumb:hover { border-color: #9A9A9A; }

@media (max-width: 900px) {
  .gallery__thumbs { gap: 6px; margin-right: -14px; padding-right: 14px; }
  .gallery__thumb { flex: 0 0 76px; width: 76px; height: 76px; }
}

/* ---------- bandeau de reassurance ----------
   Livraison, retours et securite du paiement annonces avant meme le logo :
   c'est ce que regardent les acheteurs qui ne connaissent pas la marque. */
.bandeau-info {
  background: #000;
  color: #fff;
  text-align: center;
  padding: 9px 16px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.4;
}
.bandeau-info span { display: inline-block; }

@media (max-width: 900px) {
  .bandeau-info { padding: 8px 12px; font-size: 9.5px; letter-spacing: 0.12em; }
}

/* ==================================================================
   PANIER SUR TELEPHONE — le tableau devient des fiches
   Les largeurs de colonnes fixees pour le bureau (34+96+86+96+96 px)
   depassaient la largeur d'un telephone : les en-tetes se chevauchaient,
   le nom du produit passait par-dessus le prix, et la page debordait sur
   la droite. Un tableau a cinq colonnes n'a pas sa place ici.
   ================================================================== */
@media (max-width: 780px) {

  /* on rend au tableau sa liberte */
  .woocommerce-cart table.shop_table { table-layout: auto !important; }
  .woocommerce-cart table.shop_table th,
  .woocommerce-cart table.shop_table td { width: auto !important; }

  .woocommerce-cart table.shop_table,
  .woocommerce-cart table.shop_table tbody,
  .woocommerce-cart table.shop_table tr { display: block; width: 100%; }
  .woocommerce-cart table.shop_table thead { display: none; }

  /* une ligne de panier devient une fiche : visuel a gauche, le reste a droite */
  .woocommerce-cart table.shop_table tr.cart_item {
    position: relative;
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    column-gap: 16px;
    padding: 20px 0;
    border-bottom: 1px solid #EDEDED;
    align-items: start;
  }
  .woocommerce-cart table.shop_table tr.cart_item td {
    display: block;
    border: none;
    padding: 0;
    text-align: left;
  }
  .woocommerce-cart table.shop_table td.product-remove {
    position: absolute;
    top: 14px;
    right: 0;
    font-size: 20px;
    line-height: 1;
  }
  .woocommerce-cart table.shop_table td.product-thumbnail { grid-column: 1; grid-row: 1 / span 3; }
  .woocommerce-cart table.shop_table td.product-thumbnail img { width: 82px; height: 82px; }
  .woocommerce-cart table.shop_table td.product-name { grid-column: 2; grid-row: 1; padding-right: 28px; }
  .woocommerce-cart table.shop_table td.product-name a { font-size: 15px; line-height: 1.35; }

  /* le prix unitaire fait doublon avec le sous-total quand la quantite est visible */
  .woocommerce-cart table.shop_table td.product-price { display: none; }

  .woocommerce-cart table.shop_table td.product-quantity { grid-column: 2; grid-row: 2; margin-top: 12px; }
  .woocommerce-cart table.shop_table td.product-subtotal {
    grid-column: 2;
    grid-row: 3;
    margin-top: 10px;
    font-size: 16px;
    font-weight: 600;
  }
  .woocommerce-cart table.shop_table td.product-subtotal::before {
    content: attr(data-title) " ";
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #999;
  }

  /* code promo et mise a jour : empiles, pleine largeur, hauteur normale */
  .woocommerce table.shop_table td.actions {
    display: block !important;
    padding: 22px 0 0 !important;
    border: none;
  }
  .woocommerce table.shop_table td.actions .coupon {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    max-width: none !important;
    margin: 0 0 12px;
  }
  .woocommerce table.shop_table td.actions .coupon input#coupon_code {
    width: 100%;
    height: auto;
    flex: 0 0 auto;
  }
  .woocommerce table.shop_table td.actions .button {
    display: block !important;
    width: 100% !important;
    flex: 0 0 auto;
    text-align: center;
    padding: 15px 18px;
  }
}

@media (max-width: 780px) {
  /* la regle precedente etait moins prioritaire que « tr.cart_item td »,
     le prix unitaire restait donc visible sous le visuel */
  .woocommerce-cart table.shop_table tr.cart_item td.product-price { display: none !important; }

  /* l'en-tete du tableau est masquee : on recupere l'espace qu'elle laissait */
  .woocommerce-cart .woocommerce-cart-form { margin-top: -6px; }
  .woocommerce-cart table.shop_table { margin-top: 0; }
  .woocommerce-cart table.shop_table tr.cart_item:first-child { padding-top: 6px; }

  /* la croix de suppression, plus facile a viser */
  .woocommerce-cart table.shop_table td.product-remove a.remove {
    display: block;
    width: 30px;
    height: 30px;
    line-height: 28px;
    text-align: center;
    font-size: 20px;
    color: #999;
  }
  .woocommerce-cart table.shop_table td.product-remove a.remove:hover { color: #000; }
}

/* ==================================================================
   PANIER — hierarchie des boutons
   « Appliquer le code promo » etait un gros bloc noir, aussi lourd que
   l'action principale. Sur une page de panier, une seule action merite
   le noir plein : valider la commande.
   ================================================================== */
.woocommerce table.shop_table td.actions .button,
.woocommerce table.shop_table td.actions button[name="apply_coupon"] {
  background: #fff;
  color: #000;
  border: 1px solid #000;
  padding: 12px 20px;
  font-size: 10.5px;
  letter-spacing: 0.13em;
}
.woocommerce table.shop_table td.actions .button:hover:not([disabled]),
.woocommerce table.shop_table td.actions button[name="apply_coupon"]:hover:not([disabled]) {
  background: #000;
  color: #fff;
}
.woocommerce table.shop_table td.actions .coupon input#coupon_code { padding: 11px 14px; }

/* ==================================================================
   PAGE COMMANDE — entree de page allegee
   Deux gros encadres gris avant meme le premier champ, puis de larges
   espaces autour des boutons de paiement express : le client arrivait
   devant un mur. On resserre tout.
   ================================================================== */
.woocommerce-checkout .woocommerce-form-login-toggle,
.woocommerce-checkout .woocommerce-form-coupon-toggle {
  margin: 0 0 16px;
}
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info,
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 12px 16px;
  margin: 0;
  font-size: 14px;
  background: none;
  border-left: 2px solid #000;
}
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info a { font-weight: 500; }

/* le formulaire de connexion, une fois deplie */
.woocommerce-checkout form.login { margin: 0 0 22px; padding: 22px; border: 1px solid #E5E5E5; }

/* paiement express : Stripe laisse de grandes marges autour de ses boutons */
.woocommerce-checkout #wc-stripe-express-checkout-element,
.woocommerce-checkout .wc-stripe-express-checkout-element,
.woocommerce-checkout #wc-stripe-payment-request-wrapper { margin: 0 0 14px !important; }
.woocommerce-checkout .wc-stripe-express-checkout-button-separator,
.woocommerce-checkout #wc-stripe-express-checkout-button-separator,
.woocommerce-checkout .wc-stripe-payment-request-button-separator {
  margin: 18px 0 !important;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: #999;
}

/* la mention de destination n'a plus d'objet sans calculateur */

/* securite : si une version de WooCommerce ignore les deux filtres, le
   calculateur reste masque cote affichage */

/* Le champ du code promo et son bouton s'etiraient sur toute la hauteur de la
   cellule du tableau : « align-items: stretch » les faisait remplir l'espace
   disponible, qui depend de la hauteur de la ligne. Hauteur fixee, plus de
   deformation quelle que soit la largeur d'ecran. */
.woocommerce table.shop_table td.actions {
  align-items: flex-start;
}
.woocommerce table.shop_table td.actions .coupon {
  align-items: flex-start;
  height: auto;
}
.woocommerce table.shop_table td.actions .coupon input#coupon_code,
.woocommerce table.shop_table td.actions .button {
  height: 44px;
  min-height: 44px;
  max-height: 44px;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-top: 0;
  padding-bottom: 0;
}
.woocommerce table.shop_table td.actions .coupon input#coupon_code {
  display: block;
  line-height: 42px;
}

@media (max-width: 780px) {
  /* empiles sur telephone, mais toujours a hauteur normale */
  .woocommerce table.shop_table td.actions .coupon input#coupon_code,
  .woocommerce table.shop_table td.actions .button {
    height: 48px;
    min-height: 48px;
    max-height: 48px;
    width: 100% !important;
  }
  .woocommerce table.shop_table td.actions .coupon input#coupon_code { line-height: 46px; }
}

/* ==================================================================
   PANIER — le vide entre le code promo et le bouton
   Quand les deux elements passaient a la ligne, « align-content » par
   defaut repartissait les lignes sur toute la hauteur de la cellule,
   d'ou plusieurs centaines de pixels de vide au milieu.
   ================================================================== */
.woocommerce table.shop_table td.actions {
  align-content: flex-start;
  row-gap: 12px;
}

/* « Mettre a jour le panier » ne sert qu'a recalculer apres un changement de
   quantite. Personne ne sait ce que ca veut dire, et le total se met a jour
   tout seul desormais (voir senshu-woo.js). */
.woocommerce table.shop_table td.actions button[name="update_cart"] { display: none !important; }

/* ---------- flèches de la rangée « À associer » ---------- */
.produits-associes-cadre { position: relative; }
.assoc-fleche {
  position: absolute;
  top: 100px;
  z-index: 3;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #E0E0E0;
  color: #000;
  cursor: pointer;
  padding: 0;
  transition: border-color .15s, background .15s;
}
.assoc-fleche:hover { border-color: #000; }
.assoc-fleche svg { width: 20px; height: 20px; }
.assoc-fleche--prev { left: -8px; }
.assoc-fleche--next { right: -8px; }
.assoc-fleche[hidden] { display: none; }

/* la barre de defilement devient discrete puisque les fleches la remplacent */
.produits-associes { scrollbar-width: none; }
.produits-associes::-webkit-scrollbar { height: 0; }

@media (max-width: 900px) {
  /* au doigt, le glissement suffit */
  .assoc-fleche { display: none; }
  .produits-associes { scrollbar-width: thin; }
  .produits-associes::-webkit-scrollbar { height: 4px; }
}

/* ---------- barre du bas du pied de page ----------
   En « espace reparti », le bloc de liens a droite etant plus large que le
   copyright a gauche, le casque se retrouvait a gauche du centre. */
.site-footer__bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}
.site-footer__bottom > *:first-child { justify-self: start; }
.site-footer__bottom > *:last-child { justify-self: end; }
.site-footer__bottom > a,
.site-footer__bottom > img { justify-self: center; }

@media (max-width: 900px) {
  .site-footer__bottom { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .site-footer__bottom > *:first-child,
  .site-footer__bottom > *:last-child { justify-self: center; }
}

/* ==================================================================
   PAGE COMMANDE — le trou sous le « — OU — »   (2026-09-01)
   Le formulaire est une grille et, sur telephone, ses lignes etaient
   espacees de 40 px. Les boutons de paiement express et leur separateur
   sont des cases de cette grille : les 40 px automatiques s'ajoutaient a
   leurs marges, d'ou le vide sous le « — OU — ». On coupe l'espacement
   automatique et on regle chaque ecart explicitement.
   ================================================================== */
.woocommerce-checkout form.checkout > #wc-stripe-express-checkout-element,
.woocommerce-checkout form.checkout > .wc-stripe-express-checkout-element,
.woocommerce-checkout form.checkout > #wc-stripe-payment-request-wrapper,
.woocommerce-checkout form.checkout > #wc-stripe-express-checkout-button-separator,
.woocommerce-checkout form.checkout > .wc-stripe-express-checkout-button-separator {
  grid-column: 1 / -1;
}
.woocommerce-checkout form.checkout > #wc-stripe-express-checkout-button-separator,
.woocommerce-checkout form.checkout > .wc-stripe-express-checkout-button-separator {
  margin: 16px 0 14px !important;
}
/* Stripe reserve de la hauteur meme quand il n'affiche aucun bouton */
.woocommerce-checkout #wc-stripe-express-checkout-element:empty,
.woocommerce-checkout #wc-stripe-payment-request-wrapper:empty { display: none !important; }

@media (max-width: 1000px) {
  .woocommerce-checkout form.checkout { gap: 0; }
  /* l'ecart avant le recapitulatif, lui, reste voulu */
  .woocommerce-checkout form.checkout > #order_review_heading { margin-top: 40px !important; }
}

/* Le bandeau « Deja client ? » heritait du « space-between » commun a tous les
   messages WooCommerce : sur grand ecran le lien partait a l'autre bout de la
   page, a plus d'un metre de la question. On recolle les deux. */
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info,
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
  justify-content: flex-start;
}

/* « Contact » n'existe que dans le menu deroulant du telephone. Sur ordinateur
   l'en-tete porte deja cinq entrees et le lien figure dans le pied de page. */
.menu-item-contact { display: none; }
@media (max-width: 900px) {
  .menu-item-contact { display: block; }
}


/* ==================================================================
   NOTIFICATION D'AJOUT AU PANIER
   La fiche produit n'affichait aucune confirmation : le client cliquait
   et rien ne bougeait, sinon le compteur de l'en-tete. Beaucoup de gens
   cliquaient deux fois.
   Elle sort du haut, sous l'en-tete collant, sur toutes les tailles
   d'ecran : en bas de telephone elle passait inapercue.
   ================================================================== */
.panier-notif {
  position: fixed;
  top: 148px;
  right: 24px;
  z-index: 200;
  width: 380px;
  max-width: calc(100vw - 32px);
  padding: 22px 24px 24px;
  background: #000;
  color: #fff;
  border: 1px solid #000;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
  transform: translateY(-18px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.24s ease, transform 0.24s ease;
}
.panier-notif.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; }

/* la coche : le signal qu'on cherche des yeux avant de lire */
.panier-notif__haut { display: flex; align-items: center; gap: 10px; }
.panier-notif__coche {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  color: #000;
}
.panier-notif__coche svg { width: 13px; height: 13px; }
.panier-notif__titre {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
}

.panier-notif__corps { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.panier-notif__image {
  flex: 0 0 auto;
  width: 62px;
  height: 62px;
  object-fit: cover;
  background: #fff;
}
.panier-notif__texte { min-width: 0; }
.panier-notif__produit {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  color: #fff;
}
.panier-notif__taille {
  margin-top: 4px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9A9A9A;
}
.panier-notif__taille:empty { display: none; }

/* bouton plein, inverse : c'est l'element le plus contraste de l'ecran */
.panier-notif__lien {
  display: block;
  margin-top: 18px;
  padding: 13px 0;
  background: #fff;
  color: #000;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
}
.panier-notif__lien:hover { background: #E4E4E4; }

/* telephone : sous l'en-tete, qui est plus court, et sur toute la largeur */
@media (max-width: 700px) {
  .panier-notif {
    top: 108px;
    right: 12px;
    left: 12px;
    width: auto;
    max-width: none;
    padding: 18px 18px 20px;
  }
}

/* un visiteur qui limite les animations ne subit pas le glissement */
@media (prefers-reduced-motion: reduce) {
  .panier-notif { transition: opacity 0.24s ease; transform: none; }
  .panier-notif.is-visible { transform: none; }
}

/* ==================================================================
   BANDEAU DEFILANT
   Le bandeau tenait sur une ligne fixe : sur telephone la fin du texte
   etait coupee, « paiement sécurisé » n'apparaissait jamais. Il defile
   maintenant en boucle. Le texte est repete quatre fois et la piste
   translate d'un quart : la boucle se referme sans saut visible.
   ================================================================== */
.bandeau-info { overflow: hidden; }
.bandeau-info__piste {
  display: flex;
  width: max-content;
  /* couche dediee : l animation ne force plus le repeint de l en-tete */
  will-change: transform;
  backface-visibility: hidden;
  animation: senshu-defile 34s linear infinite;
}
/* hors de l ecran, l animation est mise en pause par le script */
.bandeau-info__piste.est-en-pause { animation-play-state: paused; }
.bandeau-info__item { padding-right: 56px; white-space: nowrap; }
.bandeau-info:hover .bandeau-info__piste { animation-play-state: paused; }

@keyframes senshu-defile {
  from { transform: translateX(0); }
  to   { transform: translateX(-25%); }
}

/* un visiteur qui limite les animations lit un bandeau fixe */
@media (prefers-reduced-motion: reduce) {
  .bandeau-info__piste { animation: none; }
}

/* ==================================================================
   MENU : REGROUPEMENT DE LA BOUTIQUE
   Rashguards et Shorts etaient deux entrees separees dans un en-tete
   deja charge. Elles passent sous une entree « Boutique » qui mene a la
   page commune, et se deplient au survol sur ordinateur, en liste sur
   telephone.
   ================================================================== */
.site-header__nav .menu-item-has-children { position: relative; }
.site-header__nav .sub-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 901px) {
  .site-header__nav .sub-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    min-width: 210px;
    padding: 10px 0;
    background: #fff;
    border: 1px solid #000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.16s ease, transform 0.16s ease;
    z-index: 120;
  }
  /* la zone tampon evite que le menu se referme en traversant l'espace */
  .site-header__nav .menu-item-has-children::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 14px;
  }
  .site-header__nav .menu-item-has-children:hover > .sub-menu,
  .site-header__nav .menu-item-has-children:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
  .site-header__nav .sub-menu a {
    display: block;
    padding: 10px 22px;
    font-size: 12px;
    letter-spacing: 0.16em;
    white-space: nowrap;
  }
  .site-header__nav .sub-menu a:hover { background: #F2F2F2; }
}

/* telephone : le tiroir est deja une liste, les sous-entrees se decalent */
@media (max-width: 900px) {
  .site-header__nav .sub-menu { padding-left: 18px; }
  .site-header__nav .sub-menu a { font-size: 15px; opacity: 0.8; }
}

/* la croix de fermeture de la notification : le client la ferme quand il veut */
.panier-notif__haut { justify-content: flex-start; }
.panier-notif__titre { flex: 1 1 auto; }
.panier-notif__croix {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin: -6px -8px -6px 0;
  padding: 0;
  border: none;
  background: none;
  color: #8A8A8A;
  cursor: pointer;
}
.panier-notif__croix svg { width: 16px; height: 16px; }
.panier-notif__croix:hover { color: #fff; }

/* ==================================================================
   GUIDE DES TAILLES EN FENETRE
   Le lien menait a une autre page : le client perdait sa taille
   selectionnee et sa position dans la galerie, et devait revenir en
   arriere. Le contenu s'ouvre desormais par-dessus la fiche.
   ================================================================== */
/* L attribut « hidden » doit gagner sur le « display: flex » ci-dessous,
   sinon la fenetre reste affichee, invisible, et absorbe tous les clics de la
   page. C est exactement ce qui rendait la fiche produit inutilisable. */
.guide-fenetre[hidden] { display: none !important; }

.guide-fenetre {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.guide-fenetre.is-visible { opacity: 1; }
.guide-fenetre__voile { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.62); }
.guide-fenetre__boite {
  position: relative;
  width: 100%;
  max-width: 760px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 44px 40px 40px;
  background: #fff;
  border: 1px solid #000;
}
.guide-fenetre__croix {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid #E0E0E0;
  background: #fff;
  color: #000;
  cursor: pointer;
}
.guide-fenetre__croix svg { width: 18px; height: 18px; }
.guide-fenetre__croix:hover { background: #000; color: #fff; border-color: #000; }

/* le contenu vient d'une page : on neutralise ses marges de page */
.guide-fenetre__contenu > .section,
.guide-fenetre__contenu > section { padding: 0 !important; max-width: none !important; }
.guide-fenetre__contenu table { width: 100%; border-collapse: collapse; }

@media (max-width: 700px) {
  .guide-fenetre { padding: 0; align-items: flex-end; }
  .guide-fenetre__boite {
    max-width: none;
    max-height: 88vh;
    padding: 44px 18px 24px;
    border: none;
    border-top: 2px solid #000;
  }
  .guide-fenetre__croix { top: 8px; right: 8px; }
}

/* ==================================================================
   PAIEMENT EXPRESS SUR LA FICHE PRODUIT
   Stripe depose son bouton juste apres le formulaire d'ajout. Il reste
   masque tant que l'appareil du visiteur ne sait pas payer : Apple Pay
   sur un appareil Apple, Google Pay sur les autres. On ne l'affiche
   donc jamais nous-memes, on se contente de l'habiller.
   ================================================================== */
.single-product #wc-stripe-express-checkout-element,
.single-product .wc-stripe-express-checkout-element {
  width: 100%;
  margin: 16px 0 0 !important;
}
.single-product #wc-stripe-express-checkout-element:empty { display: none !important; }

/* le separateur de Stripe, aux couleurs du site */
.single-product #wc-stripe-express-checkout-button-separator,
.single-product .wc-stripe-express-checkout-button-separator {
  margin: 16px 0 4px !important;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #999;
  text-align: center;
}

/* la ligne « livraison / retour » passe sous le bouton express, pour que
   les deux moyens d'acheter restent colles l'un a l'autre */
.single-product form.cart .btn-cart { margin-bottom: 0; }

/* Un seul portefeuille affiche, celui de l'appareil du visiteur.
   La classe est posee par le script au chargement : voir site.js. */
.senshu-apple-pay [id$="-googlePay"] { display: none !important; }
.senshu-sans-apple-pay [id$="-applePay"] { display: none !important; }

/* Le panier sur ordinateur laissait 80 px de vide sous le recapitulatif, en
   plus du blanc naturel a gauche quand le panier ne contient qu'un article.
   On resserre, uniquement sur cette page et uniquement sur grand ecran : le
   gabarit est partage avec les autres pages, on n'y touche pas. */
@media (min-width: 901px) {
  .woocommerce-cart main > .section { padding-bottom: 40px !important; }
  .woocommerce-cart .cart_totals { padding-top: 24px; padding-bottom: 24px; }
}

/* ==================================================================
   PANIER ENTRE 900 ET 1000 PX
   Sous 1000 px la cellule des actions passe en colonne. Le « flex: 1 1
   300px » du code promo, ecrit pour une rangee ou il fixe une largeur,
   devenait alors une HAUTEUR : 300 px de vide sous les produits. Et le
   recapitulatif gardait sa largeur de 420 px, colle a gauche, alors
   qu'il occupe seul toute la ligne.
   ================================================================== */
@media (max-width: 1000px) {
  .woocommerce table.shop_table td.actions .coupon { flex: 0 0 auto; }
  .woocommerce-cart .cart-collaterals .cart_totals { max-width: none; }
}

/* ==================================================================
   CALCULATEUR DE LIVRAISON DANS LE PANIER
   Remis en service : sans code postal ni ville, Boxtal ne peut proposer
   aucun point relais, et le client voyait l'option sans pouvoir en
   choisir un. On l'habille aux couleurs du site.
   ================================================================== */
.woocommerce-cart .cart_totals .woocommerce-shipping-destination {
  margin: 10px 0 0;
  font-size: 13px;
  color: #777;
}
.woocommerce-cart .cart_totals .shipping-calculator-button {
  display: inline-block;
  margin-top: 8px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #000;
  border-bottom: 1px solid #000;
  padding-bottom: 2px;
  text-decoration: none;
}
.woocommerce-cart .shipping-calculator-form { margin-top: 14px; }
.woocommerce-cart .shipping-calculator-form p { margin: 0 0 10px; }
.woocommerce-cart .shipping-calculator-form input,
.woocommerce-cart .shipping-calculator-form select,
.woocommerce-cart .shipping-calculator-form .select2-selection {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  font-size: 14px;
  border: 1px solid #D6D6D6;
  background: #fff;
}
.woocommerce-cart .shipping-calculator-form .button {
  width: 100%;
  height: 44px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Le formulaire d'adresse etait replie derriere un lien de 17 px de haut,
   invisible en pratique. Comme il conditionne l'affichage des points relais,
   il reste ouvert : le client voit tout de suite ou saisir sa ville. */
.woocommerce-cart .cart_totals .shipping-calculator-button { display: none; }
.woocommerce-cart .cart_totals .shipping-calculator-form {
  display: block !important;
  margin-top: 12px;
}
.woocommerce-cart .cart_totals .woocommerce-shipping-destination {
  margin: 10px 0 0;
  font-size: 12px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #999;
}

/* Dans le recapitulatif de commande, les cellules sont alignees a droite pour
   les montants. Le bloc du point relais heritait de cet alignement : le nom et
   l'adresse du relais se lisaient en escalier, colles au bord. On les remet a
   gauche, eux seuls. */
.woocommerce-checkout #order_review td.shipping,
.woocommerce-checkout #order_review .woocommerce-shipping-methods,
.woocommerce-checkout #order_review .bw-parcel-point {
  text-align: left;
}
.woocommerce-checkout #order_review .bw-parcel-point {
  display: block;
  margin-top: 8px;
  padding: 10px 12px;
  background: #F6F6F6;
  font-size: 13px;
  line-height: 1.5;
}
.woocommerce-checkout #order_review .woocommerce-shipping-methods li { margin-bottom: 6px; }

/* ==================================================================
   BAS DE LA PAGE COMMANDE
   Stripe place un separateur « — OU — » entre son bouton express et le
   formulaire. Le bouton se retrouvant seul en bas de page, le separateur
   ne separait plus rien et laissait un grand vide sous lui.
   ================================================================== */
.woocommerce-checkout form.checkout > #wc-stripe-express-checkout-button-separator,
.woocommerce-checkout form.checkout > .wc-stripe-express-checkout-button-separator,
.woocommerce-checkout #wc-stripe-express-checkout-button-separator {
  display: none !important;
}
.woocommerce-checkout form.checkout > #wc-stripe-express-checkout-element,
.woocommerce-checkout form.checkout > .wc-stripe-express-checkout-element {
  margin: 20px 0 0 !important;
}
/* le gabarit ecrit ce padding directement dans la balise, il faut le forcer */
.woocommerce-checkout main > .section { padding-bottom: 40px !important; }

/* Taille epuisee : le bouton reste visible pour que le client sache que la
   taille existe, mais barre et non cliquable. */
.size-opt.est-epuisee {
  position: relative;
  color: #BBB;
  border-color: #E4E4E4;
  cursor: not-allowed;
}
.size-opt.est-epuisee::after {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  top: 50%;
  height: 1px;
  background: #CFCFCF;
}
.size-opt.est-epuisee:hover { background: none; color: #BBB; }

/* Notification d'echec : meme boite, mais la coche devient un avertissement
   et le lien vers le panier n'a plus d'objet. */
.panier-notif.est-erreur .panier-notif__coche { background: #C8362F; color: #fff; }
.panier-notif.est-erreur .panier-notif__lien { display: none; }
.panier-notif.est-erreur .panier-notif__produit { color: #fff; }

/* ==================================================================
   MENU DU TELEPHONE : LISTE QUI DEFILE, PANIER FIXE
   Le bouton panier suivait la liste : avec les sous-categories
   ouvertes, il partait hors de l'ecran. La liste defile desormais
   seule, le panier reste collé en bas du tiroir.
   ================================================================== */
.nav-liste { list-style: none; margin: 0; padding: 0; }

/* sur ordinateur la liste ne doit pas creer de boite : les entrees
   restent des enfants directs de la barre de navigation */
@media (min-width: 901px) {
  .nav-liste { display: contents; }
}

@media (max-width: 900px) {
  .site-header__nav { padding-bottom: 20px; }
  .site-header__nav .nav-liste {
    flex: 1 1 auto;
    width: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .site-header__nav .nav-cart {
    flex: 0 0 auto;
    margin-top: 16px;
  }

  /* sous-categories repliees par defaut */
  .site-header__nav .menu-item-has-children { position: relative; }
  .site-header__nav .sub-menu { display: none; }
  .site-header__nav .menu-item-has-children.est-ouvert > .sub-menu { display: block; }

  /* la fleche, alignee sur la ligne du parent */
  .nav-deplier {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 58px;
    padding: 0;
    border: none;
    background: none;
    color: #000;
    cursor: pointer;
    transition: transform 0.18s ease;
  }
  .nav-deplier svg { width: 20px; height: 20px; }
  .menu-item-has-children.est-ouvert > .nav-deplier { transform: rotate(180deg); }
}

/* sur ordinateur, le sous-menu s'ouvre au survol : pas de fleche */
@media (min-width: 901px) {
  .nav-deplier { display: none; }
}

/* ==================================================================
   PAGE CLUBS SUR TELEPHONE
   Deux defauts corriges : le titre avait un interligne inferieur a sa
   propre taille de police, les deux lignes se chevauchaient ; et les
   rangees de trois passaient a deux colonnes, laissant le troisieme
   element seul avec un filet qui traversait toute la largeur.
   ================================================================== */
@media (max-width: 900px) {
  .clubs-chiffres { grid-template-columns: minmax(0, 1fr) !important; }
  .clubs-chiffres > div {
    border-right: none !important;
    border-bottom: 1px solid #E4E4E4;
    padding: 24px 2px !important;
  }
  .clubs-chiffres > div:last-child { border-bottom: none; }

  .clubs-offres { grid-template-columns: minmax(0, 1fr) !important; gap: 18px !important; }
}

/* =========================================================================
   Bandeau de consentement (2026-09-18)
   Barre basse, noire, dans la meme grammaire que le reste du site. Les deux
   boutons « refuser » et « accepter » ont strictement la meme apparence :
   la CNIL demande que refuser soit aussi facile qu'accepter.
   ====================================================================== */

.consent[hidden] { display: none !important; }

.consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9000;
  background: #000;
  color: #fff;
  border-top: 1px solid #2A2A2A;
}

.consent-boite {
  max-width: 1440px;
  margin: 0 auto;
  padding: 24px 32px;
  display: flex;
  align-items: flex-start;
  gap: 32px;
  flex-wrap: wrap;
}

.consent-texte { flex: 1 1 380px; min-width: 0; }

.consent-titre {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 10px;
}

.consent-texte p {
  margin: 0;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.7;
  color: #CFCFCF;
  max-width: 62ch;
}

.consent-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.consent-btn {
  appearance: none;
  border: 1px solid #fff;
  background: transparent;
  color: #fff;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 13px 22px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

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

.consent-lien {
  appearance: none;
  border: 0;
  background: none;
  color: #888;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 4px;
  padding: 13px 4px;
  cursor: pointer;
}

.consent-lien:hover { color: #fff; }

.consent-details {
  flex: 1 1 100%;
  border-top: 1px solid #2A2A2A;
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}

.consent-details[hidden] { display: none !important; }

.consent-choix {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.6;
  color: #CFCFCF;
  max-width: 62ch;
}

.consent-choix input { margin-top: 3px; flex: 0 0 auto; accent-color: #fff; }
.consent-choix strong { display: block; color: #fff; font-weight: 500; margin-bottom: 2px; }

@media (max-width: 900px) {
  .consent-boite { padding: 20px; gap: 18px; }
  .consent-texte { flex: 1 1 100%; }
  .consent-texte p { font-size: 12.5px; }
  .consent-actions { width: 100%; gap: 10px; }
  /* les deux boutons se partagent la largeur a parts egales : aucun des deux
     ne doit paraitre plus engageant que l'autre */
  .consent-actions .consent-btn { flex: 1 1 0; text-align: center; padding: 14px 10px; }
  .consent-lien { flex: 1 1 100%; text-align: center; padding: 6px 0 0; }
}

/* =========================================================================
   Photos en couleur (2026-09-18)
   Les images etaient desaturees a l'affichage. Elles sont rendues telles
   qu'elles ont ete prises, pour que les produits et les couleurs de grade
   ressortent.

   Sur la banniere de la page Univers, le titre blanc tenait grace a un
   assombrissement de toute l'image, qui la rendait terne une fois en couleur.
   Un degrade remplace cet assombrissement : la photo reste lumineuse en haut,
   et le texte garde son contraste en bas.
   ====================================================================== */

.hero-media { position: relative; }

.hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(0, 0, 0, 0.30) 0%,
    rgba(0, 0, 0, 0.10) 38%,
    rgba(0, 0, 0, 0.62) 100%);
  z-index: 1;
}