/* ======================================================================
   BLEDX — FINITIONS
   Charge APRES bledx.css, et c'est tout l'interet : ces regles corrigent
   des composants deja definis ailleurs. A specificite egale, le dernier
   arrive l'emporte — les placer avant reviendrait a ne les appliquer
   qu'a moitie.

   Aucun caractere esperluette litteral dans ce fichier.
   ====================================================================== */

/* ============================================================ LE RYTHME
   Une boutique parait soignee parce qu'elle respire. Tout ce bloc ne fait
   que poser de l'espace, et c'est lui qui fait le plus de travail. */
.bledx-container,
.bledx-store .ct-container,
.bledx-store .ct-container-full {
  width: min(100% - 2 * var(--bx-marge), var(--bx-max));
  margin-inline: auto;
}

.bledx-section,
.bledx-products-section,
.bledx-confidence,
.bledx-editorial,
.bledx-commerce-links,
.bledx-trust-strip { padding-block: var(--bx-section); }

.bledx-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 24px;
  margin-bottom: clamp(26px, 3.4vw, 46px);
}
.bledx-section-head h2 { margin: 0; }
.bledx-section-head p { margin: 0; color: var(--bx-sourd); max-width: 52ch; }

/* ============================================ LE BANDEAU D'ANNONCE
   Un filet sombre, un message, pas de defilement : un texte qui bouge se
   lit mal et fait bon marche. */
.bledx-announcement {
  height: auto;
  background: var(--bx-encre);
  color: #fff;
  border: 0;
  padding: 9px var(--bx-marge);
  overflow: hidden;
}
.bledx-announcement-track {
  animation: none !important;
  min-width: 0;
  justify-content: center;
  gap: 0;
  font-size: var(--bx-t-micro);
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: normal;
  text-align: center;
}
/* Le second exemplaire ne servait qu'a boucler le defilement. */
.bledx-announcement-track span:nth-child(2) { display: none; }
.bledx-announcement-track span::after { content: none; }

/* ==================================================== L'EN-TETE
   Blanc, colle en haut, un filet dessous. Rien d'autre. */
.bledx-store .ct-header {
  background: var(--bx-blanc);
  border-bottom: 1px solid var(--bx-trait);
}
.bledx-store [data-row="middle"] { --height: 72px; }
.bledx-store .site-title a {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--bx-encre);
  text-decoration: none;
}
.bledx-store .ct-header [data-id="menu"] > ul > li > a {
  font-size: 14px !important;
  font-weight: 500;
  text-transform: none !important;
  letter-spacing: 0;
  color: var(--bx-gris);
}
.bledx-store .ct-header [data-id="menu"] > ul > li > a:hover { color: var(--bx-encre); }

/* ==================================================== LE HEROS */
.bledx-hero {
  background: var(--bx-blanc);
  color: var(--bx-gris);
  padding-block: clamp(40px, 5vw, 76px);
}
.bledx-hero-grid { gap: clamp(28px, 4vw, 64px); align-items: center; }
.bledx-hero-copy h1 { margin: 14px 0 18px; }
.bledx-hero-text {
  font-size: var(--bx-t-grand);
  color: var(--bx-gris);
  max-width: 44ch;
  margin: 0 0 28px;
}
.bledx-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.bledx-hero-proof {
  border-top: 1px solid var(--bx-trait);
  padding-top: 20px;
  margin-top: 36px;
  gap: 8px 26px;
  font-size: var(--bx-t-micro) !important;
  font-weight: 500;
  letter-spacing: .05em;
  color: var(--bx-sourd);
}

/* Le produit a la une : la photo, sur un lit clair. */
.bledx-featured-product {
  background: var(--bx-voile);
  border: 0;
  border-radius: var(--bx-rayon);
  min-height: 0;
  aspect-ratio: 4 / 5;
  color: var(--bx-encre);
  overflow: hidden;
}
.bledx-featured-media { padding: clamp(18px, 3vw, 48px) clamp(18px, 3vw, 48px) 96px; }
.bledx-featured-media img { width: min(86%, 520px); filter: none; }
.bledx-featured-meta {
  left: clamp(16px, 2.4vw, 28px);
  right: clamp(16px, 2.4vw, 28px);
  bottom: clamp(16px, 2.4vw, 24px);
  align-items: center;
  color: var(--bx-encre);
}
.bledx-featured-meta h2,
.bledx-featured-meta strong { color: var(--bx-encre); font-size: 19px; letter-spacing: -.02em; }
.bledx-featured-meta .bledx-kicker { color: var(--bx-sourd); }
.bledx-featured-price { font-size: 15px !important; font-weight: 600; color: var(--bx-encre); }
.bledx-featured-meta .bledx-button {
  background: var(--bx-encre);
  color: #fff;
  min-height: 44px;
  padding: 12px 20px;
  font-size: 14px;
  border-radius: var(--bx-rayon);
}

/* ============================================== LA CARTE PRODUIT
   Une photo large sur fond clair, un nom, un prix. Pas de cadre, pas de
   bouton : toute la carte est le lien. C'est ce qui fait respirer une
   grille de seize pieces. */
.bledx-store ul.products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 2.6vw, 40px) var(--bx-gouttiere);
  list-style: none;
  margin: 0;
  padding: 0;
}
.bledx-store ul.products > li {
  width: auto !important;
  margin: 0 !important;
  float: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: none;
}
.bledx-store ul.products .ct-media-container,
.bledx-store ul.products .woocommerce-LoopProduct-link > img,
.bledx-store ul.products figure {
  background: var(--bx-voile);
  border-radius: var(--bx-rayon);
  overflow: hidden;
  margin: 0 0 14px;
}
.bledx-store ul.products img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
  height: auto;
  transition: transform .5s var(--bx-ease);
}
.bledx-store ul.products > li:hover img { transform: scale(1.03); }

.bledx-store ul.products .woocommerce-loop-product__title,
.bledx-store ul.products .ct-woo-card-title {
  font-size: 15px !important;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0;
  margin: 0 0 4px;
}
.bledx-store ul.products .woocommerce-loop-product__title a,
.bledx-store ul.products .ct-woo-card-title a { color: var(--bx-encre); text-decoration: none; }
.bledx-store ul.products .price {
  font-size: 15px !important;
  font-weight: 500;
  color: var(--bx-gris);
}
.bledx-store ul.products .price bdi,
.bledx-store ul.products .price .woocommerce-Price-currencySymbol { color: var(--bx-gris); }

/* La categorie sous chaque carte repetait « Anime » seize fois, et le
   bouton dupliquait le lien de la carte. Les deux partent : la grille
   se lit d'un coup d'oeil. */
.bledx-store ul.products .ct-woo-card-extra,
.bledx-store ul.products [class*="ct-term-"],
.bledx-store ul.products .meta-categories,
.bledx-store ul.products .add_to_cart_button,
.bledx-store ul.products .product_type_variable,
.bledx-store ul.products .added_to_cart { display: none !important; }

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

/* ================================================== LES UNIVERS
   Des tuiles avec une vraie photo du catalogue : sur une boutique, une
   categorie se montre, elle ne se decrit pas. Un univers sans piece n'a
   pas de photo — il le dit et ne prend pas le clic. */
.bledx-world-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--bx-gouttiere);
  background: none;
  border: 0;
}
.bledx-world-card {
  position: relative;
  display: block;
  min-height: 0;
  aspect-ratio: 3 / 4;
  padding: 0;
  border: 0;
  border-radius: var(--bx-rayon);
  overflow: hidden;
  background: var(--bx-voile);
  text-decoration: none;
}
.bledx-world-card::before { display: none; }
.bledx-world-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--bx-ease);
}
.bledx-world-card:hover .bledx-world-photo { transform: scale(1.04); }
/* Un voile sombre en bas, pour que le nom reste lisible quelle que soit
   la photo. Sans lui, un t-shirt clair rendrait le titre invisible. */
.bledx-world-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 62%;
  background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, .18) 55%, transparent);
  pointer-events: none;
}
.bledx-world-top {
  position: absolute;
  top: 14px; left: 14px; right: 14px;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
}
.bledx-world-top > span:first-child { display: none; }   /* la numerotation n'apprend rien */
.bledx-world-pill {
  background: rgba(255, 255, 255, .94);
  border: 0;
  border-radius: 999px;
  padding: 5px 11px;
  color: var(--bx-encre);
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.bledx-world-bottom {
  position: absolute;
  left: 16px; right: 16px; bottom: 14px;
  z-index: 2;
}
.bledx-world-bottom h3 {
  font-size: clamp(18px, 1.5vw, 24px);
  line-height: 1.1;
  margin: 0;
  color: #fff;
  -webkit-text-stroke: 0;
  letter-spacing: -.01em;
}
.bledx-world-bottom p { color: rgba(255, 255, 255, .88); margin: 5px 0 0; max-width: 30ch; }

/* Un univers vide : pas de photo, pas de voile, pas de clic. */
.bledx-world-vide { cursor: default; }
.bledx-world-vide::after { display: none; }
.bledx-world-vide .bledx-world-bottom h3 { color: var(--bx-encre); }
.bledx-world-vide .bledx-world-bottom p { color: var(--bx-sourd); }
.bledx-world-vide .bledx-world-pill { background: var(--bx-blanc); color: var(--bx-sourd); }

@media (max-width: 900px) { .bledx-world-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* =========================================== LA RANGEE DE REASSURANCE */
.bledx-trust-strip { border-block: 1px solid var(--bx-trait); padding-block: clamp(26px, 3vw, 40px); }
.bledx-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 38px);
}
.bledx-trust-grid > div { border: 0 !important; min-height: 0; }
.bledx-trust-grid strong {
  display: block;
  font-size: var(--bx-t-micro);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bx-encre);
  margin-bottom: 5px;
}
.bledx-trust-grid span { font-size: 14px !important; color: var(--bx-sourd); line-height: 1.5; }
@media (max-width: 820px) { .bledx-trust-grid { grid-template-columns: 1fr 1fr; } }

/* ====================================== LA RANGEE DE LIENS DE SERVICE */
.bledx-commerce-links { border-bottom: 1px solid var(--bx-trait); padding-block: 0; }
.bledx-commerce-links-grid { border-left: 1px solid var(--bx-trait); }
.bledx-commerce-links-grid a {
  border-right: 1px solid var(--bx-trait) !important;
  border-bottom: 0 !important;
  min-height: 68px;
  font-size: 14px !important;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bx-encre);
  text-decoration: none;
}
.bledx-commerce-links-grid a span { display: none; }   /* la numerotation 01-04 */
.bledx-commerce-links-grid a b { color: var(--bx-sourd); font-weight: 400; }
.bledx-commerce-links-grid a:hover { background: var(--bx-voile); }

/* ================================================== LE BLOC EDITORIAL */
.bledx-editorial { background: var(--bx-voile); }
.bledx-editorial-grid { gap: var(--bx-gouttiere); }
.bledx-editorial-main {
  background: var(--bx-blanc);
  border: 0;
  border-radius: var(--bx-rayon);
  min-height: 0;
  padding: clamp(28px, 4vw, 56px);
  color: var(--bx-gris);
  justify-content: center;
}
.bledx-editorial-main h2 { font-size: clamp(26px, 2.6vw, 40px); color: var(--bx-encre); margin: 12px 0 16px; }
.bledx-editorial-main p { font-size: 16px !important; color: var(--bx-gris); max-width: 52ch; margin-bottom: 26px; }
.bledx-editorial-side > a {
  min-height: 0;
  aspect-ratio: 16 / 9;
  background: var(--bx-blanc);
  border: 0;
  border-radius: var(--bx-rayon);
  padding: clamp(20px, 2.6vw, 32px);
  justify-content: center;
}
.bledx-editorial-side > a:hover { background: var(--bx-encre); }
.bledx-editorial-side > a:hover h3,
.bledx-editorial-side > a:hover .bledx-kicker { color: #fff; }
.bledx-editorial-side > a h3 { margin: 6px 0 0; color: var(--bx-encre); }

/* ================================================ ACHETER EN CONFIANCE */
.bledx-confidence { background: var(--bx-blanc); }
.bledx-confidence-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(22px, 2.6vw, 40px);
}
.bledx-confidence-grid > div {
  border: 0 !important;
  border-top: 1px solid var(--bx-encre) !important;
  padding-top: 18px;
  min-height: 0 !important;
}
.bledx-confidence-grid > div > span {
  font-size: var(--bx-t-micro);
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--bx-sourd);
}
.bledx-confidence-grid h3 { margin: 10px 0 8px !important; font-size: 19px; }
.bledx-confidence-grid p { font-size: 14px; color: var(--bx-gris); margin: 0; }
@media (max-width: 820px) { .bledx-confidence-grid { grid-template-columns: 1fr 1fr; } }

/* ================================================== LA FICHE PRODUIT */
.bledx-store.single-product .entry-summary .price {
  font-size: 22px !important;
  font-weight: 500;
  color: var(--bx-encre);
}
.bledx-store.single-product .product_title { margin-bottom: 10px; }

.bledx-pdp-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 18px;
  font-size: var(--bx-t-micro);
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--bx-sourd);
}
.bledx-pdp-trust a {
  color: var(--bx-encre);
  text-decoration: underline;
  text-underline-offset: .3em;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}
.bledx-pdp-trust a:hover { color: var(--bx-sang); }

/* La fiche technique, rendue par inc/product-data.php. */
.bledx-product-confidence {
  margin: 26px 0;
  border-top: 1px solid var(--bx-trait);
  padding: 4px 0 0;
  background: none;
  border-radius: 0;
}
.bledx-product-confidence-grid { display: grid; gap: 0; }
.bledx-product-confidence-grid > div {
  display: grid;
  grid-template-columns: minmax(96px, 26%) 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--bx-trait);
}
.bledx-product-confidence-grid span {
  font-size: var(--bx-t-micro);
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--bx-sourd);
}
.bledx-product-confidence-grid strong { font-size: 15px; font-weight: 400; color: var(--bx-encre); }
.bledx-product-confidence p { font-size: 14px; color: var(--bx-sourd); margin: 12px 0 0; }

.bledx-card-product-facts { font-size: var(--bx-t-micro); color: var(--bx-sourd); margin: 2px 0 4px; }

/* L'entretien, sous la fiche. */
.bledx-product-extra-facts {
  padding-block: var(--bx-section);
  border-top: 1px solid var(--bx-trait);
  background: var(--bx-voile);
}
.bledx-product-extra-facts .bledx-container {
  display: grid;
  gap: clamp(18px, 2.4vw, 32px);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.bledx-product-extra-facts article {
  border: 0;
  padding: 0;
  background: none;
  border-radius: 0;
}
.bledx-product-extra-facts p { margin: 8px 0 0; color: var(--bx-gris); max-width: 62ch; }

/* ============================================== L'ECHELLE DE PRIX
   Le bloc « plus tu en prends, moins c'est cher » sortait en liste a
   puces brute. C'est pourtant l'element qui fait passer le panier de une
   a deux pieces : on le pose comme un tableau de tarifs, chiffres
   alignes, l'economie a droite. */
.bledx-pack {
  margin: 22px 0 26px;
  border: 1px solid var(--bx-trait);
  border-radius: var(--bx-rayon);
  padding: 16px 18px 6px;
  background: var(--bx-voile);
}
.bledx-pack-t {
  display: block;
  font-size: var(--bx-t-micro);
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--bx-sourd);
  margin-bottom: 8px;
}
.bledx-pack ul { list-style: none; margin: 0; padding: 0; }
.bledx-pack li {
  display: grid;
  grid-template-columns: 2.2em 1fr auto;
  align-items: baseline;
  gap: 3px 12px;
  padding: 11px 0;
  border-top: 1px solid var(--bx-trait);
  font-variant-numeric: tabular-nums;
}
.bledx-pack li:first-child { border-top: 0; }
.bledx-pack li b { font-size: 17px; font-weight: 600; color: var(--bx-encre); }
.bledx-pack li b::after { content: " ×"; font-size: 13px; font-weight: 400; color: var(--bx-sourd); }
.bledx-pack li > span { font-size: 16px; font-weight: 600; color: var(--bx-encre); }
.bledx-pack li em {
  grid-column: 2; grid-row: 2;
  font-style: normal; font-size: 13px; color: var(--bx-sourd);
}
.bledx-pack li i {
  grid-column: 3; grid-row: 1 / span 2;
  align-self: center;
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  color: var(--bx-sang);
  white-space: nowrap;
}
.bledx-pack-n { font-size: 13px; color: var(--bx-sourd); margin: 10px 0 12px; }

/* ============================================ LA PAGE DE REMERCIEMENT */
.bledx-thankyou-steps {
  list-style: none; margin: 18px 0 0; padding: 0;
  display: grid; gap: 0;
  border-top: 1px solid var(--bx-trait);
}
.bledx-thankyou-steps li { padding: 14px 0; border-bottom: 1px solid var(--bx-trait); line-height: 1.5; }
.bledx-thankyou-steps strong { color: var(--bx-encre); display: block; }

/* =========================================================== ARCHIVES */
.bledx-archive-worlds {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 clamp(22px, 3vw, 36px);
}
.bledx-archive-worlds a,
.bledx-archive-worlds span {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  min-width: 24px;
  padding: 8px 16px;
  border: 1px solid var(--bx-trait-fort);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bx-gris);
  text-decoration: none;
}
.bledx-archive-worlds a:hover { border-color: var(--bx-encre); color: var(--bx-encre); }
.bledx-archive-worlds a[aria-current="page"] {
  background: var(--bx-encre); border-color: var(--bx-encre); color: #fff;
}
.bledx-archive-worlds .est-vide { color: var(--bx-sourd); border-style: dashed; cursor: default; }
.bledx-archive-worlds .est-vide::after { content: " · bientôt"; }

.bledx-store .page-title,
.bledx-store .hero-section { background: var(--bx-blanc); }

/* ====================================================== LE PIED DE PAGE */
.ct-footer [data-row="bottom"],
.ct-footer-copyright { display: none !important; }

.bledx-pied {
  background: var(--bx-blanc);
  border-top: 1px solid var(--bx-trait);
  padding: var(--bx-section) 0 clamp(22px, 3vw, 34px);
  color: var(--bx-gris);
}
.bledx-pied-haut {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 28px;
  padding-bottom: clamp(24px, 3vw, 38px);
}
.bledx-pied-marque {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--bx-encre);
  text-decoration: none;
  line-height: 1;
}
.bledx-pied-haut p { margin: 0; max-width: 48ch; font-size: 14px; color: var(--bx-sourd); }

.bledx-pied-grille {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(22px, 3vw, 44px);
  padding-bottom: clamp(28px, 3.4vw, 44px);
}
.bledx-pied-col h2 {
  font-size: var(--bx-t-micro);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bx-encre);
  margin: 0 0 10px;
}
.bledx-pied-col ul { list-style: none; margin: 0; padding: 0; }
.bledx-pied-col a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  min-width: 24px;
  font-size: 14px;
  color: var(--bx-gris);
  text-decoration: none;
}
.bledx-pied-col a:hover { color: var(--bx-encre); text-decoration: underline; text-underline-offset: .22em; }

.bledx-pied-preuves {
  list-style: none; margin: 0;
  padding: clamp(16px, 2vw, 22px) 0;
  border-top: 1px solid var(--bx-trait);
  display: flex; flex-wrap: wrap; gap: 10px 28px;
  font-size: var(--bx-t-micro);
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--bx-sourd);
}
.bledx-pied-bas {
  display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center;
  padding-top: clamp(14px, 2vw, 20px);
  border-top: 1px solid var(--bx-trait);
  font-size: 13px;
  color: var(--bx-sourd);
}
.bledx-pied-bas a {
  color: var(--bx-gris);
  display: inline-flex; align-items: center; min-height: 30px; min-width: 24px;
  text-decoration: none;
}
.bledx-pied-bas a:hover { color: var(--bx-encre); text-decoration: underline; }

@media (max-width: 860px) { .bledx-pied-grille { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .bledx-pied-grille { grid-template-columns: 1fr; gap: 22px; } }

/* ============================================== L'ACCES AU PANIER */
.bledx-menu-panier .bledx-lien-panier {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding-inline: 4px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  color: var(--bx-encre);
}
.bledx-pastille {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--bx-voile);
  border: 1px solid var(--bx-trait);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--bx-sourd);
}
.est-plein .bledx-pastille { background: var(--bx-encre); border-color: var(--bx-encre); color: #fff; }

/* La barre du bas, sur telephone. */
.bledx-mobile-store-nav {
  background: rgba(255, 255, 255, .97) !important;
  border-top: 1px solid var(--bx-trait) !important;
  backdrop-filter: saturate(180%) blur(8px);
}
.bledx-mobile-store-nav a {
  min-height: 62px;
  gap: 4px;
  color: var(--bx-gris) !important;
  font-size: var(--bx-t-micro) !important;
  font-weight: 500 !important;
  letter-spacing: .03em !important;
  text-transform: none;
}
.bledx-mobile-store-nav .bledx-pastille { min-width: 18px; height: 18px; font-size: 11px; }

/* La barre d'action de la fiche produit. */
.bledx-barre-produit {
  position: fixed;
  z-index: 520;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px var(--bx-marge);
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .97);
  backdrop-filter: saturate(180%) blur(8px);
  border-top: 1px solid var(--bx-trait);
}
.bledx-barre-produit[hidden] { display: none; }
.bledx-barre-panier {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 48px;
  min-height: 48px;
  color: var(--bx-gris);
  text-decoration: none;
}
.bledx-barre-panier .bledx-pastille { min-width: 18px; height: 18px; font-size: 11px; }
.bledx-barre-produit-prix {
  min-width: 0;
  flex: 0 0 auto;
  display: grid;
  align-content: center;
  padding-inline: 4px;
}
.bledx-barre-produit-prix span,
.bledx-barre-produit-prix span * {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--bx-encre);
}
.bledx-barre-produit-prix span,
.bledx-barre-produit-prix bdi { display: inline-block; white-space: nowrap; }
.bledx-barre-produit .bledx-barre-produit-action {
  flex: 1 1 auto;
  min-height: 48px;
  padding: 13px 20px;
  border: 0;
  border-radius: var(--bx-rayon);
  background: var(--bx-encre);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  cursor: pointer;
  touch-action: manipulation;
}
.bledx-barre-produit .bledx-barre-produit-action[disabled] {
  background: var(--bx-voile);
  color: var(--bx-sourd);
  border: 1px solid var(--bx-trait);
  cursor: not-allowed;
}
@media (max-width: 400px) {
  .bledx-barre-produit { gap: 8px; padding-inline: 12px; }
  .bledx-barre-produit .bledx-barre-produit-action { padding-inline: 12px; font-size: 14px; }
}
@media (min-width: 721px) { .bledx-barre-produit { display: none; } }

/* ======================================== LE TUNNEL DE COMMANDE
   Le champ « Etat/Comte » : le Checkout Block ne retient de la locale que
   la cle « required ». Le renommer ou le declarer masque cote PHP n'a
   aucun effet. La zone d'expedition est nationale et le livreur travaille
   avec la ville, l'adresse et le telephone : ce champ ne sert a rien. */
.woocommerce-checkout .wc-block-components-state-input { display: none; }

/* ================================================ DIVERS HERITAGE
   Ce qui restait pense pour un fond sombre. */
.bledx-about-page,
.bledx-about-hero,
.bledx-about-code,
.bledx-about-process,
.bledx-about-not,
.bledx-about-final,
.bledx-about-promise,
.bledx-about-statement,
.bledx-search-hero,
.bledx-info-page { background: var(--bx-blanc); color: var(--bx-gris); }

.bledx-about-signal,
.bledx-about-world-canvas,
.bledx-about-world-lab {
  background: var(--bx-voile);
  border: 0;
  border-radius: var(--bx-rayon);
  color: var(--bx-gris);
}
.bledx-about-signal h1,
.bledx-about-signal h2,
.bledx-about-signal h3,
.bledx-about-signal strong { color: var(--bx-encre); }
.bledx-about-signal .bledx-kicker { color: var(--bx-sourd); }
.bledx-about-final-mark { color: var(--bx-trait); }
.bledx-about-code-card,
.bledx-about-process-step {
  border: 1px solid var(--bx-trait);
  border-radius: var(--bx-rayon);
  background: var(--bx-blanc);
}
.bledx-about-code-card span,
.bledx-about-process-step div,
.bledx-about-not span { color: var(--bx-sourd); }

#woo-cart-panel .ct-panel-inner { background: var(--bx-blanc); color: var(--bx-gris); }

/* ================================================ DEUX CORRECTIFS MESURES

   1. Blocksy pose « style="aspect-ratio: 4/3" » EN LIGNE sur chaque image
      de carte produit. Un style en ligne bat toutes les feuilles : la
      regle carree perdait en silence, et les photos carrees etaient
      recadrees en paysage. Il faut !important pour reprendre la main.

   2. Le nom et le prix se suivaient sur la meme ligne — « Colossal Titan
      Tee 199,00 DH » — parce que le titre est en inline-block et le prix
      en inline. Chacun sa ligne. */
.bledx-store ul.products img {
  aspect-ratio: 1 / 1 !important;
  object-fit: cover;
}
.bledx-store ul.products .woocommerce-loop-product__title,
.bledx-store ul.products .ct-woo-card-title,
.bledx-store ul.products .price {
  display: block;
  width: 100%;
}
.bledx-store ul.products .woocommerce-loop-product__title a { display: block; }

/* La bande de reassurance : elle etait noire, avec du texte sombre
   dessus — 158 px de hauteur pour quatre phrases invisibles. */
.bledx-trust-strip {
  background: var(--bx-blanc);
  border-top: 1px solid var(--bx-trait);
  border-bottom: 1px solid var(--bx-trait);
}

/* ============================================ TROIS CORRECTIFS MESURES

   1. La vignette produit : le <figure> ET le <a.ct-media-container> qu'il
      contient recevaient tous deux « margin-bottom: 14px ». La marge du
      second se retrouvait DANS le premier, dont le fond clair depassait
      sous la photo — une bande grise sur chaque carte. Un seul des deux
      porte la marge.

   2. Le conteneur imposait un rapport 4/5 pendant que la photo etait
      carree : le recadrage venait du conteneur, pas de l'image. Les deux
      sont carres maintenant.

   3. Les boutons heritaient de « text-transform: uppercase », la voix de
      l'ancienne direction. « Decouvrir le drop » se lit mieux que
      « DECOUVRIR LE DROP ». */
.bledx-store ul.products figure { margin: 0 0 14px; background: none; border-radius: 0; }
.bledx-store ul.products .ct-media-container {
  margin: 0 !important;
  aspect-ratio: 1 / 1 !important;
  display: block;
  background: var(--bx-voile);
  border-radius: var(--bx-rayon);
  overflow: hidden;
}
.bledx-store ul.products .ct-media-container img { height: 100% !important; }
.bledx-store ul.products .entry-meta,
.bledx-store ul.products .ct-woo-card-actions { display: none !important; }

.bledx-store .bledx-button,
.bledx-store .button,
.bledx-store button.button,
.bledx-store .wp-element-button,
.bledx-store .single_add_to_cart_button,
.bledx-store .checkout-button,
.bledx-store .wc-block-components-button:not(.is-link),
.bledx-button-primary,
.bledx-button-secondary,
.bledx-button-acid {
  text-transform: none !important;
  letter-spacing: .01em !important;
  font-weight: 600;
  border-radius: var(--bx-rayon);
}
.bledx-button-acid { background: var(--bx-encre); color: #fff; }
.bledx-button-acid:hover { background: #2f2f2f; color: #fff; }

/* ================================================ L'UNIVERS SANS PIECE
   Trois tuiles vides sur quatre, ca ne dit pas « bientot », ca dit
   « boutique inachevee ». On assume : un cadre discret, le nom au centre,
   un mot. C'est calme et c'est vrai. */
.bledx-world-vide {
  background: var(--bx-blanc);
  border: 1px solid var(--bx-trait);
  display: grid;
  place-content: center;
  text-align: center;
  padding: 20px;
}
.bledx-world-vide .bledx-world-top { position: static; justify-content: center; margin-bottom: 10px; }
.bledx-world-vide .bledx-world-pill {
  background: none;
  border: 1px solid var(--bx-trait);
  color: var(--bx-sourd);
}
.bledx-world-vide .bledx-world-bottom { position: static; left: auto; right: auto; bottom: auto; }
.bledx-world-vide .bledx-world-bottom h3 { color: var(--bx-encre); }
.bledx-world-vide .bledx-world-bottom p { color: var(--bx-sourd); margin-inline: auto; }

/* ====================================== LE CADRE DU PRODUIT A LA UNE
   Les photos produit ont un fond blanc. Posees sur le gris clair de la
   tuile, elles dessinaient un rectangle blanc dans un rectangle gris —
   une boite dans une boite. La tuile passe au blanc : la photo et son
   cadre ne font plus qu'un, et un filet suffit a delimiter. */
.bledx-featured-product {
  background: var(--bx-blanc);
  border: 1px solid var(--bx-trait);
  aspect-ratio: auto;
  min-height: clamp(420px, 44vw, 620px);
}
.bledx-featured-media { padding: clamp(16px, 2.4vw, 36px) clamp(16px, 2.4vw, 36px) 104px; }
.bledx-featured-media img { width: min(92%, 560px); }

/* Sur telephone, le bloc d'information passe sous la photo plutot que
   par-dessus : a 390 px il la recouvrait. */
@media (max-width: 720px) {
  .bledx-featured-product { min-height: 0; }
  .bledx-featured-media { position: static; padding: 16px 16px 4px; }
  .bledx-featured-meta {
    position: static;
    display: grid;
    gap: 12px;
    padding: 0 16px 18px;
  }
  .bledx-featured-meta .bledx-button { justify-self: start; }
}

/* Le bloc editorial : le texte etait colle en bas d'un cadre tres haut. */
.bledx-editorial-main { justify-content: center; align-items: flex-start; }
.bledx-editorial-side { align-content: stretch; }

/* ================================================== LES ONGLETS PRODUIT
   Ils sortaient en petites capitales rouges. En casse normale, souligne
   par un trait d'encre, ils ressemblent enfin a une navigation. */
.bledx-store .woocommerce-tabs .tabs,
.bledx-store .wc-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 28px;
  border-bottom: 1px solid var(--bx-trait);
  margin: 0 0 clamp(22px, 3vw, 34px);
  padding: 0;
  list-style: none;
}
.bledx-store .woocommerce-tabs .tabs li,
.bledx-store .wc-tabs li { border: 0; background: none; margin: 0; padding: 0; }
.bledx-store .woocommerce-tabs .tabs li a,
.bledx-store .wc-tabs li a {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0;
  font-size: 15px !important;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bx-sourd);
  border-bottom: 2px solid transparent;
  text-decoration: none;
}
.bledx-store .woocommerce-tabs .tabs li.active a,
.bledx-store .wc-tabs li.active a {
  color: var(--bx-encre);
  border-bottom-color: var(--bx-encre);
}
.bledx-store .woocommerce-tabs .tabs li a:hover,
.bledx-store .wc-tabs li a:hover { color: var(--bx-encre); }
.bledx-store .woocommerce-Tabs-panel { color: var(--bx-gris); max-width: 76ch; }
.bledx-store .woocommerce-Tabs-panel h2 { display: none; }   /* double le libelle de l'onglet */

/* L'entretien : une bande pleine largeur pour deux lignes de texte
   laissait les trois quarts de l'ecran vides. On borne la colonne. */
.bledx-product-extra-facts .bledx-container {
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  max-width: min(100% - 2 * var(--bx-marge), 1000px);
}
.bledx-product-extra-facts article { max-width: 62ch; }

/* Le fil d'Ariane : casse normale, gris discret. */
.bledx-breadcrumb,
.bledx-store .ct-breadcrumbs {
  font-size: 13px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--bx-sourd);
}
.bledx-breadcrumb a,
.bledx-store .ct-breadcrumbs a { color: var(--bx-sourd); text-decoration: none; }
.bledx-breadcrumb a:hover,
.bledx-store .ct-breadcrumbs a:hover { color: var(--bx-encre); text-decoration: underline; }

/* La categorie sous le bouton, et le bandeau de reassurance : des
   pastilles discretes plutot que des capitales encadrees. */
.bledx-store .product_meta { font-size: 13px; color: var(--bx-sourd); text-transform: none; }
.bledx-store .product_meta a { color: var(--bx-gris); }

/* ==================================================== TROIS RATTRAPAGES

   1. La tuile d'univers qui porte une photo garde un fond d'encre : si la
      photo ne charge pas — 4G qui decroche, economiseur de donnees — le
      titre blanc resterait lisible au lieu de disparaitre.
   2. Le lien de titre d'une carte produit faisait 169 x 20 px, et la
      marque du pied de page 73 x 22. Le minimum est 24 px de haut.
   3. La grande signature de la page « a propos » etait a 1,25:1. */
.bledx-world-card:not(.bledx-world-vide) { background: #131313; }

.bledx-store ul.products .woocommerce-loop-product__title a,
.bledx-store ul.products .ct-woo-card-title a,
.bledx-pied-marque {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
}
.bledx-about-final-mark { color: #949490; }   /* 3,1:1 sur blanc, mesure */

/* La page « a propos » : ses titres restent en encre apres le passage au
   clair, le texte courant en gris. */
.bledx-about-page h1,
.bledx-about-page h2,
.bledx-about-page h3,
.bledx-about-page strong,
.bledx-about-statement-body .bledx-about-lead { color: var(--bx-encre); }
.bledx-about-page .bledx-kicker { color: var(--bx-sourd); }

/* Le fil d'Ariane maison : 43 x 19 px par lien, sous les 24 exiges. */
.bledx-breadcrumb a,
.bledx-breadcrumb span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  min-width: 24px;
}

/* ============================================ L'EN-TETE D'ARCHIVE
   Le titre sortait dans un bloc blanc pose sur une bande grise : une
   boite dans une boite, et 240 px avant le premier produit. Une bande
   blanche, un filet, et on arrive tout de suite au catalogue. */
.bledx-store .page-title,
.bledx-store .hero-section {
  background: var(--bx-blanc) !important;
  border-bottom: 1px solid var(--bx-trait);
  padding-block: clamp(26px, 3.4vw, 52px) !important;
}
.bledx-store .page-title .entry-title,
.bledx-store .hero-section .entry-title {
  background: none !important;
  padding: 0 !important;
  margin: 0;
  font-size: clamp(26px, 2.6vw, 40px);
}

/* Le tri : un champ discret, pas un cadre de formulaire. */
.bledx-store .woocommerce-ordering select,
.bledx-store .ct-sorting-widget select {
  min-height: 40px;
  padding: 6px 30px 6px 12px;
  font-size: 14px;
  border: 1px solid var(--bx-trait);
  background-color: var(--bx-blanc);
}
.bledx-store .woocommerce-result-count {
  font-size: 13px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--bx-sourd);
}

/* ============================================================
   PAR SÉRIE — refonte du 2026-10-04
   Remplace « Shopper par univers » (trois univers vides sur quatre).
   Un fan achète par série : One Piece, Jujutsu Kaisen, Attack on Titan…
   Jetons uniquement, aucune couleur en dur. Spécificité volontairement
   haute (.bledx-home .bledx-series …) : la grille WooCommerce de Blocksy
   pose ses propres règles sur ul.products, une classe seule perdrait.
   ============================================================ */
.bledx-home .bledx-series .bledx-series-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 clamp(28px, 4vw, 44px);
}
.bledx-home .bledx-series .bledx-series-nav a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--bx-trait-fort);
  border-radius: 999px;
  color: var(--bx-encre);
  font-size: var(--bx-t-corps);
  font-weight: 600;
  text-decoration: none;
  transition: background-color .2s var(--bx-ease), color .2s var(--bx-ease), border-color .2s var(--bx-ease);
}
.bledx-home .bledx-series .bledx-series-nav a span {
  color: var(--bx-sourd);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.bledx-home .bledx-series .bledx-series-nav a:hover,
.bledx-home .bledx-series .bledx-series-nav a:focus-visible {
  background: var(--bx-encre);
  border-color: var(--bx-encre);
  color: var(--bx-blanc);
}
.bledx-home .bledx-series .bledx-series-nav a:hover span,
.bledx-home .bledx-series .bledx-series-nav a:focus-visible span {
  color: var(--bx-blanc);
}
.bledx-home .bledx-series .bledx-series-block {
  scroll-margin-top: 96px;
  padding-top: clamp(24px, 3vw, 36px);
  border-top: 1px solid var(--bx-trait);
}
.bledx-home .bledx-series .bledx-series-block + .bledx-series-block {
  margin-top: clamp(32px, 4vw, 52px);
}
.bledx-home .bledx-series .bledx-series-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.bledx-home .bledx-series .bledx-series-head h3 {
  margin: 0;
  font-size: var(--bx-t-h);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--bx-encre);
}
.bledx-home .bledx-series .bledx-series-head span {
  color: var(--bx-sourd);
  font-size: var(--bx-t-libelle);
}
.bledx-home .bledx-series ul.products.bledx-series-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--bx-gouttiere);
  margin: 0;
}
.bledx-home .bledx-series ul.products.bledx-series-rail::before,
.bledx-home .bledx-series ul.products.bledx-series-rail::after {
  display: none;
}
/* Plus de quatre pièces : pas de carte orpheline sur une seconde ligne
   (One Piece en a cinq — la cinquième restait seule, ça fait négligé).
   La rangée défile, et la carte suivante dépasse d'un quart pour dire
   qu'il y en a d'autres. Sans :has(), on retombe sur la grille simple. */
.bledx-home .bledx-series ul.products.bledx-series-rail:has(> li:nth-child(5)) {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3 * var(--bx-gouttiere)) / 4.3);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding-bottom: 10px;
}
.bledx-home .bledx-series ul.products.bledx-series-rail:has(> li:nth-child(5)) > li {
  scroll-snap-align: start;
}
/* Téléphone : une rangée qu'on fait défiler au pouce, cartes à 72 %
   pour que la suivante dépasse et dise qu'il y en a d'autres. */
@media (max-width: 768px) {
  .bledx-home .bledx-series ul.products.bledx-series-rail {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 72%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
  }
  /* même spécificité que la règle :has() ci-dessus, sinon elle gagnerait
     sur téléphone et la série One Piece aurait des cartes à 23 % */
  .bledx-home .bledx-series ul.products.bledx-series-rail:has(> li:nth-child(5)) {
    grid-auto-columns: 72%;
  }
  .bledx-home .bledx-series ul.products.bledx-series-rail > li {
    scroll-snap-align: start;
  }
  .bledx-home .bledx-series .bledx-series-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-right: calc(-1 * var(--bx-marge));
    padding-right: var(--bx-marge);
  }
  .bledx-home .bledx-series .bledx-series-nav a {
    flex: 0 0 auto;
  }
}

/* =====================================================================
   LA COUCHE D'INTERACTION (2026-10-04)
   Pilotée par assets/js/bledx-boutique.js. Sans le script, aucune de ces
   classes n'existe et la fiche garde ses listes déroulantes d'origine.
   ===================================================================== */
:root {
  --bx-ease-sortie: cubic-bezier(.23, 1, .32, 1);   /* réponse immédiate */
  --bx-ease-tiroir: cubic-bezier(.32, .72, 0, 1);   /* panneau qui monte */
  --bx-ombre-flottante: 0 18px 48px -12px color-mix(in srgb, var(--bx-encre) 22%, transparent),
                        0 2px 6px color-mix(in srgb, var(--bx-encre) 6%, transparent);
}

/* ------------------------------------------------- LE CHOIX DE TAILLE */
.bledx-choix-actif table.variations,
.bledx-choix-actif table.variations tbody { display: block; }
.bledx-choix-actif table.variations tr {
  display: block;
  margin: 0 0 18px;
}
.bledx-choix-actif table.variations th,
.bledx-choix-actif table.variations td {
  display: block;
  padding: 0;
  border: 0;
}
.bledx-choix-actif table.variations th.label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
}
.bledx-choix-actif table.variations th label {
  margin: 0;
  font-size: var(--bx-t-libelle);
  font-weight: 600;
  color: var(--bx-encre);
}
.bledx-attr-etat {
  font-size: var(--bx-t-libelle);
  color: var(--bx-sourd);
}
.bledx-attr-etat::before { content: "· "; }
tr.est-choisi .bledx-attr-etat { color: var(--bx-encre); font-weight: 600; }

/* La vraie liste reste dans le formulaire, invisible : c'est elle que
   WooCommerce lit pour trouver la variante. */
.bledx-select-pilote {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.bledx-choix-actif .reset_variations { display: none !important; }

.bledx-pastilles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-radius: var(--bx-rayon);
}
.bledx-store .bledx-pastilles .bledx-pastille-choix {
  min-width: 56px;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid var(--bx-trait-fort);
  border-radius: var(--bx-rayon);
  background: var(--bx-blanc);
  color: var(--bx-encre);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  text-transform: none;
  box-shadow: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 150ms ease-out, color 150ms ease-out,
              border-color 150ms ease-out, transform 160ms var(--bx-ease-sortie);
}
@media (hover: hover) and (pointer: fine) {
  .bledx-store .bledx-pastilles .bledx-pastille-choix:hover { border-color: var(--bx-encre); }
}
.bledx-store .bledx-pastilles .bledx-pastille-choix:active { transform: scale(.96); }
.bledx-store .bledx-pastilles .bledx-pastille-choix[aria-checked="true"] {
  background: var(--bx-encre);
  border-color: var(--bx-encre);
  color: var(--bx-blanc);
}
.bledx-store .bledx-pastilles .bledx-pastille-choix[aria-disabled="true"] {
  color: var(--bx-sourd);
  border-style: dashed;
  text-decoration: line-through;
  cursor: not-allowed;
}
.bledx-store .bledx-pastilles .bledx-pastille-choix:focus-visible {
  outline: 2px solid var(--bx-encre);
  outline-offset: 2px;
}

/* Un attribut à valeur unique se lit comme un fait, pas comme une question. */
.bledx-choix-actif tr.bledx-attr-unique {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.bledx-choix-actif tr.bledx-attr-unique th.label { margin: 0; }
.bledx-choix-actif tr.bledx-attr-unique .bledx-attr-etat { display: none; }
.bledx-attr-fait {
  font-size: var(--bx-t-libelle);
  color: var(--bx-gris);
}

/* Clic sur « Ajouter » sans taille : les pastilles se signalent. */
.bledx-pastilles.bledx-attention {
  animation: bledx-signal 420ms var(--bx-ease-sortie);
  outline: 2px solid var(--bx-sang);
  outline-offset: 6px;
}
.bledx-pastilles.bledx-attention + .bledx-attr-etat,
tr:has(.bledx-attention) .bledx-attr-etat { color: var(--bx-sang); }
@keyframes bledx-signal {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
}

/* WooCommerce ajoute un second « Voir le panier » à côté du bouton après
   l'ajout : le panneau le dit déjà, mieux, et l'en-tête porte le panier. */
.bledx-store.single-product form.cart .added_to_cart { display: none !important; }

/* ------------------------------------------- LA BARRE DE LA FICHE */
.bledx-barre-produit .bledx-barre-produit-action {
  transition: background-color 150ms ease-out, transform 160ms var(--bx-ease-sortie);
}
.bledx-barre-produit .bledx-barre-produit-action:active { transform: scale(.98); }

/* ---------------------------------------- APRÈS L'AJOUT AU PANIER */
.bledx-ajout {
  position: fixed;
  z-index: 600;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  gap: 14px;
  padding: 18px var(--bx-marge);
  padding-bottom: max(18px, env(safe-area-inset-bottom));
  background: var(--bx-blanc);
  border-top: 1px solid var(--bx-trait);
  border-radius: var(--bx-rayon) var(--bx-rayon) 0 0;
  box-shadow: var(--bx-ombre-flottante);
  color: var(--bx-gris);
  transform: translateY(105%);
  visibility: hidden;
  transition: transform 240ms var(--bx-ease-sortie), visibility 0s linear 240ms;
}
.bledx-ajout.est-ouvert {
  transform: none;
  visibility: visible;
  transition: transform 420ms var(--bx-ease-tiroir), visibility 0s;
}
@media (min-width: 721px) {
  .bledx-ajout {
    top: 24px;
    left: auto;
    right: var(--bx-marge);
    bottom: auto;
    width: min(380px, calc(100vw - 2 * var(--bx-marge)));
    padding: 18px 20px 20px;
    border: 1px solid var(--bx-trait);
    border-radius: var(--bx-rayon);
    transform-origin: top right;
    transform: translateY(-8px) scale(.98);
    opacity: 0;
    transition: transform 180ms var(--bx-ease-sortie), opacity 180ms ease-out, visibility 0s linear 180ms;
  }
  .bledx-ajout.est-ouvert {
    transform: none;
    opacity: 1;
    transition: transform 240ms var(--bx-ease-sortie), opacity 240ms ease-out, visibility 0s;
  }
}
.bledx-ajout-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: -6px -10px -4px 0;
}
.bledx-ajout-tete p {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--bx-encre);
  outline: none;
}
.bledx-store .bledx-ajout .bledx-ajout-fermer {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--bx-rayon);
  background: transparent;
  color: var(--bx-sourd);
  box-shadow: none;
  cursor: pointer;
}
.bledx-store .bledx-ajout .bledx-ajout-fermer:hover { color: var(--bx-encre); background: var(--bx-voile); }
.bledx-ajout-article {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 14px;
  align-items: center;
}
.bledx-ajout-image {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--bx-rayon);
  background: var(--bx-voile);
}
.bledx-ajout-nom {
  display: block;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--bx-encre);
}
.bledx-ajout-detail {
  display: block;
  margin-top: 4px;
  font-size: var(--bx-t-libelle);
  color: var(--bx-sourd);
}
.bledx-ajout-conseil {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--bx-gris);
}
.bledx-ajout-conseil.est-offre {
  padding: 10px 12px;
  border-radius: var(--bx-rayon);
  background: var(--bx-voile);
  color: var(--bx-encre);
}
.bledx-ajout-actions {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 8px;
}
.bledx-store .bledx-ajout .bledx-ajout-commander,
.bledx-store .bledx-ajout .bledx-ajout-continuer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 16px;
  border-radius: var(--bx-rayon);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: none;
  text-decoration: none;
  box-shadow: none;
  cursor: pointer;
  transition: background-color 150ms ease-out, transform 160ms var(--bx-ease-sortie);
}
.bledx-store .bledx-ajout .bledx-ajout-commander {
  background: var(--bx-encre);
  border: 1px solid var(--bx-encre);
  color: var(--bx-blanc);
}
.bledx-store .bledx-ajout .bledx-ajout-continuer {
  background: var(--bx-blanc);
  border: 1px solid var(--bx-trait-fort);
  color: var(--bx-encre);
}
.bledx-store .bledx-ajout .bledx-ajout-continuer:hover { border-color: var(--bx-encre); }
.bledx-store .bledx-ajout .bledx-ajout-commander:active,
.bledx-store .bledx-ajout .bledx-ajout-continuer:active { transform: scale(.98); }
.bledx-ajout-panier {
  justify-self: center;
  padding: 6px 8px;
  font-size: var(--bx-t-libelle);
  color: var(--bx-gris);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.bledx-ajout-panier:hover { color: var(--bx-encre); }

/* La pastille du panier saute quand un article y entre. */
.bledx-pastille.bledx-saut { animation: bledx-saut 380ms var(--bx-ease-sortie); }
@keyframes bledx-saut {
  0% { transform: scale(1); }
  35% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* ------------------------------------- LA CARTE : LE GROS PLAN AU SURVOL */
.bledx-store ul.products li.product { position: relative; }
.bledx-card-alt { display: none; }
@media (hover: hover) and (pointer: fine) {
  .bledx-store ul.products li.product .bledx-card-alt {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto !important;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--bx-rayon);
    background: var(--bx-voile);
    opacity: 0;
    pointer-events: none;
    transition: opacity 280ms ease-out, transform .4s var(--bledx-ease, ease-out);
  }
  .bledx-store ul.products li.product:hover .bledx-card-alt,
  .bledx-store ul.products li.product:focus-within .bledx-card-alt { opacity: 1; }
}

/* ------------------------------------------ LES SÉRIES : LE SOMMAIRE */
.bledx-home .bledx-series .bledx-series-nav a {
  transition: background-color 160ms ease-out, color 160ms ease-out, border-color 160ms ease-out;
}
.bledx-home .bledx-series .bledx-series-nav a.est-actif {
  background: var(--bx-encre);
  border-color: var(--bx-encre);
  color: var(--bx-blanc);
}
.bledx-home .bledx-series .bledx-series-nav a.est-actif span { color: inherit; opacity: .7; }
@media (min-width: 769px) {
  .bledx-home .bledx-series .bledx-series-nav {
    position: sticky;
    top: 0;
    z-index: 5;
    padding-block: 12px;
    background: color-mix(in srgb, var(--bx-blanc) 94%, transparent);
    backdrop-filter: saturate(180%) blur(8px);
  }
}

/* La barre de défilement de la rangée : celle du navigateur, grise et
   fléchée, appartenait à Windows, pas à la boutique. */
.bledx-home .bledx-series ul.products.bledx-series-rail {
  scrollbar-width: thin;
  scrollbar-color: var(--bx-trait-fort) transparent;
}
.bledx-home .bledx-series .bledx-series-nav { scrollbar-width: none; }

/* ------------------------------------------- LE BLOC ÉDITORIAL */
.bledx-editorial-side > a {
  aspect-ratio: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 8px;
  position: relative;
  min-height: 200px;
  transition: background-color 200ms ease-out;
}
.bledx-editorial-side > a p {
  margin: 0;
  max-width: 40ch;
  font-size: 15px;
  color: var(--bx-gris);
  transition: color 200ms ease-out;
}
.bledx-editorial-fleche {
  position: absolute;
  top: clamp(20px, 2.6vw, 32px);
  right: clamp(20px, 2.6vw, 32px);
  font-size: 20px;
  color: var(--bx-encre);
  transition: transform 200ms var(--bx-ease-sortie), color 200ms ease-out;
}
.bledx-editorial-side > a:hover p,
.bledx-editorial-side > a:hover .bledx-editorial-fleche { color: var(--bx-blanc); }
.bledx-editorial-side > a:hover .bledx-editorial-fleche { transform: translateX(4px); }

/* ------------------------------------------- LA FICHE : L'ENTRETIEN */
.bledx-product-extra-facts { padding-block: clamp(28px, 4vw, 48px) !important; }

/* ---------------------------------------- TÉLÉPHONE : LE HÉROS */
@media (max-width: 720px) {
  /* Le premier écran ne montrait aucun t-shirt : titre, texte, deux
     boutons et trois liens remplissaient les 844 px. Le second bouton et
     les trois liens répètent le bandeau et la grille juste en dessous. */
  .bledx-hero { padding-block: 24px 32px; }
  .bledx-hero-copy { padding-block: 8px 0 !important; }
  .bledx-hero-copy h1 { margin: 10px 0 14px; }
  .bledx-hero-text { margin-bottom: 20px; }
  .bledx-hero-actions .bledx-button-secondary,
  .bledx-hero-proof { display: none !important; }
  .bledx-hero-grid { gap: 24px; }
  .bledx-featured-media { padding: 20px 24px 120px !important; }

  /* La barre du bas : « Panier » et sa pastille côte à côte, comme les
     trois autres liens tiennent sur une ligne. */
  .bledx-mobile-store-nav a.bledx-nav-panier {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bledx-ajout,
  .bledx-ajout.est-ouvert { transition-duration: 0s !important; }
  .bledx-pastilles.bledx-attention,
  .bledx-pastille.bledx-saut { animation: none; }
}

/* =====================================================================
   LA MARQUE EN MOUVEMENT (2026-10-04)
   Une seule couleur d'accent, le rouge de marque, à cinq endroits
   précis : le trait de pinceau, la trame du héros, le tampon, le défilé
   des séries, les icônes au survol. Tout le reste reste blanc et encre.
   Chaque animation a un état de repos complet : sans elle, rien ne
   manque et rien ne reste caché.
   ===================================================================== */
:root {
  --bx-accent: var(--bx-sang);
  --bx-sur-accent: var(--bx-blanc);
}

/* ------------------------------------------------ LE TRAIT DE PINCEAU */
.bledx-pinceau {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  isolation: isolate;
}
.bledx-pinceau svg {
  position: absolute;
  z-index: -1;
  left: -3%;
  bottom: -0.2em;
  width: 106%;
  height: 0.3em;
  overflow: visible;
}
.bledx-pinceau path {
  fill: none;
  stroke: var(--bx-accent);
  stroke-width: 10;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .bledx-pinceau path { animation: bledx-trace 900ms var(--bx-ease-sortie) 350ms both; }
}
@keyframes bledx-trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* ------------------------------------------------------- LA SCÈNE */
.bledx-scene {
  position: relative;
  width: 100%;
  max-width: 640px;
  aspect-ratio: 1 / 1;
  justify-self: center;
  margin-inline: auto;
}
.bledx-scene-trame {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--bx-accent) 0 1.6px, transparent 2px) 0 0 / 10px 10px;
  -webkit-mask-image: radial-gradient(circle closest-side, #000 0 38%, transparent 100%);
          mask-image: radial-gradient(circle closest-side, #000 0 38%, transparent 100%);
  opacity: .9;
}
.bledx-scene-piece {
  position: absolute;
  display: block;
  translate: var(--px, 0px) var(--py, 0px);
  rotate: var(--rot, 0deg);
  transition: translate 700ms var(--bx-ease-sortie), scale 300ms var(--bx-ease-sortie);
  filter: drop-shadow(0 26px 28px color-mix(in srgb, var(--bx-encre) 24%, transparent));
}
.bledx-scene-piece img { display: block; width: 100%; height: auto; }
.bledx-scene-piece.est-centre { z-index: 3; width: 66%; left: 17%; top: 12%; }
.bledx-scene-piece.est-gauche { z-index: 2; width: 44%; left: -1%; top: 34%; --rot: -9deg; }
.bledx-scene-piece.est-droite { z-index: 1; width: 44%; right: -1%; top: 28%; --rot: 8deg; }
@media (hover: hover) and (pointer: fine) {
  .bledx-scene-piece:hover { scale: 1.03; }
}
.bledx-scene-piece:focus-visible { outline: 2px solid var(--bx-encre); outline-offset: 6px; border-radius: var(--bx-rayon); }
@media (prefers-reduced-motion: no-preference) {
  .bledx-scene-piece { animation: bledx-pose 800ms var(--bx-ease-sortie) both; }
  .bledx-scene-piece.est-gauche { animation-delay: 120ms; }
  .bledx-scene-piece.est-droite { animation-delay: 200ms; }
  .bledx-scene-trame { animation: bledx-trame 1100ms var(--bx-ease-sortie) both; }
}
@keyframes bledx-pose { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes bledx-trame { from { opacity: 0; transform: scale(.86); } to { opacity: .9; transform: none; } }

.bledx-tampon {
  position: absolute;
  z-index: 4;
  top: 3%;
  right: 5%;
  width: 24%;
  height: auto;
}
.bledx-tampon circle { fill: var(--bx-accent); }
.bledx-tampon text {
  fill: var(--bx-sur-accent);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .14em;
}
.bledx-tampon-etoile { fill: var(--bx-sur-accent); }
@media (prefers-reduced-motion: no-preference) {
  .bledx-tampon { animation: bledx-tourne 28s linear infinite; }
}
@keyframes bledx-tourne { to { rotate: 360deg; } }

.bledx-scene-legende {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 1%;
  translate: -50% 0;
}
.bledx-scene-legende a {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 18px;
  border: 1px solid var(--bx-trait);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bx-blanc) 92%, transparent);
  backdrop-filter: saturate(180%) blur(8px);
  box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--bx-encre) 30%, transparent);
  color: var(--bx-encre);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 160ms ease-out;
}
.bledx-scene-legende a:hover { border-color: var(--bx-encre); }
.bledx-scene-legende strong { font-size: 15px; font-weight: 600; }
.bledx-scene-legende span,
.bledx-scene-legende span * { font-size: 14px; color: var(--bx-gris); font-weight: 500; }

/* ------------------------------------------------- LE DÉFILÉ DES SÉRIES */
.bledx-defile {
  overflow: hidden;
  background: var(--bx-accent);
  color: var(--bx-sur-accent);
  padding-block: clamp(12px, 1.4vw, 18px);
}
.bledx-defile-piste {
  display: flex;
  width: max-content;
}
.bledx-defile ul {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bledx-defile li {
  display: inline-flex;
  align-items: center;
  font-size: clamp(20px, 2.3vw, 34px);
  font-weight: 800;
  font-stretch: 118%;
  line-height: 1.1;
  letter-spacing: -.01em;
  text-transform: uppercase;
  white-space: nowrap;
}
.bledx-defile li::after {
  content: "";
  width: .5em;
  height: .5em;
  margin-inline: .7em;
  background: currentColor;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}
/* Cible tactile de 48 px : la bande garde sa hauteur, c'est le lien qui
   la remplit (mesure 2026-10-04 : 22 px, sous le plancher de 44). */
.bledx-defile { padding-block: 0; }
.bledx-defile a { display: inline-flex; align-items: center; min-height: 48px; color: inherit; text-decoration: none; }
.bledx-defile-signature { min-height: 48px; }
.bledx-defile a:hover,
.bledx-defile a:focus-visible { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; outline: none; }
.bledx-defile-signature { font-style: italic; font-weight: 600 !important; }
@media (prefers-reduced-motion: no-preference) {
  .bledx-defile-piste { animation: bledx-defile 40s linear infinite; }
  .bledx-defile:hover .bledx-defile-piste,
  .bledx-defile:focus-within .bledx-defile-piste { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .bledx-defile { overflow-x: auto; }
  .bledx-defile ul[aria-hidden="true"] { display: none; }
}
@keyframes bledx-defile { to { transform: translateX(-50%); } }

/* ------------------------------------------- COMMANDER, EN QUATRE TEMPS */
.bledx-etapes {
  padding-block: clamp(36px, 5vw, 64px);
  border-bottom: 1px solid var(--bx-trait);
}
.bledx-etapes-titre {
  margin: 0 0 clamp(20px, 3vw, 32px);
  font-size: var(--bx-t-h3);
  font-weight: 600;
  color: var(--bx-encre);
}
.bledx-etapes-liste {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.bledx-etapes-liste li {
  position: relative;
  display: grid;
  gap: 6px;
  align-content: start;
}
.bledx-etapes-liste svg {
  box-sizing: content-box;
  width: 22px;
  height: 22px;
  padding: 13px;
  margin-bottom: 8px;
  border-radius: 50%;
  background: var(--bx-voile);
  color: var(--bx-encre);
  transition: background-color 200ms ease-out, color 200ms ease-out, rotate 300ms var(--bx-ease-sortie);
}
@media (hover: hover) and (pointer: fine) {
  .bledx-etapes-liste li:hover svg { background: var(--bx-accent); color: var(--bx-sur-accent); rotate: -8deg; }
}
/* Un filet relie les étapes : c'est une suite, pas quatre arguments. */
.bledx-etapes-liste li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 24px;
  left: 64px;
  right: calc(-1 * clamp(20px, 3vw, 40px) + 12px);
  border-top: 1px dashed var(--bx-trait-fort);
}
.bledx-etapes-liste strong { font-size: 16px; font-weight: 600; color: var(--bx-encre); }
.bledx-etapes-liste span { font-size: 14px; line-height: 1.5; color: var(--bx-gris); max-width: 30ch; }
@media (max-width: 900px) {
  .bledx-etapes-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bledx-etapes-liste li::after { display: none; }
}

/* -------------------------------------------- LA PREUVE ET LA LOUPE */
.bledx-preuve-grille {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
}
.bledx-loupe {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--bx-rayon);
  background: var(--bx-voile);
}
.bledx-loupe img { display: block; width: 100%; height: auto; }
.bledx-loupe.est-active { cursor: none; }
.bledx-loupe-lentille {
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(150px, 16vw, 220px);
  aspect-ratio: 1;
  border: 2px solid var(--bx-blanc);
  border-radius: 50%;
  background-color: var(--bx-voile);
  background-repeat: no-repeat;
  box-shadow: var(--bx-ombre-flottante), 0 0 0 1px var(--bx-trait);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease-out;
}
.bledx-loupe.est-active .bledx-loupe-lentille { opacity: 1; }
.bledx-loupe figcaption {
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bx-blanc) 92%, transparent);
  backdrop-filter: blur(6px);
  font-size: var(--bx-t-libelle);
  color: var(--bx-encre);
  transition: opacity 160ms ease-out;
}
.bledx-loupe.est-active figcaption { opacity: 0; }
@media (hover: none) { .bledx-loupe figcaption, .bledx-loupe-lentille { display: none; } }
.bledx-preuve-texte h2 {
  margin: 0 0 16px;
  font-size: var(--bx-t-h2);
  line-height: 1.05;
  letter-spacing: -.025em;
  color: var(--bx-encre);
  text-wrap: balance;
}
.bledx-preuve-texte p { margin: 0 0 22px; max-width: 46ch; color: var(--bx-gris); font-size: var(--bx-t-grand); line-height: 1.55; }
.bledx-preuve-texte ul { display: grid; gap: 12px; margin: 0 0 28px; padding: 0; list-style: none; }
.bledx-preuve-texte li { display: flex; align-items: center; gap: 10px; color: var(--bx-encre); font-size: 15px; }
.bledx-preuve-texte li svg { flex: none; color: var(--bx-accent); }
@media (max-width: 900px) { .bledx-preuve-grille { grid-template-columns: 1fr; } }

/* -------------------------------------------- L'AJOUT DEPUIS LA GRILLE */
.bledx-store ul.products li.product figure { position: relative; }
.bledx-store ul.products li.product .bledx-card-alt { z-index: 1; }
.bledx-rapide {
  position: absolute;
  z-index: 3;
  left: 8px;
  right: 8px;
  bottom: 8px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--bx-trait);
  border-radius: var(--bx-rayon);
  background: color-mix(in srgb, var(--bx-blanc) 92%, transparent);
  backdrop-filter: saturate(180%) blur(8px);
  opacity: 0;
  translate: 0 8px;
  transition: opacity 180ms ease-out, translate 220ms var(--bx-ease-sortie);
}
li.product:hover .bledx-rapide,
li.product:focus-within .bledx-rapide { opacity: 1; translate: 0 0; }
.bledx-store .bledx-rapide button {
  min-width: 40px;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--bx-trait-fort);
  border-radius: var(--bx-rayon);
  background: var(--bx-blanc);
  color: var(--bx-encre);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: .02em;
  box-shadow: none;
  cursor: pointer;
  transition: background-color 140ms ease-out, color 140ms ease-out, border-color 140ms ease-out, transform 140ms var(--bx-ease-sortie);
}
.bledx-store .bledx-rapide button:hover { background: var(--bx-encre); border-color: var(--bx-encre); color: var(--bx-blanc); }
.bledx-store .bledx-rapide button:active { transform: scale(.95); }
.bledx-store .bledx-rapide button.est-choisi { background: var(--bx-accent); border-color: var(--bx-accent); color: var(--bx-sur-accent); }
.bledx-rapide.est-en-cours button:not(.est-choisi) { opacity: .45; cursor: progress; }
.bledx-store .bledx-rapide button:focus-visible { outline: 2px solid var(--bx-encre); outline-offset: 2px; }

/* -------------------------------------------- LA SIGNATURE DU PIED */
.bledx-pied-signature {
  margin-top: clamp(28px, 4vw, 56px);
  padding-top: clamp(20px, 3vw, 36px);
  border-top: 1px solid var(--bx-trait);
  overflow: hidden;
}
.bledx-pied-mot {
  display: block;
  /* Le mot remplit la largeur du contenu : cinq lettres en chasse 125 % font environ 3,35 fois la taille du corps. */
  font-size: calc((min(100vw, var(--bx-max)) - 2 * var(--bx-marge)) / 3.35);
  font-weight: 800;
  font-stretch: 125%;
  line-height: .78;
  letter-spacing: -.045em;
  color: var(--bx-encre);
  user-select: none;
}
.bledx-pied-signature p {
  margin: 14px 0 0;
  font-size: var(--bx-t-libelle);
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--bx-accent);
}

/* ------------------------------------------------ L'APPARITION AU DÉFILEMENT
   Sur le compositeur, sans observateur. Le navigateur qui ne connaît pas
   animation-timeline n'applique rien : tout est visible d'emblée. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .bledx-etapes-liste li,
    .bledx-home .bledx-section-head,
    .bledx-preuve-grille > *,
    .bledx-home ul.products > li.product,
    .bledx-confidence-grid > div {
      animation: bledx-monte linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
  }
}
@keyframes bledx-monte { from { opacity: .15; translate: 0 26px; } to { opacity: 1; translate: 0 0; } }

/* ------------------------------------------------- TÉLÉPHONE */
@media (max-width: 720px) {
  .bledx-scene { max-width: 100%; aspect-ratio: 1 / .96; margin-top: 4px; }
  .bledx-tampon { width: 27%; top: 0; right: 2%; }
  .bledx-scene-legende a { padding: 9px 14px; }
}

/* La sélection de texte et le curseur portent aussi la marque. */
::selection { background: var(--bx-accent); color: var(--bx-sur-accent); }
.bledx-store input, .bledx-store textarea { caret-color: var(--bx-accent); }