/* ==========================================
   1. IMPORTATION DE LA POLICE MIKODACS
   ========================================== */
@font-face {
    font-family: 'Mikodacs';
    /* Le chemin part de votre fichier style.css, entre dans 'fonts' puis 'mikodacs' */
    src: url('../fonts/mikodacs/Mikodacs.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

/* ==========================================
   2. VARIABLES DE STYLE
   ========================================== */
:root {
    --bg-principal: #fdfdfd;       
    --texte-principal: #0d0e12;    
    --texte-secondaire: #8a91a5;   
    --couleur-accent: #2563eb;      
    
    /* On crée une variable spécifique pour le logo */
    --police-logo: 'Mikodacs', sans-serif;
    --police-corps: 'Plus Jakarta Sans', sans-serif;
}

/* ==========================================
   3. APPLICATION DE LA POLICE
   ========================================== */

/* On applique Mikodacs UNIQUEMENT aux éléments qui ont la classe .font-logo */
.font-logo {
    font-family: var(--police-logo);
  	font-style: italic;
    font-weight: normal; /* Pas besoin de forcer le bold, la police l'est déjà de base */
    letter-spacing: 0.1em; /* Un léger espacement des lettres rend souvent très bien avec ce style */
}

/* --- ANIMATION DE L'ÉCRAN DE CHARGEMENT --- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.2s;
}

/* ==========================================
   4. NAVIGATION VERTICALE À DROITE (TEXTE HORIZONTAL)
   ========================================== */
.vertical-menu {
    text-align: right; 
	display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.nav-link-vertical {
    position: relative;
    display: inline-block;
    transition: all 0.3s ease;
    color: var(--texte-principal);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.15em;
}

.nav-link-vertical:hover {
    color: var(--couleur-accent);
    transform: translateX(-5px); /* Léger glissement vers la gauche au survol */
}

/* Petite ligne animée sous le texte */
.nav-link-vertical::after {
    content: '';
    position: absolute;
    bottom: -4px;
    right: 0;
    width: 0;
    height: 1px;
    background-color: var(--couleur-accent);
    transition: width 0.3s ease;
}

.nav-link-vertical:hover::after {
    width: 100%;
}


/* ==========================================
   5. EMULATEUR DE LOGO 3D (ATTENTE)
   ========================================== */
.logo-3d-placeholder {
    font-size: 8rem;
    font-weight: 200;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1000px; /* Profondeur 3D */
}

/* Rotation du symbole ^ */
.symbol-1 {
    display: inline-block;
    animation: spin3D 6s linear infinite;
    color: var(--texte-principal);
}

/* Rotation du symbole * */
.symbol-2 {
    display: inline-block;
    color: var(--couleur-accent);
    animation: spin3DInverse 8s linear infinite;
    margin-left: -5px;
}

@keyframes spin3D {
    from { transform: rotateY(0deg); }
    to { transform: rotateY(360deg); }
}

@keyframes spin3DInverse {
    from { transform: rotateY(360deg) rotateX(0deg); }
    to { transform: rotateY(0deg) rotateX(360deg); }
}

/* --- ANIMATION DU HAMBURGER EN CSS PUR --- */

/* Quand l'input #menu-toggle est coché, on anime les barres du bouton qui se trouve juste après */
#menu-toggle:checked + #menu-btn .id-line1 {
    transform: rotate(45deg) translateY(5px) translateX(5px);
}

#menu-toggle:checked + #menu-btn .id-line2 {
    opacity: 0;
}

#menu-toggle:checked + #menu-btn .id-line3 {
    transform: rotate(-45deg) translateY(-5px) translateX(5px);
}