/* Mode paintball (paintball.js, paint-fx.js, paint-gun.js) : l'interrupteur en bas à gauche, le lanceur en 3D,
   le viseur, la bille, les taches et les morceaux qui tombent. Les couleurs de peinture sont les seules couleurs vives
   du site : elles n'existent qu'ici. */

/* ---------- L'interrupteur, seule commande : une piste ronde et son libellé, sans fond ---------- */
.paintball {
  margin-right: auto;
}
.paintball[hidden] {
  display: none;
}
.pb-toggle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  color: rgb(var(--ink-rgb) / 0.8);
  white-space: nowrap;
  transition:
    color 0.2s ease,
    scale 0.2s var(--ease-out);
}
.pb-toggle:hover {
  color: var(--ink);
}
.pb-toggle:active {
  scale: 0.96;
}
/* La piste prend la couleur de la prochaine bille. */
.pb-switch {
  position: relative;
  width: 36px;
  height: 20px;
  border: 1px solid var(--line);
  border-radius: 999px;
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease;
}
.pb-switch::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ink);
  transition: translate 0.35s var(--ease-out);
}
.pb-toggle[aria-pressed="true"] .pb-switch {
  border-color: var(--ink);
  background: var(--pb-color);
}
.pb-toggle[aria-pressed="true"] .pb-switch::after {
  translate: 14px 0;
}
@media (max-width: 640px) {
  .pb-toggle {
    padding: 0 12px;
  }
  /* Sur téléphone, le lanceur prend la place de l'heure. */
  .pb-armed .bottom-clock {
    display: none;
  }
}
/* Écran tactile : l'interrupteur garde 44 px de haut sous le doigt (voir base.css). */
@media (pointer: coarse) {
  .pb-toggle {
    position: relative;
  }
  .pb-toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100%, 44px);
    height: max(100%, 44px);
    translate: -50% -50%;
  }
}

/* ---------- Le lanceur : en bas au centre, il monte à l'activation (paint-gun.js) ---------- */
.pb-gun {
  position: fixed;
  bottom: 0;
  left: 50%;
  z-index: var(--z-gun);
  display: none;
  translate: -50% 0;
  pointer-events: none;
}

/* ---------- Armé : le viseur remplace le curseur sur la page, on ne sélectionne plus le texte ---------- */
.pb-armed body {
  cursor: none;
}
.pb-armed :is(main, .footer),
.pb-armed :is(main, .footer) * {
  cursor: none !important;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.pb-armed :is(.nav, .menu, .bottom-bar, .side-socials, .contact-dialog) {
  cursor: auto;
}
.pb-reticle {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-reticle);
  display: none;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .pb-armed .pb-reticle {
    display: block;
  }
  .pb-armed.pb-over-ui .pb-reticle {
    display: none;
  }
}
/* Anneau et repères en différence : sombres sur le crème, clairs sur les plateaux noirs. */
.pb-reticle-ring {
  position: absolute;
  top: -19px;
  left: -19px;
  width: 38px;
  height: 38px;
  border: 1.5px solid #fff;
  border-radius: 50%;
  mix-blend-mode: difference;
}
.pb-reticle-ring::before {
  content: "";
  position: absolute;
  inset: -8px;
  background:
    linear-gradient(#fff, #fff) 50% 0 / 1.5px 12px no-repeat,
    linear-gradient(#fff, #fff) 50% 100% / 1.5px 12px no-repeat,
    linear-gradient(#fff, #fff) 0 50% / 12px 1.5px no-repeat,
    linear-gradient(#fff, #fff) 100% 50% / 12px 1.5px no-repeat;
}
.pb-reticle-dot {
  position: absolute;
  top: -4px;
  left: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pb-color);
  box-shadow: 0 0 0 1.5px rgb(var(--ink-rgb) / 0.85);
  transition: background-color 0.2s ease;
}

/* ---------- La bille, l'onde et les gouttes, au-dessus de la page ---------- */
.pb-debris {
  position: fixed;
  inset: 0;
  z-index: var(--z-debris);
  overflow: hidden;
  pointer-events: none;
}
.pb-ball {
  position: absolute;
  top: -7px;
  left: -7px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, rgb(255 255 255 / 0.75), transparent 46%),
    var(--pb-c);
  box-shadow: 0 3px 8px -2px rgb(var(--ink-rgb) / 0.4);
}
.pb-ring {
  position: absolute;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border: 2px solid var(--pb-c);
  border-radius: 50%;
}
.pb-drop {
  position: absolute;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: var(--pb-c);
}
.pb-piece {
  pointer-events: none;
  will-change: transform;
}

/* ---------- Les taches ---------- */
.pb-wall {
  position: absolute;
  inset: 0;
  z-index: var(--z-paint);
  overflow: clip;
  pointer-events: none;
}
.pb-splat {
  position: absolute;
  z-index: 3;
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 1px 1px rgb(var(--ink-rgb) / 0.18));
}
/* La peinture coule : le filet s'allonge, la goutte descend au bout. */
.pb-drip {
  animation: pb-drip 1.8s cubic-bezier(0.3, 0.6, 0.3, 1) backwards;
}
.pb-bead {
  translate: 0 var(--len);
  animation: pb-bead 1.8s cubic-bezier(0.3, 0.6, 0.3, 1) backwards;
}
@keyframes pb-drip {
  from {
    stroke-dashoffset: var(--len);
  }
}
@keyframes pb-bead {
  from {
    translate: 0 0;
  }
}

/* Ce qui a été arraché laisse sa place vide. */
.pb-gone {
  visibility: hidden !important;
}