/* Importer la police Recoleta-SemiBold */
@font-face {
    font-family: 'Recoleta';
    src: url('/font/Recoleta-SemiBold.ttf') format('truetype');
}

/* Style global */
body {
    background-color: #f6f6f6; /* Couleur de fond blanche personnalisée */
    font-family: 'Recoleta', sans-serif; /* Police principale */
    color: #333; /* Couleur de texte principale */
    margin: 0;
    padding: 20px; /* Espacement autour du contenu */
}

/* Conteneur principal */
.container {
    max-width: 600px; /* Largeur maximale du conteneur */
    margin: auto; /* Centrer le conteneur */
    background-color: #ffffff; /* Fond blanc pour le conteneur */
    border-radius: 8px; /* Coins arrondis */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); /* Ombre légère */
    padding: 30px; /* Espacement intérieur */
}

/* Style pour le titre principal */
h1 {
    text-align: center; /* Centrer le titre */
    color: #8a77eb; /* Couleur principale */
    font-size: 32px; /* Taille de police */
    margin-bottom: 20px; /* Espacement en bas */
}

/* Formulaire */
form {
    margin-bottom: 20px; /* Espacement en bas du formulaire */
}

/* Style des labels */
label {
    color: #333; /* Couleur sombre pour le texte */
    font-size: 16px; /* Taille de police */
}

/* Style des inputs de fichier */
input[type="file"] {
    display: block; /* Bloquer pour alignement */
    width: 100%; /* Prendre toute la largeur */
    padding: 10px; /* Espacement intérieur */
    border: 2px solid #8a77eb; /* Bordure de couleur principale */
    border-radius: 5px; /* Coins arrondis */
    margin-top: 10px; /* Espacement en haut */
    font-size: 16px; /* Taille de police */
    transition: border-color 0.3s; /* Transition pour l'effet hover */
}

/* Changer la bordure au focus */
input[type="file"]:focus {
    border-color: #ed3b49; /* Bordure de couleur secondaire au focus */
    outline: none; /* Retirer l'effet par défaut */
}

/* Style des boutons */
button {
    display: block; /* Bloquer pour centrage */
    width: 100%; /* Prendre toute la largeur */
    background-color: #8a77eb; /* Couleur de fond du bouton */
    color: white; /* Couleur du texte blanc */
    border: none; /* Pas de bordure */
    padding: 12px; /* Espacement interne */
    border-radius: 5px; /* Coins arrondis */
    font-size: 16px; /* Taille de police */
    cursor: pointer; /* Curseur pointer */
    transition: background-color 0.3s, transform 0.2s; /* Transition pour changements */
}

button:hover {
    background-color: #7a67e0; /* Couleur au survol */
    transform: scale(1.05); /* Légère augmentation au survol */
}

/* Conteneur de résultat */
#resultContainer {
    margin-top: 30px; /* Espacement au-dessus */
}

/* Style pour le titre de résultat */
h2 {
    color: #8a77eb; /* Couleur pour le titre du résultat */
    font-size: 24px; /* Taille de police */
}

/* Style pour le résultat JSON */
pre {
    background-color: #f9f9f9; /* Fond léger pour le JSON */
    border: 1px solid #cccccc; /* Bordure grise */
    border-radius: 5px; /* Coins arrondis */
    padding: 15px; /* Espacement intérieur */
    overflow: auto; /* Surplus de texte */
}

/* Style pour les liens */
a {
    color: #ed3b49; /* Couleur des liens */
    text-decoration: none; /* Pas de soulignement */
}

a:hover {
    text-decoration: underline; /* Soulignement au survol */
}

/* Style pour le pied de page */
footer {
    margin-top: 40px; /* Espacement en haut */
    border-top: 1px solid #cccccc; /* Bordure supérieure */
    padding-top: 20px