:root {
  --cursor-primary: #FF052C;   /* cercle par défaut */
  --cursor-hover:   #FFFFFF;   /* cercle sur liens / boutons / icônes */
  --cursor-corners: #FFFFFF;   /* traits des 4 coins */
  --cursor-icon:    #000000;   /* couleur des icônes */
}

.cursor_outer-wrapper { z-index: 99999; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; position: fixed; inset: 0; pointer-events: none; mix-blend-mode: difference; opacity: 0; transition: opacity .3s; }
.cursor_outer-wrapper.is-ready { opacity: 1; }

/* --cs = échelle courante (pilotée par le JS). On redimensionne au lieu de scaler → net à tout zoom */
.cursor_inner-wrapper { --cs: 1; display: flex; justify-content: center; align-items: center; width: calc(2rem * var(--cs)); height: calc(2rem * var(--cs)); position: relative; will-change: transform; }

.cursor_inner-wrapper > svg { position: absolute; width: calc(.5rem * var(--cs)); height: calc(.5rem * var(--cs)); }
.cursor_ctl { inset: 0 auto auto 0; }
.cursor_cbl { inset: auto auto 0 0; }
.cursor_ctr { inset: 0 0 auto auto; }
.cursor_cbr { inset: auto 0 0 auto; }
.cursor_inner-wrapper > svg line { stroke: var(--cursor-corners); vector-effect: non-scaling-stroke; }

.cursor_pointer { background-color: var(--cursor-primary); border-radius: 50%; width: calc(1rem * var(--cs)); height: calc(1rem * var(--cs)); transition: background-color .25s; }
.cursor_outer-wrapper.is-hover .cursor_pointer,
.cursor_outer-wrapper.has-icon .cursor_pointer { background-color: var(--cursor-hover); }

.cursor_icon { position: absolute; width: calc(.7rem * var(--cs)); height: calc(.7rem * var(--cs)); color: var(--cursor-icon); opacity: 0; transition: opacity .2s; }
.cursor_icon svg { width: 100%; height: 100%; display: block; }
.cursor_outer-wrapper.has-icon .cursor_icon { opacity: 1; }

@media (hover: hover) and (pointer: fine) {
  html.has-custom-cursor, html.has-custom-cursor * { cursor: none !important; }
}
@media (hover: none), (pointer: coarse) { .cursor_outer-wrapper { display: none; } }