/* ============================================================
   LE CURSEUR DE LA SOURIS (tout le site)
   Utilisé par curseur.js, seulement sur ordinateur (avec une souris).
   La flèche normale de la souris reste toujours visible.
   ============================================================ */

/* ------------------------------------------------------------
   A. LES MIETTES QUI SUIVENT LA SOURIS
   3 miettes rouges, comme celles du logo, qui suivent la flèche.
   Le calque est décoratif : il ne bloque jamais les clics
   (pointer-events: none) et il est caché aux lecteurs d'écran.
   ------------------------------------------------------------ */
.curseur-miettes {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2147483647;
  pointer-events: none;
  /* Invisible tant que la souris n'est pas dans la fenêtre */
  opacity: 0;
  transition: opacity 0.25s ease;
}
.curseur-miettes.visible {
  opacity: 1;
}

/* Une miette : placée par curseur.js (translate), centrée sur son point */
.miette-curseur {
  position: absolute;
  top: 0;
  left: 0;
  background: #E63B2E;
  border-radius: 50%;
  will-change: transform;
}
/* 1. La ronde, la plus proche de la flèche (8 px) */
.miette-curseur-1 {
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
}
/* 2. L'ovale, un peu penchée (12 × 7 px) */
.miette-curseur-2 {
  width: 12px;
  height: 7px;
  margin: -3.5px 0 0 -6px;
}
/* 3. La petite ronde, la plus loin (6 px) */
.miette-curseur-3 {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
}

/* Sur les boutons et les liens, les miettes rapetissent un peu pour ne
   jamais cacher ce qu'on clique : c'est curseur.js qui règle leur taille
   (en restant à côté de la flèche). */

/* Quand les baguettes sont affichées, les miettes se cachent */
.curseur-miettes.cachees {
  opacity: 0;
}

/* ------------------------------------------------------------
   B. LES BAGUETTES SUR LES BONS DE COMMANDE
   Une paire de baguettes (44 × 44 px), pointées vers le bas à gauche.
   curseur.js les place pour que leur bout tombe sur la pointe de la
   souris.
   ------------------------------------------------------------ */

/* La flèche normale est cachée au-dessus des bons de commande
   (seulement quand curseur.js fonctionne) */
.curseur-perso .ticket {
  cursor: none;
}

.curseur-baguettes {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2147483647;
  width: 44px;
  height: 44px;
  /* Décoratif : ne bloque jamais les clics */
  pointer-events: none;
  will-change: transform;
  /* Cachées au départ ; apparaissent en douceur depuis leur bout */
  opacity: 0;
  scale: 0.6;
  transform-origin: 5.5px 39px;
  transition: opacity 0.15s ease, scale 0.15s ease;
}
.curseur-baguettes.visible {
  opacity: 1;
  scale: 1;
}
.curseur-baguettes svg {
  display: block;
  width: 44px;
  height: 44px;
  overflow: visible;
}

/* Chaque baguette tourne autour de son extrémité du haut */
.baguette {
  transform-box: view-box;
  transition: rotate 0.1s ease;
}
.baguette-1 {
  transform-origin: 34px 2px;
}
.baguette-2 {
  transform-origin: 42px 8px;
}
/* Fermées : les deux bouts se rejoignent */
.curseur-baguettes.fermees .baguette-1 {
  rotate: -4deg;
}
.curseur-baguettes.fermees .baguette-2 {
  rotate: 4deg;
}

/* Si l'appareil demande moins de mouvement : sans animation */
@media (prefers-reduced-motion: reduce) {
  .curseur-baguettes,
  .baguette {
    transition: none;
  }
}