/* --- PALETTE DE COULEURS --- */
:root {
    --couleur-rose: #e91e63;
    --couleur-bleu: #00bcd4;
    --couleur-orange: #ff9800;
    --couleur-vert-explication: #2e7d32;
    --couleur-rouge-highlight: #d32f2f;
    --couleur-texte: #333;
    --couleur-fond: #f0f4f8;
    --couleur-blanc: #ffffff;
    --focus-outline: 2px solid var(--couleur-bleu);
}

/* --- Styles Généraux --- */
body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--couleur-fond);
    color: var(--couleur-texte);
    margin: 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
}

header {
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
}

header h1 {
    font-size: 2.5em; /* MODIFIÉ : légèrement réduit pour les mobiles */
    font-weight: 700;
    background: linear-gradient(45deg, var(--couleur-rose), var(--couleur-bleu));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.header-link { /* NOUVEAU : pour que le lien dans le titre n'ait pas de style par défaut */
    text-decoration: none;
    color: inherit;
}

main {
    width: 100%;
    max-width: 500px;
    background-color: var(--couleur-blanc);
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.hero h2 {
    font-size: 1.5em;
    font-weight: 600;
    margin-top: 0;
}

/* --- Le Générateur --- */
.generator {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.input-group label {
    font-weight: 600;
    display: block;
    margin-bottom: 5px;
    text-align: left;
}

.generator input[type="text"],
.contact textarea,
.contact input[type="email"] {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 1em;
    box-sizing: border-box;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

/* MODIFIÉ : Amélioration du focus pour l'accessibilité */
.generator input[type="text"]:focus-visible,
.contact textarea:focus-visible,
.contact input[type="email"]:focus-visible {
    outline: none;
    border-color: var(--couleur-bleu);
    box-shadow: 0 0 0 3px rgba(0, 188, 212, 0.3);
}

.gender-selection {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 10px 0;
    border: none; /* MODIFIÉ : on enlève la bordure du fieldset */
    margin: 0;
    gap: 15px;
}
.gender-selection legend { font-weight: 600; }
.radio-group { display: flex; align-items: center; gap: 5px; }

.generator button {
    background: linear-gradient(45deg, var(--couleur-rose), var(--couleur-bleu));
    color: var(--couleur-blanc);
    font-size: 1.2em;
    font-weight: 600;
    padding: 15px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.generator button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* MODIFIÉ : Amélioration du focus pour l'accessibilité */
.generator button:focus-visible, .contact button:focus-visible, .cta-button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--couleur-blanc), 0 0 0 5px var(--couleur-bleu);
}

/* NOUVEAU : Style pour le message d'erreur */
.error {
    color: #D8000C;
    background-color: #FFD2D2;
    padding: 10px;
    border-radius: 5px;
    display: none; /* Caché par défaut */
}

.results {
    margin-top: 30px;
}

#results-list {
    margin-top: 15px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    text-align: left;
}

.result-item .name { font-size: 1.3em; font-weight: 600; margin: 0; }
.name-fille { color: var(--couleur-rose); }
.name-garcon { color: var(--couleur-bleu); }
.name-neutre { color: var(--couleur-orange); }

/* --- Section Contact --- */
.contact {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

/* MODIFIÉ : Style du bouton de contact harmonisé */
.contact button {
    background: linear-gradient(45deg, #6c757d, #343a40); /* Dégradé gris pour le différencier */
    color: var(--couleur-blanc);
    font-size: 1.1em;
    padding: 15px;
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.contact button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* --- NOUVEAU : Media Queries pour le Responsive Design --- */
@media (min-width: 768px) {
    header h1 {
        font-size: 3em; /* On remet la grande taille sur les grands écrans */
    }

    main {
        max-width: 700px; /* On élargit un peu le conteneur principal */
    }

    #results-list {
        /* On passe les résultats sur 2 colonnes sur les écrans plus larges */
        grid-template-columns: 1fr 1fr;
        gap: 25px;
    }
}


/* --- Styles du Blog, Pied de page, etc. (inchangés) --- */
/* (Le reste de votre CSS reste ici) */
.ad-zone {
    width: 100%;
    max-width: 500px;
    margin: 20px 0;
    box-sizing: border-box;
    min-height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}
footer {
    width: 100%;
    text-align: center;
    margin-top: 20px;
    font-size: 0.8em;
    color: #aaa;
}
.contact form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
}
.blog-article { text-align: left; line-height: 1.7; }
.blog-article h1 { font-size: 2.2em; margin-bottom: 20px; }
.cta-button {
    display: inline-block;
    background: linear-gradient(45deg, var(--couleur-rose), var(--couleur-bleu));
    color: var(--couleur-blanc);
    font-size: 1.1em;
    font-weight: 600;
    padding: 12px 25px;
    border-radius: 8px;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.result-item .explanation {
    font-size: 0.9em;
    color: var(--couleur-vert-explication);
    margin: 4px 0 0 0;
}
.explanation .highlight {
    color: var(--couleur-rouge-highlight);
    font-weight: bold;
}