/* Quiz du séjour natif Le Fil (js/quiz-sejour/ ; spec docs/specs/2026-10-07-le-fil-design.md). Style de Le Fil : encre, filets, couleur rare (ambre = ce qui demande un geste, sapin = juste / prêt),
   pleine largeur, cibles de 44 px et plus (48 visé), sept tailles de texte (12, 14, 16, 18, 24, 30, 64), aucun effet décoratif. Réutilise la fabrique et les classes du budget
   (css/fil-budget.css : .fb, .fb-carte, .fb-bouton, .fb-segments, .fb-puce, .fb-feuille…) ; ce fichier ne porte que ce qui est propre au quiz.
   Remplace css/quiz-sejour.css (classique, supprimé). Ne touche pas au quiz public / personnel #/quiz (css/quiz.css). */

/* Tête : état du quiz, message, segments */
.fqs-statut { padding: 14px 16px; }
.fqs-statut-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.fqs-statut-txt { flex: 1 1 220px; min-width: 0; color: var(--f-encre-2); font: 400 14px/1.4 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
.fqs-chiffres { margin: 8px 0 0; }
.fqs-flash { margin: 10px 0 0; color: var(--f-fait); font: 500 14px/1.4 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
.fqs-flash[data-etat="erreur"] { color: var(--f-urgent); }
.fqs-flash[hidden] { display: none; }
.fqs-entete { margin: 0 0 12px; }
.fqs-barre { margin: 12px 0 14px; }
.fqs-segment { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 6px; }
.fqs-segment-n { min-width: 18px; padding: 2px 5px; border-radius: 99px; background: var(--f-surface-2); color: var(--f-encre-2); font: 500 12px/1.2 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.fqs-segment[aria-current="page"] .fqs-segment-n { background: color-mix(in srgb, var(--f-fond) 24%, transparent); color: var(--f-fond); }
@media (min-width: 640px) { .fqs-segment { padding: 0 20px; } }
.fqs-flash:not([hidden]) + .fqs-barre { margin-top: 12px; }

/* Cartes de contenu */
.fqs-pile > .fb-carte { margin-bottom: 12px; }
.fqs-pile > .fb-note, .fqs-pile > .fb-message { margin: 0 0 12px; }
.est-indispo { border-style: dashed; }
.fqs-compteur { align-self: center; }
.fqs-volets-liste { margin: 10px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: var(--f-encre-2); font: 400 14px/1.45 Inter, system-ui, sans-serif; }
.fqs-volets-liste strong { color: var(--f-encre); font-weight: 600; }
.fqs-rejetees { border-top: 0; }

/* Une question = une ligne séparée par un filet */
.fqs-q { display: flex; flex-direction: column; gap: 8px; padding: 14px 0; border-top: 1px solid var(--f-filet); min-width: 0; }
.fqs-liste > .fqs-q:first-of-type, .fqs-liste > .fb-carte-ligne + .fqs-q, .fqs-liste > .fb-note + .fqs-q { border-top: 0; }
.fqs-liste > .fb-note + .fqs-q, .fqs-liste > .fb-carte-ligne + .fqs-q { margin-top: 4px; }
.fqs-q.est-brouillon { border-left: 3px solid var(--f-attention); padding-left: 12px; }
.fqs-q.est-rejetee { opacity: .72; }
.fqs-q-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fqs-enonce { margin: 0; font: 500 16px/1.45 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
.fqs-rep { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fqs-choix { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.fqs-choix-ligne { display: flex; align-items: flex-start; gap: 10px; min-width: 0; color: var(--f-encre-2); font: 400 14px/1.45 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
.fqs-choix-ligne.est-juste { color: var(--f-encre); font-weight: 500; }
.fqs-choix-texte { flex: 1 1 auto; min-width: 0; padding-top: 2px; }
.fqs-marque { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--f-filet); border-radius: 50%; color: var(--f-encre-3); font: 500 12px/1 Inter, system-ui, sans-serif; }
.est-juste > .fqs-marque { border-color: var(--f-fait); background: transparent; color: var(--f-fait); }
.fqs-etiquette { flex: none; margin-left: auto; padding-top: 3px; color: var(--f-encre-3); font: 500 12px/1.2 Inter, system-ui, sans-serif; }
.fqs-etapes { margin: 0; padding-left: 22px; color: var(--f-encre); font: 400 14px/1.5 Inter, system-ui, sans-serif; }
.fqs-chiffre { margin: 0; font: 600 14px/1.4 Inter, system-ui, sans-serif; }
.fqs-explication { margin: 0; color: var(--f-encre-2); font: 400 14px/1.5 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
.fqs-ref { margin: 0; color: var(--f-encre-3); font: 400 12px/1.4 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
.fqs-actions { margin-top: 4px; }
.fqs-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 520px) { .fqs-actions .fb-bouton { flex: 1 1 auto; } }

/* Feuille « Écrire une question » */
.fqs-form-choix { display: flex; flex-direction: column; gap: 6px; }
.fqs-form-ligne { display: grid; grid-template-columns: minmax(0, 44%) minmax(0, 1fr); align-items: center; gap: 8px; }
.fqs-radio { min-height: 48px; }
.fqs-radio input { accent-color: var(--f-encre); }
.fqs-form-vf { display: flex; flex-wrap: wrap; gap: 8px 24px; }
@media (max-width: 520px) { .fqs-form-ligne { grid-template-columns: minmax(0, 1fr); gap: 0; } .fqs-radio-choix { min-height: 44px; } }

/* Cadre : règles, recherche */
.fqs-regles { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; }
.fqs-regle { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 10px 0; border-top: 1px solid var(--f-filet); }
.fqs-regle:first-child { border-top: 0; }
.fqs-regle-corps { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fqs-regle-lib { font: 500 14px/1.4 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
.fqs-regle:not(.est-actif) .fqs-regle-lib { color: var(--f-encre-3); }
.fqs-regle-raison { color: var(--f-encre-3); font: 400 12px/1.4 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
.fqs-regle-n { color: var(--f-encre-2); font: 500 12px/1.4 Inter, system-ui, sans-serif; white-space: nowrap; padding-top: 3px; }
.fqs-regle.est-actif .fqs-marque { border-color: var(--f-fait); color: var(--f-fait); }
.fqs-filtres { margin-top: 10px; }
.fqs-resultats { display: flex; flex-direction: column; margin-top: 8px; }
.fqs-resultat { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--f-filet); }
.fqs-resultat:first-child { border-top: 0; }
.fqs-resultat-corps { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fqs-resultat-meta { color: var(--f-encre-3); font: 500 12px/1.3 Inter, system-ui, sans-serif; }
.fqs-resultat-texte { font: 400 14px/1.45 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }

/* Équipe : une ligne par membre */
.fqs-alerte { margin: 0 0 12px; padding: 12px 14px; border: 1px solid var(--f-attention); border-radius: 14px; color: var(--f-attention); font: 400 14px/1.5 Inter, system-ui, sans-serif; }
.fqs-alerte strong { font-weight: 600; }
.fqs-membre { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id etat" "taux taux"; gap: 6px 12px; align-items: start; padding: 12px 0; border-top: 1px solid var(--f-filet); min-width: 0; }
.fqs-membre-id { grid-area: id; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fqs-membre-nom { font: 500 16px/1.3 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
.fqs-membre-roles { color: var(--f-encre-2); font: 400 14px/1.4 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
.fqs-membre .fqs-etat { grid-area: etat; }
.fqs-taux { grid-area: taux; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.fqs-taux-global { font: 600 14px/1.3 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.fqs-taux-volets { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.fqs-taux-volet { color: var(--f-encre-2); font: 400 12px/1.4 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.fqs-ratees { margin: 8px 0 0; padding-left: 22px; }
.fqs-ratees li { margin: 0 0 10px; }
.fqs-ratees li > span { display: block; }
.fqs-ratee-enonce { font: 400 14px/1.45 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
.fqs-ratee-meta { color: var(--f-encre-3); font: 400 12px/1.4 Inter, system-ui, sans-serif; }

/* Membre : annonce, progression, une question à la fois */
.fqs-passage-racine { max-width: 760px; margin-left: auto; margin-right: auto; }
.fqs-annonce { margin: 0 0 12px; }
.fqs-annonce-fort { margin: 0; font: 600 16px/1.4 Inter, system-ui, sans-serif; }
.fqs-annonce .fb-note { margin-top: 4px; }
.fqs-progression:empty { display: none; }
.fqs-prog { margin: 0 0 12px; padding: 14px 16px; }
.fqs-prog-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.fqs-prog-txt { color: var(--f-encre-2); font: 400 14px/1.3 Inter, system-ui, sans-serif; }
.fqs-prog-n { margin-right: 4px; color: var(--f-encre); font: 600 24px/1.2 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.fqs-barre-prog { height: 8px; margin: 10px 0 8px; border-radius: 99px; background: var(--f-surface-2); border: 1px solid var(--f-filet); overflow: hidden; }
.fqs-barre-prog i { display: block; height: 100%; background: var(--f-encre); border-radius: 99px; }
.fqs-passage, .fqs-retour, .fqs-pret { margin: 0 0 12px; }
.fqs-kicker { color: var(--f-encre-2); font: 500 12px/1.3 Inter, system-ui, sans-serif; }
.fqs-passage-enonce { margin: 10px 0 14px; font: 600 18px/1.45 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
.fqs .fqs-passage-enonce:focus, .fqs .fqs-passage-enonce:focus-visible { outline: none; }
.fqs-saisie { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.fqs-saisie .fb-note { margin: 0; }
.fqs-nombre { max-width: 240px; }
.fqs-options { display: flex; flex-direction: column; gap: 8px; }
:root [data-app] .fqs button.fqs-option { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: start; gap: 12px; width: 100%; min-height: 56px; padding: 12px 14px; border: 1px solid var(--f-filet); border-radius: 18px; background: var(--f-surface); color: var(--f-encre); text-align: left; font: 400 16px/1.4 Inter, system-ui, sans-serif; cursor: pointer; }
:root [data-app] .fqs button.fqs-option:hover { background: var(--f-surface-2); }
.fqs-option-lettre { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--f-filet); border-radius: 50%; color: var(--f-encre-2); font: 600 12px/1 Inter, system-ui, sans-serif; }
.fqs-option-texte { padding-top: 3px; overflow-wrap: anywhere; }
:root [data-app] .fqs button.fqs-option[aria-pressed="true"] { border-color: var(--f-encre); box-shadow: inset 0 0 0 1px var(--f-encre); background: var(--f-surface-2); }
.fqs-option[aria-pressed="true"] .fqs-option-lettre { background: var(--f-encre); border-color: var(--f-encre); color: var(--f-fond); }
.fqs-option:focus-visible, .fqs-ordre-btn:focus-visible { outline: 2px solid var(--f-encre); outline-offset: 3px; }
.fqs-pied { margin-top: 16px; justify-content: flex-end; }
.fqs-pied .fb-bouton { min-width: 160px; }
@media (max-width: 520px) { .fqs-pied { justify-content: stretch; } .fqs-pied .fb-bouton { flex: 1 1 100%; } }
.fqs-ordre { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fqs-ordre-ligne { display: grid; grid-template-columns: 24px minmax(0, 1fr) 48px 48px; align-items: center; gap: 8px; padding: 4px 4px 4px 12px; border: 1px solid var(--f-filet); border-radius: 18px; background: var(--f-surface-2); }
.fqs-ordre-n { color: var(--f-encre-3); font: 600 12px/1 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.fqs-ordre-txt { font: 400 16px/1.4 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
:root [data-app] .fqs button.fqs-ordre-btn { min-height: 48px; font-size: 14px; }
.fqs-retour.est-juste { border-color: var(--f-fait); }
.fqs-retour.est-rate { border-color: var(--f-attention); }
.fqs-verdict { display: flex; align-items: center; gap: 12px; margin: 0; font: 600 18px/1.3 Inter, system-ui, sans-serif; }
.fqs-verdict-marque { flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; border: 1px solid currentColor; border-radius: 50%; font: 600 14px/1 Inter, system-ui, sans-serif; }
.est-juste .fqs-verdict-marque { color: var(--f-fait); }
.est-rate .fqs-verdict-marque { color: var(--f-attention); }
.fqs-retour-enonce { margin: 12px 0 0; color: var(--f-encre-2); font: 400 14px/1.5 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
.fqs-retour .fqs-explication { margin-top: 10px; }
.fqs-retour .fqs-ref { margin-top: 6px; }
.fqs-lbl { margin: 0; color: var(--f-encre-2); font: 600 14px/1.4 Inter, system-ui, sans-serif; }
.fqs-ta-reponse { margin: 12px 0 0; font: 400 14px/1.45 Inter, system-ui, sans-serif; }
.fqs-attendu { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; padding: 12px 14px; border: 1px solid var(--f-filet); border-radius: 18px; background: var(--f-surface-2); }
.fqs-mot { margin: 0; padding: 4px 0 4px 12px; border-left: 3px solid var(--f-encre); display: flex; flex-direction: column; gap: 4px; }
.fqs-mot p { margin: 0; font: italic 400 16px/1.5 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }