.animated-title {
    font-size: 5em; /* Taille du titre */
    text-align: center;
    font-weight: bold;
    color: gold; /* Couleur or */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Ombre légère */
    position: relative;
    animation: move 8s ease-in-out forwards; /* Animation plus lente */
    font-family:'DESIGNER', sans-serif;
}

/* Définition de la police personnalisée */
@font-face {
    font-family:'DESIGNER'; /* Nom que tu veux donner à la police */
    src: url('fonts/DESIGNER.otf') format('opentype'), /* Chemin vers le fichier .otf */
         url('fonts/DESIGNERRegular.woff2') format('woff2'), /* Chemin vers le fichier .woff2 */
         url('fonts/DESIGNERRegular.woff') format('woff'), /* Chemin vers le fichier .woff */
         url('fonts/DESIGNERRegular.ttf') format('truetype'); /* Chemin vers le fichier .ttf */
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Assure un bon affichage pendant le chargement */
}
/* Définition de l'animation */
@keyframes move {
    0% { transform: translateX(0); }
    50% { transform: translateX(50px); }
    100% { transform: translateX(0); }
}

/* Media query pour les écrans de taille tablette */
@media (max-width: 768px) {
    .animated-title {
        font-size: 2.5em; /* Taille réduite pour les tablettes */
    }
}

/* Media query pour les écrans de taille mobile */
@media (max-width: 480px) {
    .animated-title {
        display: none; /* Masquer le titre sur mobile */
    }
}