/* questionnaires.css - Styles généraux et responsive pour les formulaires Complétude */

/* Centrage des titres principaux */
.completude-form-wrapper h2.entry-title,
.completude-form-wrapper h2.entry-title + p {
    text-align: center;
}

/* Styles pour form-0 et form-1 (champs utilisateur communs) */
.completude-form-wrapper .entry-content .form-row-flex {
    margin-bottom: 15px; /* Espacement vertical */
    display: flex;       /* Assure l'affichage Flexbox */
    align-items: center;
}

/* Donne une largeur fixe aux labels et aligne à gauche */
.completude-form-wrapper .entry-content .form-row-flex label {
    width: 80px;
    margin-right: 15px;
    text-align: left;
    display: block;
}

/* Les inputs et selects prennent l'espace restant */
.completude-form-wrapper .entry-content .form-row-flex input,
.completude-form-wrapper .entry-content .form-row-flex select {
    flex-grow: 1;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

/* Conteneur pour le bouton de soumission (form-0) */
.completude-form-wrapper .entry-content .form-row-submit {
    margin-bottom: 15px;
    text-align: left;
    margin-top: 50px; /* DÉCALAGE VERS LE BAS */
    margin-left: 95px; /* Aligne avec les champs de saisie (80px label + 15px marge) */
}

/* Aligne le bouton avec les champs précédents (form-0) */
.completude-form-wrapper .entry-content .form-row-submit .btn {
    margin-left: 0px; /* La marge est sur le parent */
    padding: 10px 20px;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* Styles pour le paragraphe d'instructions pour reproduire le padding bottom de 20px */
.completude-form-wrapper .entry-content p {
    padding-bottom: 20px;
}

/* Styles pour form-1.php (Questions) */
/* Augmente l'espace après chaque question pour séparer de la suivante */
.completude-form-wrapper .form-row-question {
    margin-bottom: 30px;
    text-align: left;
}

/* Met les questions en gras */
.completude-form-wrapper .form-row-question p {
    margin-bottom: 10px;
    margin-top: 0;
    font-weight: bold;
}

.completude-form-wrapper .form-row-radio-group {
    margin-left: 20px;
    display: flex;
    flex-direction: column;
}

.completude-form-wrapper .form-row-radio-group label {
    margin-bottom: 5px;
    text-align: left;
    font-weight: normal;
}

/* Le textarea dans les questions */
.completude-form-wrapper .form-row-question textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

/* Conteneur pour les boutons (form-1 et suivants) */
.completude-form-wrapper .form-row-submit-buttons {
    text-align: left;
    margin-top: 50px; /* DÉCALAGE VERS LE BAS */
    margin-left: 95px; /* Aligne avec les champs de saisie (120px label + 15px marge) */
}

.completude-form-wrapper .form-row-submit-buttons .btn {
    margin-right: 10px;
    /* Autres styles de bouton génériques sont déjà appliqués */
}


/* -------------------------------------------------- */
/* RESPONSIVE MOBILE (@media screen and (max-width: 768px)) */
/* -------------------------------------------------- */
@media screen and (max-width: 768px) {
    
    /* Force tout le wrapper à s'aligner à gauche sur mobile, annulant tout centrage de thème */
    .completude-form-wrapper,
    .completude-form-wrapper .entry-content,
    .completude-form-wrapper .entry-content .form-row-flex,
    .completude-form-wrapper .form-row-question {
        text-align: left;
        align-items: flex-start;
        padding-left: 0; /* S'assure qu'il n'y a pas de padding sur le conteneur principal */
        padding-right: 0;
    }

    /* Pour les groupes label/input alignés horizontalement */
    .completude-form-wrapper .form-row-flex {
        flex-direction: column; /* Empile verticalement */
    }

    /* Ajuste la largeur des labels pour qu'ils prennent toute la place en haut */
    .completude-form-wrapper .form-row-flex label {
        width: 100%;
        text-align: left;
        margin-right: 0px;
        margin-bottom: 5px; /* Ajoute un petit espace entre label et input */
    }

    /* S'assure que les inputs et selects prennent toute la largeur disponible */
    .completude-form-wrapper .form-row-flex input,
    .completude-form-wrapper .form-row-flex select {
        width: 100%;
    }

    /* Ajuste le positionnement du bouton "je commence" et des boutons d'action sur mobile */
    .completude-form-wrapper .form-row-submit-buttons,
    .completude-form-wrapper .form-row-submit {
        margin-left: 0px; /* Retire l'indentation de 135px sur mobile */
        margin-top: 20px; /* Réduit l'espace sur mobile pour gagner de la place */
        text-align: left; /* Assure l'alignement gauche des boutons */
        width: 100%; /* S'assure que le conteneur prend toute la largeur */
        box-sizing: border-box; /* Inclut padding/border dans le calcul de la largeur */
    }
    
    /* Les boutons individuels s'affichent en bloc sur mobile pour un meilleur toucher */
    .completude-form-wrapper .form-row-submit-buttons .btn {
      display: block;
      width: 100%;
      margin-bottom: 10px;
      margin-right: 0;
    }

    /* Le textarea dans les questions doit aussi être 100% large */
    .completude-form-wrapper .form-row-question textarea {
        width: 100%;
        margin-left: 0px;
    }
}