/* style.css */

/* 1. Réinitialisation et configuration de base */
html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Inter', sans-serif;
    color: #EAEAEA; 
    background-color: #000; 
}

/* 2. Disposition principale (colonne) */
body {
    display: flex;
    flex-direction: column; 
    height: 100vh;
    background-color: transparent; 
}

/* --- 3. Header (Couleur "Hidden Gem") --- */
header {
    background-color: #004e54; 
    padding: 1rem 2.5rem; 
    width: 100%;
    /* Ajout d'une transition pour le padding */
    transition: padding 0.3s ease;
}

header nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-end; 
    align-items: center;       
    gap: 1.5rem;   
    /* Ajout de transitions */
    transition: justify-content 0.3s ease, gap 0.3s ease;
}

/* 4. Liens de navigation (Home, About) */
header nav a {
    text-decoration: none;
    color: #EAEAEA; 
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.5rem;
    transition: color 0.3s ease, font-size 0.3s ease;
}

header nav a:hover {
    color: #fff; 
}

/* 5. Style spécial pour le bouton Discord */
header nav a.discord-button {
    background-color: #EAEAEA;
    color: #004e54; 
    padding: 0.75rem 1.25rem;
    border-radius: 4px; 
    font-weight: 700;
    transition: background-color 0.3s ease, color 0.3s ease, padding 0.3s ease;
}

header nav a.discord-button:hover {
    background-color: #004e54;
    color: #EAEAEA;
}

/* --- 6. Contenu Principal (Section du bas avec l'image) --- */
main#main-content { 
    flex-grow: 1; 
    display: grid;
    place-items: center;
    overflow: hidden;
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
        url('fknbg.png');                           
    background-size: cover;
    background-position: center;
    background-attachment: scroll;
    background-blend-mode: normal; 
    background-color: transparent; 
}

/* --- 7. Style du H1 (FKNBEN) - Animation de Lueur --- */
h1 {
    color: #8cb8b8; 
    margin: 0;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.05em;
    font-size: clamp(3rem, 12vw, 15rem); 
    animation: pulseGlow 4s ease-in-out infinite; 
    transition: font-size 0.3s ease, letter-spacing 0.3s ease;
}

/* Animation de couleur pour "FKN" */
h1 .animate-fkn {
    /* Animation plus lente (6s) */
    animation: colorTransition 6s ease-in-out infinite;
}


/* --- 8. Définitions des animations --- */
@keyframes pulseGlow {
  0%, 100% {
    text-shadow: 
      2px 2px 8px rgba(0, 0, 0, 0.7),
      0 0 5px rgba(140, 184, 184, 0.5); 
  }
  50% {
    text-shadow: 
      2px 2px 8px rgba(0, 0, 0, 0.7),
      0 0 20px rgba(140, 184, 184, 1); 
  }
}

@keyframes colorTransition {
  0%, 100% {
    color: #666666; /* Un gris foncé */
  }
  50% {
    color: #8cb8b8; /* La couleur originale */
  }
}

/* --- 9. Style pour le Google Sheet intégré --- */
main#main-content iframe {
    width: 90%;
    height: 80%;
    border: 3px solid #004e54; 
    border-radius: 8px; 
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    transition: width 0.3s ease, height 0.3s ease;
}


/* --- 10. RESPONSIVE DESIGN (MOBILES) --- */
/* S'applique à tous les écrans de 768px de large ou moins */
@media (max-width: 768px) {

    /* --- Header Mobile --- */
    header {
        /* Réduit le padding sur mobile */
        padding: 1rem; 
    }
    
    header nav ul {
        /* Centre les liens sur mobile au lieu de les mettre à droite */
        justify-content: center;
        /* Réduit l'espace entre les liens */
        gap: 0.5rem; 
        /* Permet aux liens de passer à la ligne si nécessaire */
        flex-wrap: wrap; 
    }
    
    header nav a {
        /* Réduit la taille de la police pour les liens */
        font-size: 0.8rem;
        padding: 0.4rem;
    }
    
    header nav a.discord-button {
        /* Réduit le padding du bouton */
        padding: 0.6rem 1rem;
    }

    /* --- H1 (Texte principal) Mobile --- */
    h1 {
        /* Ajuste la taille de la police pour les petits écrans */
        font-size: clamp(2.5rem, 18vw, 10rem); 
        /* Rétablit l'espacement des lettres pour une meilleure lisibilité */
        letter-spacing: normal; 
    }

    /* --- Iframe (Beer Log) Mobile --- */
    main#main-content iframe {
        /* L'iframe prend presque toute la largeur */
        width: 95%;
        /* Ajuste la hauteur pour les écrans mobiles */
        height: 75vh; /* 75% de la hauteur de l'écran */
    }
}