/* Global Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Arial', sans-serif;
}

/* Body Styles */
body {
    background-color: #f4f7fb; /* Fond léger */
    color: #333;
    font-size: 14px; /* Taille de police réduite */
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.logo-container {
    text-align: center; /* Centrer le logo */
    margin-top: 60px; /* Espacement entre le haut de la page et le logo */
    margin-bottom: 30px; /* Espacement sous le logo */
}

.logo {
    max-width: 400px; /* Ajuster la largeur maximale du logo */
    height: auto; /* Garder les proportions du logo */
}

/* Particle background */
#particles-js {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

/* Container Styles */
.container {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}

/* Styles spécifiques à la première interface */
.interface-1 {
    padding: 20px;
}

/* Styles spécifiques à la deuxième interface */
.interface-2 {
    padding: 20px;
    margin-top: 20px;
}

.doc-content {
    background-color: rgba(255, 255, 255, 0.8); /* Fond blanc semi-transparent */
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    margin-top: 30px;
}

/* Header Styles */
.header {
    text-align: center;
    padding: 30px 0;
    background-color: transparent; /* S'assurer que l'arrière-plan est transparent pour l'en-tête */
}
/* Styles améliorés pour le titre */
/* Styles pour aligner toute la phrase sur la même ligne */
.header {
    display: flex; /* Utiliser flexbox pour aligner les éléments */
    justify-content: center; /* Centrer horizontalement */
    align-items: center; /* Centrer verticalement */
    height: 100px; /* Hauteur du header pour l'espacement */
    margin-bottom: 20px; /* Espacement sous le titre */
}

/* Style du titre avec une approche moderne */
.header h1 {
    font-size: 1.8rem; /* Taille du texte plus grande */
    font-weight: 700; /* Poids de la police pour un aspect plus affirmé */
    color: #0044cc; /* Couleur bleu foncé pour la professionnalité */
    letter-spacing: 2px; /* Espacement entre les lettres pour plus d'élégance */
    text-transform: uppercase; /* Mettre en majuscules pour une touche moderne */
    text-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08); /* Ombre subtile pour donner de la profondeur */
    transition: all 0.4s ease; /* Transition fluide pour les animations */
    margin: 0;
}

/* Effet d'animation au survol */
.header h1:hover {
    color: #0033aa; /* Change la couleur au survol */
    text-shadow: 0 6px 10px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1); /* Renforce l'ombre lors du survol */
    transform: scale(1.05); /* Ajoute une légère augmentation de taille lors du survol */
    cursor: pointer; /* Change le curseur pour indiquer que le texte est interactif */
}

/* Animation de fondu pour un effet visuel initial */
.header h1 {
    opacity: 0;
    animation: fadeIn 1.5s forwards; /* Animation de fondu du titre */
}

/* Forcer le footer à être toujours en bas */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.header p {
    font-size: 0.9rem; /* Taille réduite */
    color: #555;
}

/* Form Styles */
form {
    background-color: rgba(255, 255, 255, 0.8);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.form-group {
    margin-bottom: 15px;
}

label {
    font-size: 1rem;
    color: #333;
}

input, select, textarea {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1rem;
    margin-bottom: 15px;
}

input:focus, select:focus, textarea:focus {
    border-color: #4c8bf5;
    outline: none;
}

/* Button Styles - Professional Button */
button, .professional-btn {
    background-color: #0044cc;
    color: white;
    padding: 15px 30px;
    border: none;
    border-radius: 5px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-bottom: 20px; /* Ajouter de l'espace sous les boutons */
}

button:hover, .professional-btn:hover {
    background-color: #0033aa;
}

button:focus, .professional-btn:focus {
    outline: none;
}

.center-button-container {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 60px; /* Ajout d'un espace en dessous du bouton */
}


.professional-btn {
    padding: 15px 30px;
    background-color: #0044cc;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.professional-btn:hover {
    background-color: #0033aa;
}

.professional-btn:focus {
    outline: none;
}

#build-btn {
    margin-bottom: 20px; /* Ajoute de l'espace sous le bouton Générer */
}

/* Spécifique pour le second bouton */
#submit-btn {
    margin-top: 20px; /* Ajoute de l'espace au-dessus du bouton Soumettre */
}

/* Document Styles */
.info-block {
    margin-bottom: 20px;
}

.info-block strong {
    font-weight: bold;
}

.footer {
    text-align: center;
    padding: 20px 10px; /* Réduire le padding pour les petits écrans */
    background-color: rgba(0, 51, 102, 0.8);
    color: white;
    margin-top: auto;
    width: 100%; /* S'assurer que le footer occupe 100% de la largeur */
    box-sizing: border-box; /* Inclure le padding dans la largeur totale */
    overflow: hidden; /* Empêcher les débordements */
}



/* Responsive Styles pour mobile */
@media (max-width: 768px) {
    body {
        font-size: 12px; /* Police plus petite pour les mobiles */
    }

    .logo-container {
        margin-top: 30px; /* Réduction des marges pour économiser de l'espace */
    }

    .logo {
        max-width: 250px; /* Taille réduite pour mobile */
    }

    .container {
        width: 90%; /* Limite la largeur à 90% de l'écran */
        padding: 10px; /* Réduction du padding */
    }

    .header h1 {
        font-size: 1.4rem; /* Réduction de la taille du texte pour les titres */
        line-height: 1.4; /* Augmentation de l'espacement des lignes */
    }

    input, select, textarea {
        padding: 8px; /* Réduction des paddings */
        font-size: 0.85rem; /* Police plus petite pour les champs */
    }

    button {
        padding: 10px 15px; /* Boutons plus compacts */
        font-size: 1rem; /* Taille adaptée */
    }

    .footer {
        padding: 15px 5px; /* Réduire le padding horizontal */
        font-size: 0.9rem; /* Adapter la taille du texte */
        width: 100%; /* Forcer le footer à s'adapter à la largeur */
    }
    .interface-2 .doc-content {
        font-size: 0.9rem; /* Réduire la taille du texte pour mobile */
        padding: 10px; /* Moins de padding pour économiser de l'espace */
    }

    textarea {
        font-size: 0.85rem; /* Texte plus petit pour les champs */
        padding: 8px; /* Réduction des marges internes */
    }
}



/* Style pour le titre dans le formulaire */
.phrase-pfe-title {
    font-size: 1.4rem;
    font-weight: bold;
    color: #003366;
    text-align: center;
    margin-bottom: 20px;
    padding: 10px 0;
    letter-spacing: 1px;
    background-color: transparent;
}
.error-message {
    color: red;
    font-size: 0.9em;
    margin-top: 4px;
    display: block;
}