/* Style général plus structuré et réutilisable */
        :root { /* Utilisation de variables CSS pour les couleurs et tailles */
            --primary-color: #007BFF;
            --primary-color-dark: #0056b3;
            --background-color: #f4f4f4;
            --text-color: #333;
            --border-color: #ccc;
            --success-color: green;
            --error-color: red;
            --warning-color: orange;
          }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Police plus moderne */
            background-color: var(--background-color);
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh; /* min-height pour une meilleure gestion des petits écrans */
            margin: 0;
            padding: 20px; /* Ajout d'un padding global */
        }

        .container {
            background: white;
            padding: 25px;  /* Padding légèrement augmenté */
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); /* Ombre plus subtile */
            width: 100%;  /* Utilisation de 100% avec max-width pour la responsivité */
            max-width: 450px; /* Augmentation de la largeur maximale */
            text-align: center;
        }

        /* Style des champs de formulaire */
        .form-group {
            margin-bottom: 15px; /* Espacement plus cohérent */
            text-align: left; /* Alignement du texte à gauche */
        }

        label {
            display: block; /* Label sur une ligne séparée */
            margin-bottom: 5px; /* Espacement entre le label et le champ */
            font-weight: bold;
            color: var(--text-color);
        }

        input[type="text"],
        input[type="email"],
        textarea {
            width: calc(100% - 22px); /* Ajustement de la largeur pour tenir compte du padding et de la bordure*/
            padding: 11px; /* Padding légèrement augmenté */
            margin: 0;   /* Suppression des marges inutiles */
            border: 1px solid var(--border-color);
            border-radius: 5px;
            font-size: 16px;
            box-sizing: border-box; /* Important pour que la largeur inclue le padding et la bordure */
            transition: border-color 0.3s ease; /* Transition douce de la bordure */
        }

        input[type="text"]:focus,
        input[type="email"]:focus,
        textarea:focus {
          border-color: var(--primary-color); /* Bordure accentuée au focus */
          outline: none; /* Suppression du contour par défaut du navigateur */
        }


        textarea {
            resize: none; /* Permet le redimensionnement vertical uniquement */
            min-height: 100px; /* Hauteur minimale */
        }

        button {
            background: var(--primary-color);
            color: white;
            border: none;
            padding: 12px 20px; /* Padding légèrement augmenté */
            font-size: 16px;
            cursor: pointer;
            border-radius: 5px;
            transition: background-color 0.3s ease; /* Transition douce de la couleur */
        }

        button:hover {
            background: var(--primary-color-dark);
        }

        #response-message {
            margin-top: 15px; /* Espacement augmenté */
            font-weight: bold;
            text-align: center; /* Centrage du message */
        }
          /* Styles spécifiques pour les messages de retour */
        .success {
            color: var(--success-color);
        }

        .error {
            color: var(--error-color);
        }

        .warning{
            color: var(--warning-color);
        }

        /* Media query pour les petits écrans */
        @media (max-width: 768px) {
            .container {
                padding: 15px; /* Réduction du padding sur les petits écrans */
            }
        }