/* Fichly · White Belt Lean en 1 h — styles du déclic du chapitre 2 (agent DÉCLIC 2)
   « Trier 6 tâches d’un poste d’assemblage » : VA, NVAO ou NVA (voir declics/ch2.js).
   Tous les sélecteurs sous .declic-ch2 (classes dc2-…), jetons de couleur de fichly.css
   (clair/sombre : --va, --nvao, --nva, --ok, --bad…), charte V2. Mobile d’abord :
   largeur utile ≈ 311 px à 375 px, zones tactiles ≥ 44 px, aucun défilement horizontal.
   Grand cadre (≥ 720 px) : la tâche à gauche, l’aide-mémoire ouvert à droite. */

.declic-ch2 [hidden] { display: none !important; }
.declic-ch2 .dc2 { container-type: inline-size; min-width: 0; }
.declic-ch2 .dc2-in { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.declic-ch2 .dc2-kicker { margin: 0; font: 700 .74rem/1.3 var(--title); letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
.declic-ch2 .dc2-prev { justify-self: start; margin: 0; font: 700 .8rem/1.2 var(--body); background: var(--lane); color: var(--soft); border-radius: var(--pill); padding: 6px 11px; }

/* ---------- Barre « ce que le client paie » (en tête de la tâche) ---------- */
.declic-ch2 .dc2-meter { margin-bottom: 14px; padding: 10px 12px 11px; border-radius: var(--radius-sm); background: var(--lane); }
.declic-ch2 .dc2-meter-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; margin: 0 0 7px; }
.declic-ch2 .dc2-meter-lbl { min-width: 0; font: 700 .9rem/1.25 var(--title); color: var(--ink); }
.declic-ch2 .dc2-meter-val { flex: none; font: 700 .84rem/1.2 var(--body); color: var(--soft); white-space: nowrap; }
.declic-ch2 .dc2-meter-val b { font: 700 1.25rem/1 var(--title); color: var(--ink); font-variant-numeric: tabular-nums; }
.declic-ch2 .dc2-bar { display: flex; height: 16px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line);
  background: repeating-linear-gradient(135deg, var(--card) 0 5px, var(--line) 5px 7px); }
.declic-ch2 .dc2-seg { display: block; height: 100%; width: 0; transition: width .5s cubic-bezier(.2, .8, .2, 1); }
.declic-ch2 .dc2-seg.va { background: var(--va); }
.declic-ch2 .dc2-seg.nvao { background: var(--nvao); }
.declic-ch2 .dc2-seg.nva { background: var(--nva); }
.declic-ch2 .dc2-legend { display: flex; flex-wrap: wrap; gap: 3px 12px; margin: 7px 0 0; padding: 0; list-style: none; font-size: .8rem; color: var(--soft); }
.declic-ch2 .dc2-legend li { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.declic-ch2 .dc2-legend li:last-child { display: none; }
.declic-ch2 .dc2-legend b { color: var(--ink); font: 700 .8rem/1 var(--title); font-variant-numeric: tabular-nums; }
.declic-ch2 .dc2-sw { display: inline-block; width: 11px; height: 11px; border-radius: var(--pill); flex: none; }
.declic-ch2 .dc2-sw.va { background: var(--va); }
.declic-ch2 .dc2-sw.nvao { background: var(--nvao); }
.declic-ch2 .dc2-sw.nva { background: var(--nva); }
.declic-ch2 .dc2-sw.todo { background: repeating-linear-gradient(135deg, var(--card) 0 3px, var(--line) 3px 5px); border: 1px solid var(--line); }

/* ---------- La tâche (le cadre blanc de la coquille sert de carte) ---------- */
.declic-ch2 .dc2-stage { min-width: 0; }
.declic-ch2 .dc2-card { min-width: 0; }
.declic-ch2 .dc2-card.is-new .dc2-card-top,
.declic-ch2 .dc2-card.is-new .dc2-task-row,
.declic-ch2 .dc2-card.is-new .dc2-time { animation: dc2-pop .3s ease-out; }
@keyframes dc2-pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.declic-ch2 .dc2-card-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin-bottom: 10px; }
.declic-ch2 .dc2-step { font: 700 .84rem/1.2 var(--body); color: var(--soft); }
.declic-ch2 .dc2-pips { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.declic-ch2 .dc2-pips li { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line); background: var(--card); }
.declic-ch2 .dc2-pips li.va { background: var(--va); border-color: var(--va); }
.declic-ch2 .dc2-pips li.nvao { background: var(--nvao); border-color: var(--nvao); }
.declic-ch2 .dc2-pips li.nva { background: var(--nva); border-color: var(--nva); }
.declic-ch2 .dc2-pips li.ko { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--bad); }
.declic-ch2 .dc2-pips li.is-cur { border-color: var(--ink); transform: scale(1.2); }

.declic-ch2 .dc2-task-row { display: flex; align-items: flex-start; gap: 12px; }
.declic-ch2 .dc2-pic { flex: none; width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; background: var(--lane); color: var(--ink); transition: background .2s ease, color .2s ease; }
.declic-ch2 .dc2-pic svg { width: 30px; height: 30px; }
.declic-ch2 .dc2-card[data-kind="va"] .dc2-pic { background: var(--va); color: var(--on-fill); }
.declic-ch2 .dc2-card[data-kind="nvao"] .dc2-pic { background: var(--nvao); color: var(--on-fill); }
.declic-ch2 .dc2-card[data-kind="nva"] .dc2-pic { background: var(--nva); color: var(--on-fill); }
.declic-ch2 .dc2-task-txt { min-width: 0; }
.declic-ch2 .dc2-task { margin: 0 0 4px; font: 700 1.1rem/1.3 var(--title); color: var(--ink); }
.declic-ch2 .dc2-task:focus { outline: none; }
.declic-ch2 .dc2-detail { margin: 0; font-size: .93rem; line-height: 1.45; color: var(--soft); }
.declic-ch2 .dc2-time { display: inline-flex; align-items: center; gap: 7px; margin: 12px 0 14px; padding: 6px 11px; border-radius: var(--pill); background: var(--lane); font-size: .88rem; color: var(--soft); }
.declic-ch2 .dc2-time svg { width: 16px; height: 16px; flex: none; color: var(--ink); }
.declic-ch2 .dc2-time b { font: 700 .92rem/1 var(--title); color: var(--ink); font-variant-numeric: tabular-nums; }

/* Les 3 boutons de classement (couleurs VA / NVAO / NVA, texte bleu nuit : contraste AA) */
.declic-ch2 .dc2-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.declic-ch2 .dc2-choice { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-width: 0; min-height: 64px; padding: 8px 4px; border: 0; border-radius: 12px; cursor: pointer; text-align: center;
  color: var(--on-fill); font: 700 1.08rem/1.1 var(--title); box-shadow: inset 0 -3px 0 rgba(7, 18, 70, .18);
  transition: transform .15s ease, box-shadow .15s ease, opacity .2s ease; }
.declic-ch2 .dc2-choice > span:not(.visually-hidden) { font: 700 .74rem/1.2 var(--body); overflow-wrap: anywhere; }
.declic-ch2 .dc2-choice.va { background: var(--va); }
.declic-ch2 .dc2-choice.nvao { background: var(--nvao); }
.declic-ch2 .dc2-choice.nva { background: var(--nva); }
@media (hover: hover) {
  .declic-ch2 .dc2-choice:not([aria-disabled="true"]):hover { transform: translateY(-2px); box-shadow: inset 0 -3px 0 rgba(7, 18, 70, .18), 0 6px 14px rgba(7, 18, 70, .16); }
}
.declic-ch2 .dc2-choice:not([aria-disabled="true"]):active { transform: translateY(1px); }
.declic-ch2 .dc2-choice:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.declic-ch2 .dc2-choice[aria-disabled="true"] { cursor: default; }
.declic-ch2 .dc2-choice.is-dim { opacity: .35; }
.declic-ch2 .dc2-choice.is-wrong { opacity: .75; box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--bad); }
.declic-ch2 .dc2-choice.is-answer { box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--ok); }
.declic-ch2 .dc2-choice-mark { position: absolute; top: -8px; right: -5px; width: 22px; height: 22px; border-radius: 50%; display: none; place-items: center; }
.declic-ch2 .dc2-choice-mark svg { width: 13px; height: 13px; }
.declic-ch2 .is-answer .dc2-choice-mark { display: grid; background: var(--ok); color: var(--card); }
.declic-ch2 .is-wrong .dc2-choice-mark { display: grid; background: var(--bad); color: var(--card); }

/* Correction */
.declic-ch2 .dc2-verdict { margin-top: 14px; border-radius: 12px; padding: 12px 14px; animation: dc2-pop .25s ease-out; }
.declic-ch2 .dc2-verdict.ok { background: var(--ok-bg); }
.declic-ch2 .dc2-verdict.bad { background: var(--bad-bg); }
.declic-ch2 .dc2-v-t { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 6px; font: 700 1rem/1.3 var(--title); }
.declic-ch2 .dc2-verdict.ok .dc2-v-t { color: var(--ink); }
.declic-ch2 .dc2-verdict.bad .dc2-v-t { color: var(--ink); }
.declic-ch2 .dc2-v-t svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.declic-ch2 .dc2-v-w { margin: 0 0 12px; font-size: .95rem; line-height: 1.5; color: var(--ink); }
.declic-ch2 .dc2-v-w em { display: block; margin-bottom: 4px; font-style: normal; font-weight: 700; }
.declic-ch2 .dc2-next { width: 100%; }

/* ---------- Aide-mémoire (les 3 questions de la fiche) ---------- */
.declic-ch2 .dc2-aide { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.declic-ch2 .dc2-aide > summary { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 12px; border-radius: var(--radius);
  cursor: pointer; list-style: none; font: 700 .92rem/1.3 var(--title); color: var(--ink); }
.declic-ch2 .dc2-aide > summary::-webkit-details-marker { display: none; }
.declic-ch2 .dc2-aide > summary:focus-visible { outline-offset: -3px; }
.declic-ch2 .dc2-aide-ico { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--lane); color: var(--ink); }
.declic-ch2 .dc2-aide-ico svg { width: 18px; height: 18px; }
.declic-ch2 .dc2-aide-l { flex: 1; min-width: 0; }
.declic-ch2 .dc2-aide-chev { flex: none; width: 20px; height: 20px; color: var(--soft); transition: transform .18s ease; }
.declic-ch2 .dc2-aide[open] > summary .dc2-aide-chev { transform: rotate(180deg); }
.declic-ch2 .dc2-aide-body { padding: 12px 14px 14px; border-top: 1px solid var(--line); font-size: .92rem; line-height: 1.5; }
.declic-ch2 .dc2-aide-body p { margin: 8px 0 0; }
.declic-ch2 .dc2-q3 { margin: 0; padding-left: 1.4em; display: grid; gap: 4px; font-weight: 700; color: var(--ink); }

/* ---------- Bilan ---------- */
.declic-ch2 .dc2-bilan { display: grid; gap: 12px; animation: dc2-pop .3s ease-out; }
.declic-ch2 .dc2-bilan:focus { outline: none; }
.declic-ch2 .dc2-score { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: var(--radius); background: var(--lane); border: 2px solid var(--line); }
.declic-ch2 .dc2-score.is-top { background: var(--ok-bg); border-color: var(--va); }
.declic-ch2 .dc2-score strong { flex: none; font: 700 2.3rem/1 var(--title); color: var(--ink); font-variant-numeric: tabular-nums; }
.declic-ch2 .dc2-score.is-top strong { color: var(--ink); }
.declic-ch2 .dc2-score span { min-width: 0; font: 700 .98rem/1.3 var(--title); color: var(--ink); }
.declic-ch2 .dc2-score small { display: block; margin-top: 3px; font: 700 .84rem/1.3 var(--body); color: var(--ink); }
.declic-ch2 .dc2-msg { margin: 0; }
.declic-ch2 .dc2-lesson { padding: 12px 14px; border-radius: var(--radius); background: var(--lane); border: 1px solid var(--va); }
.declic-ch2 .dc2-lesson .dc2-bar { margin-bottom: 10px; }
.declic-ch2 .dc2-lesson p { margin: 0; line-height: 1.5; }
.declic-ch2 .dc2-lesson p + p { margin-top: 6px; color: var(--soft); font-size: .92rem; }
.declic-ch2 .dc2-fams-t { margin: 4px 0 0; font: 700 .98rem/1.3 var(--title); color: var(--ink); }
.declic-ch2 .dc2-fams { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
.declic-ch2 .dc2-fam { min-width: 0; padding: 10px 12px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--lane); }
.declic-ch2 .dc2-fam-h { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .95rem; }
.declic-ch2 .dc2-fam-h b { min-width: 0; font: 700 .95rem/1.25 var(--title); color: var(--ink); }
.declic-ch2 .dc2-sq { flex: none; width: 20px; height: 20px; border-radius: var(--radius-sm); }
.declic-ch2 .dc2-sq.va { background: var(--va); }
.declic-ch2 .dc2-sq.nvao { background: var(--nvao); }
.declic-ch2 .dc2-sq.nva { background: var(--nva); }
.declic-ch2 .dc2-fam-sum { margin-left: auto; flex: none; font: 700 .84rem/1.2 var(--title); color: var(--soft); font-variant-numeric: tabular-nums; }
.declic-ch2 .dc2-fam-a { margin: 4px 0 8px 28px; font-size: .88rem; line-height: 1.4; color: var(--soft); }
.declic-ch2 .dc2-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.declic-ch2 .dc2-item details { background: var(--card); border: 1px solid var(--line); border: 1px solid var(--va); border-radius: var(--radius-sm); }
.declic-ch2 .dc2-item.nvao details { border-color: var(--nvao); }
.declic-ch2 .dc2-item.nva details { border-color: var(--nva); }
.declic-ch2 .dc2-item summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 7px 10px; cursor: pointer; list-style: none;
  font-size: .9rem; line-height: 1.35; border-radius: var(--radius-sm); }
.declic-ch2 .dc2-item summary::-webkit-details-marker { display: none; }
.declic-ch2 .dc2-item summary:focus-visible { outline-offset: -3px; }
.declic-ch2 .dc2-item summary::after { content: ""; flex: none; width: 7px; height: 7px; border-right: 2px solid var(--soft); border-bottom: 2px solid var(--soft);
  transform: rotate(45deg) translateY(-2px); transition: transform .15s ease; }
.declic-ch2 .dc2-item details[open] summary::after { transform: rotate(-135deg) translateX(-2px); }
.declic-ch2 .dc2-mk { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font: 700 .72rem/1 var(--title); }
.declic-ch2 .dc2-mk.ok { background: var(--ok-bg); color: var(--ink); }
.declic-ch2 .dc2-mk.bad { background: var(--bad-bg); color: var(--ink); }
.declic-ch2 .dc2-item-l { flex: 1; min-width: 0; }
.declic-ch2 .dc2-item-l em { display: inline-block; margin-left: 6px; padding: 3px 7px; border-radius: var(--pill); font: 700 .74rem/1 var(--body); font-style: normal;
  white-space: nowrap; background: var(--bad-bg); color: var(--ink); }
.declic-ch2 .dc2-item-l em.ok { background: var(--ok-bg); color: var(--ink); }
.declic-ch2 .dc2-item-t { flex: none; font: 700 .82rem/1 var(--title); color: var(--soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.declic-ch2 .dc2-item details p { margin: 0; padding: 0 12px 10px 38px; font-size: .88rem; line-height: 1.45; color: var(--soft); }
.declic-ch2 .dc2-bilan-actions { display: grid; }
.declic-ch2 .dc2-retry { width: 100%; }

/* ---------- Cadres plus larges ---------- */
@container (min-width: 400px) {
  .declic-ch2 .dc2-legend li:last-child { display: inline-flex; }
}
@container (min-width: 560px) {
  .declic-ch2 .dc2-next, .declic-ch2 .dc2-retry { width: auto; justify-self: start; }
  .declic-ch2 .dc2-bilan-actions { justify-items: start; }
  .declic-ch2 .dc2-score { justify-self: start; padding: 14px 22px 14px 16px; }
  .declic-ch2 .dc2-choice { min-height: 70px; font-size: 1.2rem; }
  .declic-ch2 .dc2-choice > span:not(.visually-hidden) { font-size: .8rem; }
  .declic-ch2 .dc2-task { font-size: 1.2rem; }
}
/* Grand cadre : la tâche à gauche, l’aide-mémoire (ouvert) à droite ; le bilan prend toute la largeur */
@container (min-width: 720px) {
  .declic-ch2 .dc2-in { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); column-gap: 24px; }
  .declic-ch2 .dc2-prev { grid-column: 1 / -1; }
  .declic-ch2 .dc2-stage { grid-column: 1; }
  .declic-ch2 .dc2-aide { grid-column: 2; }
  .declic-ch2 .dc2.is-bilan .dc2-stage { grid-column: 1 / -1; }
  .declic-ch2 .dc2-fams { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@supports not (container-type: inline-size) {
  @media (min-width: 960px) {
    .declic-ch2 .dc2-in { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); column-gap: 24px; }
    .declic-ch2 .dc2-prev { grid-column: 1 / -1; }
    .declic-ch2 .dc2-stage { grid-column: 1; }
    .declic-ch2 .dc2-aide { grid-column: 2; }
    .declic-ch2 .dc2.is-bilan .dc2-stage { grid-column: 1 / -1; }
    .declic-ch2 .dc2-next, .declic-ch2 .dc2-retry { width: auto; }
  }
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  .declic-ch2 *, .declic-ch2 *::after { transition: none !important; animation: none !important; }
}
.declic-ch2 .dc2-rm *, .declic-ch2 .dc2-rm *::after { transition: none !important; animation: none !important; }

/* ---------- Charte V2 (CHARTE-V2.md) : VA vert, NVAO jaune, NVA rouge, toujours avec leur sigle ;
   pas d’ombre ni d’opacité ; la bonne et la mauvaise réponse gardent leur coche ou leur croix ---------- */
.declic-ch2 .dc2-prev { background: var(--white); border: 1px solid var(--line-strong); color: var(--ink); }
.declic-ch2 .dc2-meter { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.declic-ch2 .dc2-bar { border-radius: var(--pill); }
.declic-ch2 .dc2-sw { border-radius: 50%; }
.declic-ch2 .dc2-pic { border-radius: 50%; background: var(--white); border: 1px solid var(--line-strong); }
.declic-ch2 .dc2-card[data-kind="va"] .dc2-pic { background: var(--vm); color: var(--ink); border-color: var(--vf); }
.declic-ch2 .dc2-card[data-kind="nvao"] .dc2-pic { background: var(--jm); color: var(--ink); border-color: var(--jf); }
.declic-ch2 .dc2-card[data-kind="nva"] .dc2-pic { background: var(--rm); color: var(--ink); border-color: var(--rf); }
.declic-ch2 .dc2-time { background: var(--white); border: 1px solid var(--line); }
.declic-ch2 .dc2-time svg { color: var(--ink); }
.declic-ch2 .dc2-choice { border-radius: var(--radius); box-shadow: none; color: #231f20; }
@media (hover: hover) {
  .declic-ch2 .dc2-choice:not([aria-disabled="true"]):hover { transform: none; box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--ink); }
}
.declic-ch2 .dc2-choice.is-dim { opacity: 1; background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.declic-ch2 .dc2-choice.is-wrong { opacity: 1; box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--rf); }
.declic-ch2 .dc2-choice.is-answer { box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--vf); }
.declic-ch2 .dc2-choice-mark { width: 24px; height: 24px; box-shadow: 0 0 0 2px var(--card); }
.declic-ch2 .is-answer .dc2-choice-mark { background: var(--vm); color: var(--ink); }
.declic-ch2 .is-wrong .dc2-choice-mark { background: var(--rm); color: var(--ink); }
.declic-ch2 .dc2-verdict { border: 1px solid; border-radius: var(--radius); }
.declic-ch2 .dc2-verdict.ok { background: var(--vc); border-color: var(--vf); }
.declic-ch2 .dc2-verdict.bad { background: var(--rc); border-color: var(--rf); }
.declic-ch2 .dc2-v-t svg { box-sizing: content-box; width: 16px; height: 16px; padding: 3px; border-radius: 50%; }
.declic-ch2 .dc2-verdict.ok .dc2-v-t svg { background: var(--vm); }
.declic-ch2 .dc2-verdict.bad .dc2-v-t svg { background: var(--rm); }
.declic-ch2 .dc2-aide { border-color: var(--bf); background: var(--bf-c); }
.declic-ch2 .dc2-aide-ico { border-radius: 50%; background: var(--bf-m); color: var(--ink); }
.declic-ch2 .dc2-aide-body { border-top-color: var(--bf); }
.declic-ch2 .dc2-score { background: var(--white); border: 1px solid var(--line-strong); }
.declic-ch2 .dc2-score.is-top { background: var(--vc); border-color: var(--vf); }
.declic-ch2 .dc2-lesson { background: var(--vc); border: 1px solid var(--vf); }
.declic-ch2 .dc2-fam { background: var(--white); border-color: var(--line-strong); }
.declic-ch2 .dc2-sq { border-radius: 50%; }
.declic-ch2 .dc2-item details { border-radius: var(--radius-sm); border-color: var(--vf); }
.declic-ch2 .dc2-item.nvao details { border-color: var(--jf); }
.declic-ch2 .dc2-item.nva details { border-color: var(--rf); }
.declic-ch2 .dc2-item summary { border-radius: var(--radius-sm); }
.declic-ch2 .dc2-mk.ok { background: var(--vm); }
.declic-ch2 .dc2-mk.bad { background: var(--rm); }
.declic-ch2 .dc2-item-l em { background: var(--rm); }
.declic-ch2 .dc2-item-l em.ok { background: var(--vm); }