/* Page de travail : styles partages par la vue participant et la vue animateur.
   Les jetons de couleur viennent de la page hote (index.html, admin.html). */

.travail-tete{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin:0 0 18px}
.travail-tete .compteur{font-size:14px; color:var(--ink-soft)}
.travail-tete .compteur b{color:var(--ink); font-size:22px; font-weight:800; font-variant-numeric:tabular-nums; margin-right:6px}
.filtres{display:inline-flex; background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:4px; gap:2px}
.filtres button{border:0; background:transparent; color:var(--ink-soft); font-weight:600; font-size:13px; padding:7px 14px; border-radius:999px; cursor:pointer}
.filtres button[aria-pressed="true"]{background:var(--violet); color:#fff}

.famtravail{margin-bottom:28px}
.famtravail h3{font-size:15px; font-weight:800; margin:0 0 10px; letter-spacing:.01em; color:var(--ink-soft)}

.ligne{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:16px 18px; margin-bottom:12px; box-shadow:var(--shadow)}
.ligne.acte{border-color:var(--acquis); box-shadow:none}

.ligne-tete{display:grid; grid-template-columns:1fr auto; gap:10px 24px; align-items:start}
.ligne-tete h4{margin:0 0 6px; font-size:16px; font-weight:700; line-height:1.3}
.mesure{min-width:190px}
.ligne .bar{display:flex; height:10px; border-radius:5px; overflow:hidden; background:var(--line)}
.ligne .bar span{display:block; height:100%}
.ligne .bar .a{background:var(--acquis)} .ligne .bar .p{background:var(--partiel)} .ligne .bar .n{background:var(--nontraite)}
.ligne .tally{font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; margin-top:5px; text-align:right}
.ligne .tally i{font-style:normal; font-weight:700; color:var(--ink-soft)}

.chip{display:inline-block; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
      padding:3px 9px; border-radius:999px; border:1px solid var(--line-strong); color:var(--muted); margin-right:6px}
.chip-divise{color:var(--partiel); border-color:var(--partiel)}
.chip-unanime_non{color:var(--nontraite); border-color:var(--nontraite)}
.chip-unanime_acquis{color:var(--acquis); border-color:var(--acquis)}
.chip.pole[data-p="SEO"]{color:var(--violet); border-color:var(--violet)}

.questions{margin:14px 0 0; padding:0 0 0 18px; color:var(--ink-soft); font-size:14px}
.questions li{margin-bottom:5px; max-width:78ch}
.questions li::marker{color:var(--violet)}

.decision{display:grid; grid-template-columns:repeat(3, minmax(140px, 1fr)); gap:10px 14px; margin-top:16px}
.decision label{display:flex; flex-direction:column; gap:5px; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted)}
.decision label.large{grid-column:1 / -1}
.decision select, .decision input{
  font:inherit; font-size:14px; font-weight:500; text-transform:none; letter-spacing:0; color:var(--ink);
  background:var(--ground); border:1px solid var(--line-strong); border-radius:9px; padding:9px 11px; width:100%;
}
.decision select:disabled, .decision input:disabled{opacity:.7; cursor:not-allowed}

.ligne-pied{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:14px; flex-wrap:wrap}
.statut{font-size:13px; font-weight:700; color:var(--muted)}
.statut.on{color:var(--acquis)}
.pied-actions{display:flex; align-items:center; gap:12px}
.sauv{font-size:12px; color:var(--muted); min-width:120px; text-align:right}

.vide{color:var(--muted); font-size:15px; padding:20px 0}

@media (max-width:720px){
  .ligne-tete{grid-template-columns:1fr}
  .mesure{min-width:0}
  .ligne .tally{text-align:left}
  .decision{grid-template-columns:1fr}
}

/* L'echange enregistre : ce que la machine a entendu, relu par l'animateur */
.echange{margin-top:14px; padding:12px 14px; border-left:3px solid var(--violet); background:var(--ground); border-radius:0 9px 9px 0}
.echange b{display:block; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--violet); margin-bottom:4px}
.echange p{margin:0; font-size:14px; color:var(--ink-soft); max-width:78ch}
.echange details{margin-top:8px}
.echange summary{font-size:12px; font-weight:700; color:var(--muted); cursor:pointer}
.echange details p{margin-top:8px; font-size:13px; white-space:pre-wrap}

.btn.micro.actif{background:#c0392b; color:#fff; border-color:#c0392b}
@media (prefers-color-scheme: dark){ .btn.micro.actif{background:#e05a48; border-color:#e05a48} }