/* Police custom pour le titre des fiches produit Barber */
@font-face {
  font-family: "BillaMount";
  src: url("../assets/fonts/BillaMount-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* ============================================================
   Roast toast (visit counter)
   ============================================================ */
.rc-roast {
  position: fixed;
  right: 18px; bottom: 18px;
  max-width: 320px;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: var(--fg);
  color: var(--bg);
  border: 2px solid var(--fg);
  border-radius: 6px;
  box-shadow: 4px 4px 0 var(--bg), 4px 4px 0 1px var(--fg);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  z-index: 1500;
  transform: translateX(120%);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(.2,.9,.3,1.2), opacity 0.3s;
}
.rc-roast.show { transform: translateX(0); opacity: 1; }
.rc-roast-count {
  font-weight: bold;
  background: var(--accent);
  color: var(--fg);
  padding: 2px 7px; border-radius: 3px;
  font-size: 11px;
  flex-shrink: 0;
}
.rc-roast-msg { flex: 1; line-height: 1.4; }
.rc-roast-close {
  background: transparent;
  border: none;
  color: var(--bg);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  opacity: 0.6;
}
.rc-roast-close:hover { opacity: 1; }

/* ============================================================
   Reroll-dice button : mini-dés outline à côté du titre du tee.
   Click = reroll dans le thème actif + +10% sur le prix.
   ============================================================ */
.design-name-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.design-name-row .design-name { flex: 0 0 auto; }
.reroll-dice {
  background: transparent !important;
  border: none;
  outline: none;
  padding: 0;
  cursor: pointer;
  display: inline-block;
  flex-shrink: 0;
  overflow: visible;
  -webkit-tap-highlight-color: transparent;
}
.design-name-row { overflow: visible; }
.reroll-dice:hover, .reroll-dice:focus, .reroll-dice:active {
  background: transparent !important;
  outline: none;
  box-shadow: none;
}
.reroll-dice svg {
  width: auto;
  height: 64px;
  overflow: visible !important;
  display: block;
  /* aspect-ratio géré inline par renderRerollDice pour matcher le viewBox calculé */
}
.reroll-dice svg * { overflow: visible; }
.reroll-dice, .reroll-dice * { overflow: visible !important; }
/* Style identique aux dés du logo : face teintée par thème + stroke contour + pips */
.reroll-dice .rc-die-face {
  fill: var(--rc-die-color, var(--bg));
  stroke: var(--fg);
  stroke-width: 1.5;
  stroke-linejoin: round;
  paint-order: fill stroke;
}
.reroll-dice .rc-die-pip {
  fill: var(--rc-pip-color, var(--fg));
}
.reroll-dice line {
  stroke: var(--fg);
  stroke-width: 0.6;
  opacity: 0.4;
}
/* Silhouette = path hexagonal tracé en dur sous chaque dé (pas de filtre, pas de crop) */
.reroll-dice .rc-die-silhouette {
  fill: var(--rc-sil-color, var(--fg));
  stroke: var(--rc-sil-color, var(--fg));
  stroke-width: var(--rc-sil-thick, 11);
  stroke-linejoin: round;
  stroke-linecap: round;
  paint-order: stroke fill;
}
/* Animation idem logo (wiggle) avec décalage marqué entre d1 et d2 */
.reroll-dice .dice-wrap {
  transform-box: fill-box;
  transform-origin: center;
  animation: rc-dice-wiggle 2.6s ease-in-out infinite;
}
.reroll-dice .dice-wrap.d1 { animation-delay: 0s; }
.reroll-dice .dice-wrap.d2 {
  /* d2 part avec un décalage prononcé + alterne avec un timing un peu différent */
  animation-name: rc-dice-wiggle-rev;
  animation-delay: -0.9s;
}
.reroll-dice:hover .dice-wrap {
  animation: rc-dice-spin 0.7s linear infinite;
}
.reroll-dice:hover .dice-wrap.d2 { animation-delay: -0.35s; }
.reroll-dice.rolled .dice-wrap {
  animation: rc-dice-spin 0.5s linear !important;
}
.reroll-dice.rolled .dice-wrap.d2 { animation-delay: -0.15s !important; }

/* Wiggle inversé pour d2 — sens opposé au d1, casse le sync visuel */
@keyframes rc-dice-wiggle-rev {
  0%, 100% { transform: translate(0, 0) rotate(0) scale(1); }
  20% { transform: translate(1px, -2px) rotate(18deg) scale(1.15); }
  50% { transform: translate(0, -3px) rotate(0) scale(1.1); }
  80% { transform: translate(-1px, -2px) rotate(-18deg) scale(1.15); }
}

.price-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.price-mult-badge {
  background: var(--accent);
  color: var(--bg);
  padding: 3px 8px;
  border-radius: 3px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: bold;
  font-family: var(--font-mono);
  animation: rc-mult-bounce 0.5s ease-out;
}
@keyframes rc-mult-bounce {
  0% { transform: scale(0.5); opacity: 0; }
  60% { transform: scale(1.2); }
  100% { transform: scale(1); opacity: 1; }
}

/* Saved mockup : le tee-base IMG a son src swappé directement par main.js
   (utilise tout le sizing existant de .tee-mockup pour pleine taille) */
.tee-mockup img.tee-base.is-saved-mockup {
  /* contain garde le mockup entier visible, peu importe l'aspect ratio source */
  object-fit: contain;
}
#rc-saved-badge {
  display: inline-block;
  background: #7a3aff;
  color: white;
  padding: 3px 8px;
  border-radius: 3px;
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 4px;
  font-weight: bold;
}

/* Share button */
#share-btn {
  background: transparent;
  border: 1px dashed var(--fg);
  color: var(--fg);
  padding: 10px 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
#share-btn:hover {
  background: var(--fg);
  color: var(--bg);
}


html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-mono);
  letter-spacing: var(--page-letter-spacing);
  min-height: 100vh;
}

html { overflow-x: clip; }
body {
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 32px 32px;
  position: relative;
  overflow-x: clip;
}

body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  z-index: 1000;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 28px;
  border-bottom: 1px solid var(--fg);
  background: var(--bg);
  position: sticky; top: 0; z-index: 10;
}

.brand {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.brand--logo {
  display: inline-flex;
  align-items: center;
  height: 88px;
  text-decoration: none;
  color: inherit;
  line-height: 0;
}
.brand--logo svg {
  height: 100%;
  width: auto;
  display: block;
  overflow: visible;
}
/* CSS vars logo — themes can override via :root or body.theme-*  */
:root {
  --rc-sil-color: var(--fg);    /* silhouette dynamique */
  --rc-pip-color: var(--fg);    /* pips de dés */
  --rc-letter-color: var(--bg); /* lettres */
  --rc-die-color: var(--bg);    /* face des dés */
}
.brand--logo .cls-2 { fill: var(--rc-sil-color); }
.brand--logo .cls-1 { fill: var(--rc-letter-color); }
/* Faces des dés générés (par ID pour compat avec themes existants) */
.brand--logo #dice1top, .brand--logo #dice1right, .brand--logo #dice1left,
.brand--logo #dice2left, .brand--logo #dice2right, .brand--logo #dicetop {
  fill: var(--rc-die-color);
}
/* Auto-silhouette : flood-color via CSS var */
.brand--logo feFlood { flood-color: var(--rc-sil-color); }
.brand--logo .rc-die-face {
  stroke: var(--fg);
  stroke-width: 2.2;
  stroke-linejoin: round;
  paint-order: fill stroke;
}
.brand--logo .rc-die-pip { fill: var(--rc-pip-color); }
/* Force overflow visible pour que le contour dilaté ne soit pas coupé */
.brand--logo, .brand--logo svg { overflow: visible; }
nav { overflow: visible; }
.brand--logo::before,
.brand--logo::after { content: none !important; }

/* === Animations playful === */
.brand--logo svg path[id] {
  transform-box: fill-box;
  transform-origin: center;
}

/* Lettres : bob séquentiel permanent (vague) */
.brand--logo #r,
.brand--logo #a,
.brand--logo #n,
.brand--logo #d,
.brand--logo #o,
.brand--logo #m,
.brand--logo #c,
.brand--logo #l,
.brand--logo #o-2,
.brand--logo #t,
.brand--logo #h,
.brand--logo #es {
  animation: rc-letter-bob 2.4s ease-in-out infinite;
}
.brand--logo #r    { animation-delay: 0.00s; }
.brand--logo #a    { animation-delay: 0.08s; }
.brand--logo #n    { animation-delay: 0.16s; }
.brand--logo #d    { animation-delay: 0.24s; }
.brand--logo #o    { animation-delay: 0.32s; }
.brand--logo #m    { animation-delay: 0.40s; }
.brand--logo #c    { animation-delay: 0.52s; }
.brand--logo #l    { animation-delay: 0.60s; }
.brand--logo #o-2  { animation-delay: 0.68s; }
.brand--logo #t    { animation-delay: 0.76s; }
.brand--logo #h    { animation-delay: 0.84s; }
.brand--logo #es   { animation-delay: 0.92s; }

@keyframes rc-letter-bob {
  0%, 55%, 100% { transform: translateY(0) rotate(0); }
  25% { transform: translateY(-2.5px) rotate(-2deg); }
  40% { transform: translateY(-1px) rotate(1deg); }
}

/* Dés : chaque dé bouge comme un bloc (groupe SVG) */
.brand--logo #dice-1,
.brand--logo #dice-2 {
  transform-box: fill-box;
  transform-origin: center;
  animation: rc-dice-wiggle 2.8s ease-in-out infinite;
}
.brand--logo #dice-1 { animation-delay: 0s; }
.brand--logo #dice-2 { animation-delay: 0.4s; }

@keyframes rc-dice-wiggle {
  0%, 100% { transform: translate(0, 0) rotate(0) scale(1); }
  20% { transform: translate(-1px, -2px) rotate(-18deg) scale(1.15); }
  50% { transform: translate(0, -3px) rotate(0) scale(1.1); }
  80% { transform: translate(1px, -2px) rotate(18deg) scale(1.15); }
}

/* Hover : tout s'emballe */
.brand--logo:hover svg { animation: rc-logo-tilt 0.5s ease-in-out infinite alternate; }
@keyframes rc-logo-tilt {
  from { transform: rotate(-1.5deg) scale(1); }
  to   { transform: rotate(1.5deg) scale(1.03); }
}
/* Logo harmonisé "Random Cut" : barre barber-pole (rouge/blanc/bleu) qui défile sous le logo */
body.theme-barber .brand--logo { position: relative; display: inline-block; }
body.theme-barber .brand--logo::after {
  content: "";
  position: absolute;
  left: 2px; right: 2px; bottom: -7px;
  height: 5px;
  border-radius: 3px;
  background: repeating-linear-gradient(45deg,
    #e0241f 0 8px, #ffffff 8px 16px, #1f49d6 16px 24px, #ffffff 24px 32px);
  box-shadow: 0 1px 3px rgba(0,0,0,.22), inset 0 0 0 1px rgba(0,0,0,.08);
  animation: barber-pole-x 1s linear infinite;
}
@keyframes barber-pole-x {
  from { background-position: 0 0; }
  to   { background-position: 45.25px 0; }   /* 32px / cos(45°) = défilement seamless */
}
@media (prefers-reduced-motion: reduce) {
  body.theme-barber .brand--logo::after { animation: none; }
}
.brand--logo:hover #r,
.brand--logo:hover #a,
.brand--logo:hover #n,
.brand--logo:hover #d,
.brand--logo:hover #o,
.brand--logo:hover #m,
.brand--logo:hover #c,
.brand--logo:hover #l,
.brand--logo:hover #o-2,
.brand--logo:hover #t,
.brand--logo:hover #h,
.brand--logo:hover #es {
  animation: rc-letter-jump 0.55s ease-in-out infinite;
}
@keyframes rc-letter-jump {
  0%, 100% { transform: translateY(0) scale(1) rotate(0); }
  50% { transform: translateY(-5px) scale(1.15) rotate(-5deg); }
}
.brand--logo:hover #dice-1,
.brand--logo:hover #dice-2 {
  animation: rc-dice-spin 0.9s linear infinite;
}
@keyframes rc-dice-spin {
  to { transform: rotate(360deg) scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  .brand--logo svg path[id] { animation: none !important; }
}

@media (max-width: 820px) {
  .brand--logo { height: 64px; }
}
@media (max-width: 480px) {
  .brand--logo { height: 52px; }
}

nav ul { display: flex; gap: 22px; list-style: none; }
nav a {
  color: var(--fg);
  text-decoration: none;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
nav a:hover { color: var(--accent); }

nav .price-tag {
  display: inline-block;
  margin-left: 4px;
  padding: 2px 5px;
  font-size: 9px;
  letter-spacing: 0.05em;
  background: var(--fg);
  color: var(--bg);
  border-radius: 2px;
  vertical-align: middle;
}
nav a:hover .price-tag {
  background: var(--accent);
  color: var(--bg);
}

.tagline {
  text-align: center;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--muted);
  margin: 0 0 40px;
  padding-bottom: 24px;
  border-bottom: 1px dashed var(--grid-line);
}

.cross-links {
  margin-top: 80px;
  padding-top: 32px;
  border-top: 1px solid var(--fg);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  text-align: center;
  color: var(--muted);
}
.cross-links a {
  color: var(--fg);
  text-decoration: none;
  margin: 0 4px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--fg);
}
.cross-links a:hover {
  color: var(--accent);
  border-color: var(--accent);
}

main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px 28px 120px;
}

.stage {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 64px;
  align-items: start;
}

.tee-wrap {
  position: relative;
  aspect-ratio: 1 / 1.1;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: skew(var(--tee-skew));
}

.tee-mockup {
  width: 100%;
  height: 100%;
  position: relative;
}

.tee-mockup img.tee-base {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.tee-design {
  position: absolute;
  top: 28%;
  left: 50%;
  transform: translateX(-50%);
  width: 42%;
  aspect-ratio: 1 / 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.tee-design svg, .tee-design img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.tee-design .text-design {
  font-family: var(--font-tee);
  color: #111;
  text-transform: uppercase;
  line-height: 0.9;
  text-align: center;
  width: 100%;
}

.tee-design .text-design.center {
  font-size: clamp(36px, 7vw, 92px);
}
.tee-design .text-design.repeat {
  font-size: clamp(12px, 2vw, 22px);
  letter-spacing: 0.05em;
  word-break: break-word;
}
.tee-design .text-design.diagonal {
  transform: rotate(-12deg);
  font-size: clamp(28px, 5vw, 64px);
}

.tee-design .text-design .start {
  font-family: "Times New Roman", "Georgia", serif;
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  font-size: 0.55em;
  letter-spacing: 0;
  margin-bottom: 0.08em;
}
.tee-design .text-design .end {
  font-family: var(--font-tee);
  font-size: 1.1em;
}

.info {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.drop-badge {
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 1;
  letter-spacing: 0.02em;
}

.drop-badge.start-preview {
  font-family: "Times New Roman", "Georgia", serif;
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  font-size: 40px;
  letter-spacing: 0;
}

.start-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.start-row .start-preview { flex: 1; }

.dice-inline {
  width: 40px;
  height: 40px;
  padding: 0;
  flex-shrink: 0;
  font-size: 18px;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--fg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s;
  letter-spacing: 0;
}
.dice-inline:hover {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
  transform: rotate(12deg);
}

.drop-meta {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--muted);
  letter-spacing: 0.12em;
}

.design-name {
  font-family: var(--font-display);
  font-size: 28px;
  text-transform: uppercase;
  border-top: 1px solid var(--fg);
  border-bottom: 1px solid var(--fg);
  padding: 10px 0;
}

.price {
  font-family: var(--font-display);
  font-size: 38px;
}

.actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

button, .btn {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  padding: 16px 20px;
  border: 1px solid var(--fg);
  background: var(--bg);
  color: var(--fg);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

button.primary, .btn.primary {
  background: var(--fg);
  color: var(--bg);
}
button:hover { background: var(--accent); color: var(--bg); border-color: var(--accent); }

.size-row {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}
.size-row button {
  flex: 1;
  padding: 10px 0;
}
.size-row button.active {
  background: var(--fg);
  color: var(--bg);
}

/* CREATE page */
.create-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.create-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.create-form label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--muted);
  display: block;
  margin-bottom: 6px;
}

.create-form input[type="text"] {
  width: 100%;
  padding: 14px 12px;
  font-family: var(--font-display);
  font-size: 24px;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--fg);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.create-form input[type="text"]::placeholder { color: var(--muted); }
.create-form input[type="text"]:focus { outline: none; border-color: var(--accent); }

.preset-row { display: flex; gap: 8px; flex-wrap: wrap; }
.preset-row button {
  flex: 1;
  min-width: 90px;
}
.preset-row button.active {
  background: var(--fg);
  color: var(--bg);
}

footer {
  border-top: 1px solid var(--fg);
  padding: 28px;
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--muted);
}
footer a { color: inherit; }

@media (max-width: 820px) {
  .stage, .create-grid { grid-template-columns: 1fr; gap: 32px; }
  main { padding: 24px 16px 80px; }
  nav { padding: 14px 16px; flex-wrap: wrap; gap: 10px; }
  nav ul { gap: 14px; }
  .brand { font-size: 16px; }
  nav a { font-size: 11px; letter-spacing: 0.08em; }
}

@media (max-width: 480px) {
  nav ul { gap: 10px; width: 100%; justify-content: space-between; }
  nav a { font-size: 10px; }
  .drop-badge { font-size: 44px; }
}

/* ============================================================
   Mini-jeu BARBER POLITIQUE
   Affiché uniquement quand body.theme-barber est actif.
   La nav (logo) + le bouton dé flottant restent : re-roller le dé
   change de thème et fait sortir du mini-jeu.
   ============================================================ */
.barber-stage { display: none; }
body.theme-barber .stage,
body.theme-barber .cross-links,
body.theme-barber .tagline { display: none; }
body.theme-barber .barber-stage { display: block; }
body.theme-barber main { max-width: 1240px; }

.barber-head { text-align: center; margin-bottom: 18px; }
.barber-title {
  position: relative;
  display: inline-block;
  white-space: nowrap;             /* une seule ligne -> le contour s'aligne pile sur le texte */
  font-family: "BillaMount", var(--font-display);
  font-size: clamp(40px, 10vw, 64px);
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.05;
  color: #18181b;                  /* lettres pleines sombres (affiche toujours claire) */
  z-index: 0;
  padding: 18px 38px;              /* marge large pour que le contour entier respire */
}
/* contour "barber-pole" animé : copie EXACTE du texte en grosse bordure rayée, derrière */
.barber-title::before {
  content: attr(data-text);
  position: absolute;
  /* texte calé au même endroit que le titre (padding 18/38) mais grande boîte
     de fond (padding 30) pour que le fond rayé remplisse TOUT le contour,
     swashes cursifs compris (sinon les bouts de lettres ne sont pas couverts). */
  left: 8px; top: -12px;
  padding: 30px;
  white-space: nowrap;
  z-index: -1;
  -webkit-text-stroke: 3px transparent;   /* contour plus fin */
  background: repeating-linear-gradient(45deg,
    #e0241f 0 10px, #ffffff 10px 20px, #1f49d6 20px 30px, #ffffff 30px 40px);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: barber-pole 1.1s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .barber-title::before { animation: none; }
}
.barber-sub {
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.04em;
}
/* Dés (déclencheur du tirage) : PETITS, collés à la typo dans la ligne .bm-control */
.barber-roll {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px;
  position: relative;
  margin: 0;
  padding: 2px 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.barber-roll.is-hidden { visibility: hidden; pointer-events: none; }
.barber-roll:hover { background: transparent; transform: scale(1.1); }
.barber-roll:active { transform: scale(1); }
.barber-roll[disabled] { cursor: default; transform: none; }
.barber-dice { display: inline-flex; align-items: center; flex-shrink: 0; }
.barber-dice svg { height: 30px; }
/* quota épuisé : dés grisés (le chrono s'affiche en dessous, dans .barber-mode) */
.barber-roll.spent .barber-dice { filter: grayscale(1) opacity(0.5); }
.barber-roll-timer {
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.08em; line-height: 1;
  color: var(--accent); font-weight: 700;
  min-height: 0;
}
.barber-roll-timer:not(:empty)::before { content: "⏳ "; }
/* spin des dés pendant le tirage (réutilise l'anim du logo) */
.barber-roll.spinning .barber-dice .dice-wrap {
  animation: rc-dice-spin 0.45s linear infinite !important;
}
.barber-roll.spinning .barber-dice .dice-wrap.d2 { animation-delay: -0.2s !important; }

/* L'affiche : repère en coordonnées exactes du PSD (2224 x 1970) */
.barber-poster {
  position: relative;
  width: 100%;
  max-width: 1180px;
  margin: 8px auto 24px;
  aspect-ratio: 2224 / 1970;
  container-type: inline-size;   /* pour dimensionner les pastilles en cqw */
}

.bb-head {
  position: absolute;
  display: block;
  /* le liseré blanc (effet sticker) est cuit dans le PNG : aucun filtre runtime */
  transition: transform .25s cubic-bezier(.2,.9,.3,1.2), filter .25s ease;
  transform-origin: center center;
  cursor: pointer;
  z-index: var(--z, 1);
}
.bb-head:hover {
  transform: scale(1.13);
  z-index: calc(var(--z, 1) + 5);
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.20));
  animation: bb-head-shake .55s cubic-bezier(.36,.07,.19,.97);
}
@keyframes bb-head-shake {
  0%   { transform: scale(1.05) rotate(0deg);  }
  15%  { transform: scale(1.16) rotate(-5deg); }
  30%  { transform: scale(1.15) rotate(4deg);  }
  45%  { transform: scale(1.14) rotate(-3deg); }
  60%  { transform: scale(1.13) rotate(2deg);  }
  75%  { transform: scale(1.13) rotate(-1deg); }
  100% { transform: scale(1.13) rotate(0deg);  }
}
@media (prefers-reduced-motion: reduce) {
  .bb-head:hover { animation: none; }
}

.bb-badge {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  width: 1.44cqw; height: 1.44cqw;     /* 32px sur 2224px, comme l'affiche */
  border-radius: 50%;
  background: #000;
  color: #fff;
  font-family: var(--font-display), 'Arial Black', sans-serif;
  font-size: 0.95cqw;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
  z-index: 1000;
  transform-origin: center center;
  transition: transform .25s cubic-bezier(.2,.9,.3,1.2);
}
.bb-head:hover + .bb-badge { transform: scale(1.55); }

/* tête "pop" pendant le balayage du tirage */
.bb-head.pop {
  transform: scale(1.15) rotate(var(--rot, -5deg));
  z-index: calc(var(--z, 1) + 5);
  transition: transform .12s ease;
}
.bb-head.pop + .bb-badge { transform: scale(1.5); }
/* tête "gagnante" : garde sa DISPOSITION D'ORIGINE — aucun changement de z-index,
   pas de scale, pas de pop. Elle reste exactement à sa place/profondeur d'origine. */
.bb-head.selected {
  z-index: var(--z, 1);
}
.bb-head.selected + .bb-badge { transform: scale(1.9); background: var(--accent); }
@keyframes bb-win-pop {
  0%   { transform: scale(1.15) rotate(-3deg); }
  55%  { transform: scale(1.42) rotate(2deg);  }
  100% { transform: scale(1.28) rotate(0deg);  }
}

/* fond blanc + pas de grille sur le mini-jeu barber */
body.theme-barber { background-image: none; background-color: #fff; }

/* Toggle de mode façon réglages iPhone : RANDOM (€20) <-> CHOOSE YOUR PLAYER (€30) */
.barber-mode {
  display: flex;
  flex-direction: column;     /* toggle en haut · ligne label+dés+prix · chrono en bas */
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  position: relative;
}
/* ligne : RANDOM 🎲 €20 (les dés collés à la typo) */
.bm-control {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
/* Un seul libellé + un seul prix, qui changent avec une animation selon on/off */
.bm-label, .bm-price {
  display: inline-grid;
  overflow: hidden;
  text-align: center;
  line-height: 1.15;
  padding: 2px 0;
}
.bm-label {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg);
  min-width: 116px;
}
.bm-price {
  font-family: var(--font-display);
  font-size: 23px; color: var(--accent);
  min-width: 50px;
}
.bm-txt, .bm-num {
  grid-area: 1 / 1;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(80%);
  transition: opacity 0.3s ease, transform 0.45s cubic-bezier(.2,.9,.3,1.4);
}
/* RANDOM actif (€20, knob à droite) */
.ios-switch[aria-checked="true"] ~ .bm-control .bm-txt-random,
.ios-switch[aria-checked="true"] ~ .bm-control .bm-num-20 { opacity: 1; transform: translateY(0); }
.ios-switch[aria-checked="true"] ~ .bm-control .bm-txt-choose,
.ios-switch[aria-checked="true"] ~ .bm-control .bm-num-30 { opacity: 0; transform: translateY(-80%); }
/* CHOOSE YOUR CUT actif (€30, knob à gauche) */
.ios-switch[aria-checked="false"] ~ .bm-control .bm-txt-choose,
.ios-switch[aria-checked="false"] ~ .bm-control .bm-num-30 { opacity: 1; transform: translateY(0); }
.ios-switch[aria-checked="false"] ~ .bm-control .bm-txt-random,
.ios-switch[aria-checked="false"] ~ .bm-control .bm-num-20 { opacity: 0; transform: translateY(80%); }
@media (prefers-reduced-motion: reduce) {
  .bm-txt, .bm-num { transition: opacity 0.2s ease; transform: none !important; }
}

/* ===== Toggle "barber-pole" chromé (mode 20/30) =====
   Piste à rayures rouge/blanc/bleu qui défilent à l'infini + knob chromé. */
.ios-switch {
  width: 46px; height: 24px;
  flex-shrink: 0;
  border-radius: 999px;
  border: none;
  padding: 0;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  /* cadre chromé poli */
  background: linear-gradient(180deg,
    #ffffff 0%, #eaeef1 11%, #bcc2c9 33%, #80878f 47%,
    #545b63 54%, #9aa1a8 70%, #d9dee2 87%, #f7f9fa 100%);
  box-shadow:
    0 2px 6px rgba(0,0,0,.38),
    0 0 0 1px rgba(90,96,103,.55),
    inset 0 0 0 1.5px rgba(255,255,255,.7),
    inset 0 0 8px rgba(0,0,0,.4);
}
/* piste à rayures barber-pole, défilement infini */
.ios-switch::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 999px;
  background: repeating-linear-gradient(45deg,
    #e0241f 0 10px, #ffffff 10px 20px, #1f49d6 20px 30px, #ffffff 30px 40px);
  animation: barber-pole 1.1s linear infinite;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.45), inset 0 0 0 1px rgba(0,0,0,.18);
  z-index: 1;
}
@keyframes barber-pole {
  from { background-position: 0 0; }
  to   { background-position: 0 -56.57px; }   /* 40px / sin(45°) = boucle sans couture */
}
/* knob chromé */
.ios-switch::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 40% 26%, #ffffff 0%, #eef1f3 12%, #c4cacf 40%, #7e858c 72%, #5b626a 88%, #aab0b6 100%);
  box-shadow: 0 1px 3px rgba(0,0,0,.5), 0 0 0 1px rgba(70,75,82,.5), inset 0 1px 1px rgba(255,255,255,.7), inset 0 -2px 4px rgba(0,0,0,.32);
  transition: transform 0.3s cubic-bezier(.2,.9,.3,1.4);
  z-index: 2;
}
/* RANDOM actif (€20, knob à droite — comme l'image, rayures visibles à gauche) */
.ios-switch[aria-checked="true"]::after  { transform: translateX(22px); }
/* CHOOSE actif (€30, knob à gauche) */
.ios-switch[aria-checked="false"]::after { transform: translateX(0); }
.ios-switch:hover { filter: brightness(1.04); }
@media (prefers-reduced-motion: reduce) {
  .ios-switch::before { animation: none; }
}

/* Dés verrouillés en mode Choose your player */
.barber-roll.locked { opacity: 0.3; filter: grayscale(1); cursor: not-allowed; }
.barber-roll.locked:hover { transform: none; }

/* En mode Choose : pas de cadre — l'agrandissement au survol suffit comme indice */

/* En mode Random : persos en gris contrasté. IMPORTANT : le filtre est sur l'IMAGE
   statique seule (pas sur .bb-head qui contient le canvas animé), sinon animer le
   canvas force Safari à re-rasteriser tout le groupe filtré → flash des contours voisins.
   La vidéo (canvas) est grisée directement en JS (voir playHeadVideo). */
.barber-poster.random-dim .bb-head-img {
  filter: grayscale(1) contrast(1.35);
  transition: filter 0.1s ease;
}
/* pendant le tirage : la tête balayée (.pop) et la gagnante (.selected) passent en couleur */
.barber-poster.random-dim .bb-head.pop .bb-head-img,
.barber-poster.random-dim .bb-head.selected .bb-head-img {
  filter: none;
}

/* Image + vidéo (anim au survol) remplissent le conteneur tête */
.bb-head-img, .bb-head-vid {
  width: 100%; height: 100%;
  display: block;
}
.bb-head-vid {
  position: absolute; inset: 0;
  object-fit: contain;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  will-change: transform;      /* couche GPU dédiée → l'anim ne re-rasterise pas les voisines */
  transform: translateZ(0);
}
/* Bascule INSTANTANÉE (pas de fondu) à l'affichage de la 1re frame → aucun trou blanc.
   La 1re frame de la vidéo = l'image de départ, donc le swap est invisible. */
.bb-head.vid-ready .bb-head-vid { opacity: 1; }
.bb-head.vid-ready .bb-head-img { opacity: 0; }
/* (le grisé de la vidéo en mode Random est géré dans le canvas, en JS — pas de filtre CSS ici) */

/* === Mobile : disposition exacte du PSD "mobile edition" (canvas 1608x2814) === */
@media (max-width: 700px) {
  .barber-poster {
    aspect-ratio: 1608 / 2814;
    max-width: 100%;
    margin: 8px auto 24px;
  }
  .barber-poster .bb-head {
    left: var(--ml) !important;
    top: var(--mt) !important;
    width: var(--mw) !important;
    height: var(--mh) !important;
    z-index: var(--mz, 1) !important;          /* empilement = ordre des calques PSD */
  }
  /* survol tactile (rare) : grossissement simple */
  .barber-poster .bb-head:hover {
    z-index: var(--mz, 1) !important;
    transform: scale(1.13);
  }
  /* vague : gonflement SINUSOÏDAL doux (grossit puis dégrossit) → moins choquant.
     Durée = largeur de crête (8) × pas (0,5 s) = 4 s. Reste dans son calque PSD. */
  .barber-poster .bb-head.playing {
    z-index: var(--mz, 1) !important;
    animation: bb-swell 4s cubic-bezier(.37, 0, .63, 1);   /* ease sinusoïdal */
  }
  @keyframes bb-swell {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.14); }
  }
  @keyframes bb-badge-swell {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.9); }
  }
  /* mais le tirage casino (roulette) garde son effet : la tête balayée / gagnante passe devant */
  .barber-poster .bb-head.pop { z-index: 4000 !important; }
  .barber-poster .bb-head.selected { z-index: 5000 !important; }
  /* numéros aux positions PSD mobile, toujours au-dessus des têtes */
  .barber-poster .bb-badge {
    left: var(--mbl) !important;
    top: var(--mbt) !important;
    width: 2.6cqw; height: 2.6cqw;
    font-size: 1.5cqw;
    z-index: 6000 !important;
  }
  /* le badge chiffre gonfle aussi (même sinus) quand l'animation s'active */
  .barber-poster .bb-head.playing + .bb-badge { animation: bb-badge-swell 4s cubic-bezier(.37, 0, .63, 1); }
}

/* Dés grisés en idle (mode Random), se colorent au survol → incite à cliquer. */
.barber-roll { overflow: visible; }
.barber-roll.cta .barber-dice {
  filter: grayscale(1) contrast(1.2);
  transition: filter 0.2s ease;
  animation: bb-cta-breathe-grey 1.2s ease-in-out infinite;
}
.barber-roll.cta:hover .barber-dice {
  filter: none;
  animation-play-state: paused;
  transform: scale(1.06);
}
@keyframes bb-cta-breathe-grey {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.07); }
}

/* Teaser "Wanna Play?" : petits dés qui pop à des positions aléatoires autour,
   message par-dessus, puis tout disparaît (récurrent en Random idle). */
.barber-tease {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 280px; height: 160px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 6;
}
.barber-tease.show { opacity: 1; }
.bt-msg {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) rotate(-4deg);
  font-family: var(--font-display);
  font-size: 30px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--accent);
  white-space: nowrap;
  text-shadow: 0 2px 0 var(--bg), 0 0 10px var(--bg), 0 0 14px var(--bg);
  z-index: 2;
}
.bt-die {
  position: absolute;
  font-size: 24px;
  opacity: 0;
  transform: scale(0) rotate(var(--rot, 0deg));
  animation: bt-die-pop 0.5s cubic-bezier(.2,.9,.3,1.7) forwards;
}
@keyframes bt-die-pop {
  0%   { opacity: 0; transform: scale(0)    rotate(var(--rot, 0deg)); }
  60%  { opacity: 1; transform: scale(1.25) rotate(var(--rot, 0deg)); }
  100% { opacity: 1; transform: scale(1)    rotate(var(--rot, 0deg)); }
}

/* Scale-in des dés à l'arrivée du mode Random (€20) */
.barber-roll.appear { animation: bb-dice-appear 0.5s cubic-bezier(.2,.9,.3,1.5); }
@keyframes bb-dice-appear {
  0%   { transform: scale(0);    opacity: 0; }
  55%  { transform: scale(1.22); opacity: 1; }
  100% { transform: scale(1); }
}

/* Bulle discrète "Wanna play?" à côté du label RANDOM (visible en mode Choose) */
.bm-mini-hint {
  position: absolute;
  top: 50%;
  left: 100%;            /* à droite du label RANDOM */
  margin-left: 16px;
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 7px 13px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-50%) scale(0.9);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(.2,.9,.3,1.4);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}
.bm-mini-hint::before {   /* petit ergot pointant vers RANDOM (à gauche) */
  content: "";
  position: absolute;
  left: -5px; top: 50%;
  transform: translateY(-50%);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 6px solid var(--accent);
}
.bm-mini-hint.show {
  opacity: 1;
  transform: translateY(-50%) scale(1);
  pointer-events: auto;
  animation: bb-mini-pulse 1.2s ease-in-out infinite;
}
@keyframes bb-mini-pulse {
  0%, 100% { transform: translateY(-50%) scale(1); }
  50%      { transform: translateY(-50%) scale(1.05); }
}
.bm-mini-hint:hover { background: var(--accent); filter: brightness(1.08); }

/* Ligne compteur de lancers / compte à rebours */
.barber-rolls {
  margin-top: 8px;
  min-height: 1.2em;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.barber-rolls b { color: var(--accent); font-variant-numeric: tabular-nums; }
.barber-rolls.cta {
  color: var(--fg);
  font-weight: 700;
  animation: bb-rolls-pulse 1.05s ease-in-out infinite;
}
@keyframes bb-rolls-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}
.barber-rolls.cooldown { color: var(--muted); font-weight: 700; }
.barber-rolls.cooldown b { font-size: 15px; }

/* Petite fenêtre d'incitation (Wanna Play? / passe en Choose your player) */
.barber-popup {
  position: fixed;
  top: 20%;
  left: 50%;
  z-index: 1300;
  min-width: 260px;
  max-width: 88vw;
  padding: 26px 30px 24px;
  background: var(--bg);
  border: 1px solid var(--fg);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.3);
  text-align: center;
  opacity: 0;
  transform: translate(-50%, -6px) scale(0.88);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.32s cubic-bezier(.2,.9,.3,1.45);
}
.barber-popup.show {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
  pointer-events: auto;
}
.bp-close {
  position: absolute;
  top: 6px; right: 10px;
  background: transparent;
  border: none;
  padding: 2px 6px;
  font-size: 20px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}
.bp-close:hover { background: transparent; color: var(--accent); }
.bp-title {
  font-family: var(--font-display);
  font-size: 30px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1;
}
.bp-sub {
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}
.bp-sub b { color: var(--accent); }
.bp-cta {
  margin-top: 18px;
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 13px 24px;
  font-family: var(--font-mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  animation: bb-rolls-pulse 1.05s ease-in-out infinite;
}
.bp-cta:hover { background: var(--accent); filter: brightness(1.1); }

/* ============================================================
   Page produit (clic sur un perso) : tee + choix de taille
   ============================================================ */
.barber-product {
  position: fixed;
  inset: 0;
  z-index: 8000;   /* au-dessus des têtes ET des badges mobiles (z-index 6000) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.barber-product.show { opacity: 1; pointer-events: auto; }
/* Fond clair flouté (léger, pas sombre) */
.pp-backdrop {
  position: absolute; inset: 0;
  background: rgba(252, 251, 249, 0.985);
  backdrop-filter: blur(14px);
}
/* Carte SANS cadre : transparente, pas de bordure ni d'ombre */
.pp-card {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 40px;
  align-items: center;
  width: min(900px, 92vw);
  max-height: 92vh;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}
/* Entrée explosive du tee, puis révélation décalée des infos */
.barber-product.show .pp-tee { animation: pp-burst 0.55s cubic-bezier(.2,1.5,.35,1) both; }
.barber-product.show .pp-info { animation: pp-rise 0.45s ease 0.42s both; }
.barber-product.show .pp-win  { animation: pp-win-pop 0.5s cubic-bezier(.2,.9,.3,1.6) 0.42s both; }
@keyframes pp-burst {
  0%   { transform: scale(0.15) rotate(-10deg); opacity: 0; }
  55%  { transform: scale(1.14) rotate(3deg);   opacity: 1; }
  78%  { transform: scale(0.96) rotate(-1deg); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes pp-rise {
  0%   { opacity: 0; transform: translateY(18px); }
  100% { opacity: 1; transform: translateY(0); }
}
.pp-x {
  position: absolute; top: -8px; right: -4px;
  background: transparent; border: none;
  font-size: 28px; line-height: 1; color: var(--fg);
  cursor: pointer; padding: 4px 8px; z-index: 2;
}
.pp-x:hover { background: transparent; color: var(--accent); }

/* tee détouré qui flotte (pas de boîte / cadre), juste une ombre portée douce */
.pp-tee {
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: none;
  min-height: 300px;
  position: relative;
}
.pp-tee-img {
  max-width: 100%;
  max-height: 64vh;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 18px 38px rgba(0, 0, 0, 0.16));
}

.pp-info { display: flex; flex-direction: column; }
.pp-eyebrow {
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
}
.pp-name {
  font-family: "BillaMount", var(--font-display);
  font-size: 40px; text-transform: none; letter-spacing: 0;
  margin: 6px 0 4px; line-height: 1.05;
  overflow-wrap: break-word;
}
.pp-price {
  font-family: var(--font-display);
  font-size: 30px; color: var(--accent); margin-bottom: 20px;
}
.pp-size-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
}
.pp-size-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--muted);
}
.pp-guide {
  background: transparent; border: none; padding: 0;
  color: var(--muted); cursor: pointer;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.04em; text-decoration: underline;
}
.pp-guide:hover { background: transparent; color: var(--accent); }
/* tailles : petits boutons ronds */
.pp-sizes { display: flex; gap: 10px; margin-bottom: 24px; }
.pp-size {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  border-radius: 50%;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent; color: var(--fg);
  border: 1px solid var(--fg);
  font-family: var(--font-mono); font-size: 12px; cursor: pointer;
  transition: background 0.12s, color 0.12s, transform 0.12s;
}
.pp-size:hover { background: rgba(0,0,0,0.06); transform: translateY(-1px); }
.pp-size.active { background: var(--fg); color: #fff; }
/* ajouter au panier : juste un cadre (contour) */
.pp-add {
  align-self: flex-start;
  background: transparent; color: var(--fg);
  border: 1px solid var(--fg);
  padding: 13px 26px; cursor: pointer;
  font-family: var(--font-mono); font-size: 13px;
  text-transform: uppercase; letter-spacing: 0.12em;
  transition: background 0.15s, color 0.15s;
}
.pp-add:hover { background: var(--fg); color: #fff; }
.pp-note {
  margin-top: 14px;
  font-size: 11px; color: var(--muted); line-height: 1.5;
}

/* Overlay Guide des tailles */
.pp-sizeguide {
  position: fixed; inset: 0; z-index: 8200;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.pp-sizeguide[hidden] { display: none; }
.ppsg-backdrop {
  position: absolute; inset: 0;
  background: rgba(20, 20, 22, 0.6);
  backdrop-filter: blur(4px);
}
.ppsg-card {
  position: relative; z-index: 1;
  background: #fff; padding: 18px;
  max-width: 90vw; max-height: 88vh;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
  display: flex; align-items: center; justify-content: center;
}
.ppsg-x {
  position: absolute; top: 4px; right: 10px;
  background: transparent; border: none;
  font-size: 24px; line-height: 1; color: var(--muted); cursor: pointer;
}
.ppsg-x:hover { background: transparent; color: var(--accent); }
.ppsg-img { max-width: 100%; max-height: 80vh; object-fit: contain; display: block; }
.ppsg-fallback {
  display: none;
  font-family: var(--font-mono); font-size: 13px; color: var(--muted);
  padding: 48px 40px; text-align: center;
}
.ppsg-card.ppsg-nofile .ppsg-img { display: none; }
.ppsg-card.ppsg-nofile .ppsg-fallback { display: block; }

/* État verrouillé (mode Random, perso non tiré) */
.pp-lock {
  display: none;
  margin-top: 12px;
  font-size: 12px; line-height: 1.5;
  color: var(--accent); font-weight: 700;
}
.barber-product.pp-locked .pp-lock { display: block; }
.barber-product.pp-locked .pp-add {
  opacity: 0.4; cursor: not-allowed; background: var(--muted); border-color: var(--muted);
}
.barber-product.pp-locked .pp-price { color: var(--muted); }
.barber-product.pp-locked .pp-tee-img { filter: grayscale(0.75) opacity(0.8); }
.barber-product.pp-locked .pp-tee::after {
  content: "🔒";
  position: absolute;
  font-size: 54px;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.3));
}
.pp-tee { position: relative; }

/* Bandeau "TU AS GAGNÉ !" (mode Random, tirage gagnant) */
.pp-win {
  display: none;
  grid-column: 1 / -1;
  justify-self: center;
  text-align: center;
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: var(--accent);
  padding: 10px 26px;
  border-radius: 999px;
  margin: 0 auto 6px;
  box-shadow: 0 10px 26px rgba(192, 57, 43, 0.35);
}
.barber-product.pp-won .pp-win {
  display: block;
  animation: pp-win-pop 0.5s cubic-bezier(.2,.9,.3,1.6);
}
@keyframes pp-win-pop {
  0% { transform: scale(0.7); opacity: 0; }
  60% { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1); }
}
@media (max-width: 720px) {
  /* tooltip "wanna play" desktop : il dépassait à droite (left:100%) et élargissait
     la page sur mobile → on le masque (le tease des dés joue déjà ce rôle au tactile) */
  .bm-mini-hint { display: none !important; }
  /* le modal occupe tout l'écran, contenu calé en haut (plus de gros vide ni de croix flottante) */
  .barber-product { padding: 0; align-items: stretch; justify-content: stretch; }
  .pp-card {
    box-sizing: border-box;
    grid-template-columns: 1fr;
    gap: 6px;
    width: 100%;
    max-width: 100%;
    max-height: 100dvh;
    height: 100dvh;
    padding: 52px 22px 28px;
    align-content: start;
    align-items: stretch;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .pp-card > * { min-width: 0; }
  /* croix toujours fixée dans le coin haut-droit de l'écran */
  .pp-x {
    position: fixed;
    top: 12px; right: 14px;
    font-size: 30px; line-height: 1;
    z-index: 5;
  }
  /* tee plus compact pour que le titre/tailles/CTA tiennent sans scroller */
  .pp-tee { min-height: 0; }
  .pp-tee-img { max-height: 42vh; }
  .pp-info { align-items: stretch; }
  .pp-name { font-size: 40px; margin-top: 2px; }
  .pp-price { font-size: 26px; margin-bottom: 14px; }
  .pp-sizes { margin-bottom: 18px; }
  .pp-add { align-self: stretch; text-align: center; }
  .pp-note { margin-top: 10px; }
}

/* ============================================================
   Moment "TU AS GAGNÉ" — clip lip-sync du perso chroma-keyé, joué
   DANS la case de sa tête (jamais d'overlay plein écran qui pourrait
   rester collé et bloquer l'affiche). Fond vert retiré en JS + son.
   ============================================================ */
/* pendant le clip win : la tête reste à son ÉTAT PAR DÉFAUT — pas de scale, pas de
   remontée z-index, pas de pop → elle reste disposée DERRIÈRE/parmi les autres comme
   d'habitude (on neutralise le scale 1.28 + z-index 2001 de .selected). */
.barber-poster .bb-head.win-playing {
  transform: none !important;
  z-index: var(--z, 1) !important;
  animation: none !important;
  filter: none !important;
}
/* sortie recadrée à la taille EXACTE du PNG de base → object-fit:fill (comme .bb-head-img)
   = même taille, même cadrage que l'image de base, aucune coupure au démarrage */
.bb-win-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none;opacity:0;z-index:6;transition:opacity .25s ease}
.bb-head.win-ready .bb-win-vid{opacity:1}
.bb-head.win-ready .bb-head-img,.bb-head.win-ready .bb-head-vid{opacity:0}

/* étincelles ancrées dans la case, DERRIÈRE le perso (z-index < canvas z6) → elles
   jaillissent de derrière la silhouette quand il a gagné */
.bb-spark{position:absolute;z-index:4;border-radius:50%;pointer-events:none;box-shadow:0 0 10px 2px currentColor;animation:bb-spark-fly 1s cubic-bezier(.15,.6,.3,1) forwards}
@keyframes bb-spark-fly{0%{transform:translate(0,0) scale(.3);opacity:0}15%{opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(1);opacity:0}}

/* le tee-shirt "apparaît" quand la fiche du gagnant s'ouvre */
.barber-product.pp-won.show .pp-tee-img{animation:bb-tee-reveal .6s cubic-bezier(.2,1.35,.4,1) both}
@keyframes bb-tee-reveal{0%{transform:scale(.5) rotate(-5deg);opacity:0;filter:brightness(2.2)}55%{filter:brightness(1.25)}100%{transform:scale(1) rotate(0);opacity:1;filter:brightness(1)}}

/* ===== Feedback sensoriel du tirage Random ===== */
/* barber-pole du titre en TURBO pendant le tirage */
.barber-title.bb-roll-turbo::before { animation-duration: .3s; }

/* ============================================================
   RCX — nouvelle mise en page (maquette Illustrator) :
   titre script chromé (image), capsule barber-pole prix/mode/nom,
   toggle œil/dé, dés rose+bleu. Rose = Choose, Bleu = Random.
   ============================================================ */
.rcx-title { position: relative; width: min(92vw, 560px); margin: 0 auto 2px; }
.rcx-title-img { display: block; width: 100%; height: auto; }
.rcx-title-blue { position: absolute; inset: 0; opacity: 0; transition: opacity .45s ease; }
#barber-stage.rcx-random .rcx-title-blue { opacity: 1; }

.rcx-bar { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; margin-top: 2px; }

/* --- capsule chromée : embouts image + corps blobs rose/bleu flous --- */
.rcx-pill { display: flex; align-items: stretch; height: 72px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.25)); }
.rcx-cap { height: 100%; width: auto; display: block; }
.rcx-pill-body {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  min-width: 188px; padding: 4px 12px; text-align: center;
  background: #fff;
}
.rcx-pill-body::before {
  content: ""; position: absolute; inset: -24px;
  background:
    radial-gradient(circle at 12% 25%, #6aa9ff 0 14%, transparent 38%),
    radial-gradient(circle at 38% 80%, #ff5ad1 0 14%, transparent 38%),
    radial-gradient(circle at 62% 20%, #ff5ad1 0 13%, transparent 36%),
    radial-gradient(circle at 86% 70%, #6aa9ff 0 14%, transparent 38%),
    radial-gradient(circle at 50% 45%, #b07aff 0 10%, transparent 30%);
  filter: blur(11px);
  animation: rcx-blobs 7s linear infinite alternate;
}
@keyframes rcx-blobs {
  from { transform: translateX(-12px) scale(1.05); }
  to   { transform: translateX(12px)  scale(1.12); }
}
.rcx-pill-body > div { position: relative; z-index: 1; }
.rcx-pill-price { font: 900 17px/1.05 "Arial Black", Arial, sans-serif; letter-spacing: .04em; color: #0a0a0a; }
.rcx-pill-mode  { font: 900 13px/1.15 "Arial Black", Arial, sans-serif; letter-spacing: .06em; color: #0a0a0a; }
.rcx-pill-name  { font: 900 13px/1.2 "Arial Black", Arial, sans-serif; letter-spacing: .05em; color: #0a0a0a; min-height: 16px; text-transform: uppercase; }
.rcx-pill-name .rcx-num { font-weight: 400; font-family: var(--font-mono); color: #555; margin-right: 4px; }

/* swap prix + mode selon l'état */
.rcx-p20, .rcx-m-random { display: none; }
#barber-stage.rcx-random .rcx-p20, #barber-stage.rcx-random .rcx-m-random { display: inline; }
#barber-stage.rcx-random .rcx-p30, #barber-stage.rcx-random .rcx-m-choose { display: none; }

/* --- toggle œil / dé --- */
.rcx-side { display: flex; align-items: center; gap: 10px; }
.rcx-toggle { position: relative; width: 84px; height: 58px; border: none; background: none; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rcx-tg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .25s ease; }
.rcx-tg-choose { opacity: 1; }
#barber-stage.rcx-random .rcx-tg-random { opacity: 1; }
#barber-stage.rcx-random .rcx-tg-choose { opacity: 0; }

/* --- dés rose/bleu (mode Random uniquement) --- */
.rcx-dice { border: none; background: none; padding: 0; cursor: pointer; display: none; -webkit-tap-highlight-color: transparent; }
#barber-stage.rcx-random .rcx-dice { display: block; }
.rcx-dice img { height: 62px; width: auto; display: block; animation: rcx-dice-bob 2.6s ease-in-out infinite; }
@keyframes rcx-dice-bob {
  0%, 100% { transform: rotate(0) translateY(0); }
  30% { transform: rotate(-6deg) translateY(-3px); }
  70% { transform: rotate(5deg) translateY(-2px); }
}
.rcx-dice:hover img { animation: rcx-dice-shake .5s linear infinite; }
.rcx-dice.spinning img { animation: rcx-dice-shake .35s linear infinite; }
@keyframes rcx-dice-shake {
  0% { transform: rotate(0); } 25% { transform: rotate(-14deg); }
  50% { transform: rotate(0); } 75% { transform: rotate(12deg); } 100% { transform: rotate(0); }
}

/* --- bandeau YOU WIN [NOM] pendant le moment win --- */
.rcx-youwin {
  position: fixed; left: 50%; bottom: max(26px, env(safe-area-inset-bottom));
  transform: translateX(-50%) scale(.6); opacity: 0;
  display: flex; align-items: stretch; height: 86px; z-index: 6500;
  filter: drop-shadow(0 8px 22px rgba(0,0,0,.45));
  transition: transform .35s cubic-bezier(.2,1.4,.4,1), opacity .3s ease;
  pointer-events: none;
}
.rcx-youwin.show { transform: translateX(-50%) scale(1); opacity: 1; }
.rcx-youwin .rcx-pill-body { min-width: 230px; }
.rcx-youwin .rcx-yw-txt { font: 900 24px/1.05 "Arial Black", Arial, sans-serif; letter-spacing: .03em; color: #0a0a0a; text-transform: uppercase; position: relative; z-index: 1; }

@media (max-width: 560px) {
  .rcx-pill { height: 62px; }
  .rcx-pill-body { min-width: 158px; }
  .rcx-pill-price { font-size: 15px; }
  .rcx-pill-mode { font-size: 11px; }
  .rcx-pill-name { font-size: 11px; }
  .rcx-toggle { width: 70px; height: 48px; }
  .rcx-dice img { height: 52px; }
  .rcx-youwin { height: 68px; }
  .rcx-youwin .rcx-yw-txt { font-size: 18px; }
}

/* RCX — surcharges anti-conflits (le CSS générique `button` mettait fond/bordure/hover
   rouges sur le toggle et les dés ; .barber-mode était en colonne) */
.rcx-bar { flex-direction: row; }
.rcx-pill { height: 58px; flex: 0 0 auto; }
.rcx-pill-body { min-width: 148px; max-width: 200px; padding: 3px 10px; }
.rcx-pill-price { font-size: 14px; }
.rcx-pill-mode  { font-size: 11px; }
.rcx-pill-name  { font-size: 11px; min-height: 13px; }
.rcx-toggle, .rcx-toggle:hover, .rcx-dice, .rcx-dice:hover {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  color: inherit;
}
.rcx-toggle { width: 64px; height: 44px; }
.rcx-dice img { height: 50px; }
@media (max-width: 560px) {
  .rcx-pill { height: 52px; }
  .rcx-pill-body { min-width: 132px; }
  .rcx-toggle { width: 58px; height: 40px; }
  .rcx-dice img { height: 44px; }
}

/* RCX v2 — calage maquette : capsule centrée, toggle au-dessus des dés, posés À DROITE
   (comme sur les plans 01/02) ; dégradé du corps plus DOUX (blanc + taches diffuses). */
.rcx-bar { position: relative; justify-content: center; }
.rcx-side {
  position: absolute; right: max(2%, 8px); top: 50%;
  transform: translateY(-58%);
  flex-direction: column; gap: 4px; align-items: center;
}
.rcx-pill-body::before {
  background:
    radial-gradient(circle at 14% 28%, rgba(106,169,255,.80) 0 9%, transparent 30%),
    radial-gradient(circle at 38% 78%, rgba(255,90,209,.72) 0 9%, transparent 30%),
    radial-gradient(circle at 60% 22%, rgba(255,90,209,.62) 0 8%, transparent 28%),
    radial-gradient(circle at 84% 66%, rgba(106,169,255,.72) 0 9%, transparent 30%),
    #ffffff;
  filter: blur(13px);
}
@media (max-width: 560px) {
  .rcx-side { right: 2px; transform: translateY(-58%) scale(.92); }
}

/* RCX v3 — dégradé "points aérographe" : petites taches rose/bleu SUGGÉRÉES,
   très floutées (gaussien), sur fond blanc dominant (cf. exemple maquette). */
.rcx-pill-body::before {
  background:
    radial-gradient(circle at 10% 22%, rgba(110,175,255,.60) 0 6%, transparent 20%),
    radial-gradient(circle at 30% 72%, rgba(255,110,220,.55) 0 6%, transparent 20%),
    radial-gradient(circle at 54% 26%, rgba(255,110,220,.45) 0 5%, transparent 18%),
    radial-gradient(circle at 74% 74%, rgba(110,175,255,.55) 0 6%, transparent 20%),
    radial-gradient(circle at 92% 30%, rgba(255,110,220,.38) 0 5%, transparent 16%),
    #ffffff;
  filter: blur(16px);
}

/* RCX v4 — toggle ANCRÉ (même position que les dés soient là ou pas) +
   apparition EXPLOSIVE des dés à l'arrivée du mode Random. */
.rcx-side { top: -4px; transform: none; }
.rcx-dice { position: relative; overflow: visible; }
.rcx-dice.appear img { animation: rcx-dice-burst .65s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes rcx-dice-burst {
  0%   { transform: scale(0) rotate(-260deg); opacity: 0; }
  55%  { transform: scale(1.45) rotate(18deg); opacity: 1; }
  75%  { transform: scale(.92) rotate(-6deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
@media (max-width: 560px) {
  .rcx-side { top: -2px; transform: scale(.92); transform-origin: top right; }
}
@media (prefers-reduced-motion: reduce) {
  .rcx-dice.appear img { animation: none; }
}

/* RCX v5 — toggle MUTUALISÉ : un seul pill chromé, knob bleu qui GLISSE
   (œil ↔ dé en crossfade pendant la glisse) → plus aucun saut visuel. */
.rcx-toggle {
  border-radius: 999px;
  background: linear-gradient(180deg, #8f8f8f, #fdfdfd 26%, #f3f3f3 55%, #b5b5b5 84%, #878787);
  box-shadow: inset 0 1px 2px rgba(255,255,255,.95), inset 0 -2px 5px rgba(0,0,0,.28), 0 2px 7px rgba(0,0,0,.22);
}
.rcx-tg { display: none; }   /* anciennes images 2-états désactivées */
.rcx-knob {
  position: absolute; top: 50%; left: 3px;
  width: 38px; height: 38px;
  transform: translateY(-50%);
  transition: left .34s cubic-bezier(.3,1.35,.4,1);
  pointer-events: none;
}
#barber-stage.rcx-random .rcx-knob { left: calc(100% - 41px); }
.rcx-k { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .26s ease; }
.rcx-k-eye { opacity: 1; }
#barber-stage.rcx-random .rcx-k-die { opacity: 1; }
#barber-stage.rcx-random .rcx-k-eye { opacity: 0; }
@media (max-width: 560px) {
  .rcx-knob { width: 34px; height: 34px; }
  #barber-stage.rcx-random .rcx-knob { left: calc(100% - 37px); }
}

/* RCX v5 — dégradé du barber-pole : DÉBORDE largement du cadre (plus de rectangle
   visible, les points fondent jusqu'aux bords) + DÉFILEMENT INFINI façon barber pole.
   Le motif se répète toutes les 50% de l'élément → translateX(-50%) boucle sans couture. */
.rcx-pill-body::before {
  inset: auto;
  top: -34px; bottom: -34px; left: -34px;
  width: calc(200% + 68px);
  background-color: #fff;
  background-image:
    radial-gradient(circle at 12% 24%, rgba(110,175,255,.62) 0 7%, transparent 24%),
    radial-gradient(circle at 34% 76%, rgba(255,110,220,.56) 0 7%, transparent 24%),
    radial-gradient(circle at 57% 26%, rgba(255,110,220,.46) 0 6%, transparent 22%),
    radial-gradient(circle at 79% 72%, rgba(110,175,255,.56) 0 7%, transparent 24%),
    radial-gradient(circle at 95% 35%, rgba(110,175,255,.34) 0 5%, transparent 18%);
  background-size: 50% 100%;
  background-repeat: repeat;
  filter: blur(14px);
  animation: rcx-pole-scroll 10s linear infinite;
  will-change: transform;
}
@keyframes rcx-pole-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .rcx-pill-body::before { animation: none; }
}

/* RCX v6 — le dégradé devient une LUMIÈRE non délimitée : plus de fond blanc ni
   d'ombre rectangulaire, et un masque fond les bords en douceur (aucun cadre).
   Le défilement infini passe par background-position (le masque reste fixe). */
.rcx-pill { filter: none; }                      /* l'ombre soulignait le rectangle */
.rcx-cap { filter: drop-shadow(0 4px 9px rgba(0,0,0,.28)); }
.rcx-pill-body { background: transparent; }
.rcx-pill-body::before {
  inset: -26px -10px;
  top: -26px; bottom: -26px; left: -10px; width: auto;
  background-color: transparent;
  background-image:
    radial-gradient(circle at 18% 28%, rgba(110,175,255,.62) 0 14%, transparent 42%),
    radial-gradient(circle at 46% 78%, rgba(255,110,220,.58) 0 14%, transparent 42%),
    radial-gradient(circle at 72% 24%, rgba(255,110,220,.46) 0 12%, transparent 38%),
    radial-gradient(circle at 94% 70%, rgba(110,175,255,.56) 0 14%, transparent 42%);
  background-size: 230px 100%;
  background-repeat: repeat-x;
  filter: blur(12px);
  animation: rcx-pole-bg 9s linear infinite;
  transform: none;
  -webkit-mask-image: radial-gradient(ellipse 62% 78% at 50% 50%, #000 48%, transparent 88%);
  mask-image: radial-gradient(ellipse 62% 78% at 50% 50%, #000 48%, transparent 88%);
  will-change: background-position;
}
@keyframes rcx-pole-bg { to { background-position-x: -230px; } }

/* le knob est un CERCLE : on clippe les coins carrés du crop */
.rcx-knob { border-radius: 50%; overflow: hidden; }

/* RCX v7 — LE dégradé de la réf : rayures DIAGONALES rose/bleu floutées (barber pole),
   qui touchent les embouts et débordent légèrement en haut/bas (flou gaussien, pas de
   masque, pas de cadre). Défilement infini par background-position (boucle exacte). */
.rcx-pill-body { overflow: visible; }
.rcx-cap { position: relative; z-index: 2; }
.rcx-pill-body > div { z-index: 3; }
.rcx-pill-body::before {
  inset: -12px -16px;
  top: -12px; bottom: -12px; left: -16px; width: auto;
  background-color: transparent;
  background-image: repeating-linear-gradient(65deg,
    rgba(255, 70, 215, .95) 0 22px,
    rgba(255, 255, 255, 0)  40px 56px,
    rgba(110, 165, 255, .95) 74px 96px,
    rgba(255, 255, 255, 0)  114px 130px,
    rgba(255, 70, 215, .95) 148px 148px);
  background-size: auto;
  background-repeat: repeat;
  filter: blur(11px);
  -webkit-mask-image: none;
  mask-image: none;
  animation: rcx-pole-stripes 6s linear infinite;
  will-change: background-position;
  z-index: 0;
}
/* période des rayures = 148px le long de l'axe à 65° → période horizontale = 148/sin(65°) ≈ 163px */
@keyframes rcx-pole-stripes { to { background-position-x: -163px; } }

/* RCX v7.1 — rayures plus serrées (≈5 bandes visibles comme la réf) */
.rcx-pill-body::before {
  background-image: repeating-linear-gradient(65deg,
    rgba(255, 70, 215, .9) 0 11px,
    rgba(255, 255, 255, 0) 20px 28px,
    rgba(110, 165, 255, .9) 37px 48px,
    rgba(255, 255, 255, 0) 57px 65px,
    rgba(255, 70, 215, .9) 74px 74px);
  filter: blur(9px);
}
/* période 74px à 65° → horizontale ≈ 74/sin65 ≈ 82px */
@keyframes rcx-pole-stripes { to { background-position-x: -82px; } }

/* RCX v7.2 — bandes moins dépassantes (débord vertical réduit) + dessin des bandes
   régularisé : fondus symétriques (12px partout) et débord horizontal élargi pour que
   les artefacts de bord du flou restent cachés sous les embouts chromés. */
.rcx-pill-body::before {
  top: -5px; bottom: -5px; left: -26px; right: -26px;
  background-image: repeating-linear-gradient(65deg,
    rgba(255, 70, 215, .9) 0 12px,
    rgba(255, 255, 255, 0) 24px 30px,
    rgba(110, 165, 255, .9) 42px 54px,
    rgba(255, 255, 255, 0) 66px 72px,
    rgba(255, 70, 215, .9) 84px 84px);
  filter: blur(8px);
}
/* période 84px à 65° → horizontale = 84/sin(65°) ≈ 92.69px (boucle exacte, sans à-coup) */
@keyframes rcx-pole-stripes { to { background-position-x: -92.69px; } }

/* RCX v7.3 — FIX boucle + bande déformée : une ancienne règle (background-size:230px)
   découpait le motif en tuiles → couture/"surplus" à chaque raccord et boucle désynchro.
   On repasse en motif CONTINU (auto) → le défilement de 92.69px boucle parfaitement.
   + fondu vertical des pointes de bandes (plus de "pied" qui bave en bas). */
.rcx-pill-body::before {
  background-size: auto !important;
  background-repeat: repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9px, #000 calc(100% - 9px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 9px, #000 calc(100% - 9px), transparent 100%);
}

/* RCX v7.4 — plus AUCUN surplus : le corps clippe les rayures (overflow hidden),
   le ::before déborde en interne (-15px) pour que le flou n'ait pas d'artefact de
   bord, mais rien ne dépasse ni sous la capsule ni autour des embouts. */
.rcx-pill-body { overflow: hidden; }
.rcx-pill-body::before {
  top: -15px; bottom: -15px; left: -15px; right: -15px;
  -webkit-mask-image: none;
  mask-image: none;
}

/* RCX v7.5 — les rayures vont JUSQU'AUX EXTRÉMITÉS : la couche passe au niveau de la
   capsule entière et file SOUS les embouts chromés (qui la recouvrent) → les bouts du
   rectangle sont cachés derrière les chromes, comme la maquette. Plus d'effet rectangle. */
.rcx-pill { position: relative; }
.rcx-pill-body { overflow: visible; }
.rcx-pill-body::before { content: none; }   /* l'ancienne couche (clippée au corps) est supprimée */
.rcx-pill::before {
  content: ""; position: absolute; z-index: 0;
  top: 4px; bottom: 4px; left: 16px; right: 16px;
  background-image: repeating-linear-gradient(65deg,
    rgba(255, 70, 215, .9) 0 12px,
    rgba(255, 255, 255, 0) 24px 30px,
    rgba(110, 165, 255, .9) 42px 54px,
    rgba(255, 255, 255, 0) 66px 72px,
    rgba(255, 70, 215, .9) 84px 84px);
  filter: blur(8px);
  animation: rcx-pole-stripes 6s linear infinite;
  will-change: background-position;
}

/* RCX v7.6 — anti-tache : le halo du flou rayonnait au-delà du bord bas. Le masque
   (no-repeat) coupe tout ce qui sort de la boîte et fond les pointes sur 9px. */
.rcx-pill::before {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9px, #000 calc(100% - 9px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 9px, #000 calc(100% - 9px), transparent 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* RCX v7.7 — rayures CUITES dans une image (flou + fondus inclus, 7 périodes exactes).
   Plus aucun calcul de flou en direct → plus jamais de tache/artefact, défilement
   parfaitement fluide (simple translation d'image, boucle sur la largeur exacte). */
.rcx-pill::before {
  background-image: url("../assets/ui/stripes.webp?v=1");
  background-size: 649px 100%;
  background-repeat: repeat-x;
  filter: none;
  -webkit-mask-image: none; mask-image: none;
  animation: rcx-pole-img 42s linear infinite;
}
@keyframes rcx-pole-img { to { background-position-x: -649px; } }

/* RCX v7.8 — les rayures passaient sous les zones TRANSPARENTES des embouts (autour
   du dôme/téton) et se voyaient à travers → effet "mal croppé". On les arrête sous la
   PLAQUE pleine (partie opaque, côté intérieur) : ~34px du bord. */
.rcx-pill::before { left: 34px; right: 34px; }
@media (max-width: 560px) {
  .rcx-pill::before { left: 30px; right: 30px; }
}

/* RCX v8 — la capsule EMBRASSE la typo : resserrée en Random (texte court), élargie
   en Choose ("CHOOSE YOUR CUT"). Transition de position fluide : les embouts
   coulissent en ouverture/fermeture (le flex re-centre automatiquement). */
.rcx-pill-body {
  min-width: 0; max-width: none;
  width: 142px;                       /* mode Random (par défaut au chargement) */
  transition: width .55s cubic-bezier(.65, 0, .35, 1);
}
#barber-stage:not(.rcx-random) .rcx-pill-body { width: 218px; }   /* mode Choose : plus large */
@media (max-width: 560px) {
  .rcx-pill-body { width: 126px; }
  #barber-stage:not(.rcx-random) .rcx-pill-body { width: 192px; }
}

/* RCX v8.1 — capsule encore plus PRÈS de la typo (les embouts frôlent le texte) */
.rcx-pill-body { width: 116px; }
#barber-stage:not(.rcx-random) .rcx-pill-body { width: 172px; }
.rcx-pill-name, .rcx-pill-mode { white-space: nowrap; }
@media (max-width: 560px) {
  .rcx-pill-body { width: 104px; }
  #barber-stage:not(.rcx-random) .rcx-pill-body { width: 158px; }
}

/* RCX v8.2 — prix et typo ANIMÉS : les deux textes sont superposés (grille) et se
   croisent en fondu + glissement vertical, synchronisés avec l'ouverture/fermeture.
   Fini le swap sec (display:none) qui faisait sauter la typo en mode Choose. */
.rcx-pill-price, .rcx-pill-mode { display: grid; }
.rcx-pill-price > span, .rcx-pill-mode > span {
  grid-area: 1 / 1;
  justify-self: center;
  display: inline !important;     /* annule les anciens display:none */
  transition: opacity .32s ease, transform .5s cubic-bezier(.2, 1.2, .4, 1);
}
/* état Choose (défaut) : 30€ / CHOOSE YOUR CUT visibles, l'autre paire glisse dessous */
.rcx-p30, .rcx-m-choose { opacity: 1; transform: translateY(0); }
.rcx-p20, .rcx-m-random { opacity: 0; transform: translateY(7px); }
/* état Random : inversé, l'ancienne paire glisse vers le haut */
#barber-stage.rcx-random .rcx-p30, #barber-stage.rcx-random .rcx-m-choose { opacity: 0; transform: translateY(-7px); }
#barber-stage.rcx-random .rcx-p20, #barber-stage.rcx-random .rcx-m-random { opacity: 1; transform: translateY(0); }

/* RCX v8.3 — FIX centrage : la colonne de grille (large comme le texte le plus long)
   se calait à GAUCHE du corps → textes décentrés + dérive en X pendant l'ouverture.
   On centre la colonne elle-même : les textes restent PILE au milieu, en permanence.
   Seul l'axe Y est animé (fondu + glissement vertical). */
.rcx-pill-price, .rcx-pill-mode { justify-content: center; }

/* RCX v8.4 — ouverture Choose réduite (au plus près de "CHOOSE YOUR CUT") */
#barber-stage:not(.rcx-random) .rcx-pill-body { width: 156px; }
@media (max-width: 560px) {
  #barber-stage:not(.rcx-random) .rcx-pill-body { width: 144px; }
}

/* RCX v9 — fond de la maquette : dégradé vertical blanc → gris (stops exacts du
   fichier Illustrator : blanc jusqu'à 48%, #c5c5c4 à 70%, #a0a09f à 87%, #929291 à 96%).
   Remplace la grille de fond sur le thème barber. */
body.theme-barber {
  background-image: linear-gradient(180deg, #fff 48%, #c5c5c4 70%, #a0a09f 87%, #929291 96%);
  background-size: auto;
  background-repeat: no-repeat;
}

/* RCX v10 — toggle + dés calés EXACTEMENT comme la maquette (mesures getBBox du SVG) :
   axe vertical commun à 85.3% de la largeur du titre (590.54 u), toggle (54×35.5 u)
   centré 37.75 u AU-DESSUS du centre capsule, dés (70.8×42.4 u) 5 u en dessous.
   Échelle rendue : titre = min(92vw, 560px) → ratio appliqué partout. */
.rcx-side {
  right: auto;
  left: calc(50% + 0.353 * min(92vw, 560px));   /* centre maquette : 503.7/590.54 = 85.3% */
  transform: translateX(-50%);
  top: -30px;
  gap: 7px;
}
.rcx-toggle { width: 52px; height: 36px; }
.rcx-knob { width: 30px; height: 30px; left: 3px; }
#barber-stage.rcx-random .rcx-knob { left: calc(100% - 33px); }
.rcx-dice img { height: 40px; }
@media (max-width: 560px) {
  .rcx-side { left: calc(50% + 0.353 * 92vw); transform: translateX(-50%); top: -26px; gap: 5px; }
  .rcx-toggle { width: 46px; height: 32px; }
  .rcx-knob { width: 26px; height: 26px; left: 3px; }
  #barber-stage.rcx-random .rcx-knob { left: calc(100% - 29px); }
  .rcx-dice img { height: 36px; }
}

/* ============================================================
   RCX — CARTE DE VICTOIRE (maquette appli-03) : plein écran,
   fond dégradé gris, titre rose, volutes derrière le perso géant,
   bandeau chromé "YOU WIN [NOM]!" en bas.
   ============================================================ */
.rcx-wincard {
  position: fixed; inset: 0; z-index: 7000;
  display: flex; flex-direction: column; align-items: center;
  padding: 10px 0 max(16px, env(safe-area-inset-bottom));
  background: linear-gradient(180deg, #fff 38%, #c5c5c4 66%, #a0a09f 86%, #929291 96%);
  opacity: 0; transition: opacity .3s ease;
  cursor: pointer;
}
.rcx-wincard.show { opacity: 1; }
.rcx-wc-title { width: min(92vw, 470px); height: auto; flex: 0 0 auto; }
.rcx-wc-stage {
  position: relative; flex: 1 1 auto; min-height: 0; width: 100%;
  display: flex; align-items: center; justify-content: center;
}
.rcx-wc-orn {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(96vw, 540px); max-height: 102%;
  object-fit: contain;
  pointer-events: none;
}
.rcx-wc-cv {
  position: relative; z-index: 1;
  height: 100%; max-height: 100%; width: auto; max-width: 78vw;
  object-fit: contain;
  filter: drop-shadow(0 16px 34px rgba(0,0,0,.35));
  animation: rcx-wc-pop .55s cubic-bezier(.2, 1.3, .4, 1) both;
}
@keyframes rcx-wc-pop {
  from { transform: scale(.55); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
/* bandeau YOU WIN : réutilise la mécanique capsule (embouts + rayures qui défilent) */
.rcx-wc-band { height: clamp(64px, 11vh, 92px); flex: 0 0 auto; margin-top: 6px; }
.rcx-wc-band .rcx-pill-body { width: auto; min-width: min(56vw, 320px); max-width: none; transition: none; }
.rcx-yw-txt {
  position: relative; z-index: 3;
  font: 900 clamp(20px, 4.2vh, 30px)/1.04 "Arial Black", Arial, sans-serif;
  letter-spacing: .02em; color: #0a0a0a; text-transform: uppercase; text-align: center;
}

/* RCX v11 — la victoire devient une vraie CARTE : plus petite, centrée sur un fond
   assombri/flouté, légèrement transparente, coins arrondis + ombre portée. */
.rcx-wincard {
  background: rgba(18, 14, 26, .45);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  justify-content: center;
  padding: 0;
}
.rcx-wc-card {
  width: min(82vw, 370px);
  max-height: 84vh;
  aspect-ratio: 590 / 814;              /* proportions de la maquette */
  display: flex; flex-direction: column; align-items: center;
  padding: 12px 10px 14px;
  background: linear-gradient(180deg,
    rgba(255,255,255,.90) 38%,
    rgba(197,197,196,.90) 66%,
    rgba(160,160,159,.90) 86%,
    rgba(146,146,145,.90) 96%);
  border-radius: 16px;
  box-shadow: 0 26px 64px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.65);
  transform: scale(.88) translateY(12px);
  transition: transform .35s cubic-bezier(.2, 1.25, .4, 1);
}
.rcx-wincard.show .rcx-wc-card { transform: scale(1) translateY(0); }
.rcx-wc-title { width: 94%; }
.rcx-wc-orn { width: 100%; }
.rcx-wc-cv { max-width: 74%; }
.rcx-wc-band { height: clamp(54px, 9vh, 72px); margin-top: 4px; }
.rcx-wc-band .rcx-pill-body { min-width: min(46vw, 220px); }
.rcx-yw-txt { font-size: clamp(16px, 3.4vh, 24px); }

/* RCX v12 — carte animée : rayures du bandeau en défilement plus visible +
   DÉGRADÉ ANIMÉ dans les ornements (gradient balayé, masqué par la forme des
   volutes, fondu en mode couleur sur le chromé → les volutes "vivent"). */
.rcx-wc-band::before { animation-duration: 14s; }
.rcx-wc-orn-grad {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 100%; aspect-ratio: 900 / 692; max-height: 102%;
  -webkit-mask: url("../assets/ui/win-ornements.webp?v=1") center / contain no-repeat;
  mask: url("../assets/ui/win-ornements.webp?v=1") center / contain no-repeat;
  background: linear-gradient(115deg, #ff4fd8, #a06bff, #58a8ff, #ff4fd8, #a06bff, #ff4fd8);
  background-size: 300% 300%;
  animation: rcx-orn-grad 5s ease-in-out infinite alternate;
  mix-blend-mode: color;
  pointer-events: none;
}
@keyframes rcx-orn-grad {
  from { background-position: 0% 30%; }
  to   { background-position: 100% 70%; }
}
@media (prefers-reduced-motion: reduce) {
  .rcx-wc-orn-grad { animation: none; }
}

/* RCX v13 — lueur barber-pole DIFFUSE qui balaie le logo : un dégradé doux rose/bleu
   défile à travers la FORME du titre (image-masque), en mode "screen" → lumière qui
   glisse sur la typo, rappel du pole barber. Suit la couleur du mode (rose ↔ bleu via
   la teinte dominante du gradient). */
.rcx-title { overflow: visible; }
.rcx-title-sheen {
  position: absolute; inset: 0;
  -webkit-mask: url("../assets/ui/title-pink.webp?v=1") center / contain no-repeat;
  mask: url("../assets/ui/title-pink.webp?v=1") center / contain no-repeat;
  background: linear-gradient(105deg,
    transparent 0 30%,
    rgba(255, 120, 230, .85) 42%,
    rgba(255, 255, 255, .95) 50%,
    rgba(120, 180, 255, .85) 58%,
    transparent 70% 100%);
  background-size: 260% 100%;
  mix-blend-mode: screen;
  pointer-events: none;
  animation: rcx-title-sheen 4.2s linear infinite;
  will-change: background-position;
}
@keyframes rcx-title-sheen {
  0%   { background-position: 130% 0; }
  100% { background-position: -130% 0; }
}
@media (prefers-reduced-motion: reduce) { .rcx-title-sheen { animation: none; opacity: 0; } }

/* RCX v13.1 — lueur du logo plus LÉGÈRE : reflet plus discret, plus fin, plus lent,
   et une pause entre deux passages (pas de balayage permanent). */
.rcx-title-sheen {
  background: linear-gradient(105deg,
    transparent 0 40%,
    rgba(255, 150, 235, .40) 47%,
    rgba(255, 255, 255, .60) 50%,
    rgba(150, 195, 255, .40) 53%,
    transparent 60% 100%);
  background-size: 320% 100%;
  animation: rcx-title-sheen 7s ease-in-out infinite;
}
@keyframes rcx-title-sheen {
  0%      { background-position: 150% 0; }
  55%,100%{ background-position: -150% 0; }   /* balaie puis marque une pause */
}

/* RCX v14 — corrections demandées :
   1) loop du sheen du logo : départ ET fin hors-champ (zéro saut) + moins fréquent. */
.rcx-title-sheen {
  animation: rcx-title-sheen 9s ease-in-out infinite !important;
}
@keyframes rcx-title-sheen {
  0%       { background-position: 175% 0; }   /* hors champ à droite */
  34%      { background-position: -175% 0; }  /* balaie vers la gauche, sort à gauche */
  100%     { background-position: -175% 0; }  /* longue pause, invisible → pas de saut au reboot */
}
/* 2) le toggle se SECOUE de temps en temps en mode Choose pour inciter à passer en Random */
#barber-stage:not(.rcx-random) .rcx-toggle {
  animation: rcx-toggle-nudge 5.5s ease-in-out infinite;
  transform-origin: center;
}
@keyframes rcx-toggle-nudge {
  0%, 80%, 100% { transform: rotate(0) scale(1); }
  84% { transform: rotate(-10deg) scale(1.08); }
  88% { transform: rotate(8deg)  scale(1.08); }
  92% { transform: rotate(-6deg) scale(1.05); }
  96% { transform: rotate(3deg)  scale(1.02); }
}
#barber-stage.rcx-random .rcx-toggle { animation: none; }
/* 3) dés plus PLAYFUL en Random : wiggle plus marqué (rotation + petit saut) */
.rcx-dice img { animation: rcx-dice-playful 2.2s ease-in-out infinite !important; }
@keyframes rcx-dice-playful {
  0%, 100% { transform: rotate(-7deg) translateY(0); }
  25%      { transform: rotate(6deg)  translateY(-4px); }
  50%      { transform: rotate(-4deg) translateY(0); }
  75%      { transform: rotate(9deg)  translateY(-3px); }
}
.rcx-dice:hover img, .rcx-dice.spinning img { animation: rcx-dice-shake .35s linear infinite !important; }
@media (prefers-reduced-motion: reduce) {
  #barber-stage:not(.rcx-random) .rcx-toggle, .rcx-dice img { animation: none !important; }
}

/* RCX v15 — corrections :
   1) le burst explosif des dés doit l'emporter sur l'anim playful (toutes deux !important
      → la classe .appear, plus spécifique, gagne). */
.rcx-dice.appear img { animation: rcx-dice-burst .65s cubic-bezier(.2,1.6,.4,1) both !important; }

/* 2) couche RAINBOW sur le logo, en ALTERNANCE avec le sheen blanc : un lavage arc-en-ciel
   recolore la typo de temps en temps (mix-blend hue), décalé pour alterner avec le reflet. */
.rcx-title-rainbow {
  position: absolute; inset: 0;
  -webkit-mask: url("../assets/ui/title-pink.webp?v=1") center / contain no-repeat;
  mask: url("../assets/ui/title-pink.webp?v=1") center / contain no-repeat;
  background: linear-gradient(100deg, #ff3fd0, #ff9b3f, #ffe23f, #4fff8c, #3fd0ff, #a05bff, #ff3fd0);
  background-size: 320% 100%;
  mix-blend-mode: hue;
  opacity: 0;
  pointer-events: none;
  animation: rcx-title-rainbow 11s ease-in-out infinite;
}
@keyframes rcx-title-rainbow {
  0%, 48%   { opacity: 0; background-position: 0% 0; }
  58%       { opacity: .9; }
  82%       { opacity: .9; background-position: 100% 0; }
  92%, 100% { opacity: 0; background-position: 100% 0; }
}
@media (prefers-reduced-motion: reduce) { .rcx-title-rainbow { animation: none; opacity: 0; } }

/* RCX v16 — animations du logo refaites : palette MODE (rose/violet/bleu, plus de
   rainbow criard) + 3 effets DISTINCTS sur des périodes différentes (9s / 11s / 7.5s)
   → la combinaison ne se répète quasi jamais = rendu très varié. Tous masqués par la
   forme du logo et en blend "screen" (ajout de lumière colorée, plus joli que hue). */
.rcx-title-sheen, .rcx-title-rainbow, .rcx-title-pulse {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: url("../assets/ui/title-pink.webp?v=1") center / contain no-repeat;
  mask: url("../assets/ui/title-pink.webp?v=1") center / contain no-repeat;
}
/* (A) reflet blanc diffus qui balaie — discret, avec pause */
.rcx-title-sheen {
  background: linear-gradient(105deg, transparent 0 40%,
    rgba(255,150,235,.38) 47%, rgba(255,255,255,.62) 50%, rgba(150,195,255,.38) 53%, transparent 60% 100%);
  background-size: 320% 100%;
  mix-blend-mode: screen;
  animation: rcx-title-sheen 9s ease-in-out infinite !important;
}
@keyframes rcx-title-sheen {
  0% { background-position: 175% 0; } 34% { background-position: -175% 0; } 100% { background-position: -175% 0; }
}
/* (B) vague de COULEUR (rose → violet → bleu) qui traverse — palette du mode */
.rcx-title-rainbow {
  background: linear-gradient(105deg, transparent 0 30%,
    rgba(255,79,216,.75) 42%, rgba(176,107,255,.85) 50%, rgba(88,168,255,.75) 58%, transparent 70% 100%) !important;
  background-size: 300% 100% !important;
  mix-blend-mode: screen;
  opacity: 0;
  animation: rcx-title-wash 11s ease-in-out infinite !important;
}
@keyframes rcx-title-wash {
  0%,46% { opacity: 0; background-position: 150% 0; }
  56%    { opacity: 1; }
  78%    { opacity: 1; background-position: -150% 0; }
  88%,100% { opacity: 0; background-position: -150% 0; }
}
/* (C) halo coloré qui "respire" sur tout le logo (glow rose↔bleu) */
.rcx-title-pulse {
  background: linear-gradient(120deg, rgba(255,79,216,.5), rgba(120,90,255,.45), rgba(88,168,255,.5));
  background-size: 220% 220%;
  mix-blend-mode: screen;
  opacity: 0;
  animation: rcx-title-pulse 7.5s ease-in-out infinite;
}
@keyframes rcx-title-pulse {
  0%, 66%, 100% { opacity: 0; background-position: 0% 50%; }
  82%           { opacity: .5; background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .rcx-title-sheen, .rcx-title-rainbow, .rcx-title-pulse { animation: none !important; opacity: 0; }
}

/* titre animé DANS la carte de victoire (même mécanique que le logo) */
.rcx-wc-titlebox { position: relative; width: 94%; margin: 0 auto; }
.rcx-wc-titlebox .rcx-title-img { width: 100%; height: auto; display: block; }

/* ============================================================
   RCX v17 — fiche produit harmonisée avec la DA (rose/violet/bleu,
   chrome, reflets) au lieu du look mono/rouge qui dissonait.
   ============================================================ */
:root { --rcx-pink:#ff4fd8; --rcx-violet:#b06bff; --rcx-blue:#58a8ff; }

/* nom : calligraphie sombre élégante + léger halo palette */
.pp-name {
  color: #17141c;
  text-shadow: 0 1px 0 #fff, 0 0 18px rgba(176,107,255,.22);
}
/* liseré barber-pole sous le nom (signature DA) */
.pp-name::after {
  content: ""; display: block; height: 6px; width: 132px; margin: 10px 0 0;
  border-radius: 4px;
  background: url("../assets/ui/stripes.webp?v=1") center / auto 100% repeat-x;
  opacity: .9;
  animation: rcx-pole-img 30s linear infinite;
}
/* prix : gros chiffre palette (gradient texte) */
.pp-price {
  font-family: "Arial Black", Arial, sans-serif; font-weight: 900;
  font-size: 34px; letter-spacing: .01em; margin: 6px 0 22px;
  background: linear-gradient(100deg, var(--rcx-pink), var(--rcx-violet) 50%, var(--rcx-blue));
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
/* libellés discrets en violet doux */
.pp-size-label { color: #7a5aa8; }
.pp-guide { color: #8a6ab0; }
.pp-guide:hover { color: var(--rcx-pink); }
.pp-note { color: #9087a0; }

/* tailles : pastilles chromées, active = dégradé palette */
.pp-size {
  border: 1.5px solid #cdbfe4;
  background: linear-gradient(180deg, #ffffff, #f1ecfa);
  color: #4a3d63; font-family: "Arial Black", Arial, sans-serif; font-weight: 900;
  box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(120,90,200,.18);
}
.pp-size:hover { transform: translateY(-2px); border-color: var(--rcx-violet); background: linear-gradient(180deg,#fff,#efe7fb); }
.pp-size.active {
  background: linear-gradient(135deg, var(--rcx-pink), var(--rcx-blue));
  color: #fff; border-color: transparent;
  box-shadow: 0 4px 14px rgba(176,107,255,.45);
}

/* bouton Ajouter au panier : pilule dégradée palette + reflet qui balaie */
.pp-add {
  position: relative; overflow: hidden;
  align-self: flex-start;
  border: none; border-radius: 999px;
  padding: 15px 34px; cursor: pointer;
  font-family: "Arial Black", Arial, sans-serif; font-weight: 900;
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  color: #fff;
  background: linear-gradient(100deg, var(--rcx-pink), var(--rcx-violet) 52%, var(--rcx-blue));
  box-shadow: 0 8px 22px rgba(176,107,255,.42), inset 0 1px 0 rgba(255,255,255,.5);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.pp-add::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-18deg);
  animation: rcx-add-sheen 3.6s ease-in-out infinite;
}
@keyframes rcx-add-sheen {
  0% { left: -50%; } 55%, 100% { left: 150%; }
}
.pp-add:hover { transform: translateY(-2px) scale(1.02); filter: brightness(1.06); box-shadow: 0 12px 28px rgba(176,107,255,.55), inset 0 1px 0 rgba(255,255,255,.5); }
.pp-add:active { transform: translateY(0) scale(.99); }

/* croix de fermeture : ronde et douce */
.pp-x {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid #d8ccec; color: #6a5a86; background: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(120,90,200,.18);
}
.pp-x:hover { background: linear-gradient(135deg, var(--rcx-pink), var(--rcx-blue)); color: #fff; border-color: transparent; }

@media (prefers-reduced-motion: reduce) {
  .pp-name::after, .pp-add::after { animation: none; }
}

/* RCX v18 — fiche produit : remplace la barre sous le nom par un CONTOUR ANIMÉ sur la
   calligraphie (couleur du trait qui circule rose→violet→bleu, façon barber-pole), et
   le nom MORD sur le prix (chevauchement). */
.pp-name::after { content: none !important; }   /* supprime l'ancienne barre */
.pp-name {
  position: relative; z-index: 2;
  color: #17141c;
  -webkit-text-stroke: 1.3px var(--rcx-pink);
  text-stroke: 1.3px var(--rcx-pink);
  paint-order: stroke fill;                       /* trait dessous, remplissage net dessus */
  text-shadow: 0 0 12px rgba(176,107,255,.30);
  animation: rcx-name-contour 4.5s linear infinite;
  margin: 6px 0 0;
}
@keyframes rcx-name-contour {
  0%   { -webkit-text-stroke-color: var(--rcx-pink);   text-stroke-color: var(--rcx-pink); }
  33%  { -webkit-text-stroke-color: var(--rcx-violet); text-stroke-color: var(--rcx-violet); }
  66%  { -webkit-text-stroke-color: var(--rcx-blue);   text-stroke-color: var(--rcx-blue); }
  100% { -webkit-text-stroke-color: var(--rcx-pink);   text-stroke-color: var(--rcx-pink); }
}
/* le prix vient se glisser SOUS le nom (morsure) */
.pp-price { position: relative; z-index: 1; margin-top: -14px; }
@media (max-width: 820px) { .pp-price { margin-top: -10px; } }
@media (prefers-reduced-motion: reduce) { .pp-name { animation: none; } }

/* RCX v19 — le tee dans la fiche produit se secoue un peu de temps en temps (vie) */
.barber-product.show .pp-tee-img {
  animation: rcx-tee-wiggle 6s ease-in-out 1.2s infinite;
  transform-origin: 50% 12%;          /* pivote depuis le haut, comme suspendu */
}
@keyframes rcx-tee-wiggle {
  0%, 70%, 100% { transform: rotate(0) translateY(0); }
  76% { transform: rotate(-2.2deg) translateY(-2px); }
  82% { transform: rotate(1.8deg)  translateY(0); }
  88% { transform: rotate(-1.3deg) translateY(-1px); }
  93% { transform: rotate(.7deg)   translateY(0); }
}
/* ne pas casser l'apparition "reveal" du gagnant : le wiggle ne démarre qu'après */
.barber-product.pp-won.show .pp-tee-img { animation: bb-tee-reveal .6s cubic-bezier(.2,1.35,.4,1) both, rcx-tee-wiggle 6s ease-in-out 1.4s infinite; }
@media (prefers-reduced-motion: reduce) { .barber-product.show .pp-tee-img { animation: none; } }

/* RCX v20 — anti-flash du tee : l'image est masquée tant que le nouveau tee n'est pas
   chargé (sinon l'ancien tee restait visible ~0,5 s au clic sur mobile). */
/* visibility en plus de opacity : en mode Random l'anim bb-tee-reveal anime l'opacité
   (et écraserait un simple opacity:0) → visibility n'est pas animée, donc rien ne flashe. */
.pp-tee-img.pp-loading { opacity: 0 !important; visibility: hidden !important; transition: none !important; }
.pp-tee-img { transition: opacity .18s ease; }