/* === SYSTÈME DE TRANSITION DE PAGE AVEC LOGO === */

/* Overlay de transition - APPARITION INSTANTANÉE */
.page-transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(135deg, #2b7e9b 0%, #59acc9 100%);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: none; /* Suppression de la transition pour apparition instantanée */
    overflow: visible !important; /* Permettre aux éléments de dépasser */
}

.page-transition-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Logo de transition - AVEC ESPACE POUR DISPERSION */
.transition-logo {
    width: 300px;
    height: auto;
    opacity: 1; /* TOUJOURS VISIBLE */
    overflow: visible !important; /* Permettre aux morceaux de sortir */
    position: relative;
    /* Ajouter de l'espace autour pour les morceaux dispersés */
    padding: 200px; /* Espace pour les mouvements */
    margin: -200px; /* Compenser le padding pour garder le centrage */
}

/* Animation du logo SVG - EFFET PUZZLE CORRIGÉ */
.transition-logo svg {
    width: 100%;
    height: auto;
    overflow: visible !important; /* Assurer que le SVG ne coupe pas */
    position: relative;
    z-index: 1;
}

.transition-logo .cls-1,
.transition-logo .cls-2,
.transition-logo .cls-3 {
    transform-origin: center;
    opacity: 1;
    transition: none; /* Supprimer les transitions pour éviter les conflits */
}

/* ÉTAT INITIAL: Laisser le SVG dans sa position par défaut */
/* Pas de transform par défaut pour éviter les conflits */

/* ÉTAT DISPERSÉ: Distances réduites pour rester visibles */
.page-transition-overlay:not(.active) .transition-logo .cls-1 {
    transform: translateX(-250px) translateY(-80px) scale(0.8) !important;
}

.page-transition-overlay:not(.active) .transition-logo .cls-2 {
    transform: translateY(200px) scale(1.2) !important;
}

.page-transition-overlay:not(.active) .transition-logo .cls-3 {
    transform: translateX(280px) translateY(-60px) scale(0.6) !important;
}

/* RASSEMBLEMENT: Animation RAPIDE et dynamique */
.page-transition-overlay.active .transition-logo .cls-1 {
    animation: puzzleAssemble1Complete 1.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s both;
}

.page-transition-overlay.active .transition-logo .cls-2 {
    animation: puzzleAssemble2Complete 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s both;
}

.page-transition-overlay.active .transition-logo .cls-3 {
    animation: puzzleAssemble3Complete 1.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s both;
}

/* KEYFRAMES COMPLÈTES INCLUANT L'ATTENTE */

@keyframes puzzleAssemble1Complete {
    0%, 35% {
        /* Rester dispersé pendant ~0.5s (35% de 1.4s = 0.5s) */
        transform: translateX(-250px) translateY(-80px) scale(0.8);
    }
    55% {
        transform: translateX(-80px) translateY(-25px) scale(0.9);
    }
    85% {
        transform: translateX(15px) translateY(3px) scale(1.05);
    }
    100% {
        transform: translateX(0) translateY(0) scale(1);
    }
}

@keyframes puzzleAssemble2Complete {
    0%, 33% {
        /* Rester dispersé pendant ~0.5s (33% de 1.5s = 0.5s) */
        transform: translateY(200px) scale(1.2);
    }
    50% {
        transform: translateY(60px) scale(1.1);
    }
    80% {
        transform: translateY(-8px) scale(0.95);
    }
    100% {
        transform: translateY(0) scale(1);
    }
}

@keyframes puzzleAssemble3Complete {
    0%, 31% {
        /* Rester dispersé pendant ~0.5s (31% de 1.6s = 0.5s) */
        transform: translateX(280px) translateY(-60px) scale(0.6);
    }
    50% {
        transform: translateX(100px) translateY(-20px) scale(0.8);
    }
    75% {
        transform: translateX(-12px) translateY(5px) scale(1.08);
    }
    100% {
        transform: translateX(0) translateY(0) scale(1);
    }
}

/* Animation de pulsation après l'entrée - SIMPLIFIÉE */
.transition-logo.breathing {
    animation: logoBreath 2s ease-in-out infinite;
}

@keyframes logoBreath {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* ÉTAT FINAL VERROUILLÉ - Empêche le logo de se re-disperser */
.page-transition-overlay .transition-logo.final-assembled .cls-1,
.page-transition-overlay .transition-logo.final-assembled .cls-2,
.page-transition-overlay .transition-logo.final-assembled .cls-3 {
    transform: translateX(0px) translateY(0px) scale(1) !important;
    animation: none !important;
    transition: none !important;
}

/* Double sécurité avec sélecteur encore plus spécifique */
.page-transition-overlay.active .transition-logo.final-assembled .cls-1,
.page-transition-overlay.active .transition-logo.final-assembled .cls-2,
.page-transition-overlay.active .transition-logo.final-assembled .cls-3 {
    transform: translateX(0px) translateY(0px) scale(1) !important;
    animation: none !important;
    transition: none !important;
}


/* Transition de sortie - RAPIDE */
.page-transition-overlay.leaving {
    animation: fadeOut 0.4s ease-in-out forwards;
}

@keyframes fadeOut {
    to {
        opacity: 0;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .transition-logo {
        width: 150px;
    }
}

@media (max-width: 480px) {
    .transition-logo {
        width: 120px;
    }
}

/* === AMÉLIORATION DU STYLE GÉNÉRAL === */

/* Reset et styles de base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Smooth scrolling pour toute la page */
html {
    scroll-behavior: smooth;
}

/* Styles de base du body - DARK THEME */
body {
    margin: 0;
    padding: 0;
    background-color: #0a0a0a;
    color: rgba(255, 255, 255, 0.9);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    overflow-x: hidden;
}

/* Amélioration des transitions générales */
* {
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

/* Style pour les liens avec transition */
a {
    text-decoration: none;
    color: #2b7e9b;
    transition: all 0.3s ease;
    position: relative;
}

a:hover {
    color: #59acc9;
    transform: translateY(-1px);
}

a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px;
    left: 0;
    background: linear-gradient(90deg, #2b7e9b, #59acc9);
    transition: width 0.3s ease;
}

a:hover::after {
    width: 100%;
}