/* Reset de base pour assurer une cohérence sur tous les navigateurs */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    background-color: #1abc9c !important;
    color: #333;
    line-height: 1.6;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}


#white-bckgrd{
	background-color: #fff;
	padding: 10px;
}




/* Définition pour le titre principal*/
.content__title {
	/*position: absolute;*/
	top: 50%;
	left: 0;
	width: 100%;
	text-align: center;
	margin: -5.5vw 0 0 0;
	z-index: 100;
	font-size: 10vw;
	color: #fff;
	line-height: 1;
}




/* Styles pour le conteneur principal */
.main-frame {
    max-width: 1200px;
    width: 100%;
    margin: 10px;
    padding: 20px;
    text-align: center;
}

.header-logo {
    margin-bottom: 20px;
}

.header-logo img {
    max-width: 100%;
    height: auto;
    cursor: pointer;
    transition: transform 0.3s ease;
	position: absolute; /* Positionnement par rapport à la page */
    top: 10px; /* Distance par rapport au haut de la page */
    left: 10px; /* Distance par rapport à la gauche de la page */
    z-index: 10; /* Met le logo au-dessus du contenu si nécessaire */
}

.header-logo img:hover {
    transform: scale(1.1);
}

/* Texte principal */
.main-title {
    font-family: 'Caveat', cursive;
    font-size: 2.5em;
    color: #2c3e50;
    margin-bottom: 10px;
}

.main-subtitle {
    font-family: 'Fuzzy Bubbles', cursive;
    font-size: 1.5em;
    color: #34495e;
}

.date {
    font-family: 'Caveat', cursive;
    font-size: 1em;
    color: #7f8c8d;
    margin: 10px 0;
}

/* Bouton de musique */
.music-toggle {
    background-color: #27ae60;
    color: #fff;
    font-size: 1em;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.music-toggle:hover {
    background-color: #2ecc71;
}

/* Icônes sociales */
.social-icons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
}

.social-icons img {
    width: 50px;
    height: 50px;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.social-icons img:hover {
    transform: scale(1.2);
}

/* Contenu principal */
.main-content {
    margin-top: 30px;
}

.main-content h2 {
    font-family: 'Rubik Vinyl', sans-serif;
    font-size: 2em;
    color: #8e44ad;
}

/* Responsivité */
@media (max-width: 768px) {
    .main-title {
        font-size: 2em;
    }

    .main-subtitle {
        font-size: 1.2em;
    }

    .date {
        font-size: 0.9em;
    }

    .social-icons img {
        width: 40px;
        height: 40px;
    }

    .music-toggle {
        font-size: 0.9em;
        padding: 8px 15px;
    }
}

@media (max-width: 480px) {
    .main-title {
        font-size: 1.5em;
    }

    .main-subtitle {
        font-size: 1em;
    }

    .date {
        font-size: 0.8em;
    }

    .social-icons img {
        width: 35px;
        height: 35px;
    }

    .music-toggle {
        font-size: 0.8em;
        padding: 6px 12px;
    }
}





/*body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #1abc9c;
        }

        #changing-text {
            font-size: 2rem;
            transition: font-family 1s ease;
        }*/
		
		
		
/* Style pour h1 */		
h1 {
            font-size: 2.5rem;
            color: #fff;
            opacity: 0; /* Le texte est invisible au départ */
            transform: translateY(20px); /* Le texte commence en position légèrement décalée */
            animation: fadeIn 5s ease-out forwards; /* Animation d'apparition */
        }

        /* Animation d'apparition progressive */
        @keyframes fadeIn {
            from {
                opacity: 0; /* Complètement invisible */
                transform: translateY(20px); /* Légèrement décalé vers le bas */
            }
            to {
                opacity: 1; /* Complètement visible */
                transform: translateY(0); /* Position normale */
            }
        }
		
		
p{
 text-align: center; /* Centrage du texte */
	
}		
		
		
/* Style pour h2 */
h2 {
  color: inherit; /* Hérite de la couleur blanche (#fff) */
  opacity: 0; /* Même comportement d'opacité au départ */
  transform: translateY(20px); /* Même décalage initial */
  animation: fadeIn 5s ease-out forwards; /* Même animation */
  text-align: center; /* Centrage du texte */
  font-size: unset; /* Supprime toute taille définie, utilise la taille par défaut */
}

/* Animation d'apparition progressive */
@keyframes fadeIn {
  from {
    opacity: 0; /* Complètement invisible */
    transform: translateY(20px); /* Légèrement décalé vers le bas */
  }
  to {
    opacity: 1; /* Complètement visible */
    transform: translateY(0); /* Position normale */
  }
}




/* Style pour h2 et h3 */
h2,h3 {
  color: inherit; /* Hérite de la couleur blanche (#fff) */
  opacity: 0; /* Même comportement d'opacité au départ */
  transform: translateY(20px); /* Même décalage initial */
  animation: fadeIn 5s ease-out forwards; /* Même animation */
  text-align: center; /* Centrage du texte */
  font-size: unset; /* Supprime toute taille définie, utilise la taille par défaut */
}

/* Animation d'apparition progressive */
@keyframes fadeIn {
  from {
    opacity: 0; /* Complètement invisible */
    transform: translateY(20px); /* Légèrement décalé vers le bas */
  }
  to {
    opacity: 1; /* Complètement visible */
    transform: translateY(0); /* Position normale */
  }
}





/* Style par défaut de l'image */
.image-zoom {
    display: block; /* S'assure que l'image s'affiche correctement */
    margin: 0 auto; /* Centre l'image */
    transition: transform 0.5s ease, box-shadow 0.5s ease; /* Transition fluide pour le zoom et l'ombre */
}

/* Effet au passage de la souris */
.image-zoom:hover {
    transform: scale(1.2); /* Agrandit l'image de 20% */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Ajoute une ombre pour accentuer l'effet */
}




/* Style par défaut de l'image */
.img-zoom {
    display: block; /* S'assure que l'image s'affiche correctement */
    margin: 0 auto; /* Centre l'image */
    transition: transform 0.5s ease, box-shadow 0.5s ease; /* Transition fluide pour le zoom et l'ombre */
    transform-origin: center; /* Définit le point d'origine de la transformation au centre de l'image */
    backface-visibility: hidden; /* Évite des artefacts visuels pendant la transition */
    outline: none; /* Supprime tout contour visible sur certains navigateurs */
}

/* Empêche tout décalage lors du hover */
.img-zoom:hover {
    transform: scale(1.2); /* Agrandit l'image de 20% */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Ajoute une ombre pour accentuer l'effet */
}

/* Pour éliminer tout espace supplémentaire autour de l'image */
.img-zoom-container {
    display: inline-block; /* Garde l'image dans un conteneur réduit à sa taille */
    overflow: hidden; /* Cache tout débordement éventuel de l'image ou des effets d'animation */
    margin: 0; /* Supprime tout espacement supplémentaire autour */
    padding: 0; /* Supprime tout espace interne supplémentaire */
}



.tape-a-la-machine {
	display: inline-block; /* Garde le texte dans une boîte compacte */
    overflow: hidden; /* Cache tout ce qui dépasse de la boîte pour donner l'illusion de la frappe */
    border-right: .15em solid orange; /* Ligne de texte qui simule le curseur de frappe */
    white-space: nowrap; /* Empêche le texte de passer à la ligne */
    margin: 0 auto; /* Centre le texte horizontalement */
    letter-spacing: .16em; /* Espacement entre les caractères pour un aspect tapé à la machine */
    animation: typing 4s steps(40, end), blink-caret .75s step-end infinite; /* Définition des animations */
}

/* Animation pour simuler la frappe */
@keyframes typing {
    from { width: 0ch; } /* Démarre à 0 caractère visible */
    to { width: 40ch; } /* Termine à 40 caractères visibles (ou le nombre exact de caractères de ton texte) */
}

/* Animation pour simuler le clignotement du curseur */
@keyframes blink-caret {
    from, to { border-color: transparent; } /* Curseur invisible au début et à la fin */
    50% { border-color: orange; } /* Curseur visible à mi-chemin */
}






@keyframes shake-chunk-animation {
  0%, 10% {
    transform: translateX(0); /* État initial */
  }
  20%, 30% {
    transform: translateX(-10px); /* Mouvement à gauche */
  }
  40%, 50% {
    transform: translateX(10px); /* Mouvement à droite */
  }
  60%, 70% {
    transform: translateX(-10px); /* Mouvement à gauche */
  }
  80%, 90% {
    transform: translateX(10px); /* Mouvement à droite */
  }
  100% {
    transform: translateX(0); /* Retour à l'état initial */
  }
}

/*.shake-chunk {
  display: inherit;
  transform-origin: center center;
  animation: shake-chunk-animation 9s ease-in-out infinite;
}*/


.shake-chunk {
  display: inherit;
  transform-origin: center center;
  animation: shake-chunk-animation 10s ease-in-out 7s infinite;
}



/* Glitch subtil pour "CREA" en lettres capitales */
        .glitch-crea {
            position: relative;
            display: inline-block;
            color: #ff006e; /* Couleur principale */
            font-weight: bold;
            text-transform: uppercase; /* Met en majuscules */
            animation: glitch-crea-animation 1.5s infinite;
        }

        .glitch-crea::before,
        .glitch-crea::after {
            content: attr(data-text);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0.6;
            z-index: -1;
        }

        .glitch-crea::before {
            color: #00f5d4; /* Couleur vert néon */
            transform: translate(-1px, -1px);
            animation: glitch-crea-before 1.5s infinite alternate;
        }

        .glitch-crea::after {
            color: #ff006e; /* Couleur rose */
            transform: translate(1px, 1px);
            animation: glitch-crea-after 1.5s infinite alternate;
        }

        @keyframes glitch-crea-animation {
            0%, 100% {
                transform: translate(0, 0);
            }
            50% {
                transform: translate(-1px, 1px);
            }
        }

        @keyframes glitch-crea-before {
            0%, 100% {
                clip: rect(0, 9999px, 5px, 0);
            }
            50% {
                clip: rect(5px, 9999px, 15px, 0);
            }
        }

        @keyframes glitch-crea-after {
            0%, 100% {
                clip: rect(10px, 9999px, 20px, 0);
            }
            50% {
                clip: rect(15px, 9999px, 30px, 0);
            }
        }

        /* Effet de déplacement simple avec fond noir pour "After" */
        .after {
            position: relative;
            display: inline-block;
            font-weight: bold;
            color: #fff;
            padding: 5px 10px;
            background: #000; /* Fond noir uniquement pour "After" */
            text-transform: uppercase; /* Met en majuscules */
            animation: after-move-animation 2s infinite;
        }

        @keyframes after-move-animation {
            0%, 100% {
                transform: translate(0, 0);
            }
            50% {
                transform: translate(2px, -2px); /* Déplacement léger */
            }
        }




#music-toggle {
            margin-top: 20px;
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1.5em;
			font-family: Caveat;
        }

        #music-toggle:hover {
            background-color: #45a049;
        }