:root {
    --color-primary: #0a0a0a;
    --color-secondary: #f5a623;
}

body {
    font-family: 'Exo 2', sans-serif;
    background-color: var(--color-primary);
    color: white;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #1a1a1a;
}

::-webkit-scrollbar-thumb {
    background: #4a4a4a;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #6a6a6a;
}

/* --- STYLES DU CUBE 3D --- */

/* La scène 3D qui contient le cube */
.scene {
    width: 100%;
    /* Prend toute la largeur de la colonne */
    aspect-ratio: 1 / 1;
    /* Assure que la zone est carrée */
    perspective: 1200px;
    /* Crée la profondeur de la scène 3D */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Le cube lui-même - TAILLE RÉDUITE ICI */
.cube {
    width: 60%;
    /* <<< MODIFIÉ: de 80% à 60% */
    height: 60%;
    /* <<< MODIFIÉ: de 80% à 60% */
    position: relative;
    transform-style: preserve-3d;
    /* Essentiel pour que les faces soient en 3D */
    animation: rotate-cube 20s infinite linear;
    /* L'animation de rotation */
}

/* Définition de l'animation de rotation */
@keyframes rotate-cube {
    from {
        transform: rotateX(0deg) rotateY(0deg);
    }

    to {
        transform: rotateX(360deg) rotateY(360deg);
    }
}

/* Style commun à toutes les faces */
.cube__face {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #333;
    border: 2px solid #555;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.cube__face img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* S'assure que l'image remplit la face sans se déformer */
}

/* Positionnement de chaque face pour former le cube - DISTANCE AJUSTÉE ICI */
/* La nouvelle valeur est la moitié de la nouvelle largeur approximative (30vw) */
.cube__face--front {
    transform: rotateY(0deg) translateZ(calc(30vw / 2));
    /* <<< MODIFIÉ */
}

.cube__face--back {
    transform: rotateY(180deg) translateZ(calc(30vw / 2));
    /* <<< MODIFIÉ */
}

.cube__face--right {
    transform: rotateY(90deg) translateZ(calc(30vw / 2));
    /* <<< MODIFIÉ */
}

.cube__face--left {
    transform: rotateY(-90deg) translateZ(calc(30vw / 2));
    /* <<< MODIFIÉ */
}

.cube__face--top {
    transform: rotateX(90deg) translateZ(calc(30vw / 2));
    /* <<< MODIFIÉ */
}

.cube__face--bottom {
    transform: rotateX(-90deg) translateZ(calc(30vw / 2));
    /* <<< MODIFIÉ */
}


/* Ajustement pour les écrans plus petits - DISTANCE AJUSTÉE ICI */
@media (max-width: 1024px) {
    .scene {
        aspect-ratio: auto;
        height: 300px; /* <<< MODIFIÉ: hauteur réduite pour mobile */
    }
    .cube {
        width: 80%; /* On peut le garder plus grand sur mobile */
        height: 80%;
    }
    .cube__face--front  { transform: rotateY(0deg) translateZ(120px); }    /* <<< MODIFIÉ */
    .cube__face--back   { transform: rotateY(180deg) translateZ(120px); } /* <<< MODIFIÉ */
    .cube__face--right  { transform: rotateY(90deg) translateZ(120px); }  /* <<< MODIFIÉ */
    .cube__face--left   { transform: rotateY(-90deg) translateZ(120px); } /* <<< MODIFIÉ */
    .cube__face--top    { transform: rotateX(90deg) translateZ(120px); }  /* <<< MODIFIÉ */
    .cube__face--bottom { transform: rotateX(-90deg) translateZ(120px); } /* <<< MODIFIÉ */
}

/* --- NOUVELLE CLASSE POUR LE TEXTE NÉON --- */
.text-neon-blue {
    color: #00f5d4; /* Couleur Cyan vive */
    text-shadow: 0 0 20px rgba(0, 245, 212, 0.5);
}

/* --- NOUVEAUX STYLES POUR L'ANIMATION DU BOUTON --- */

/* Animation de clignotement pour le bouton (inversion de couleurs) */
@keyframes blink-effect {
  /* État initial et final : texte jaune, fond transparent */
  0%, 100% {
    background-color: transparent;
    color: #fde047; /* Couleur jaune de Tailwind (yellow-300) */
    border-color: rgba(253, 224, 71, 0.8); /* Bordure jaune/transparente */
  }
  /* État au milieu de l'animation : texte noir, fond jaune */
  50% {
    background-color: #fde047; /* Fond jaune solide */
    color: #0a0a0a; /* Texte noir (couleur primaire du body) */
    border-color: #fde047; /* Bordure jaune solide pour unifier */
    box-shadow: 0 0 15px rgba(254, 240, 138, 0.7); /* Garde l'effet de lueur */
  }
}

/* Application de l'animation au bouton */
.cta-button {
    /* L'animation dure 1.5 secondes pour un effet plus rapide */
    animation: blink-effect 1.5s infinite;
}

/* Style pour le badge sous le bouton */
.cta-badge {
    display: block;
    margin-top: 1rem;
    font-size: 0.9rem;
    color: #a1a1aa; /* Gris clair */
}

/* ... (le reste de vos styles, y compris .footer, reste inchangé) ... */


/* Style pour le pied de page */
.footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    padding: 1rem;
    background-color: rgba(0, 0, 0, 0.4);
    font-size: 0.9rem;
    color: #71717a; /* Gris plus sombre */
}

.footer a {
    color: #e2e8f0; /* Blanc cassé */
    text-decoration: none;
}

.footer a:hover {
    text-decoration: underline;
}