/* ==========================================
   1. IMPORTATION DES POLICES
   ========================================== */
@font-face {
    font-family: 'Mikodacs';
    src: url('fonts/mikodacs/Mikodacs.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'hammer_keys';
    src: url('fonts/hammer_keys/HAMMK___.TTF') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Ballet';
    src: url('fonts/ballet/Ballet_60pt-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Neue Haas Grotesk';
    src: url('/fonts/neue-haas/NeueHaasDisplay-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Neue Haas Grotesk Text';
    src: url('/fonts/neue-haas/NeueHaasGroteskText-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ==========================================
   2. TABLEAU DE BORD DES COULEURS (DA)
   ========================================== */
:root {
    --bg-principal: #F7F9F7;        /* Porcelain */
    --rose_Ar: #F90581; 
    --vert_Ar: #39FC3C;
    --bg-green: #20BF55;            /* Jade green */
    --texte-principal: #210124;     /* Midnight violet */
    --texte-secondaire: #C83E4D;    /* Blushed Brick */
    --couleur-accent: #20BF55;      /* Jade green */
    --color-logo: #F7F9F7;          /* Porcelain */
    
    --police-logo: 'Mikodacs', sans-serif;
    --police-corps: 'Plus Jakarta Sans', sans-serif;
    --police-fun: 'hammer_keys', sans-serif;
    --police-ballet: 'Ballet', cursive;
    --police-haas: 'Neue Haas Grotesk', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
}

/* ==========================================
   3. APPLICATION DES POLICES
   ========================================== */
.font-princ {
    font-family: var(--police-corps);
    font-weight: normal; 
    color: var(--texte-principal);
    font-size: 1.1rem;
}

.font-fun {
    font-family: var(--police-fun);
    font-weight: normal; 
    letter-spacing: 0.1em;
    color: var(--texte-principal);
    font-size: 3.1rem;
}

.font-ballet {
    font-family: 'Ballet', cursive !important;
    font-variation-settings: 'opsz' 72 !important;
    font-optical-sizing: auto;
}

.font-haas {
    font-family: var(--police-haas) !important;
}

.hero-custom-cursor {
    /* Le chemin vers ton icône (32x32px max), suivi des coordonnées du point d'impact (x y), puis fallback */
    cursor: url('/images/logos/classique/vert.svg') 16 16, auto;
}

.bg-rave-texture {
  background-color: #F90581; /* Rose très pâle reposant pour l'œil */
  background-image: 
    radial-gradient(circle at 15% 25%, rgba(249, 5, 129, 0.45) 0%, transparent 75%),
    radial-gradient(circle at 85% 65%, rgba(249, 5, 129, 0.35) 0%, transparent 70%),
    radial-gradient(circle at 50% 90%, rgba(249, 5, 129, 0.25) 0%, transparent 60%);
}

.bg-artiphys-texture {
  background-color: #fde8f3; /* Teinte de secours au chargement */
  background-image: url('/images/logos/png/bg_yeux_rose.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  background-attachment: scroll /* Reste fixe au défilement */
}

.bg-artiphys-pink-texture {
  background-color: #fde8f3; /* Teinte de secours au chargement */
  background-image: url('/images/logos/png/bg_rose.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  background-attachment: fixed; /* Reste fixe au défilement */
}


/* ==========================================
   4. NAVIGATION GLOBALE & MENU MOBILE
   ========================================== */
html, body {
    max-width: 100%;
    overflow-x: hidden !important;
}

.nav-link-vertical {
    position: relative;
    display: inline-block;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

/* Menu mobile glissant */
#mobile-menu {
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    background-color: #210124 !important;
}
#mobile-menu.menu-open {
    transform: translateX(0%) !important;
}

/* Croix hamburger animée */
.menu-active .id-line1 {
    transform: translateY(8px) rotate(45deg);
}
.menu-active .id-line2 {
    opacity: 0;
}
.menu-active .id-line3 {
    transform: translateY(-8px) rotate(-45deg);
}

/* ==========================================
   5. EFFETS RAVE PUNK / GLITCH / NEON
   ========================================== */
.neon-pink {
    font-family: var(--police-ballet) !important;
    color: #FFFFFF !important;
    text-shadow:
        0 0 2px #FFFFFF,
        0 0 6px #FFFFFF,
        0 0 12px #FF007F,
        0 0 25px #FF007F,
        0 0 45px #FF007F;
    transform: rotate(-3deg);
    display: inline-block;
}

.neon-autre {
    font-family: var(--police-haas) !important;
    color: #39FC3C !important;
    text-shadow:
        0 0 2px #FFFFFF,
        0 0 6px #FFFFFF,
        0 0 12px #FF007F,
        0 0 25px #FF007F,
        0 0 45px #FF007F;
    transform: rotate(-1deg);
    display: inline-block;
}

.neon-violet {
    font-family: var(--police-haas) !important;
    color: #210124 !important;
    text-shadow:
        0 0 2px #FFFFFF,
        0 0 6px #FFFFFF,
        0 0 12px #FF007F,
        0 0 25px #FF007F,
        0 0 45px #FF007F;
    transform: rotate(-1deg);
    display: inline-block;
}

.hover-neon-autre {
    transition: all 0.2s ease-in-out;
}

.hover-neon-autre:hover {
    font-family: var(--police-haas) !important;
    color: #39FC3C !important;
    text-shadow:
        0 0 2px #FFFFFF,
        0 0 6px #FFFFFF,
        0 0 12px #FF007F,
        0 0 25px #FF007F,
        0 0 45px #FF007F !important;
    transform: rotate(-1deg) scale(1.05);
    display: inline-block;
}

.group:hover .hover-neon-svg {
    filter: drop-shadow(0 0 2px #FFFFFF)
           drop-shadow(0 0 6px #39FC3C)
           drop-shadow(0 0 15px #FF007F)
           drop-shadow(0 0 30px #FF007F);
    transition: filter 0.3s ease;
}

/* effets pdf*/
@keyframes starFloat {
    0%, 100% {
        transform: rotate(-6deg) translateY(0px) scale(1);
    }
    50% {
        transform: rotate(4deg) translateY(-8px) scale(1.03);
    }
}

.animate-star-float {
    animation: starFloat 4.5s ease-in-out infinite;
    will-change: transform;
}

/* ==========================================
   6. COMPOSANTS ROULETTE (ÉVÉNEMENTS & COMITÉ)
   ========================================== */

.scrollbar-none::-webkit-scrollbar {
    display: none;
}
.scrollbar-none {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

#dvd-container {
    will-change: transform;
    top: 0;
    left: 0;
    transform: translate3d(0, 0, 0);
}

/* ==========================================================================
   Hero & Vidéo Stabilité GPU
   ========================================================================== */
.hero-section {
    height: 100vh;
    height: 100svh;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

#bg-video {
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    will-change: transform;
}

/* ==========================================================================
   Logos Flottants Défilement
   ========================================================================== */
.scroll-floating-item {
    position: fixed;
    top: 0;
    right: 1.25rem;
    pointer-events: none;
    z-index: 30; /* Devant le contenu (z-10), sous le footer (z-40) et le nav (z-50) */
    will-change: transform;
}

.white-glow-permanent {
    filter: 
        drop-shadow(0 0 3px rgba(255, 255, 255, 0.95))
        drop-shadow(0 0 8px rgba(255, 255, 255, 0.75))
        drop-shadow(0 0 16px rgba(255, 255, 255, 0.45));
}

@keyframes cursorTrailFade {
    0% {
        opacity: 0.85;
        transform: scale(0.95) rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: scale(0.3) rotate(20deg);
    }
}

.cursor-particle {
    position: fixed;
    pointer-events-none;
    z-index: 90; /* Reste toujours sous le curseur principal qui est à 100 */
    animation: cursorTrailFade 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    will-change: transform, opacity;
}