/* =====================================================================
   BLEDX — L'ATELIER D'ENCRE (2026-11-02)
   La couche anime, posée PAR-DESSUS le magazine (charge en dernier).
   Demande du patron : « un site très artistique, de l'animation, partout ».

   Ce qui ne change pas : les trois encres (encre, papier, rouge), les cadres
   de 3 px, Dela et Archivo, l'alternance blanc / noir. Ce qui s'ajoute : des
   planches de manga — cases en biais, trames de points, lignes de vitesse,
   coups de pinceau, onomatopées en texture, bords de page déchirés — et la
   Collection Aura en couverture.

   Règles tenues :
   - aucune couleur en dur hors des jetons --mx-* (le #000 des masques excepté) ;
   - entrées en fill-mode backwards, jamais both ; une seule fois (.bx-vu) ;
   - rien n'est lié au défilement ; les boucles s'arrêtent hors de l'écran
     (.bx-hors-champ) et sous prefers-reduced-motion, rien ne bouge ;
   - les onomatopées sont du décor : aria-hidden, ou contenu CSS au texte
     de remplacement vide (« / "" »).
   Bascule : BLEDX_ANIME dans functions.php.
   ===================================================================== */

.bx-anime {
  /* Coup de pinceau sec : sert de masque (soulignés, titres, boutons). */
  --ax-pinceau: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 40' preserveAspectRatio='none'%3E%3Cpath d='M3 24C38 9 92 13 141 10c62-4 121 3 182-2 31-2 56 0 74 5l-4 9c-30 4-62 2-93 6-61 6-121 0-182 4-43 3-81 4-115 1z'/%3E%3Cpath d='M12 33c60-3 120-1 182-3M60 6c70-2 150-1 240 1' stroke='%23000' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  /* Bord de page déchiré : haut d'une section qui mord sur la précédente. */
  --ax-dechire: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpolygon points='0,20 0,9 4.0,2.4 9.4,1.7 14.3,4.3 17.1,5.6 19.7,4.9 22.5,1.8 27.0,8.4 30.0,3.0 35.3,9.5 40.4,4.6 47.3,1.4 53.7,3.6 56.8,2.1 60.7,8.3 64.0,6.2 69.4,4.4 74.4,1.6 77.1,2.9 82.7,4.8 86.6,6.3 91.2,3.7 97.2,7.3 100.8,6.2 105.7,8.9 111.5,3.6 118.4,2.1 122.8,7.8 126.0,5.4 128.6,7.0 134.6,6.2 141.0,3.8 146.6,6.3 151.7,5.1 158.0,9.5 162.7,7.0 165.4,7.3 170.8,9.9 177.0,3.6 181.3,7.0 183.9,5.2 187.1,2.1 189.9,7.9 193.0,3.2 197.2,8.8 200.0,5.0 200,9 200,20'/%3E%3C/svg%3E");
  --ax-sfx: 900 1em/1 "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Noto Sans CJK JP", "Yu Gothic", "Meiryo", system-ui, sans-serif;
  --ax-vitesse: repeating-conic-gradient(from 0deg at 50% 50%, currentColor 0deg .55deg, transparent .55deg 4.2deg);
  --ax-trame: radial-gradient(circle, currentColor 0 1.15px, transparent 1.5px) 0 0 / 8px 8px;
  --ax-coupe: cubic-bezier(.7, 0, .2, 1);
}

/* ===================================================== LA COUVERTURE AURA
   Une page de manga blanche : le texte à gauche, une grande case en biais à
   droite. La case change de personnage (balayage au pinceau) ; elle prend la
   couleur du t-shirt du personnage. */
.bx-ah {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--mx-papier);
  color: var(--mx-encre);
  border-bottom: var(--mx-trait) solid var(--mx-encre);
}
/* La trame dans le coin de la page, comme un fond imprimé. */
.bx-ah::before {
  content: "";
  position: absolute;
  inset: 0 0 auto auto;
  width: 55%;
  height: 70%;
  z-index: -1;
  color: var(--mx-encre);
  background: var(--ax-trame);
  opacity: .12;
  -webkit-mask-image: radial-gradient(ellipse at 100% 0, #000 0 30%, transparent 72%);
          mask-image: radial-gradient(ellipse at 100% 0, #000 0 30%, transparent 72%);
  pointer-events: none;
}
.bx-ah-page {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(18px, 2.6vw, 40px);
  max-width: var(--bx-max, 1400px);
  margin: 0 auto;
  padding: clamp(16px, 2.4vw, 32px) var(--bx-marge, 24px) clamp(22px, 3vw, 40px);
}
.bx-ah-texte {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  min-width: 0;
}
.bx-ah-tete { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 8px 16px; }
.bx-ah-logo {
  font-family: var(--mx-titre);
  font-size: clamp(56px, 7vw, 108px);
  line-height: .8;
  letter-spacing: -.03em;
  color: var(--mx-rouge);
  text-shadow: 5px 5px 0 var(--mx-encre);
}
.bx-ah-num { padding-bottom: 6px; font-weight: 800; font-size: 15px; letter-spacing: .08em; color: var(--mx-encre); }
.bx-ah-titre {
  margin: 0;
  font-family: var(--mx-titre);
  font-weight: 400;
  font-size: clamp(54px, 7.4vw, 118px);
  line-height: .86;
  letter-spacing: -.02em;
  color: var(--mx-encre);
}
.bx-ah-titre span { display: block; margin-bottom: .1em; font-size: .4em; line-height: 1; letter-spacing: 0; }
/* « Aura » : un aplat d'encre posé de travers, souligné d'un coup de pinceau rouge. */
.bx-ah-titre em {
  position: relative;
  display: inline-block;
  padding: .02em .16em .1em;
  font-style: normal;
  color: var(--mx-papier);
  background: var(--mx-encre);
  rotate: -2deg;
}
.bx-ah-titre em::after {
  content: "";
  position: absolute;
  left: -4%;
  right: -8%;
  bottom: -.24em;
  height: .2em;
  background: var(--mx-rouge);
  -webkit-mask: var(--ax-pinceau) center / 100% 100% no-repeat;
          mask: var(--ax-pinceau) center / 100% 100% no-repeat;
  transform-origin: left center;
}
.bx-ah-chapo { max-width: 40ch; margin: 6px 0 0; font-size: 18px; line-height: 1.45; color: var(--mx-encre); }
.bx-ah-etat { margin: 0; padding-left: 14px; border-left: 4px solid var(--mx-rouge); font-weight: 800; font-size: 15px; line-height: 1.4; color: var(--mx-encre); }
.bx-ah-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.bx-ah .bx-bouton { color: var(--mx-encre); }
.bx-ah .bx-bouton-plein { color: var(--mx-papier); }
.bx-ah-prix {
  position: absolute;
  top: 0;
  right: 0;
  padding: 10px 16px;
  background: var(--mx-rouge);
  color: var(--mx-papier);
  font-family: var(--mx-titre);
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1;
  rotate: -6deg;
}

/* La planche : la grande case, puis la rangée de vignettes. */
.bx-ah-planche { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 12px; min-width: 0; }
.bx-ah-case {
  position: relative;
  height: clamp(460px, calc(100vh - 250px), 720px);
  background: var(--mx-encre);
  /* le bord gauche en biais : la case « fonce » vers la droite */
  clip-path: polygon(7% 0, 100% 0, 100% 100%, 0 100%);
  touch-action: pan-y;
}
.bx-ah-vue {
  position: absolute;
  inset: var(--mx-trait);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  visibility: hidden;
  text-decoration: none;
  clip-path: polygon(calc(7% - 1px) 0, 100% 0, 100% 100%, 0 100%);
}
.bx-ah-vue.est-active { visibility: visible; z-index: 2; }
.bx-ah-vue.est-avant { visibility: visible; z-index: 1; }
.bx-ah-vue:focus-visible { outline: 4px solid var(--mx-rouge); outline-offset: -8px; }
.bx-tee-noir { background: var(--mx-nuit); color: var(--mx-papier); }
.bx-tee-blanc { background: var(--mx-papier); color: var(--mx-encre); }

.bx-ah-trame {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--ax-trame);
  opacity: .16;
  -webkit-mask-image: linear-gradient(160deg, #000 0 25%, transparent 60%);
          mask-image: linear-gradient(160deg, #000 0 25%, transparent 60%);
}
.bx-ah-vitesse {
  position: absolute;
  inset: -40%;
  z-index: -2;
  background: var(--ax-vitesse);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 0 22%, #000 62%);
          mask-image: radial-gradient(circle at 50% 50%, transparent 0 22%, #000 62%);
  opacity: .2;
}
/* L'aura : un halo rouge qui respire derrière le personnage. */
.bx-ah-aura {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: 92%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--mx-rouge) 60%, transparent) 0, transparent 66%);
  opacity: .5;
}
.bx-ah-vue picture { display: flex; align-items: flex-end; justify-content: center; height: 95%; max-width: 92%; }
.bx-ah-vue img {
  display: block;
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  object-position: bottom center;
}
.bx-ah-nom {
  position: absolute;
  z-index: 2;
  top: 3%;
  right: 2.5%;
  writing-mode: vertical-rl;
  font-family: var(--mx-titre);
  font-size: clamp(56px, 7.6vw, 128px);
  line-height: .9;
  letter-spacing: .02em;
  color: transparent;
  -webkit-text-stroke: 2px var(--mx-papier);
  pointer-events: none;
}
.bx-tee-blanc .bx-ah-nom { -webkit-text-stroke-color: var(--mx-encre); }
.bx-ah-sfx {
  position: absolute;
  z-index: 2;
  top: 5%;
  left: 11%;
  font: var(--ax-sfx);
  font-size: clamp(38px, 5vw, 76px);
  color: var(--mx-rouge);
  -webkit-text-stroke: 3px currentColor;
  paint-order: stroke fill;
  rotate: -12deg;
  pointer-events: none;
}
.bx-tee-noir .bx-ah-sfx { -webkit-text-stroke-color: var(--mx-papier); }
.bx-tee-blanc .bx-ah-sfx { -webkit-text-stroke-color: var(--mx-encre); }
/* L'encadré de narration, en bas à gauche de la case. */
.bx-ah-legende {
  position: absolute;
  z-index: 3;
  left: 0;
  bottom: 0;
  display: grid;
  gap: 2px;
  max-width: 70%;
  padding: 10px 16px 12px;
  background: var(--mx-papier);
  color: var(--mx-encre);
  border-top: var(--mx-trait) solid var(--mx-encre);
  border-right: var(--mx-trait) solid var(--mx-encre);
  font-family: var(--mx-titre);
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.05;
}
.bx-ah-legende small { font-family: var(--mx-texte); font-weight: 700; font-size: 14px; line-height: 1.2; color: var(--mx-gris); }

/* Les vignettes : huit petites cases, la case active cerclée de rouge, et
   un trait rouge qui se remplit pendant la lecture automatique. */
.bx-ah-choix {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding: 6px 2px 4px;
  scrollbar-width: none;
}
.bx-ah-choix::-webkit-scrollbar { display: none; }
.bledx-store .bx-ah-choix button {
  position: relative;
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: var(--mx-trait) solid var(--mx-encre);
  border-radius: 0;
  cursor: pointer;
  transition: translate 200ms var(--mx-sortie), border-color 160ms ease-out;
}
.bx-ah-choix img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bx-ah-choix button i {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  background: var(--mx-rouge);
  transform: scaleX(0);
  transform-origin: left center;
}
.bledx-store .bx-ah-choix button.est-active { border-color: var(--mx-rouge); translate: 0 -4px; }
.bledx-store .bx-ah-choix button:focus-visible { outline: 3px solid var(--mx-rouge); outline-offset: 2px; }
.bledx-store .bx-ah-choix .bx-ah-pause {
  width: auto;
  height: 52px;
  min-width: 76px;
  margin-left: 4px;
  padding: 0 14px;
  background: var(--mx-papier);
  color: var(--mx-encre);
  font-family: var(--mx-texte);
  font-weight: 800;
  font-size: 15px;
}
.bledx-store .bx-ah-choix .bx-ah-pause:hover { background: var(--mx-encre); color: var(--mx-papier); }

/* ======================================================= LA PLANCHE AURA */
.bx-ap {
  position: relative;
  padding-block: clamp(48px, 6vw, 88px);
  background: var(--mx-nuit);
  color: var(--mx-papier);
}
.bx-ap-tete { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 32px; margin-bottom: clamp(22px, 3vw, 36px); }
.bx-ap-tete h2 {
  margin: 0;
  font-family: var(--mx-titre);
  font-weight: 400;
  font-size: clamp(72px, 12vw, 180px);
  line-height: .8;
  letter-spacing: -.03em;
  color: var(--mx-rouge);
  text-shadow: 5px 5px 0 var(--mx-papier);
}
.bx-ap-tete p { max-width: 44ch; margin: 0 0 8px; font-size: 18px; line-height: 1.45; color: var(--mx-papier); }
.bx-ap-cases {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* La grande case et la case large : une planche, pas une grille. */
.bx-ap-case:nth-child(1) { grid-column: span 2; grid-row: span 2; }
/* La case large comble la planche : la 6e sur huit, les 6e et 7e sur sept. */
.bx-ap-cases:has(> li:nth-child(8)) > .bx-ap-case:nth-child(6),
.bx-ap-cases:has(> li:nth-child(7)):not(:has(> li:nth-child(8))) > .bx-ap-case:nth-child(n+6) { grid-column: span 2; }
.bx-ap-case a {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border: var(--mx-trait) solid var(--mx-papier);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
}
.bx-ap-case a:focus-visible { outline: 4px solid var(--mx-rouge); outline-offset: 3px; }
.bx-ap-art {
  position: relative;
  isolation: isolate;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
.bx-ap-case:nth-child(1) .bx-ap-art { aspect-ratio: auto; }
.bx-ap-cases:has(> li:nth-child(8)) > .bx-ap-case:nth-child(6) .bx-ap-art,
.bx-ap-cases:has(> li:nth-child(7)):not(:has(> li:nth-child(8))) > .bx-ap-case:nth-child(n+6) .bx-ap-art { aspect-ratio: 16 / 10; }
/* Dans une case large, le dessin vertical est recadré sur le haut (le visage). */
.bx-ap-cases:has(> li:nth-child(8)) > .bx-ap-case:nth-child(6) .bx-ap-art img,
.bx-ap-cases:has(> li:nth-child(7)):not(:has(> li:nth-child(8))) > .bx-ap-case:nth-child(n+6) .bx-ap-art img { padding: 0; object-fit: cover; object-position: 50% 18%; }
.bx-ap-art .bx-ah-trame { opacity: .14; }
/* Les lignes de vitesse : invisibles au repos, elles éclatent au survol. */
.bx-ap-art::after {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: -1;
  background: var(--ax-vitesse);
  -webkit-mask-image: radial-gradient(circle, transparent 0 26%, #000 64%);
          mask-image: radial-gradient(circle, transparent 0 26%, #000 64%);
  opacity: 0;
  transition: opacity 220ms ease-out, scale 500ms var(--mx-sortie);
  scale: 1.2;
}
.bx-ap-art picture { display: block; width: 100%; height: 100%; }
.bx-ap-art img {
  display: block;
  width: 100%;
  height: 100%;
  padding: 7%;
  object-fit: contain;
  transition: scale 500ms var(--mx-sortie);
}
.bx-ap-sfx {
  position: absolute;
  top: 6%;
  left: 6%;
  font: var(--ax-sfx);
  font-size: clamp(26px, 2.6vw, 44px);
  color: var(--mx-rouge);
  -webkit-text-stroke: 3px currentColor;
  paint-order: stroke fill;
  rotate: -12deg;
  opacity: 0;
  scale: .6;
  transition: opacity 180ms ease-out, scale 300ms var(--mx-sortie);
  pointer-events: none;
}
.bx-tee-noir .bx-ap-sfx { -webkit-text-stroke-color: var(--mx-papier); }
.bx-tee-blanc .bx-ap-sfx { -webkit-text-stroke-color: var(--mx-encre); }
.bx-ap-case:nth-child(1) .bx-ap-sfx { opacity: 1; scale: 1; font-size: clamp(40px, 4.4vw, 72px); }
.bx-ap-tee {
  position: absolute;
  z-index: 2;
  right: 10px;
  bottom: 86px;
  width: clamp(64px, 28%, 120px);
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border: var(--mx-trait) solid var(--mx-encre);
  background: var(--mx-papier);
  rotate: 5deg;
}
.bx-ap-legende {
  display: grid;
  gap: 3px;
  padding: 10px 12px 12px;
  background: var(--mx-papier);
  color: var(--mx-encre);
  border-top: var(--mx-trait) solid var(--mx-encre);
}
.bx-ap-legende small { font-weight: 700; font-size: 14px; color: var(--mx-gris); }
.bx-ap-legende b { font-weight: 800; font-size: 15px; line-height: 1.25; }
.bx-ap-prix { font-family: var(--mx-titre); font-size: 17px; color: var(--mx-encre); }
.bx-ap-prix del { color: var(--mx-gris); }
.bx-ap-prix ins { text-decoration: none; }
.bx-ap-case:nth-child(1) .bx-ap-legende b { font-family: var(--mx-titre); font-weight: 400; font-size: clamp(20px, 2vw, 28px); }
.bx-ap-case:nth-child(1) .bx-ap-prix { font-size: 22px; }
@media (hover: hover) {
  .bx-ap-case a:hover .bx-ap-art::after { opacity: .22; scale: 1; }
  .bx-ap-case a:hover .bx-ap-art img { scale: 1.05; }
  .bx-ap-case a:hover .bx-ap-sfx { opacity: 1; scale: 1; }
  .bx-ap-case a:hover .bx-ap-legende { background: var(--mx-rouge); color: var(--mx-papier); }
  .bx-ap-case a:hover .bx-ap-legende small,
  .bx-ap-case a:hover .bx-ap-prix { color: var(--mx-papier); }
}

/* ================================================== L'EN-TÊTE DU SITE
   Sur l'accueil, la couverture est désormais une page blanche : le bandeau
   redevient papier (seulement le vrai en-tête : le tiroir du téléphone porte
   aussi la classe .ct-header et reste noir). */
.bx-anime.home.bledx-store header.ct-header [data-row] { background: var(--mx-papier) !important; border-bottom-color: var(--mx-encre) !important; }
.bx-anime.home.bledx-store header.ct-header [data-id="menu"] > ul > li > a,
.bx-anime.home.bledx-store header.ct-header a,
.bx-anime.home.bledx-store header.ct-header button {
  color: var(--mx-encre) !important;
  --theme-icon-color: var(--mx-encre);
  --theme-link-initial-color: var(--mx-encre);
}
.bx-anime.home.bledx-store header.ct-header .sub-menu a { color: inherit !important; }
/* Le menu : au survol, un coup de pinceau rouge sous le mot (::before :
   le ::after porte déjà la pastille « Nouveau »). */
.bx-anime.bledx-store header.ct-header [data-id="menu"] > ul > li > a { position: relative; }
.bx-anime.bledx-store header.ct-header [data-id="menu"] > ul > li > a::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: calc(50% + .8em);
  height: 8px;
  background: var(--mx-rouge);
  -webkit-mask: var(--ax-pinceau) center / 100% 100% no-repeat;
          mask: var(--ax-pinceau) center / 100% 100% no-repeat;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 260ms var(--mx-sortie);
  pointer-events: none;
}
.bx-anime.bledx-store header.ct-header [data-id="menu"] > ul > li > a:hover,
.bx-anime.home.bledx-store header.ct-header [data-id="menu"] > ul > li > a:hover { color: var(--mx-encre) !important; text-decoration: none; }
.bx-anime.bledx-store header.ct-header [data-id="menu"] > ul > li > a:hover::before,
.bx-anime.bledx-store header.ct-header [data-id="menu"] > ul > li.current-menu-item > a::before,
.bx-anime.bledx-store header.ct-header [data-id="menu"] > ul > li.current-menu-ancestor > a::before { transform: scaleX(1); }

/* ================================================== LES PAGES DÉCHIRÉES
   Chaque double page noire mord sur la page blanche d'au-dessus par un bord
   déchiré, et inversement : la page se lit comme un cahier de manga. */
.bx-anime .bx-chapitre,
.bx-anime .bx-ap,
.bx-anime .bledx-pied { position: relative; }
.bx-anime .bx-papier-nuit::before,
.bx-anime .bx-ap::before,
.bx-anime .bx-papier-blanc::before,
.bx-anime .bledx-pied::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -15px;
  height: 16px;
  z-index: 1;
  background: var(--mx-nuit);
  -webkit-mask: var(--ax-dechire) top / 100% 100% no-repeat;
          mask: var(--ax-dechire) top / 100% 100% no-repeat;
  pointer-events: none;
}
.bx-anime .bx-papier-blanc::before { background: var(--mx-papier); scale: -1 1; }
.bx-anime .bledx-pied::before { top: -23px; background: var(--mx-encre); }

/* ================================================== LES ONOMATOPÉES
   En texture derrière les titres de chapitre : contour seul, très pâle.
   Le texte de remplacement vide les retire des lecteurs d'écran. */
.bx-anime .bx-chap-tete { position: relative; isolation: isolate; }
.bx-anime .bx-chap-tete::after {
  content: "ドドド";
  content: "ドドド" / "";
  position: absolute;
  z-index: -1;
  right: 0;
  top: 50%;
  translate: 0 -62%;
  font: var(--ax-sfx);
  font-size: clamp(64px, 10vw, 150px);
  color: transparent;
  -webkit-text-stroke: 2px var(--mx-encre);
  opacity: .13;
  rotate: -8deg;
  white-space: nowrap;
  pointer-events: none;
}
.bx-anime .bx-papier-nuit .bx-chap-tete::after,
.bx-anime .bx-papier-piste .bx-chap-tete::after { -webkit-text-stroke-color: var(--mx-papier); opacity: .2; }
.bx-anime .bx-chapitre:nth-of-type(4n+1) .bx-chap-tete::after { content: "ゴゴゴ"; content: "ゴゴゴ" / ""; }
.bx-anime .bx-chapitre:nth-of-type(4n+2) .bx-chap-tete::after { content: "ドン"; content: "ドン" / ""; }
.bx-anime .bx-chapitre:nth-of-type(4n+3) .bx-chap-tete::after { content: "ザッ"; content: "ザッ" / ""; }
.bx-anime .bx-papier-piste .bx-chap-tete::after { content: "ブォン"; content: "ブォン" / ""; }

/* Le grand titre « Sommaire » : souligné d'un coup de pinceau rouge. */
.bx-anime .bx-sommaire-titre { position: relative; display: inline-block; }
.bx-anime .bx-sommaire-titre::after,
.bx-anime .bx-pinceau::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -4%;
  bottom: -.16em;
  height: .16em;
  background: var(--mx-rouge);
  -webkit-mask: var(--ax-pinceau) center / 100% 100% no-repeat;
          mask: var(--ax-pinceau) center / 100% 100% no-repeat;
  transform-origin: left center;
}

/* ================================================== LA COLLECTION ANIME
   L'en-tête noir reçoit un éventail de cases Aura (décor, aria-hidden). */
.bx-anime .bx-anime-galerie {
  display: flex;
  gap: 10px;
  margin-top: 26px;
  pointer-events: none;
}
.bx-anime .bx-anime-galerie span {
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: var(--mx-trait) solid var(--mx-papier);
}
.bx-anime .bx-anime-galerie span:nth-child(odd) { rotate: -3deg; }
.bx-anime .bx-anime-galerie span:nth-child(even) { rotate: 2.5deg; translate: 0 8px; }
.bx-anime .bx-anime-galerie picture,
.bx-anime .bx-anime-galerie img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
@media (min-width: 900px) {
  .bx-anime .bx-anime-tete { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 46%); gap: 24px; align-items: center; }
  .bx-anime .bx-anime-galerie { margin: 0; height: clamp(220px, 22vw, 300px); }
  /* Le titre partage la largeur avec l'éventail : il ne doit pas se couper (« Anim / e »). */
  .bx-anime .bx-anime-titre { font-size: clamp(72px, 8.4vw, 132px); }
  .bx-anime .bx-anime-galerie span { aspect-ratio: auto; }
}

/* ================================================== LA FICHE PRODUIT */
/* Le titre se souligne d'un coup de pinceau. */
.bx-anime.single-product .entry-summary .product_title { position: relative; padding-bottom: .18em; }
.bx-anime.single-product .entry-summary .product_title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -.04em;
  width: min(100%, 9em);
  height: .16em;
  background: var(--mx-rouge);
  -webkit-mask: var(--ax-pinceau) center / 100% 100% no-repeat;
          mask: var(--ax-pinceau) center / 100% 100% no-repeat;
  transform-origin: left center;
}
/* La phrase de la pièce : une bulle de narration, avec sa pointe. */
.bx-anime.single-product .woocommerce-product-details__short-description {
  position: relative;
  margin: 14px 0 22px;
  padding: 14px 18px;
  background: var(--mx-blanc);
  color: var(--mx-encre);
  border: var(--mx-trait) solid var(--mx-encre);
  font-weight: 700;
}
.bx-anime.single-product .woocommerce-product-details__short-description p { margin: 0; }
.bx-anime.single-product .woocommerce-product-details__short-description::before,
.bx-anime.single-product .woocommerce-product-details__short-description::after {
  content: "";
  position: absolute;
  left: 28px;
  width: 0;
  height: 0;
  border-style: solid;
}
.bx-anime.single-product .woocommerce-product-details__short-description::before { top: -17px; border-width: 0 0 17px 17px; border-color: transparent transparent var(--mx-encre) transparent; }
.bx-anime.single-product .woocommerce-product-details__short-description::after { top: -11px; left: 31px; border-width: 0 0 11px 11px; border-color: transparent transparent var(--mx-blanc) transparent; }
/* Une onomatopée en contour derrière la colonne d'achat (grand écran). */
@media (min-width: 900px) {
  .bx-anime.single-product .entry-summary { position: relative; isolation: isolate; }
  .bx-anime.single-product .entry-summary::before {
    content: "ドン";
    content: "ドン" / "";
    position: absolute;
    z-index: -1;
    top: -10px;
    right: 0;
    font: var(--ax-sfx);
    font-size: 140px;
    color: transparent;
    -webkit-text-stroke: 2px var(--mx-encre);
    opacity: .08;
    rotate: -10deg;
    pointer-events: none;
  }
}
/* La photo : une case de manga, sa trame dans le coin. */
.bx-anime.single-product .woocommerce-product-gallery { position: relative; }

/* ================================================== PANIER ET COMMANDE
   Mode tâche : décor discret, rien sur les champs ni sur les boutons. */
.bx-anime.woocommerce-cart h1.page-title,
.bx-anime.woocommerce-checkout h1.page-title,
.bx-anime.woocommerce-cart .entry-title,
.bx-anime.woocommerce-checkout .entry-title { position: relative; display: inline-block; }
.bx-anime.woocommerce-cart h1.page-title::after,
.bx-anime.woocommerce-checkout h1.page-title::after,
.bx-anime.woocommerce-cart .entry-title::after,
.bx-anime.woocommerce-checkout .entry-title::after {
  content: "";
  position: absolute;
  left: 0;
  right: -6%;
  bottom: -.12em;
  height: .16em;
  background: var(--mx-rouge);
  -webkit-mask: var(--ax-pinceau) center / 100% 100% no-repeat;
          mask: var(--ax-pinceau) center / 100% 100% no-repeat;
  pointer-events: none;
}

/* ================================================== LE PIED DE PAGE
   Le mot BLEDX imprimé en double, sur des lignes de vitesse. */
.bx-anime .bledx-pied .bledx-pied-signature { position: relative; isolation: isolate; overflow: hidden; }
.bx-anime .bledx-pied .bledx-pied-signature::before {
  content: "";
  position: absolute;
  inset: -60% -10%;
  z-index: -1;
  color: var(--mx-papier);
  background: var(--ax-vitesse);
  -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, transparent 0 30%, #000 80%);
          mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, transparent 0 30%, #000 80%);
  opacity: .12;
  pointer-events: none;
}
.bx-anime .bledx-pied .bledx-pied-mot { text-shadow: .045em .045em 0 var(--mx-papier); }

/* ================================================== LE TIROIR DU TÉLÉPHONE
   Une double page noire : lignes de vitesse, les entrées numérotées comme
   des chapitres, et un personnage Aura qui monte dans le coin. */
.bx-anime #offcanvas .ct-panel-inner { isolation: isolate; }
/* Le fond noir reste sur le tiroir seul : sinon il recouvre le décor. */
.bx-anime #offcanvas .ct-panel-content { background: transparent !important; }
.bx-anime #offcanvas.active .ct-panel-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  color: var(--mx-papier);
  background: repeating-conic-gradient(from 0deg at 80% 85%, currentColor 0deg .55deg, transparent .55deg 4.2deg);
  -webkit-mask-image: radial-gradient(circle at 80% 85%, transparent 0 18%, #000 60%);
          mask-image: radial-gradient(circle at 80% 85%, transparent 0 18%, #000 60%);
  opacity: .1;
  pointer-events: none;
}
.bx-anime #offcanvas.active [data-device="mobile"] .ct-panel-content-inner::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: 0;
  width: 60%;
  aspect-ratio: 480 / 724;
  background: url("../visuels/aura/jjk-480.webp") center bottom / contain no-repeat;
  border: var(--mx-trait) solid var(--mx-papier);
  border-bottom: 0;
  border-right: 0;
  rotate: -4deg;
  pointer-events: none;
}
.bx-anime #offcanvas [data-device="mobile"] .ct-panel-content-inner { position: static; }
.bx-anime #offcanvas .mobile-menu > ul { counter-reset: bx-menu; }
.bx-anime #offcanvas .mobile-menu > ul > li:not(.bledx-menu-panier) { counter-increment: bx-menu; }
.bx-anime #offcanvas .mobile-menu > ul > li:not(.bledx-menu-panier) > a::before,
.bx-anime #offcanvas .mobile-menu > ul > li > .ct-sub-menu-parent > a::before {
  content: counter(bx-menu, decimal-leading-zero);
  margin-right: 12px;
  font-family: var(--mx-texte);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--mx-gris-nuit);
  vertical-align: .55em;
}

/* ================================================== LA PAGE PERDUE (404) */
.bx-anime .bx-perdu-tete { overflow: hidden; }
.bx-anime .bx-perdu-case {
  float: right;
  width: min(38%, 360px);
  margin: 0 0 18px 24px;
  border: var(--mx-trait) solid var(--mx-papier);
  rotate: 3deg;
  background: var(--mx-nuit);
  position: relative;
  /* le bas déchiré : la case a été arrachée de la planche */
  clip-path: polygon(0 0, 100% 0, 100% 92%, 88% 97%, 76% 91%, 63% 99%, 50% 93%, 37% 100%, 24% 92%, 12% 98%, 0 93%);
}
.bx-anime .bx-perdu-case picture,
.bx-anime .bx-perdu-case img { display: block; width: 100%; height: auto; }
.bx-anime .bx-perdu-sfx {
  position: absolute;
  top: 6%;
  left: 6%;
  font: var(--ax-sfx);
  font-size: clamp(34px, 4vw, 60px);
  color: var(--mx-rouge);
  -webkit-text-stroke: 3px var(--mx-papier);
  paint-order: stroke fill;
  rotate: -12deg;
}

/* ================================================== À PROPOS
   L'en-tête éditorial reçoit Itachi en case de travers (grand écran). */
@media (min-width: 900px) {
  .bx-anime .bx-edito-tete { position: relative; isolation: isolate; overflow: hidden; }
  .bx-anime .bx-edito-tete::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: max(24px, calc((100vw - 1400px) / 2 + 24px));
    top: 50%;
    width: min(26vw, 340px);
    aspect-ratio: 480 / 724;
    translate: 0 -50%;
    background: url("../visuels/aura/naruto-480.webp") center / cover no-repeat;
    border: var(--mx-trait) solid currentColor;
    rotate: 3deg;
    pointer-events: none;
  }
  .bx-anime .bx-edito-tete .bledx-container > * { max-width: min(58%, 720px); }
}

/* ================================================== LE TÉLÉPHONE */
@media (max-width: 900px) {
  .bx-ah-page { grid-template-columns: minmax(0, 1fr); gap: 14px; padding-top: 12px; }
  /* l'art d'abord, puis le titre et le bouton : visible sans défiler */
  .bx-ah-planche { order: -1; }
  .bx-ah-case { height: min(50vh, 460px); min-height: 340px; clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%); }
  .bx-ah-vue { clip-path: polygon(calc(5% - 1px) 0, 100% 0, 100% 100%, 0 100%); }
  .bx-ah-texte { gap: 14px; }
  /* le bouton avant le texte : visible sans défiler à 390 px */
  .bx-ah-titre { order: 1; }
  .bx-ah-actions { order: 2; }
  .bx-ah-chapo { order: 3; }
  .bx-ah-etat { order: 4; }
  /* le masthead de la couverture disparaît : le logo de l'en-tête revient */
  .bx-ah-tete { display: none; }
  .bx-anime.home.bledx-store header.ct-header .site-title,
  .bx-anime.home.bledx-store header.ct-header .site-logo-container { visibility: visible; }
  .bx-anime.home.bledx-store header.ct-header .site-title a { color: var(--mx-rouge) !important; }
  .bx-ah-titre { font-size: clamp(46px, 13vw, 72px); }
  .bx-ah-chapo { font-size: 17px; margin: 0; }
  .bx-ah-actions .bx-bouton { flex: 1 1 140px; }
  .bx-ah-prix { top: -4px; right: 0; font-size: 22px; }
  .bx-ah-legende { max-width: 78%; padding: 8px 12px 10px; font-size: 18px; }
  .bx-ah-sfx { left: 9%; }
}
@media (max-width: 720px) {
  .bledx-store .bx-ah-choix button { width: 48px; height: 48px; }
  .bledx-store .bx-ah-choix .bx-ah-pause { height: 48px; min-width: 64px; padding: 0 10px; }
  .bx-ap-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .bx-ap-case:nth-child(1) { grid-column: span 2; grid-row: auto; }
  .bx-ap-case:nth-child(1) .bx-ap-art { aspect-ratio: 4 / 5; }
  .bx-ap-cases:has(> li:nth-child(7)):not(:has(> li:nth-child(8))) > .bx-ap-case:nth-child(n+6) { grid-column: auto; }
  .bx-ap-cases:has(> li:nth-child(7)):not(:has(> li:nth-child(8))) > .bx-ap-case:nth-child(n+6) .bx-ap-art { aspect-ratio: 3 / 4; }
  .bx-ap-tee { bottom: 96px; right: 6px; width: 30%; }
  .bx-ap-case:not(:nth-child(1)) .bx-ap-tee { display: none; }
  .bx-ap-legende b { font-size: 15px; }
  .bx-anime .bx-perdu-case { float: none; width: min(62%, 260px); margin: 0 0 18px; }
  .bx-anime .bx-papier-nuit::before,
  .bx-anime .bx-ap::before,
  .bx-anime .bx-papier-blanc::before { top: -11px; height: 12px; }
  /* La grande case des hoodies : en deux colonnes elle n'a que la moitié de
     l'écran, le prix géant s'y coupait (« 349,00 D / H »). */
  .bx-anime ul.products.bx-cases:not(:has(> li:nth-child(5))) > li.product:first-child .price { font-size: 17px !important; white-space: nowrap; }
  .bx-anime ul.products.bx-cases:not(:has(> li:nth-child(5))) > li.product:first-child .woocommerce-loop-product__title { font-family: var(--mx-texte) !important; font-weight: 800 !important; font-size: 15px !important; }
}

/* ================================================== LE MOUVEMENT
   Tout ce qui suit n'existe que si le visiteur accepte le mouvement. */
@media (prefers-reduced-motion: no-preference) {
  /* Arrivée de la couverture (une fois) : le titre frappe, le pinceau se
     tire, l'art monte et l'onomatopée se tamponne. L'art n'est jamais masqué
     à l'entrée : il glisse, il ne se découvre pas (LCP). */
  .bx-ah-titre { animation: ax-frappe 700ms var(--mx-sortie) 80ms backwards; }
  .bx-ah-titre em::after { animation: ax-trait 520ms var(--ax-coupe) 520ms backwards; }
  .bx-ah-chapo, .bx-ah-etat, .bx-ah-actions { animation: ax-leve 600ms var(--mx-sortie) backwards; }
  .bx-ah-chapo { animation-delay: 240ms; }
  .bx-ah-etat { animation-delay: 320ms; }
  .bx-ah-actions { animation-delay: 400ms; }
  .bx-ah-prix { animation: ax-tampon 520ms var(--mx-sortie) 700ms backwards; }
  .bx-ah-choix button { animation: ax-leve 460ms var(--mx-sortie) backwards; animation-delay: calc(500ms + var(--bx-j, 0) * 45ms); }
  .bx-ah-choix button:nth-child(2) { --bx-j: 1; }
  .bx-ah-choix button:nth-child(3) { --bx-j: 2; }
  .bx-ah-choix button:nth-child(4) { --bx-j: 3; }
  .bx-ah-choix button:nth-child(5) { --bx-j: 4; }
  .bx-ah-choix button:nth-child(6) { --bx-j: 5; }
  .bx-ah-choix button:nth-child(7) { --bx-j: 6; }
  .bx-ah-choix button:nth-child(8) { --bx-j: 7; }
  .bx-ah-choix button:nth-child(9) { --bx-j: 8; }

  /* La vue active : l'art se pose, le nom glisse, l'onomatopée se tamponne. */
  .bx-ah-vue.est-active picture { animation: ax-pose 900ms var(--mx-sortie) backwards; }
  .bx-ah-vue.est-active .bx-ah-nom { animation: ax-glisse-v 700ms var(--mx-sortie) 120ms backwards; }
  .bx-ah-vue.est-active .bx-ah-sfx { animation: ax-tampon 480ms var(--mx-sortie) 360ms backwards; }
  .bx-ah-vue.est-active .bx-ah-legende { animation: ax-glisse-g 520ms var(--mx-sortie) 260ms backwards; }
  /* Au changement (pas au chargement) : le pinceau balaie la case. */
  .bx-ah-pret .bx-ah-vue.est-active { animation: ax-balaie 720ms var(--ax-coupe) backwards; }

  /* Les boucles : le halo respire, l'art flotte, les lignes tournent, les
     onomatopées tremblent. Arrêtées hors de l'écran ou en pause. */
  .bx-ah-vue.est-active .bx-ah-aura { animation: ax-respire 2600ms ease-in-out infinite alternate; }
  .bx-ah-vue.est-active img { animation: ax-flotte 4200ms ease-in-out infinite alternate; }
  .bx-ah-vue.est-active .bx-ah-vitesse { animation: ax-eclat 800ms var(--mx-sortie) backwards, ax-tourne 90s linear infinite; }
  .bx-ah-vue.est-active .bx-ah-sfx { animation: ax-tampon 480ms var(--mx-sortie) 360ms backwards, ax-tremble 420ms steps(2) 900ms infinite; }
  .bx-ah.bx-hors-champ * { animation-play-state: paused !important; }
  /* En pause : les boucles s'arrêtent, les entrées d'une vue choisie jouent. */
  .bx-ah-arret .bx-ah-vue.est-active .bx-ah-aura,
  .bx-ah-arret .bx-ah-vue.est-active img { animation-play-state: paused; }
  .bx-ah-arret .bx-ah-vue.est-active .bx-ah-vitesse { animation: ax-eclat 800ms var(--mx-sortie) backwards; }
  .bx-ah-arret .bx-ah-vue.est-active .bx-ah-sfx { animation: ax-tampon 480ms var(--mx-sortie) 360ms backwards; }

  /* Le trait de lecture automatique (piloté par bledx-anime.js). */
  .bx-ah-lecture .bx-ah-choix button.est-active i { animation: ax-temps var(--bx-duree, 6500ms) linear; }

  /* La planche Aura : chaque case se découpe à son arrivée, une fois. */
  .bx-ap-case.bx-attend,
  .bx-ap-tete h2.bx-attend { opacity: 0; }
  .bx-ap-case.bx-vu { animation: ax-case 640ms var(--mx-sortie) backwards; animation-delay: calc(var(--bx-i, 0) * 70ms); }
  .bx-ap-tete h2.bx-vu { animation: ax-frappe 640ms var(--mx-sortie) backwards; }
  .bx-ap-case:nth-child(1) .bx-ap-sfx { animation: ax-tremble 420ms steps(2) infinite; }

  /* Le coup de pinceau se tire quand le titre arrive. */
  .bx-anime .bx-sommaire-titre.bx-vu::after,
  .bx-anime.single-product .entry-summary .product_title::after { animation: ax-trait 600ms var(--ax-coupe) 300ms backwards; }

  /* Le tiroir : les entrées tombent une à une, le personnage monte. */
  .bx-anime #offcanvas.active .mobile-menu > ul > li { animation: ax-leve 420ms var(--mx-sortie) backwards; }
  .bx-anime #offcanvas.active .mobile-menu > ul > li:nth-child(2) { animation-delay: 50ms; }
  .bx-anime #offcanvas.active .mobile-menu > ul > li:nth-child(3) { animation-delay: 100ms; }
  .bx-anime #offcanvas.active .mobile-menu > ul > li:nth-child(4) { animation-delay: 150ms; }
  .bx-anime #offcanvas.active .mobile-menu > ul > li:nth-child(5) { animation-delay: 200ms; }
  .bx-anime #offcanvas.active .mobile-menu > ul > li:nth-child(6) { animation-delay: 250ms; }
  .bx-anime #offcanvas.active .mobile-menu > ul > li:nth-child(n+7) { animation-delay: 300ms; }
  .bx-anime #offcanvas.active [data-device="mobile"] .ct-panel-content-inner::after { animation: ax-monte 700ms var(--mx-sortie) 160ms backwards; }

  /* La collection Anime : l'éventail se déploie. */
  .bx-anime .bx-anime-galerie span { animation: ax-carte 620ms var(--mx-sortie) backwards; }
  .bx-anime .bx-anime-galerie span:nth-child(2) { animation-delay: 80ms; }
  .bx-anime .bx-anime-galerie span:nth-child(3) { animation-delay: 160ms; }
  .bx-anime .bx-anime-galerie span:nth-child(4) { animation-delay: 240ms; }

  /* 404 : la case arrachée tombe de travers. */
  .bx-anime .bx-perdu-case { animation: ax-arrache 800ms var(--mx-sortie) backwards; }

  @keyframes ax-frappe { from { opacity: 0; scale: 1.35; filter: blur(6px); } 60% { opacity: 1; scale: .97; filter: none; } to { opacity: 1; scale: 1; } }
  @keyframes ax-trait { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes ax-leve { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
  @keyframes ax-tampon { from { opacity: 0; scale: 2.2; rotate: -24deg; } 60% { opacity: 1; scale: .92; } to { opacity: 1; scale: 1; } }
  @keyframes ax-pose { from { translate: 0 28px; scale: 1.06; } to { translate: 0 0; scale: 1; } }
  @keyframes ax-glisse-v { from { opacity: 0; translate: 0 -40px; } to { opacity: 1; translate: 0 0; } }
  @keyframes ax-glisse-g { from { opacity: 0; translate: -30px 0; } to { opacity: 1; translate: 0 0; } }
  @keyframes ax-eclat { from { opacity: 0; scale: 1.3; } to { opacity: .2; scale: 1; } }
  @keyframes ax-balaie {
    from { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
    to { clip-path: polygon(calc(7% - 1px) 0, 100% 0, 100% 100%, 0 100%); }
  }
  @keyframes ax-respire { from { opacity: .35; scale: .92; } to { opacity: .62; scale: 1.06; } }
  @keyframes ax-flotte { from { transform: translateY(0); } to { transform: translateY(-8px); } }
  @keyframes ax-tourne { to { rotate: 360deg; } }
  @keyframes ax-tremble { 0% { translate: 0 0; } 50% { translate: 1.5px -1px; } 100% { translate: -1px 1px; } }
  @keyframes ax-temps { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes ax-case {
    from { opacity: 0; clip-path: inset(0 0 100% 0); translate: 0 24px; }
    to { opacity: 1; clip-path: inset(0 0 0 0); translate: 0 0; }
  }
  @keyframes ax-monte { from { opacity: 0; translate: 0 60px; } to { opacity: 1; translate: 0 0; } }
  @keyframes ax-carte { from { opacity: 0; translate: 0 30px; rotate: 0deg; } to { opacity: 1; } }
  @keyframes ax-arrache { from { opacity: 0; translate: 0 -40px; rotate: -10deg; } to { opacity: 1; translate: 0 0; } }
}
/* Sur téléphone, la case garde son biais pendant le balayage. */
@media (prefers-reduced-motion: no-preference) and (max-width: 900px) {
  @keyframes ax-balaie-t {
    from { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
    to { clip-path: polygon(calc(5% - 1px) 0, 100% 0, 100% 100%, 0 100%); }
  }
  .bx-ah-pret .bx-ah-vue.est-active { animation-name: ax-balaie-t; }
}

/* Le lien « Panier » du tiroir s'écrivait en encre sur le noir (19,19,19 sur
   10,10,10 : invisible, défaut antérieur trouvé le 2026-11-02). */
.bx-anime #offcanvas .bledx-menu-panier a,
.bx-anime #offcanvas .bledx-menu-panier a span { color: var(--mx-papier) !important; }
.bx-anime #offcanvas .bledx-menu-panier a { font-family: var(--mx-titre); font-size: 20px; gap: 10px; }