/**
 * Curseur personnalisé — Lons Entrepreneurs
 *
 * Actif uniquement en desktop via cursor.js.
 *
 * Charte :
 * - Bleu nuit : #0E2434
 * - Bleu secondaire : #153951
 * - Bleu principal : #2EA3F2
 * - Blanc : #FFFFFF
 *
 * Logique :
 * - fond clair : curseur bleu nuit
 * - fond sombre : curseur blanc
 * - lien / bouton : rond bleu principal + flèche blanche
 * - zone draggable : cercle bleu en pointillé
 * - dragging : cercle bleu plein / translucide
 * - ripple : adaptatif bleu nuit / blanc
 */


/* ==========================================================================
   CURSEUR NATIF
   ========================================================================== */

html.has-custom-cursor,
html.has-custom-cursor * {
    cursor: none !important;
}


/* ==========================================================================
   VARIABLES
   ========================================================================== */

html.has-custom-cursor {
    --cc-dark: #0E2434;
    --cc-blue-2: #153951;
    --cc-primary: #2EA3F2;
    --cc-white: #FFFFFF;
}


/* ==========================================================================
   CONTENEUR
   ========================================================================== */

.custom-cursor {
    position: fixed;

    top: 0;
    left: 0;

    width: 0;
    height: 0;

    pointer-events: none;

    z-index: 1000000000000;

    opacity: 0;
}

.cky-overlay {
    z-index: 9999;
}


/* ==========================================================================
   POINT CENTRAL
   ========================================================================== */

.custom-cursor__dot {
    position: absolute;

    top: 0;
    left: 0;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--cc-dark);

    box-shadow:
        0 0 0 2px rgba(46, 163, 242, 0);

    transition:
        opacity .2s ease,
        background-color .25s ease,
        box-shadow .25s ease;

    will-change: transform;
}


/* ==========================================================================
   ANNEAU
   ========================================================================== */

.custom-cursor__ring {
    position: absolute;

    top: 0;
    left: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    border:
        1.5px solid
        var(--cc-dark);

    border-radius: 50%;

    background: transparent;

    box-shadow:
        0 4px 18px
        rgba(14, 36, 52, .10);

    transition:
        width .35s cubic-bezier(.16, 1, .3, 1),
        height .35s cubic-bezier(.16, 1, .3, 1),
        background-color .3s ease,
        border-color .25s ease,
        border-style .15s ease,
        box-shadow .3s ease;

    will-change: transform;
}


/* ==========================================================================
   ICÔNE
   ========================================================================== */

.custom-cursor__icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 17px;
    height: 17px;

    color: #FFFFFF;

    opacity: 0;

    transform:
        translateX(-3px)
        scale(.8);

    transition:
        opacity .2s ease,
        transform .35s cubic-bezier(.16, 1, .3, 1);
}

.custom-cursor__icon svg {
    display: block;

    width: 100%;
    height: 100%;
}


/* Si ton SVG utilise currentColor */

.custom-cursor__icon svg path,
.custom-cursor__icon svg line,
.custom-cursor__icon svg polyline {
    stroke: currentColor;
}


/* ==========================================================================
   FOND SOMBRE
   ========================================================================== */

/*
 * cursor.js ajoute .on-dark lorsque le fond détecté
 * sous le pointeur est sombre.
 */

.custom-cursor.on-dark
.custom-cursor__dot {
    background: #FFFFFF;
}

.custom-cursor.on-dark
.custom-cursor__ring {
    border-color:
        rgba(255, 255, 255, .95);

    box-shadow:
        0 4px 20px
        rgba(0, 0, 0, .15);
}


/* ==========================================================================
   HOVER — LIEN / BOUTON
   ========================================================================== */

.custom-cursor.is-hovering
.custom-cursor__ring {
    width: 54px;
    height: 54px;

    border-color: #2EA3F2;

    background: #2EA3F2;

    box-shadow:
        0 8px 26px
        rgba(46, 163, 242, .28);
}

.custom-cursor.is-hovering
.custom-cursor__dot {
    opacity: 0;
}

.custom-cursor.is-hovering
.custom-cursor__icon {
    opacity: 1;

    transform:
        translateX(0)
        scale(1);
}


/*
 * Même rendu sur fond clair ou sombre.
 */

.custom-cursor.on-dark.is-hovering
.custom-cursor__ring {
    border-color: #2EA3F2;

    background: #2EA3F2;
}


/* ==========================================================================
   GRAB
   ========================================================================== */

.custom-cursor.is-grab
.custom-cursor__ring {
    width: 62px;
    height: 62px;

    border:
        1.5px dashed
        #2EA3F2;

    background:
        rgba(46, 163, 242, .08);

    box-shadow:
        0 8px 30px
        rgba(46, 163, 242, .12);
}

.custom-cursor.is-grab
.custom-cursor__dot {
    opacity: 0;
}

.custom-cursor.is-grab
.custom-cursor__icon {
    opacity: 0;
}


/* ==========================================================================
   GRABBING
   ========================================================================== */

.custom-cursor.is-grabbing
.custom-cursor__ring {
    width: 46px;
    height: 46px;

    border:
        1.5px solid
        #2EA3F2;

    background:
        rgba(46, 163, 242, .22);

    box-shadow:
        0 8px 26px
        rgba(46, 163, 242, .20);
}

.custom-cursor.is-grabbing
.custom-cursor__dot {
    opacity: 0;
}


/* ==========================================================================
   OPTION : FEEDBACK SUBTIL DU POINT
   ========================================================================== */

.custom-cursor:not(.is-hovering):not(.is-grab):not(.is-grabbing)
.custom-cursor__dot {
    box-shadow:
        0 0 0 0
        rgba(46, 163, 242, 0);
}


/* ==========================================================================
   RIPPLE AU CLIC
   ========================================================================== */

.custom-cursor-click-ripple {
    position: fixed;

    top: 0;
    left: 0;

    width: 40px;
    height: 40px;

    border:
        2px solid
        var(--cc-dark);

    border-radius: 50%;

    pointer-events: none;

    z-index: 100001;

    animation:
        cursor-ripple
        .55s
        cubic-bezier(.16, 1, .3, 1)
        forwards;
}


/*
 * Sur les fonds sombres :
 * ripple blanc.
 */

.custom-cursor-click-ripple.on-dark {
    border-color: #FFFFFF;
}


/* ==========================================================================
   ANIMATION RIPPLE
   ========================================================================== */

@keyframes cursor-ripple {

    from {
        transform:
            translate(-50%, -50%)
            scale(.35);

        opacity: .85;
    }

    to {
        transform:
            translate(-50%, -50%)
            scale(1.9);

        opacity: 0;
    }

}


/* ==========================================================================
   ÉLÉMENTS PARTICULIÈREMENT INTERACTIFS
   ========================================================================== */

/*
 * Si cursor.js ajoute simplement .is-hovering,
 * pas besoin de cette partie.
 *
 * Ces styles servent uniquement à conserver
 * une cohérence lorsque le curseur passe par-dessus
 * une lightbox ou un élément très haut en z-index.
 */

.grand-slider__lightbox
.custom-cursor,
.site-header
.custom-cursor {
    z-index: 100000;
}


/* ==========================================================================
   ACCESSIBILITÉ
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .custom-cursor__ring,
    .custom-cursor__dot,
    .custom-cursor__icon {
        transition: none;
    }

    .custom-cursor-click-ripple {
        animation-duration: .01ms;
    }

}


/* ==========================================================================
   PAS DE CURSEUR CUSTOM SUR TOUCH / TABLETTE
   ========================================================================== */

@media (hover: none),
(pointer: coarse) {

    html.has-custom-cursor,
    html.has-custom-cursor * {
        cursor: auto !important;
    }

    .custom-cursor,
    .custom-cursor-click-ripple {
        display: none !important;
    }

}