/* =========================================================
   CUSTOM CURSOR — Auto-École du Palais
   cursor:none n'est appliqué QUE si JS a ajouté html.has-cursor
   (fallback natif propre si JavaScript est désactivé)
   ========================================================= */
:root {
  --cursor-color: #2F86EB;       /* bleu vif définitif — contraste fort sur blanc, rouge et doré */
  --cursor-outline: #1B2029;     /* contour sombre discret via drop-shadow */
}
html.has-cursor,
html.has-cursor * { cursor: none !important; }

.cc-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 56px;
  height: 56px;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 99999;                 /* au-dessus de la modale (2000) et de tout le reste */
  opacity: 0;
  /* translate recentre la boîte sur le point de la souris (recentré via -halfWidth/-halfHeight en JS) */
  transform: translate3d(-120px, -120px, 0);
  will-change: transform;
}
.cc-cursor.cc-on { opacity: 1; }

.cc-rot {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center;
  will-change: transform;
}

.cc-wheel,
.cc-car {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cursor-color);
  filter: drop-shadow(0 0 0.5px var(--cursor-outline)) drop-shadow(0 1px 2px rgba(0,0,0,0.15));
  transition: opacity .18s ease-out, transform .18s ease-out;
}

.cc-car {
  opacity: 0;
  transform: scale(.45);
}

/* Survol d'un élément interactif : volant -> petite voiture */
.cc-cursor.cc-hover .cc-wheel { opacity: 0; transform: scale(.4); }
.cc-cursor.cc-hover .cc-car   { opacity: 1; transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  .cc-wheel, .cc-car { transition: opacity .1s ease-out, transform .1s ease-out; }
}