/* =====================================================================
   Fichly · White Belt Lean en 1 h — styles du test final (agent TEST-ATTESTATION)
   Classes préfixées wt- (assets/test.js). Jetons de fichly.css (clair et sombre),
   SANS VIOLET. Mobile d’abord (375 px) : zones tactiles ≥ 44 px, pas de défilement
   horizontal. Réutilise .q-choice, .q-letter, .btn, .callout de fichly.css.
   ===================================================================== */
.wt { max-width: 760px; margin: 16px auto 0; display: grid; gap: 16px; min-width: 0; }
.wt-panel { min-width: 0; padding: 20px 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
@media (min-width: 560px) { .wt { margin-top: 24px; } .wt-panel { padding: 26px 28px; } }

/* Petite étiquette au-dessus des titres */
.wt-k { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 700 .76rem/1.3 var(--title); letter-spacing: .06em; text-transform: uppercase; color: var(--soft); }
.wt-k svg { flex: none; width: 20px; height: 20px; color: var(--ink); }
.wt-k.is-ok, .wt-k.is-ok svg { color: var(--ink); }
.wt-lead { margin: 0; font-size: 1.02rem; line-height: 1.6; color: var(--ink); max-width: 62ch; }
.wt-sub { margin: 0 0 14px; color: var(--soft); font-size: .95rem; }

/* ---------- Accueil du test ---------- */
.wt-intro { border-top: 6px solid var(--brand-fill); }
.wt-facts { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.wt-facts li { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; background: var(--lane); border-radius: var(--radius-sm); font: 700 .88rem/1.3 var(--title); color: var(--soft); }
.wt-facts b { flex: none; display: inline-flex; align-items: center; font: 700 1.15rem/1 var(--title); color: var(--navy); }
.wt-facts b svg { width: 22px; height: 22px; color: var(--ink); }
@media (min-width: 640px) { .wt-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } .wt-facts li { flex-direction: column; align-items: flex-start; gap: 4px; } }
.wt-info { margin: 16px 0 0; }
.wt-how { margin: 16px 0 0; color: var(--soft); font-size: .93rem; line-height: 1.55; }
.wt-actions { margin-top: 18px; }
@media (max-width: 560px) { .wt-actions { flex-direction: column; } .wt-actions .btn { width: 100%; } }

/* ---------- Une question ---------- */
.wt-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.wt-count { font: 700 .9rem/1.3 var(--title); color: var(--soft); }
.wt-count b { color: var(--navy); }
.wt-chip {
  display: inline-flex; align-items: center; gap: 7px; max-width: 100%; min-width: 0; padding: 6px 10px; border-radius: var(--radius-sm);
  background: var(--lane); color: var(--ink); font: 700 .76rem/1.25 var(--title);
}
.wt-chip::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: var(--pill); background: var(--module); }
.wt-bar { margin: 12px 0 0; height: 8px; border-radius: var(--pill); background: var(--lane); overflow: hidden; }
.wt-bar > span { display: block; height: 100%; border-radius: var(--pill); background: var(--brand-fill); transition: width .3s ease; }
.wt-q { margin: 18px 0 14px; font: 700 clamp(1.08rem, 1rem + .5vw, 1.3rem)/1.45 var(--title); color: var(--navy); }
.wt-q:focus { outline: none; }
.wt-choices .q-choice { min-height: 52px; align-items: center; }
.wt-choices .q-choice > span:last-child { min-width: 0; }
.wt-nav { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; margin-top: 18px; }
.wt-nav .btn { width: 100%; padding-left: 12px; padding-right: 12px; }
/* Téléphone : « Précédente » en flèche seule (le libellé reste lu par les lecteurs d’écran) */
@media (max-width: 559px) {
  .wt-prev { width: 52px; padding: 0; }
  .wt-prev-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}
@media (min-width: 560px) { .wt-nav { display: flex; justify-content: space-between; } .wt-nav .btn { width: auto; padding-left: 22px; padding-right: 22px; } }
.wt-hint { margin: 10px 0 0; min-height: 1.4em; color: var(--soft); font-size: .88rem; }
.wt-hint:empty { visibility: hidden; }

/* ---------- Résultat ---------- */
.wt-res { position: relative; border-top: 6px solid var(--f-jaune); }
.wt-res.is-pass { border-top-color: var(--f-vert); }
.wt-score { display: flex; align-items: baseline; gap: 2px; margin: 0 0 8px; font-family: var(--title); color: var(--navy); }
.wt-score b { font-size: clamp(3rem, 2.4rem + 3vw, 4.2rem); font-weight: 700; line-height: 1; }
.wt-score span { font-size: 1.5rem; font-weight: 700; color: var(--soft); }
.wt-res .wb-h1 { margin-bottom: 8px; }
.wt-cells { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; max-width: 420px; }
/* Bonne ou mauvaise réponse : couleur ET symbole (✓ / ✕), lisible aussi sans distinguer le rouge du vert.
   Symboles décoratifs : chaque case porte déjà son texte pour les lecteurs d’écran. */
.wt-cells li { height: 18px; border-radius: var(--pill); display: grid; place-items: center; color: var(--on-fill); font: 700 .7rem/1 var(--title); }
.wt-cells li.is-ok, .wt-dot.is-ok { background: var(--va); }
.wt-cells li.is-ko, .wt-dot.is-ko { background: var(--nva); }
.wt-cells li.is-ok::before, .wt-dot.is-ok::before { content: "✓"; }
.wt-cells li.is-ko::before, .wt-dot.is-ko::before { content: "✕"; }
.wt-cells-note { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 0; font-size: .82rem; color: var(--soft); }
.wt-dot { display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: var(--pill); color: var(--on-fill); font: 700 .6rem/1 var(--title); }
.wt-dot + .wt-dot, .wt-cells-note .wt-dot:not(:first-child) { margin-left: 10px; }
.wt-best { margin: 12px 0 0; color: var(--soft); font-size: .92rem; }
.wt-acquise { display: flex; align-items: flex-start; gap: 8px; margin: 16px 0 0; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--ok-bg); color: var(--ink); font-weight: 700; font-size: .92rem; line-height: 1.45; }
.wt-acquise svg { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.wt-best b { color: var(--navy); font-family: var(--title); }

/* Chapitres à revoir (boutons data-chapitre : la coquille ouvre le chapitre) */
.wt-chs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wt-ch {
  width: 100%; min-height: 64px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 10px 12px; background: var(--card); border: 1.5px solid var(--line); border-left: 5px solid var(--module); border-radius: var(--radius-sm);
  color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s ease;
}
.wt-ch:hover { border-color: var(--blue); border-left-color: var(--module); }
.wt-ch-body { min-width: 0; }
.wt-ch-k { display: block; font: 700 .76rem/1.3 var(--title); color: var(--soft); }
.wt-ch-t { display: block; font: 700 .98rem/1.3 var(--title); color: var(--navy); }
.wt-ch-go { display: inline-flex; align-items: center; gap: 4px; font: 700 .85rem/1 var(--title); color: var(--ink); }
.wt-ch-go svg { width: 16px; height: 16px; }
@media (max-width: 400px) { .wt-ch-go { font-size: 0; gap: 0; } .wt-ch-go svg { width: 20px; height: 20px; } }

/* Réponses corrigées */
.wt-rev { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.wt-rev-item { min-width: 0; padding: 14px; border: 1px solid var(--line); border-left: 5px solid var(--nva); border-radius: var(--radius-sm); background: var(--card); }
.wt-rev-item.is-ok { border-left-color: var(--va); }
.wt-rev-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin-bottom: 8px; }
.wt-rev-n { display: inline-flex; align-items: center; gap: 6px; font: 700 .78rem/1.3 var(--title); letter-spacing: .04em; text-transform: uppercase; color: var(--soft); }
.wt-rev-n svg { flex: none; width: 18px; height: 18px; padding: 3px; border-radius: 50%; }
.is-ok .wt-rev-n svg { background: var(--va); color: var(--on-fill); }
.is-ko .wt-rev-n svg { background: var(--nva); color: var(--on-fill); }
.wt-rev-q { margin: 0 0 8px; font: 700 .98rem/1.45 var(--title); color: var(--navy); }
.wt-rev-a { margin: 4px 0 0; font-size: .93rem; line-height: 1.5; }
.wt-rev-a span { font-weight: 700; }
.wt-rev-a.is-ko span { color: var(--ink); }
.wt-rev-a.is-ok span { color: var(--ink); }
.wt-rev-why { margin: 10px 0 0; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--clair-bg); font-size: .92rem; line-height: 1.55; }

/* Toutes les réponses */
.wt-all { padding: 4px 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.wt-all summary { min-height: 48px; display: flex; align-items: center; gap: 8px; cursor: pointer; font: 700 .98rem/1.3 var(--title); color: var(--ink); list-style: none; }
/* display: flex masque le triangle natif : un chevron le remplace (comme les dépliants des déclics) */
.wt-all summary::-webkit-details-marker { display: none; }
.wt-all summary::after {
  content: ""; flex: none; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform .15s ease;
}
.wt-all[open] > summary::after { transform: rotate(-135deg); }
.wt-all[open] summary { margin-bottom: 8px; }
.wt-all .wt-rev { padding-bottom: 14px; }
@media (min-width: 560px) { .wt-all { padding: 4px 28px; } }

@media (prefers-reduced-motion: reduce) {
  .wt-bar > span, .wt-ch, .wt-all summary::after { transition: none; }
}

/* =====================================================================
   Charte V2 (CHARTE-V2.md) : encarts sans ombre, pilules, points pour les données,
   le sens (bonne ou mauvaise réponse) toujours porté par un symbole ou un mot.
   ===================================================================== */
.wt-panel { border-color: var(--line-strong); }
.wt-intro { border: 1px solid var(--bf); background: var(--bf-c); }
.wt-k svg { color: var(--ink); }
.wt-k.is-ok svg { box-sizing: content-box; width: 14px; height: 14px; padding: 3px; border-radius: 50%; background: var(--vm); }
.wt-facts li { background: var(--white); border: 1px solid var(--line); }
.wt-facts b svg { color: var(--ink); }
.wt-chip { padding: 4px 12px 4px 4px; border-radius: var(--pill); background: var(--module-c); border: 1px solid var(--module); }
.wt-chip::before { width: 16px; height: 16px; border-radius: 50%; background: var(--module); }
.wt-bar { height: 8px; border-radius: var(--pill); background: var(--line); }
.wt-bar > span { border-radius: var(--pill); background: var(--bf); }
/* Résultat : encart jaune (à retenir) ou vert (réussi) */
.wt-res { border: 1px solid var(--jf); background: var(--jc); }
.wt-res.is-pass { border-color: var(--vf); background: var(--vc); }
.wt-score span { color: var(--ink); }
/* Les 10 réponses en points : plein = juste (✓), contour rouge = fausse (✕) */
.wt-cells { gap: 8px; max-width: 400px; }
.wt-cells li { height: auto; aspect-ratio: 1; border-radius: 50%; color: #231f20; font-size: .78rem; }
.wt-cells li.is-ok, .wt-dot.is-ok { background: var(--vf); }
.wt-cells li.is-ko, .wt-dot.is-ko { background: var(--rm); box-shadow: inset 0 0 0 2px var(--rf); color: var(--ink); }
.wt-dot { width: 18px; height: 18px; border-radius: 50%; color: #231f20; }
.wt-dot.is-ko { color: var(--ink); }
.wt-acquise { background: var(--vc); border: 1px solid var(--vf); color: var(--ink); font-weight: 700; }
.wt-acquise svg { box-sizing: content-box; width: 14px; height: 14px; padding: 3px; border-radius: 50%; background: var(--vm); }
.wt-ch { background: var(--module-c); border: 1px solid var(--module); }
.wt-ch:hover { border-color: var(--module); box-shadow: 0 0 0 3px var(--module-m); }
.wt-ch-k { font-weight: 400; }
.wt-rev-item { border: 1px solid var(--rf); background: var(--rc); border-radius: var(--radius); }
.wt-rev-item.is-ok { border-color: var(--vf); background: var(--vc); }
.wt-rev-n svg { width: 20px; height: 20px; }
.is-ok .wt-rev-n svg { background: var(--vm); color: var(--ink); }
.is-ko .wt-rev-n svg { background: var(--rm); color: var(--ink); }
.wt-rev-why { background: var(--white); border: 1px solid var(--line); }
.wt-all { border-color: var(--line-strong); }
.wt-all summary { color: var(--brand); }