@font-face {
    font-family: 'nexa'; /* Remplacez par le nom que vous souhaitez utiliser */
    src: url("/static/portailApp/fonts/NexaRegular.ttf") format('truetype'); /* Chemin vers votre fichier */
    font-weight: normal; /* Poids par défaut */
    font-style: normal; /* Style par défaut */
}

body {
    font-family: 'nexa'; /* Appliquez la police à votre corps */
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto; /* Changez à auto pour permettre la hauteur dynamique */
    padding: 20px; /* Réduisez le padding pour s'adapter aux petits écrans */
    margin: 0; /* Supprimez la marge */
}

.separator {
    width: 100%;
    height: 7px;
    border-radius: 10px;
    background: linear-gradient(to right, #13D5FF, #47af50);
    margin: 30px 0; /* Espace autour de la séparation */
}

.logo {
    display: block;
    margin: 0 auto;
    max-width: 100%; /* S'assure que l'image ne dépasse pas la largeur du conteneur */
    height: auto; /* Ajuste la hauteur automatiquement */
    margin-bottom: 20px; /* Espace entre le logo et le formulaire */
}

form, .details {
    background-color: #f9f9f9;
    border: 1px solid #47af50;
    border-radius: 5px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    width: 100%; /* Prend toute la largeur disponible */
    max-width: 500px; /* Largeur maximum du formulaire */
    margin: 0 auto; /* Centre le formulaire horizontalement */
}

h4 {
    text-align: center;
    margin-bottom: 20px; /* Espace en dessous de l'en-tête */
}

.center {
    text-align: center;
}

form p {
    margin: 10px 0; /* Espace entre chaque champ du formulaire */
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="time"],
input[type="file"],
input[type="number"],
textarea,
select {
    width: 100%; /* Rendre les champs de formulaire responsives */
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
    border-color: #4CAF50;
    outline: none;
}

input[type="submit"] {
    font-family: nexa;
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 10px;
    cursor: pointer;
    width: 100%;
    margin-top: 20px;
}

input[type="submit"]:hover {
    background-color: #45a049;
}

ul {
    list-style-type: none; /* Supprime les puces de la liste */
    padding: 0; /* Supprime le padding par défaut */
}

li {
    display: flex; /* Utilise flexbox pour l'alignement */
    justify-content: space-between; /* Espace entre les étiquettes et les valeurs */
    padding: 10px; /* Espacement interne pour chaque élément de liste */
    border-bottom: 1px solid #ccc; /* Bordure entre les éléments */
    color: #555; /* Couleur du texte */
}

li:last-child {
    border-bottom: none; /* Supprime la bordure du dernier élément */
}

li img {
    max-width: 50px; /* Ajuste la taille de l'image d'ordonnance */
    height: auto; /* Ajuste la hauteur automatiquement */
}

.message {
    text-align: center;
    color: green;
}

.button-container {
    text-align: center; /* Centre le contenu à l'intérieur */
    margin-top: 20px; /* Ajoute un espacement au-dessus du bouton */
}

.button-link {
    display: inline-block; /* Permet de donner des dimensions comme un bouton */
    padding: 10px 20px; /* Espacement interne */
    background-color: #4CAF50; /* Couleur de fond */
    color: white; /* Couleur du texte */
    text-align: center; /* Centrer le texte */
    text-decoration: none; /* Supprime le soulignement */
    border-radius: 5px; /* Arrondir les coins */
    transition: background-color 0.3s; /* Animation douce pour le changement de couleur */
}

.button-link:hover {
    background-color: #45a049; /* Couleur au survol */
}

/* Media queries pour améliorer le responsive */
@media (max-width: 600px) {
    .container {
        padding: 10px; /* Réduit le padding sur les petits écrans */
    }

    form {
        padding: 15px; /* Réduit le padding du formulaire */
    }

    h4 {
        font-size: 18px; /* Diminue la taille de la police pour les petits écrans */
    }

    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="date"],
    input[type="time"],
    input[type="number"],
    textarea,
    select {
        font-size: 16px; /* Ajuste la taille de la police pour les petits écrans */
    }

    input[type="submit"] {
        padding: 12px; /* Ajuste le padding du bouton */
    }
}