/* ============================================================
   ANIMA — Quiz de séjour (spec 2026-09-23 quiz à facettes § 3, briques Q4 direction · Q5 membre)
   ------------------------------------------------------------
   #/projet/<id>/quiz-sejour : direction (volets Projet · Posture · Cadre · Équipe, publication) ou membre affecté
   (annonce, passage, retour posture, progression, « prêt »). Accueil : section « Quiz de séjour » (js/accueil).
   Tokens de css/tokens.css uniquement (tests/charte.test.mjs) ; primitives .rec-* / .sf-btn / .aff-opt réutilisées ;
   zéro emoji (glyphes ✓ ✕ ＋ ✎ ▸ ▲ ▼ ⚠) ; cibles tactiles ≥ 44 px ; mobile 390 px d'office.
   ============================================================ */

.qs [hidden]{display:none !important}
.qs-shell{display:flex; flex-direction:column; gap:var(--sp-4); max-width:880px; min-width:0}
.qs-intro{margin:0; font-size:.9rem; line-height:1.55; color:var(--text-2)}
.qs-h{margin:0; font-size:1rem; font-weight:600; color:var(--text)}
.qs-texte{margin:0; font-size:.88rem; line-height:1.55; color:var(--text-2)}
.qs-sous{margin:0; font-size:.82rem; color:var(--text-3)}
.qs-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.qs-lien-btn{align-self:flex-start; text-decoration:none; display:inline-flex; align-items:center; min-height:44px}
.qs-lien{align-self:flex-start}

/* ---------- Barre de statut + messages ---------- */
.qs-barre{display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; padding:var(--sp-3) var(--sp-4); border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface-2)}
.qs-barre:empty{display:none}
.qs-statut{display:flex; align-items:center; gap:var(--sp-2); flex:1 1 260px; min-width:0}
.qs-statut-txt{font-size:.86rem; color:var(--text-2); min-width:0}
.qs-chiffres{font-size:.74rem; color:var(--text-3)}
.qs-flash{margin:0; font-size:.86rem; min-height:0}
.qs-flash:empty{display:none}
.qs-flash.is-ok{color:var(--ok)}
.qs-flash.is-erreur{color:var(--crit)}
.qs-tabs .rec-tabs{margin:0}
.qs-zone{display:flex; flex-direction:column; gap:var(--sp-4); min-width:0}
.qs-cadre, .qs-equipe{display:flex; flex-direction:column; gap:var(--sp-4); min-width:0}

/* ---------- Encarts ---------- */
.qs-encart, .qs-vide, .qs-pret{display:flex; flex-direction:column; gap:var(--sp-3); padding:var(--sp-4); border-radius:var(--r-lg); min-width:0}
.qs-encart.is-indispo{border-style:dashed}
.qs-gen-ligne{display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap}
.qs-compteur{font-size:.74rem; color:var(--text-3)}
.qs-ecrire{align-self:flex-start}
.qs-volets-liste{margin:0; padding-left:1.1rem; display:flex; flex-direction:column; gap:6px; font-size:.88rem; line-height:1.5; color:var(--text-2)}
.qs-volets-liste strong{color:var(--text)}
.qs-cta{align-self:flex-start}

/* ---------- Listes et cartes de questions ---------- */
.qs-liste{display:flex; flex-direction:column; gap:var(--sp-3); min-width:0}
.qs-q{display:flex; flex-direction:column; gap:var(--sp-2); padding:var(--sp-3) var(--sp-4); border-radius:var(--r-lg); min-width:0}
.qs-q.is-brouillon{border-color:var(--warn-line)}
.qs-q.is-rejetee{opacity:.72}
.qs-q-tete{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.qs-enonce{margin:0; font-size:.95rem; line-height:1.5; color:var(--text); overflow-wrap:anywhere}
.qs-rep{display:flex; flex-direction:column; gap:6px; min-width:0}
.qs-choix{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px}
.qs-choix li{display:flex; align-items:flex-start; gap:8px; font-size:.88rem; line-height:1.45; color:var(--text-2); overflow-wrap:anywhere; min-width:0}
.qs-choix li.is-bonne{color:var(--text); font-weight:600}
.qs-marque{flex:none; width:22px; height:22px; display:inline-grid; place-items:center; border-radius:50%; border:1px solid var(--line-2); font-family:var(--font-mono); font-size:.68rem; color:var(--text-3)}
.qs-choix li.is-bonne .qs-marque{border-color:var(--ok-line); background:var(--ok-bg); color:var(--ok)}
.qs-tag{flex:none; margin-left:auto; font-family:var(--font-mono); font-size:.66rem; color:var(--text-3); padding-top:3px}
.qs-etapes{margin:0; padding-left:1.3rem; font-size:.88rem; line-height:1.5; color:var(--text)}
.qs-chiffre{margin:0; font-size:.88rem; color:var(--text); font-weight:600}
.qs-explication{margin:0; font-size:.84rem; line-height:1.5; color:var(--text-2)}
.qs-ref{margin:0; font-size:.7rem; color:var(--text-3); overflow-wrap:anywhere}
.qs-actions{display:flex; gap:var(--sp-2); flex-wrap:wrap}
.qs-actions .sf-btn{min-height:44px}
.qs-rejetees{display:flex; flex-direction:column; gap:var(--sp-3)}
.qs-rejetees > summary{cursor:pointer; min-height:44px; display:flex; align-items:center; font-size:.88rem; color:var(--text-2)}

/* ---------- Formulaire (sheet) ---------- */
.qs-form-choix{display:flex; flex-direction:column; gap:6px}
.qs-form-ligne{display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:var(--sp-2)}
.qs-radio{min-height:44px; padding:0 4px}
.qs-radio .rec-check-body{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.qs-form-vf{display:flex; gap:var(--sp-4); flex-wrap:wrap}

/* ---------- Cadre : règles, recherche ---------- */
.qs-regles{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.qs-regles li{display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:start; gap:10px; padding:8px 0; border-bottom:1px solid var(--line)}
.qs-regles li:last-child{border-bottom:0}
.qs-regles li.is-actif .qs-marque{border-color:var(--ok-line); background:var(--ok-bg); color:var(--ok)}
.qs-regle-corps{display:flex; flex-direction:column; gap:2px; min-width:0}
.qs-regle-lib{font-size:.88rem; color:var(--text)}
.qs-regles li:not(.is-actif) .qs-regle-lib{color:var(--text-3)}
.qs-regle-raison{font-size:.78rem; color:var(--text-3); overflow-wrap:anywhere}
.qs-regle-n{font-size:.72rem; color:var(--text-2); white-space:nowrap; padding-top:2px}
.qs-filtres{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--sp-3)}
.qs-resultats{display:flex; flex-direction:column; gap:6px}
.qs-resultat{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:var(--sp-3); padding:8px 0; border-bottom:1px solid var(--line)}
.qs-resultat-corps{display:flex; flex-direction:column; gap:2px; font-size:.86rem; line-height:1.45; color:var(--text); min-width:0; overflow-wrap:anywhere}
.qs-resultat-meta{font-size:.68rem; color:var(--text-3)}
.qs-resultat .sf-btn{min-height:44px; white-space:nowrap}

/* ---------- Équipe (tableau par membre) ---------- */
.qs-alerte{margin:0; padding:var(--sp-3) var(--sp-4); border:1px solid var(--warn-line); background:var(--warn-bg); border-radius:var(--r-md); color:var(--text); font-size:.88rem; line-height:1.5}
.qs-resume{margin:0; font-size:.76rem; color:var(--text-3)}
.qs-membre{display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"id etat" "taux taux"; gap:6px var(--sp-3); padding:var(--sp-3) var(--sp-4); border-radius:var(--r-md); min-width:0}
.qs-membre-id{grid-area:id; display:flex; flex-direction:column; gap:2px; min-width:0}
.qs-membre-nom{font-size:.92rem; font-weight:600; color:var(--text); overflow-wrap:anywhere}
.qs-membre-roles{font-size:.76rem; color:var(--text-3)}
.qs-membre .qs-etat{grid-area:etat; align-self:start}
.qs-taux{grid-area:taux; display:flex; align-items:baseline; gap:var(--sp-3); flex-wrap:wrap}
.qs-taux-global{font-size:.8rem; color:var(--text)}
.qs-taux-volets{display:flex; gap:6px 12px; flex-wrap:wrap}
.qs-taux-volet{font-family:var(--font-mono); font-size:.7rem; color:var(--text-2)}
.qs-etat{display:inline-flex; align-items:center; gap:6px; font-size:.76rem; color:var(--text-2); white-space:nowrap}
.qs-etat-point{width:9px; height:9px; border-radius:50%; border:1.5px solid var(--text-3)}
.qs-etat-en_cours .qs-etat-point{border-color:var(--accent); background:var(--accent-bg)}
.qs-etat-pret{color:var(--ok)}
.qs-etat-pret .qs-etat-point{border-color:var(--ok); background:var(--ok)}
.qs-ratees{margin:0; padding-left:1.3rem; display:flex; flex-direction:column; gap:8px}
.qs-ratees li{display:flex; flex-direction:column; gap:2px}
.qs-ratee-enonce{font-size:.88rem; line-height:1.45; color:var(--text); overflow-wrap:anywhere}
.qs-ratee-meta{font-size:.7rem; color:var(--text-3)}

/* ---------- Membre : annonce, progression, passage ---------- */
.qs-annonce{display:flex; flex-direction:column; gap:6px; padding:var(--sp-3) var(--sp-4); border:1px solid var(--accent-glow); background:var(--accent-bg); border-radius:var(--r-md)}
.qs-annonce p{margin:0; font-size:.86rem; line-height:1.55; color:var(--text-2)}
.qs-annonce .qs-annonce-fort{font-size:.95rem; font-weight:600; color:var(--text)}
.qs-progress{display:flex; flex-direction:column; gap:6px}
.qs-progress:empty{display:none}
.qs-progress-tete{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); flex-wrap:wrap}
.qs-progress-txt{font-size:.84rem; color:var(--text-2)}
.qs-progress-txt b{color:var(--text)}
.qs-passage, .qs-retour{display:flex; flex-direction:column; gap:var(--sp-3); padding:var(--sp-4); border-radius:var(--r-lg); min-width:0}
.qs-kicker{font-size:.7rem; color:var(--text-3); letter-spacing:.03em}
.qs-passage-enonce{margin:0; font-size:1.05rem; line-height:1.5; font-weight:600; color:var(--text); overflow-wrap:anywhere}
.qs-passage-enonce:focus{outline:none}
.qs-saisie{display:flex; flex-direction:column; gap:var(--sp-2); min-width:0}
.qs-saisie .rec-input{max-width:220px}
.qs-options{grid-template-columns:minmax(0,1fr)}
.qs-passage-pied{display:flex; justify-content:flex-end; gap:var(--sp-2)}
.qs-passage-pied .sf-btn{min-height:44px; min-width:140px}
.qs-ordre{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.qs-ordre-ligne{display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; gap:8px; padding:4px 4px 4px 12px; border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--surface-3)}
.qs-ordre-n{font-size:.72rem; color:var(--text-3)}
.qs-ordre-txt{font-size:.9rem; line-height:1.4; color:var(--text); overflow-wrap:anywhere}
.qs-ordre-btn{width:44px; height:44px; display:inline-grid; place-items:center; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-2); color:var(--text-2); font:inherit; font-size:.8rem; cursor:pointer}
.qs-ordre-btn:disabled{opacity:.35; cursor:default}
.qs-ordre-btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.qs-retour.is-juste{border-color:var(--ok-line)}
.qs-retour.is-rate{border-color:var(--warn-line)}
.qs-verdict{display:flex; align-items:center; gap:10px; margin:0; font-size:.98rem; font-weight:600; color:var(--text)}
.qs-verdict-marque{flex:none; width:28px; height:28px; display:inline-grid; place-items:center; border-radius:50%; font-size:.85rem}
.is-juste .qs-verdict-marque{background:var(--ok-bg); color:var(--ok); border:1px solid var(--ok-line)}
.is-rate .qs-verdict-marque{background:var(--warn-bg); color:var(--warn); border:1px solid var(--warn-line)}
.qs-retour-enonce{margin:0; font-size:.88rem; line-height:1.5; color:var(--text-2); overflow-wrap:anywhere}
.qs-lbl{font-size:.78rem; font-weight:600; color:var(--text-2); margin:0}
.qs-ta-reponse{margin:0; font-size:.88rem; color:var(--text)}
.qs-attendu{display:flex; flex-direction:column; gap:var(--sp-2); padding:var(--sp-3); border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface-2)}
.qs-mot{margin:0; padding:var(--sp-2) var(--sp-3); border-left:3px solid var(--accent); display:flex; flex-direction:column; gap:4px}
.qs-mot p{margin:0; font-size:.9rem; line-height:1.5; color:var(--text); font-style:italic; overflow-wrap:anywhere}
.qs-pret{align-items:flex-start}
.qs-pret-marque{margin:0; width:40px; height:40px; display:grid; place-items:center; border-radius:50%; background:var(--ok-bg); border:1px solid var(--ok-line); color:var(--ok); font-size:1.1rem}

/* ---------- Mobile (après les règles de base) ---------- */
@media (max-width: 600px){
  .qs-encart, .qs-vide, .qs-pret, .qs-passage, .qs-retour{padding:var(--sp-3)}
  .qs-filtres{grid-template-columns:minmax(0,1fr)}
  .qs-passage-pied .sf-btn{flex:1 1 auto}
  .qs-actions .sf-btn{flex:1 1 auto}
  /* Quatre onglets lisibles à 390 px sans défilement (la barre défilante masquait « Équipe ») */
  .qs-tabs .rec-tab{flex:1 1 auto; justify-content:center; gap:5px; padding:10px 6px; font-size:.84rem}
}