/* =====================================================
   custom-cursor.css — Curseur personnalisé global ÉLECTRICITÉ by BEST
   Chargé sur toutes les pages (inc/assets.php). Piloté par assets/js/custom-cursor.js.

   Le curseur système n'est masqué QUE lorsque le script a ajouté la classe
   « ebb-cursor-on » sur <html> (souris précise détectée, premier mouvement reçu).
   Sans JavaScript, sur écran tactile ou en cas d'erreur : curseur système normal.

   États (classes sur .ebb-cursor) : is-link · is-magnetic · is-view · is-technical
   · is-technical-active · is-input · is-hidden · is-down · is-explore
   ===================================================== */

/* Curseur système masqué uniquement une fois le curseur personnalisé opérationnel */
html.ebb-cursor-on,
html.ebb-cursor-on * {
    cursor: none !important;
}

/* Champs : curseur natif conservé (I-beam pour la saisie, flèche pour les listes) */
html.ebb-cursor-on input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
html.ebb-cursor-on textarea,
html.ebb-cursor-on [contenteditable=""],
html.ebb-cursor-on [contenteditable="true"] {
    cursor: text !important;
}

html.ebb-cursor-on select,
html.ebb-cursor-on input[type="range"],
html.ebb-cursor-on input[type="color"],
html.ebb-cursor-on input[type="file"] {
    cursor: default !important;
}

/* Navigation clavier : curseur système rétabli tant que la souris ne bouge pas */
html.ebb-cursor-on.ebb-cursor-kbd,
html.ebb-cursor-on.ebb-cursor-kbd * {
    cursor: auto !important;
}

.ebb-cursor {
    --ebb-cur-o: #E85A12;
    --ebb-cur-g: #5E5E5E;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9000;
    width: 0;
    height: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease;
    contain: layout style;
}

html.ebb-cursor-on .ebb-cursor {
    opacity: 1;
}

html.ebb-cursor-on.ebb-cursor-kbd .ebb-cursor,
.ebb-cursor.is-hidden {
    opacity: 0;
}

/* Positionneurs : déplacés uniquement par transform (translate3d) */
.ebb-cursor__dotpos,
.ebb-cursor__ringpos {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    pointer-events: none;
    will-change: transform;
}

/* Point de connexion : suit exactement la souris */
.ebb-cursor__dot {
    position: absolute;
    left: -3.5px;
    top: -3.5px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ebb-cur-o);
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.85);
    transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.2s ease;
}

/* Cercle : suit avec une légère inertie (36 px par défaut) */
.ebb-cursor__ring {
    position: absolute;
    left: -18px;
    top: -18px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(232, 90, 18, 0.7);
    transform: scale(1);
    transition:
        transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
        border-color 0.3s ease,
        opacity 0.25s ease;
}

/* Remplissage du mode « VOIR » (mis à l'échelle sans flou de texte : le texte est un frère) */
.ebb-cursor__ring::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    background: var(--ebb-cur-o);
    transform: scale(0.2);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.25s ease;
}

/* Repères techniques : 4 petites marques cardinales autour du cercle */
.ebb-cursor__ticks {
    position: absolute;
    inset: -7px;
    opacity: 0;
    transform: scale(0.85) rotate(-12deg);
    transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.ebb-cursor__ticks i {
    position: absolute;
    background: var(--ebb-cur-o);
}

.ebb-cursor__ticks i:nth-child(1) {
    left: 50%;
    top: 0;
    width: 1px;
    height: 6px;
    margin-left: -0.5px;
}

.ebb-cursor__ticks i:nth-child(2) {
    left: 50%;
    bottom: 0;
    width: 1px;
    height: 6px;
    margin-left: -0.5px;
}

.ebb-cursor__ticks i:nth-child(3) {
    top: 50%;
    left: 0;
    width: 6px;
    height: 1px;
    margin-top: -0.5px;
}

.ebb-cursor__ticks i:nth-child(4) {
    top: 50%;
    right: 0;
    width: 6px;
    height: 1px;
    margin-top: -0.5px;
}

/* Mot court centré (VOIR, DÉCOUVRIR, EXPLORER) */
.ebb-cursor__label {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%) scale(0.6);
    font-family: 'IBM Plex Sans', Inter, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1;
    white-space: nowrap;
    color: #FFFFFF;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --- LINK : lien, bouton, élément interactif (≈ 54 px) --- */
.ebb-cursor.is-link .ebb-cursor__ring {
    transform: scale(1.5);
    border-color: rgba(232, 90, 18, 0.55);
}

.ebb-cursor.is-link .ebb-cursor__dot {
    transform: scale(1.15);
}

/* --- MAGNETIC : CTA importants (≈ 58 px, cercle attiré vers le centre) --- */
.ebb-cursor.is-magnetic .ebb-cursor__ring {
    transform: scale(1.6);
    border-color: rgba(232, 90, 18, 0.5);
}

.ebb-cursor.is-magnetic .ebb-cursor__dot {
    transform: scale(0.85);
}

/* --- VIEW : carte ou photo entièrement cliquable (≈ 70 px, fond orange, texte blanc) --- */
.ebb-cursor.is-view .ebb-cursor__ring {
    transform: scale(1.95);
    border-color: transparent;
}

.ebb-cursor.is-view .ebb-cursor__ring::before {
    transform: scale(1);
    opacity: 1;
}

.ebb-cursor.is-view .ebb-cursor__dot {
    transform: scale(0);
    opacity: 0;
}

.ebb-cursor.is-view .ebb-cursor__label {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* --- TECHNICAL : scène immersive / visuel technique (repère d'inspection) --- */
.ebb-cursor.is-technical .ebb-cursor__ticks {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

.ebb-cursor.is-technical .ebb-cursor__ring {
    border-color: rgba(232, 90, 18, 0.8);
}

/* Repère actif (ex. une expertise survolée) : cercle légèrement agrandi, marques écartées */
.ebb-cursor.is-technical-active .ebb-cursor__ring {
    transform: scale(1.35);
    border-color: var(--ebb-cur-o);
}

.ebb-cursor.is-technical-active .ebb-cursor__ticks {
    opacity: 1;
    transform: scale(1.38) rotate(0deg);
}

/* Indication temporaire « EXPLORER » : uniquement sur une zone réellement explorable */
.ebb-cursor.is-explore .ebb-cursor__ring {
    transform: scale(2.1);
    border-color: rgba(255, 255, 255, 0.85);
}

.ebb-cursor.is-explore .ebb-cursor__ring::before {
    transform: scale(1);
    opacity: 0.92;
}

.ebb-cursor.is-explore .ebb-cursor__label {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    font-size: 9px;
}

.ebb-cursor.is-explore .ebb-cursor__dot {
    opacity: 0;
}

.ebb-cursor.is-explore .ebb-cursor__ticks {
    opacity: 0;
}

/* --- INPUT : champ de saisie, le curseur natif prend le relais --- */
.ebb-cursor.is-input .ebb-cursor__ring {
    transform: scale(0.3);
    opacity: 0;
}

.ebb-cursor.is-input .ebb-cursor__dot {
    transform: scale(0);
    opacity: 0;
}

/* Clic : légère compression */
.ebb-cursor.is-down .ebb-cursor__dot {
    transform: scale(0.7);
}

.ebb-cursor.is-down:not(.is-view):not(.is-explore) .ebb-cursor__ring {
    border-color: var(--ebb-cur-o);
}

/* Effet magnétique : décalage appliqué par la propriété « translate »,
   qui se cumule aux « transform » existants des boutons (survol, animations). */
[data-ebb-magnetized] {
    translate: var(--ebb-mx, 0px) var(--ebb-my, 0px);
    transition: translate 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Mouvement réduit : pas d'animation d'échelle, pas de magnétisme */
@media (prefers-reduced-motion: reduce) {

    .ebb-cursor__dot,
    .ebb-cursor__ring,
    .ebb-cursor__ring::before,
    .ebb-cursor__ticks,
    .ebb-cursor__label {
        transition: none;
    }

    [data-ebb-magnetized] {
        translate: none;
        transition: none;
    }
}

/* Impression : jamais de curseur */
@media print {
    .ebb-cursor {
        display: none !important;
    }
}