/* Styles de base pour le corps de la page */
html, body {
    height: 100%; /* Assure que html et body prennent toute la hauteur du viewport */
}
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding-top: 0; /* SUPPRIMEZ ou mettez à 0 */
    padding-bottom: 0; /* SUPPRIMEZ ou mettez à 0 */
    background-color: #ffffff; /* Fond blanc pour la page entière */
    color: #333;
    overflow-y: auto; /* Permet le défilement si le contenu est trop grand pour l'écran */
}

/* Conteneur principal du formulaire */
/* Le conteneur est maintenant transparent et sans style de "boîte" */
.form-container {
    width: 100%;
    box-sizing: border-box;
    /* Ajout des styles pour centrer le contenu et limiter la largeur */
    display: flex; /* Active les propriétés flexbox pour le conteneur */
    flex-direction: column; /* Empile les éléments enfants verticalement */
    justify-content: center; /* CHANGEZ 'align-items' pour 'justify-content' pour le centrage vertical */
    align-items: center; /* Centre les éléments enfants horizontalement */
    max-width: 900px; /* Augmente encore la largeur du bloc principal */
    margin: 0 auto; /* Centre le conteneur lui-même horizontalement sur la page */ 
    position: relative; /* Nécessaire pour le positionnement absolu des étapes */
    overflow: hidden; /* Cache les parties des étapes hors de l'écran */
    min-height: 100vh; /* Prend au minimum 100% de la hauteur, mais peut grandir si nécessaire */
}

.logo-container {
    text-align: center;
    margin-bottom: 20px;
    display: none; /* Masque le conteneur du logo */
}

.logo-container img {
    max-width: 250px;
    height: auto;
}

/* Styles pour la barre de progression */
.progress-bar-container {
    position: fixed; /* Fixe la barre en haut de la fenêtre */
    top: 0; /* La colle en haut */
    left: 0; /* Assure qu'elle commence tout à gauche */
    width: 100%;
    height: 5px; /* Nouvelle hauteur */
    background-color: #f0f0f0; /* Nouveau fond gris clair */
    overflow: hidden; /* Ensure fill stays within bounds */
    z-index: 9999; /* S'assure qu'elle est au-dessus des autres éléments */
}

.progress-bar-fill {
    height: 100%;
    width: 0%; /* Initial width */
    background-color: #0C864A; /* Nouveau vert Typeform */
    transition: width 0.4s ease-in-out; /* Smooth transition */
}

/* Titres */
/* Le h1 est masqué comme demandé précédemment */
h1 {
    display: none; /* Cache le titre "Simulateur d'Aides..." */
    top: 5px; /* Juste en dessous de la barre de progression */
    left: 0;
    width: 100%;
    /* Les styles suivants sont devenus redondants car display: none; */
    background-color: #ffffff; /* Assure qu'il couvre le contenu en dessous */
    z-index: 9998; /* En dessous de la barre de progression, au-dessus du contenu */
    color: #2c3e50;
    text-align: center;
    margin: 0; /* Supprime les marges par défaut */
    padding: 15px 0; /* Ajoute un padding pour l'espacement visuel */
    font-size: 2.2em;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Ombre subtile pour le distinguer */
}

h2 {
    color: #000000; /* Titre de section en noir */
    border-bottom: none; /* Pas de trait en dessous */
    /* scroll-margin-top: 75px; */ /* Plus nécessaire car le formulaire ne défile pas */
    padding-bottom: 10px;
    margin-top: 30px;
    margin-bottom: 20px;
    font-size: 1.8em; /* Augmente la taille du titre de section */
    text-align: left; /* Aligne le titre à gauche */
    max-width: 800px; /* Augmente la largeur pour correspondre au bloc */
    margin-left: auto; /* Centre le titre horizontalement */
    margin-right: auto;
    padding-left: 20px; /* Ajoute un padding pour l'alignement avec le contenu */
    padding-right: 20px;
    box-sizing: border-box; /* Inclut le padding dans la largeur */
}
/* Masque les titres h2 à l'intérieur des étapes du formulaire */
/* Cette règle est supprimée pour rendre les h2 visibles */

/* Initialise le compteur pour les phases */
.form-container {
    counter-reset: phase-counter;
}

/* Incrémente le compteur et affiche le numéro pour les titres de phase */
.form-step[data-step='0'] h2, /* Phase 1: Coordonnées */
.form-step[data-step='1'] h2, /* Phase 2: Projet et Logement */
.form-step[data-step='4'] h2, /* Phase 3: Situation Personnelle */
.form-step[data-step='7'] h2  /* Phase 4: Estimation Précise des Aides */
{
    counter-increment: phase-counter;
}
/* Affiche le numéro de phase ("1 ->") devant le titre de section */
.form-step[data-step='0'] h2::before,
.form-step[data-step='1'] h2::before,
.form-step[data-step='4'] h2::before,
.form-step[data-step='7'] h2::before {
    content: counter(phase-counter) " → ";
    color: #0C864A; /* Vert Typeform */
    font-weight: bold;
    margin-right: 10px;
    display: inline-block;
}

/* Groupes de champs de formulaire */
.form-group {
    margin-bottom: 25px;
    max-width: 800px; /* Augmente la largeur pour correspondre au bloc */
    margin-left: auto; /* Centre le groupe de formulaire */
    margin-right: auto;
    padding: 0 20px; /* Ajoute un padding horizontal au groupe */
    box-sizing: border-box;
}

label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333; /* Nouvelle couleur */
    font-size: 1.6em; /* Réduit la taille de la question */
    text-align: left; /* Aligne le texte de la question à gauche */
    max-width: 700px; /* Augmente la largeur pour correspondre au bloc */
    margin-left: 0; /* Aligne le label à gauche */
    margin-right: auto;
}

/* Supprime le numéro d'étape des labels (car il est sur le titre de section) */
.form-step .form-group > label::before {
    content: none;
}

/* Styles pour les champs de texte, numériques et téléphoniques */
/* Style unifié pour tous les champs de saisie (texte, nombre, tel, select) */
input[type="text"], input[type="number"], input[type="tel"], input[type="email"], select { /* Ajout de input[type="email"] */
    border: none; /* Supprime toutes les bordures */
    border-bottom: 2px solid #0C864A; /* Soulignement vert */
    border-radius: 0; /* Supprime le border-radius pour un look de soulignement */
    padding: 15px 0; /* Ajuste le padding pour le soulignement */
    font-size: 1.5em; /* Nouvelle taille de police */
    font-weight: 500; /* Nouveau poids de police */
    color: #0C864A; /* Nouvelle couleur de texte */
    text-align: left; /* Aligne le texte saisi à gauche */
    width: 100%;
    max-width: 700px; /* Augmente la largeur pour correspondre au bloc */
    margin-left: 0; /* Aligne le champ à gauche */
    margin-right: auto;
    box-sizing: border-box;
    transition: border-bottom-color 0.3s ease; /* Transition sur la couleur du soulignement */
    background-color: transparent; /* Assure un fond transparent */
    -webkit-appearance: none; /* Supprime le style par défaut sur Safari/Chrome */
    -moz-appearance: none; /* Supprime le style par défaut sur Firefox */
    appearance: none; /* Supprime le style par défaut */
}

/* Style au focus pour tous les champs de saisie, y compris l'email */
input[type="text"]:focus, input[type="number"]:focus, input[type="tel"]:focus, input[type="email"]:focus, select:focus {
    border-bottom-color: #0C864A; /* Change la couleur du soulignement en vert au focus */
    outline: none;
    box-shadow: none; /* Supprime l'ombre portée qui pourrait gêner le soulignement */
}

/* Style pour le placeholder (texte d'exemple) */
input[type="text"]::placeholder,
input[type="number"]::placeholder,
input[type="tel"]::placeholder,
input[type="email"]::placeholder {
    color: #0C864A; /* Couleur verte pour le placeholder */
    opacity: 0.6; /* Un peu transparent pour le distinguer du texte saisi */
}

/* Groupe de boutons radio (nouvelles règles pour la forme de pilule) */
.radio-group {
    display: flex;
    flex-direction: column; /* Change la direction en colonne */
    align-items: flex-start; /* Aligne les éléments à gauche dans la colonne */
    gap: 12px; /* Espace entre les boutons */
    margin-top: 20px;
    width: 100%; /* Assure que le groupe prend toute la largeur */
    max-width: 500px; /* Garde une largeur max raisonnable, comme dans l'exemple */
    /* Suppression de margin-left: auto; et margin-right: auto; pour aligner à gauche */
    counter-reset: radio-choice; /* Initialise le compteur pour les choix radio */
}

.radio-group label {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Aligne le contenu à gauche pour le compteur */
    padding: 12px 20px 12px 15px; /* Padding ajusté pour l'espacement intérieur */
    border: 1px solid #0C864A; /* Bordure fine vert moyen */
    border-radius: 50px; /* Forme de "pilule" très arrondie */
    background-color: #E6F2ED; /* Fond vert très clair */
    font-weight: 600;
    font-size: 1.2em;
    color: #0C864A; /* Texte vert moyen */
    cursor: pointer;
    transition: all 0.3s ease;
    /* flex-grow: 1; */ /* Supprimé pour éviter l'étirement et respecter max-width */
    width: fit-content; /* La largeur s'adapte au contenu */
    text-align: left;
}

.radio-group label::before { /* Pseudo-élément pour la lettre A, B, C... */
    counter-increment: radio-choice;
    content: counter(radio-choice, upper-alpha);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px; /* Réduit la taille du cercle */
    height: 20px; /* Réduit la taille du cercle */
    border: 1px solid #0C864A; /* Bordure verte */
    border-radius: 50%; /* Transforme en cercle */
    margin-right: 15px;
    font-size: 0.6em; /* Ajuste la taille de la lettre à l'intérieur */
    font-weight: bold;
    color: #0C864A; /* Couleur de la lettre verte */
    background-color: #ffffff; /* Fond blanc */
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.radio-group input[type="radio"] {
    display: none; /* Cache le bouton radio natif */
}

/* État survolé des boutons radio (légèrement plus foncé) */
.radio-group label:hover {
    background-color: #D9E8E0; /* Légèrement plus foncé que le fond par défaut */
    border-color: #0a6a3a; /* Bordure légèrement plus foncée */
}
.radio-group label:hover::before {
    border-color: #0a6a3a; /* Change la bordure du cercle au survol */
}

/* État coché des boutons radio (vert foncé) */
.radio-group input[type="radio"]:checked + label {
    background-color: #0C864A; /* Fond vert Typeform quand sélectionné */
    color: white;
    border-color: #0C864A; /* Bordure verte */
    box-shadow: none; /* Supprime l'ombre portée */
}

.radio-group input[type="radio"]:checked + label::before { /* Cercle du compteur quand coché */
    background-color: #ffffff; /* Fond blanc pour le cercle */
    color: #0C864A; /* Texte vert foncé pour le compteur */
    border-color: #ffffff; /* Bordure blanche pour le cercle */
}

/* Texte d'aide sous les champs */
.help-text {
    font-size: 0.9em;
    color: #0C864A; /* Texte d'aide en vert */
    margin-top: 5px;
    display: block;
}

/* Style spécifique pour le texte d'explication de la phase 3 */
.explanation-text {
    background-color: #e6f7ff;
    border-left: 5px solid #007bff;
        scroll-margin-top: 75px; /* Compense la hauteur de la barre de progression et du h1 fixe */
    padding: 15px 20px;
    margin-top: 30px;
    margin-bottom: 30px;
    border-radius: 5px;
    color: #0056b3;
}

.explanation-text p {
    margin: 0 0 10px 0;
}

.explanation-text p:last-child {
    margin-bottom: 0;
}

.emoji {
    font-size: 1.2em;
    vertical-align: middle;
    margin-left: 5px;
}

/* Styles pour le formulaire multi-étapes */
.form-step { /* Styles pour le formulaire multi-étapes (SIMPLIFIÉ) */
    display: none; /* Caché par défaut */
    opacity: 0;
}

/* Styles pour le formulaire multi-étapes (SIMPLIFIÉ) */
.form-step {
    position: absolute; /* Superpose les étapes */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    /* État caché par défaut */
    opacity: 0;
    transform: translateY(30px); /* Légèrement décalé */
    pointer-events: none;

    /* La Transition */
    transition: transform 0.4s ease-out, opacity 0.4s ease-out;
}

.form-step.active {
    opacity: 1; /* Visible */
    transform: translateY(0); /* En position */
    pointer-events: auto; /* Interactif */
    z-index: 1; /* Au-dessus */
}

/* Cache les boutons "Suivant" car la navigation est maintenant automatique */
.next-btn {
    display: none !important; /* Caché car la navigation est automatique */
}

/* Style discret pour le bouton "Précédent" en bas à gauche */
.prev-btn {
    position: fixed; /* Position fixe par rapport à la fenêtre */
    bottom: 30px;
    left: 30px;
    background-color: transparent; /* Fond transparent */
    color: #6c757d; /* Couleur du texte discrète */
    border: 2px solid #adb5bd; /* Bordure légère */
    padding: 10px 20px;
    font-size: 1em;
    z-index: 1000; /* S'assure qu'il est au-dessus des autres éléments */
    transition: all 0.3s ease;
}

.prev-btn:hover {
    background-color: #6c757d;
    color: white;
    border-color: #6c757d;
}

.summary-container {
    text-align: left;
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}
.summary-item {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

/* Ajustements responsifs pour les petits écrans */
@media (max-width: 768px) {
    /* Ajuste le conteneur principal pour les petits écrans */
    .form-container {
        padding: 0 15px; /* Réduit le padding horizontal */
        margin: 0;
    }

    /* Ajuste la taille des titres */
    h2 {
        font-size: 1.5em; /* Taille de police plus adaptée pour les titres de section */
        padding-left: 10px;
        padding-right: 10px;
    }

    /* Ajuste la taille des questions */
    label {
        font-size: 1.3em; /* Réduit légèrement la taille de la police des questions */
    }

    /* Ajuste la taille des champs de saisie */
    input[type="text"], input[type="number"], input[type="tel"], input[type="email"], select {
        font-size: 1.2em;
    }

    /* Empile les boutons radio et les fait prendre toute la largeur */
    .radio-group {
        flex-direction: column; /* Les boutons s'empilent verticalement */
        align-items: stretch; /* Les boutons prennent toute la largeur */
        max-width: 100%; /* Permet au groupe de prendre toute la largeur */
    }
    .radio-group label {
        width: 100%; /* Force le label à prendre toute la largeur disponible */
        box-sizing: border-box; /* Assure que le padding est inclus dans la largeur */
        justify-content: flex-start;
    }

    /* Masque l'infobulle "appuyez sur Entrée" sur les appareils tactiles */
    .enter-hint {
        display: none;
    }
}

/* Texte d'aide sous les champs */
.help-text {
    font-size: 0.9em;
    color: #0C864A; /* Texte d'aide en vert */
    margin-top: 2px; /* Réduit l'espace entre le champ et le texte d'aide */
    display: block;
    text-align: left;
    max-width: 700px; /* Aligne avec la largeur des champs */
    margin-left: 0; /* Aligne le texte d'aide à gauche */
    margin-right: auto;
}

/* Style spécifique pour le texte d'explication de la phase 3 */
.explanation-text {
    background-color: #e6f7ff;
    border-left: 5px solid #007bff;
        /* scroll-margin-top: 75px; */ /* Plus nécessaire si le h1 est fixe et le form-step gère son propre scroll */
    padding: 15px 20px; /* Garde le padding */
    margin-top: 30px;
    margin-bottom: 30px;
    border-radius: 5px;
    color: #0056b3;
}

.explanation-text p {
    margin: 0 0 10px 0;
}

.explanation-text p:last-child {
    margin-bottom: 0;
}

.emoji {
    font-size: 1.2em;
    vertical-align: middle;
    margin-left: 5px;
}

/* Bouton de soumission */
button[type="submit"] {
    background-color: #28a745;
    color: white;
    padding: 15px 25px;
    border: none;
    border-radius: 5px;
    font-size: 1.1em;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    width: 100%;
    margin-top: 10px;
}

button[type="submit"]:hover {
    background-color: #218838;
    transform: translateY(-2px);
}

button[type="submit"]:active {
    transform: translateY(0);
}

/* Suppression des keyframes car nous utilisons des transitions */
/* @keyframes slide-in et @keyframes slide-out sont supprimés */
.form-step > * {
    width: 100%; /* Assure que les éléments enfants prennent toute la largeur disponible */
    max-width: 800px; /* Limite la largeur du contenu pour la lisibilité */
    padding: 0 20px; /* Ajoute un padding horizontal au contenu */
}

.nav-buttons {
    display: flex;
    justify-content: flex-start; /* Aligne le bouton "OK" à gauche */
    gap: 15px;
    margin-top: 20px;
}

/* Style discret pour le bouton "Précédent" en bas à gauche */
.prev-btn {
    position: fixed; /* Position fixe par rapport à la fenêtre */
    bottom: 30px; /* Caché comme demandé */
    left: 30px;
    background-color: transparent; /* Fond transparent */
    color: #6c757d; /* Couleur du texte discrète */
    border: 2px solid #adb5bd; /* Bordure légère */
    padding: 10px 20px;
    font-size: 1em;
    z-index: 1000; /* S'assure qu'il est au-dessus des autres éléments */
    transition: all 0.3s ease;
    display: none; /* Cache tous les boutons "Précédent" */
}

.prev-btn:hover {
    background-color: #6c757d;
    color: white;
    border-color: #6c757d;
}
/* Style unifié pour les boutons de validation */
.next-btn, button[type="submit"] {
    background-color: #0C864A; /* Fond vert */
    color: #ffffff; /* Texte blanc */
    padding: 10px 25px; /* Ajusté */
    border: none;
    border-radius: 50px; /* Forme de pilule */
    font-size: 1.1em;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.next-btn:hover, button[type="submit"]:hover {
    background-color: #ffffff; /* Fond blanc */
    color: #0C864A; /* Texte vert */
    border: 1px solid #0C864A; /* Bordure verte */
}

/* Nouveau bouton "OK" en forme de pilule */
.next-btn-pill {
    background-color: #0C864A; /* Fond vert */
    color: #ffffff; /* Texte blanc */
    border: none; /* Pas de bordure */
    border-radius: 50px; /* Forme de pilule */
    padding: 10px 25px; /* Ajusté */
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 20px; /* Espace au-dessus du bouton */
}

.next-btn-pill:hover {
    background-color: #ffffff; /* Fond blanc */
    color: #0C864A; /* Texte vert */
    border: 1px solid #0C864A; /* Bordure verte */
}

/* Style pour l'infobulle "appuyez sur Entrée" */
.enter-hint {
    margin-left: 15px;
    color: #555;
}

.summary-container {
    text-align: left;
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}
.summary-item {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

/* Ajustements responsifs pour les petits écrans */
@media (max-width: 768px) {
    .form-container {
        padding: 20px;
        margin: 10px;
    }
    h1 {
        font-size: 1.8em;
    }
    h2 {
        font-size: 1.3em;
    }
    label {
        font-size: 1.5em; /* Garde une bonne taille de police sur mobile */
    }
    button, button[type="submit"] {
        font-size: 1em;
        padding: 12px 20px;
    }
    .radio-group {
        flex-direction: column; /* Les boutons s'empilent verticalement */
        align-items: stretch; /* Les boutons prennent toute la largeur */
    .radio-group label {
        padding: 12px 15px; /* Padding réduit pour mobile */
    }
    .radio-group label::before {
        width: 22px; /* Taille du cercle réduite */
        height: 22px; /* Taille du cercle réduite */
        margin-right: 10px; /* Marge réduite */
        font-size: 0.7em; /* Taille de police réduite */
    }

    /* Ajuste la position du pied de page de navigation sur mobile */
    .fixed-footer-nav {
        bottom: 15px;
        right: 15px;
    }
}

/* --- Styles pour le pied de page fixe (LE CODE MANQUANT) --- */

.fixed-footer-nav {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    gap: 16px; /* Augmente l'espace entre les flèches et le logo */
    z-index: 9999;
}

.nav-arrows-group {
    display: flex;
    background-color: #0C864A; /* Vert Typeform */
    border-radius: 25px; /* Forme de pilule */
    overflow: hidden; /* Assure que les enfants respectent les coins arrondis */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Ombre subtile */
}

.nav-arrow {
    display: flex; /* Clé du centrage */
    align-items: center;
    justify-content: center;
    width: 44px;  /* Taille du bouton */
    height: 44px; /* Taille du bouton */
    cursor: pointer;
    transition: background-color 0.2s ease;
}

/* Séparateur pour la flèche du haut */
.nav-arrow-up {
    border-right: 1px solid rgba(255, 255, 255, 0.4);
}

/* Effet de survol pour les flèches non désactivées */
.nav-arrow:not(.disabled):hover {
    background-color: rgba(0, 0, 0, 0.2); /* S'assombrit légèrement au survol */
}

/* Style de l'icône SVG elle-même */
.nav-arrow svg {
    stroke: white; /* Couleur de l'icône */
    stroke-width: 3; /* Épaisseur de la ligne (style image) */
    transition: opacity 0.2s ease;
}

/* Style pour la flèche désactivée */
.nav-arrow.disabled {
    cursor: not-allowed;
}

/* Style pour la flèche désactivée (floue/estompée) */
.nav-arrow.disabled svg {
    stroke: rgba(255, 255, 255, 0.5); /* Estompé, comme sur l'image */
}

/* Style pour le logo dans le pied de page flottant */
.footer-logo {
    max-height: 40px; /* Réduit la taille du logo */
    width: auto;
}

/* --- Ajustement du Body --- */
/* (Vérifiez que votre body a bien un padding-bottom suffisant) */
/* Votre 'padding-bottom: 150px;' est parfait. */