.cursor-w {
    z-index: 9999999;
    mix-blend-mode: screen;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    display: flex;
    position: fixed;
    top: 0%;
    bottom: 0%;
    left: 0%;
    right: 0%;
    pointer-events: none;
}

.cursor-element {
    background-color: var(--orange-primary);
    border-radius: 100em;
    justify-content: center;
    align-items: center;
    width: 2.8em; /* Plus grand de base (était 2.5em) */
    height: 2.8em;
    /* Animation fluide et "propre" (Ease Out Expo) */
    transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1), height 0.45s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease;
    display: flex;
    overflow: hidden;
    will-change: transform, width, height;
}

.cursor-text__w {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.cursor-text {
    font-family: 'RMMono', monospace;
    font-size: 0.825rem; /* Un peu plus grand (était 0.75rem) */
    color: var(--white);
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s ease;
    font-weight: 500;
}

/* --- INTERACTIONS --- */

/* 1. Hover Standard (Liens, Boutons) */
body:has(a:hover) .cursor-element,
body:has(button:hover) .cursor-element,
body:has([data-cursor]:hover) .cursor-element {
    width: 3.5em;
    height: 3.5em;
    background-color: rgba(235, 106, 38, 0.8);
}

/* 2. Sections Spéciales (Texte) */
body.has-custom-cursor-text .cursor-element {
    width: 6em !important; /* Un peu plus petit (était 6.5em) */
    height: 6em !important;
    background-color: var(--orange-primary);
}

body.has-custom-cursor-text .cursor-text {
    opacity: 1;
}

/* 3. PRIORITÉ : Si on est dans une section spéciale MAIS sur un lien/bouton (hors titre) */
body.has-custom-cursor-text:has(.section-dots a:hover) .cursor-element,
body.has-custom-cursor-text:has(.section-dots button:hover) .cursor-element,
body.has-custom-cursor-text:has(.section-dots .about-button:hover) .cursor-element,
body.has-custom-cursor-text:has(.image-trail-section a:hover) .cursor-element,
body.has-custom-cursor-text:has(.image-trail-section button:hover) .cursor-element,
body.has-custom-cursor-text:has(.services-section a:hover) .cursor-element,
body.has-custom-cursor-text:has(.services-section button:hover) .cursor-element {
    width: 3.5em !important;
    height: 3.5em !important;
    background-color: rgba(235, 106, 38, 0.8);
}

body.has-custom-cursor-text:has(.section-dots a:hover) .cursor-text,
body.has-custom-cursor-text:has(.section-dots button:hover) .cursor-text,
body.has-custom-cursor-text:has(.section-dots .about-button:hover) .cursor-text,
body.has-custom-cursor-text:has(.image-trail-section a:hover) .cursor-text,
body.has-custom-cursor-text:has(.image-trail-section button:hover) .cursor-text,
body.has-custom-cursor-text:has(.services-section a:hover) .cursor-text,
body.has-custom-cursor-text:has(.services-section button:hover) .cursor-text {
    opacity: 0 !important;
}

/* 4. Menu / Header : Tout petit point - PRIORITÉ MAXIMALE */
body:has(.g-header:hover) .cursor-element,
body:has(.g-header__dropdown:hover) .cursor-element,
body.has-custom-cursor-text:has(.g-header:hover) .cursor-element,
body.has-custom-cursor-text:has(.g-header__dropdown:hover) .cursor-element {
    width: 0.5em !important;
    height: 0.5em !important;
    opacity: 1 !important;
    background-color: var(--orange-primary) !important;
}

body:has(.g-header:hover) .cursor-text,
body:has(.g-header__dropdown:hover) .cursor-text,
body.has-custom-cursor-text:has(.g-header:hover) .cursor-text,
body.has-custom-cursor-text:has(.g-header__dropdown:hover) .cursor-text {
    opacity: 0 !important;
}

/* 5. Cursor Pointer pour les sections spéciales */
.image-trail-section,
.section-dots,
.services-section {
    cursor: pointer;
}

/* Masquer sur mobile/tablette */
@media (hover: none) and (pointer: coarse) {
    .cursor-w {
        display: none !important;
    }
}

/* Sécurité : aussi caché en dessous de 768px peu importe le device */
@media (max-width: 768px) {
    .cursor-w,
    .cursor-element,
    .cursor-text__w {
        display: none !important;
    }
}