/* Formulaire public des questionnaires, Les Émergences.
   Reprend les tokens du thème (style.css) et neutralise, dans le seul
   périmètre du questionnaire, les règles globales du thème qui cassaient
   la mise en page : `label { display:block }` et
   `input, textarea, select { width:100% }` (les cases à cocher et les
   boutons radio héritaient d'une largeur de 100 %). */

/* --- Page dédiée : héros, en-tête et pied de page ----------------------- */
.qe-page-questionnaire .qe-hero { isolation: isolate; }
.qe-page-questionnaire .qe-hero__blob {
    position: absolute;
    width: 260px; height: 260px;
    top: -90px; right: 6%;
    border-radius: 50%;
    background: var(--c-bordeaux, #7A1F2E);
    filter: blur(10px);
    opacity: 0.22;
    pointer-events: none;
}
.qe-page-questionnaire.qe-etat-merci .qe-hero__blob { background: var(--c-vert, #2E8B57); }

.qe-header__mention {
    font-family: var(--f-display, sans-serif);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(31, 58, 95, 0.45);
}

.qe-main {
    background: var(--c-blanc, #fff);
    padding-block: clamp(2.5rem, 5vw, 4rem);
}
.qe-wrap {
    width: 100%;
    max-width: 820px;
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}
.qe-etat-merci .qe-wrap { max-width: var(--container-w, 1180px); }
.qe-page-questionnaire .qe-footer { padding-block: clamp(2rem, 4vw, 3rem) 1.75rem; }
.qe-etat-formulaire .qe-footer .footer-bottom { padding-top: 0; }

/* --- Formulaire --------------------------------------------------------- */
.qe-form { display: flex; flex-direction: column; gap: 2.75rem; }

.qe-question { margin: 0; }
.qe-intitule {
    display: block;
    font-family: var(--f-display, sans-serif);
    font-weight: 800;
    font-size: 1.18rem;
    line-height: 1.35;
    color: var(--c-marine, #1F3A5F);
    text-wrap: pretty;
    margin-bottom: 0.35rem;
}
.qe-obligatoire { color: var(--c-bordeaux, #7A1F2E); font-weight: 700; }

.qe-legende { margin: -1.25rem 0 0; font-size: 0.86rem; color: #5f6670; }

.qe-type-reponse {
    display: block;
    font-size: 0.86rem;
    color: #5f6670;
    margin-bottom: 0.9rem;
}

.qe-erreur-question {
    display: block;
    font-family: var(--f-display, sans-serif);
    font-weight: 700;
    font-size: 0.86rem;
    color: var(--c-bordeaux, #7A1F2E);
    margin-bottom: 0.9rem;
}
.qe-question.has-erreur .qe-champ-texte { border-color: var(--c-bordeaux, #7A1F2E); }

.qe-bloc-texte {
    background: var(--c-beige, #F4F1EA);
    border-left: 4px solid var(--c-or, #D4A60C);
    border-radius: var(--radius, 22px);
    padding: clamp(1.2rem, 2.5vw, 1.6rem) clamp(1.4rem, 3vw, 1.9rem);
}
.qe-bloc-texte p { margin: 0; font-size: 0.97rem; }

.qe-titre-section {
    background: var(--c-marine, #1F3A5F);
    border-radius: var(--radius, 22px);
    padding: clamp(1rem, 2.5vw, 1.4rem) clamp(1.4rem, 3vw, 1.9rem);
}
.qe-titre-section h2 {
    margin: 0;
    font-family: var(--f-display, sans-serif);
    font-weight: 800;
    font-size: 1.3rem;
    color: var(--c-blanc, #fff);
    text-wrap: pretty;
}

.qe-erreurs {
    background: var(--c-bordeaux-100, #EAD4D8);
    border-radius: var(--radius-sm, 12px);
    padding: 0.9rem 1.2rem;
    color: var(--c-bordeaux, #7A1F2E);
    font-weight: 700;
}
.qe-erreurs p { margin: 0; }

/* --- Options (cases à cocher / boutons radio) --------------------------- */
.qe-options { display: grid; gap: 0.55rem; }

.qe-option {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 0;
    padding: 0.85em 1.1em;
    border: 1.5px solid var(--c-ligne, rgba(31, 58, 95, 0.14));
    border-radius: var(--radius-sm, 12px);
    background: var(--c-blanc, #fff);
    font-family: var(--f-body, sans-serif);
    font-size: 0.98rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--c-anthracite, #333);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.qe-option:hover { border-color: var(--c-marine, #1F3A5F); }

/* Les cases héritaient de `width:100%` : on les ramène à leur taille. */
.qe-option input[type="checkbox"],
.qe-option input[type="radio"] {
    width: 19px;
    height: 19px;
    flex: none;
    margin: 0.18rem 0 0;
    padding: 0;
    accent-color: var(--c-vert, #2E8B57);
    cursor: pointer;
}
.qe-option:has(input:checked) {
    border-color: var(--c-vert, #2E8B57);
    background: var(--c-vert-100, #DFEEE4);
    color: var(--c-marine, #1F3A5F);
}

/* Option « Autre : », le champ libre partage la ligne. */
.qe-option--autre { align-items: center; padding-block: 0.6em; }
.qe-option--autre > span { flex: none; }
.qe-option--autre input[type="text"] {
    flex: 1;
    min-width: 0;
    width: auto;
    font-size: 0.95rem;
    padding: 0.45em 0.8em;
    border: 1.5px solid var(--c-ligne, rgba(31, 58, 95, 0.14));
    border-radius: 8px;
    background: var(--c-beige, #F4F1EA);
}

/* --- Champs texte ------------------------------------------------------- */
.qe-champ-texte {
    width: 100%;
    display: block;
    font-family: var(--f-body, sans-serif);
    font-size: 0.98rem;
    line-height: 1.6;
    padding: 0.85em 1em;
    border: 1.5px solid var(--c-ligne, rgba(31, 58, 95, 0.14));
    border-radius: var(--radius-sm, 12px);
    background: var(--c-beige, #F4F1EA);
    color: var(--c-anthracite, #333);
}
textarea.qe-champ-texte { resize: vertical; min-height: 120px; }
.qe-champ-texte:focus { outline: none; border-color: var(--c-vert, #2E8B57); background: var(--c-blanc, #fff); }

/* Bloc "Remarque / Commentaire", indépendant des options ci-dessus. */
.qe-remarque { margin-top: 0.55rem; }
.qe-remarque .qe-champ-texte { margin-top: 0.4rem; }

/* --- Envoi -------------------------------------------------------------- */
.qe-envoi {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    flex-wrap: wrap;
    padding-top: 1.75rem;
    border-top: 1px solid var(--c-ligne, rgba(31, 58, 95, 0.14));
}
.qe-note { margin: 0; font-size: 0.82rem; color: #5f6670; }

/* --- Après envoi : suite du parcours ------------------------------------ */
.qe-merci { font-size: var(--fs-lead, 1.2rem); line-height: 1.6; margin-bottom: 2.5rem; }
.qe-suite {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}
.qe-suite__item {
    display: block;
    background: var(--c-blanc, #fff);
    border: 1px solid var(--c-ligne, rgba(31, 58, 95, 0.14));
    border-radius: var(--radius, 22px);
    padding: 1.75rem;
    box-shadow: var(--shadow-soft, 0 8px 24px rgba(31, 58, 95, 0.08));
    transition: transform 0.25s ease;
}
.qe-suite__item:hover { transform: translateY(-2px); }
.qe-suite__item h3 { margin: 0 0 0.5rem; font-size: 1.15rem; }
.qe-suite__item p { margin: 0; font-size: 0.95rem; }
.qe-suite__item--tint { background: var(--c-bordeaux-100, #EAD4D8); border-color: transparent; box-shadow: none; }
.qe-suite__item--tint h3 { color: var(--c-bordeaux, #7A1F2E); }

@media (max-width: 560px) {
    .qe-option--autre { align-items: flex-start; flex-wrap: wrap; }
    .qe-option--autre input[type="text"] { flex-basis: 100%; }
}

/* --- Apercu ---------------------------------------------------------- */
.qe-bandeau-apercu {
    background: var(--c-or, #D4A60C);
    color: var(--c-marine, #1F3A5F);
    font-weight: 700;
    text-align: center;
    padding: 0.6em 1em;
    border-radius: var(--radius-sm, 12px);
    margin-bottom: 1.5rem;
}