/* --- 1. LES FONDATIONS (Couleurs & Polices) --- */
:root {
    --fond: #fff8ef;      /* Crème */
    --save-vert: #4d6d2a; /* Sève */
    --humaine-brun: #412b1a; /* Terre */
    --blanc: #ffffff;
    --font-titre: 'Agbalumo', cursive;
    --font-corps: 'Open Sans', sans-serif;
}

body {
    background-color: var(--fond);
    color: var(--humaine-brun);
    font-family: var(--font-corps);
    margin: 0;
    padding: 20px; /* Espace pour pas que ça colle aux bords */
    display: flex;
    flex-direction: column;
    align-items: center; /* Centre tout horizontalement */
    min-height: 100vh;
}

h1, h2 {
    font-family: var(--font-titre);
    color: var(--save-vert);
    margin-top: 0;
}

/* --- 2. LE CADRE DU QUIZ --- */
#quiz-container {
    background: var(--blanc);
    width: 100%;
    max-width: 650px; /* Largeur max élégante */
    margin: 20px auto;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(65, 43, 26, 0.08);
    text-align: center;
    box-sizing: border-box; /* Important pour le padding */
}

/* --- 3. LA NAVIGATION (Haut du container) --- */
.header-quiz {
    display: flex;
    justify-content: space-between; /* Titre à gauche, bouton à droite */
    align-items: center;
    margin-bottom: 30px;
    border-bottom: 1px solid #eee; /* Petite ligne de séparation */
    padding-bottom: 15px;
}

#btn-precedent {
    background: none;
    border: 1px solid var(--humaine-brun);
    color: var(--humaine-brun);
    padding: 8px 15px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.3s ease;
}

/* Hover uniquement souris/trackpad : évite le « :hover collant » au tap (iOS / mobile). */
@media (hover: hover) and (pointer: fine) {
    #btn-precedent:hover {
        background-color: var(--humaine-brun);
        color: var(--blanc);
    }
}

/* --- 4. LES RÉPONSES (La pile verticale que tu veux) --- */
#reponses {
    display: flex;
    flex-direction: column; /* FORCE l'empilement vertical */
    gap: 15px;              /* Espace régulier entre les boutons */
    margin-top: 30px;
    width: 100%;
}

.btn-reponse {
    width: 100%;             /* Prend toute la largeur dispo */
    min-height: 70px;        /* Hauteur confortable pour le texte */
    padding: 15px 25px;
    border: 2px solid var(--save-vert);
    border-radius: 12px;
    background-color: var(--blanc);
    color: var(--save-vert);
    font-size: 1.05rem;
    cursor: pointer;
    transition: all 0.2s ease;
    
    /* Centrage du texte dans le bouton */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
}

/* Feedback immédiat au doigt (ne reste pas collé comme :hover sur tactile). */
.btn-reponse:active {
    background-color: var(--save-vert);
    color: var(--blanc);
    transform: translateY(-2px);
}

@media (hover: hover) and (pointer: fine) {
    .btn-reponse:hover {
        background-color: var(--save-vert);
        color: var(--blanc);
        transform: translateY(-2px); /* Petit effet de soulèvement */
    }
}

/* --- 5. BOUTON RETOUR ACCUEIL (Hors du container) --- */
.navigation-generale {
    margin-bottom: 20px;
    width: 100%;
    max-width: 650px;
    text-align: left; /* Aligné à gauche */
}

.btn-retour-accueil {
    text-decoration: none;
    color: var(--humaine-brun);
    font-weight: bold;
    font-size: 0.9rem;
}

.btn-retour-accueil:hover {
    color: var(--save-vert);
}

.resultat-bloc {
    text-align: left;
    line-height: 1.6;
}

.dominant h2 {
    margin-top: 0;
    color: var(--save-vert);
}

.sous-tendance h3 {
    color: var(--humaine-brun);
    font-family: var(--font-corps);
    font-weight: 600;
}