/* --- 1. la lecture --------------------------------------------------------------------------------- */
/* la ligne de lecture qui accompagne un volet : jaune, bordée de noir, lisible sur tout fond */
.dc-l-balayage { background: var(--dc-jaune); box-shadow: 0 0 0 1.5px var(--dc-noir); }
.dc-l-trame { background: #d9dadf; }
/* le panneau de l'histogramme des gris */
.dc-l-panneau { background: #ffffff; border-radius: 18px; box-shadow: var(--dc-ombre-carte); }
.dc-l-echelle { display: flex; justify-content: space-between; font-size: 16px; }
.dc-l-tige { background: var(--dc-noir); }
.dc-l-tete-seuil { background: var(--dc-jaune); border: 3px solid var(--dc-noir); border-radius: 50%; }
.dc-l-seuil { font-size: 19px; line-height: 1.3; font-weight: 700; }
/* la projection des lignes, et les bandes : un gris léger, le jaune reste au signal */
.dc-l-profil { font-size: 17px; white-space: nowrap; }
.dc-bande { background: rgba(24, 25, 27, 0.09); }
.dc-l-trait { background: var(--dc-noir); }
/* les chiffres détourés */
.dc-l-boite { border: 2px solid var(--dc-noir); border-radius: 4px; }
/* les gabarits et la carte du score */
.dc-l-gabarit { background: #ffffff; border-radius: 12px; box-shadow: var(--dc-ombre-carte); }
.dc-l-score { background: #ffffff; border-radius: 18px; box-shadow: var(--dc-ombre-carte); }
.dc-l-chiffre { font-variant-numeric: tabular-nums; }
.dc-l-jauge { background: var(--dc-gris-doux); border-radius: 6px; }
.dc-l-jauge-plein { background: var(--dc-noir); border-radius: 6px; }
.dc-l-cran { background: var(--dc-noir); }
.dc-l-essai { display: flex; justify-content: space-between; align-items: center; font-size: 16px; padding: 0 10px; border-radius: 13px; }
.dc-l-essai b { font-weight: 700; }
.dc-l-essai-meilleur { background: var(--dc-noir); color: var(--dc-carte); }
.dc-l-essai-meilleur b { color: var(--dc-jaune); }
.dc-l-accord { background: var(--dc-noir); border-radius: 14px; }
/* la reconnaissance : un cadre sur chaque chiffre, et le chiffre lu au-dessus */
.dc-l-cadre { border: 3px solid var(--dc-jaune); box-shadow: 0 0 0 1.5px var(--dc-noir), inset 0 0 0 1.5px var(--dc-noir); border-radius: 6px; }
.dc-l-lu { display: grid; place-items: center; border-radius: 10px; background: var(--dc-noir); color: var(--dc-carte); font: 700 23px/1 var(--dc-mono); }
.dc-l-souligne { background: var(--dc-noir); border-radius: 2px; }
/* les pastilles des colonnes, ① à ④ */
.dc-l-puce-col { justify-content: center; padding: 0 12px 0 6px; font-size: 16px; gap: 8px; }
.dc-l-num-col {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: var(--dc-jaune); color: var(--dc-noir); font: 700 14px/1 var(--dc-mono);
}
/* le rail des temps */
.dc-l-filet { background: var(--dc-gris-clair); }
.dc-l-filet-noir { background: var(--dc-noir); }
.dc-l-marque { background: var(--dc-jaune); box-shadow: 0 0 0 2px var(--dc-noir); }
.dc-l-rail-tete { display: flex; align-items: baseline; gap: 14px; white-space: nowrap; }
.dc-l-rail-num { font-size: 15px; font-weight: 700; }
.dc-l-rail-titre { font-size: 24px; }

/* --- 2. le tableau ----------------------------------------------------------------------------------- */
/* le calque de la recopie, qui devient le tableau de l'outil */
.dc-l-calque-opaque { background: #ffffff; border-radius: 10px; box-shadow: var(--dc-ombre-haute); }
.dc-l-entete-col { display: flex; align-items: center; justify-content: flex-end; gap: 8px; font: 700 17px/1 var(--dc-fonte); }
.dc-l-entete-num {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--dc-noir); color: #ffffff; font: 700 14px/1 var(--dc-mono);
}
.dc-l-recopie { text-align: right; font: 700 17px/22px var(--dc-fonte); color: var(--dc-noir); white-space: nowrap; transform-origin: 100% 50%; }
/* la tête de lecture qui passe sur chaque ligne de la capture : jaune, bordée de noir (le signal de la lecture) */
.dc-l-tete { background: var(--dc-jaune); box-shadow: 0 0 0 2px var(--dc-noir); border-radius: 3px; }
.dc-l-rang-lu { background: rgba(24, 25, 27, 0.1); border-radius: 8px; }
/* la ligne qui vole de la capture au tableau : un papier blanc et son ombre, qui se fondent dans le tableau une fois posés */
.dc-l-papier { background: #ffffff; border-radius: 8px; box-shadow: var(--dc-ombre-haute); }
.dc-l-doute { border: 2.5px dotted var(--dc-noir); border-radius: 16px; }
.dc-l-vide { border: 2.5px dashed var(--dc-noir); border-radius: 8px; transform-origin: 50% 50%; }
/* les temps forts : « 0,5 s », le bilan de la lecture sous le tableau, puis « 0 token » et le cadre fermé */
.dc-l-hero-sous { font-size: 32px; }
.dc-l-hero-fort { font-size: 46px; font-weight: 900; letter-spacing: -0.02em; white-space: nowrap; }
.dc-l-bilan { display: flex; flex-wrap: nowrap; gap: 12px; white-space: nowrap; }
.dc-l-bilan-pastille { position: relative; height: 52px; padding: 0 22px; font-size: 23px; gap: 10px; justify-content: center; transform-origin: 50% 50%; }
.dc-l-fermeture { background: var(--dc-jaune); border: 3px solid var(--dc-noir); border-radius: 50%; }

/* --- 3. la vérification ------------------------------------------------------------------------------ */
.dc-l-filet-compte { background: var(--dc-filet); }
.dc-l-ligne-compte { display: flex; justify-content: space-between; font-size: 17px; }
.dc-l-marqueur { background: var(--dc-jaune); box-shadow: 0 0 0 1.5px var(--dc-noir); border-radius: 2px; }
.dc-l-fini { height: 40px; padding: 0 18px; font-size: 17px; }
.dc-l-onde { border: 3px solid var(--dc-noir); border-radius: 50%; }
.dc-l-confirme { border: 2.5px solid var(--dc-noir); border-radius: 16px; }
.dc-l-badge { background: var(--dc-noir); border-radius: 50%; }
.dc-l-plein { border: 2.5px solid var(--dc-noir); border-radius: 8px; background: #ffffff; }
.dc-l-saisi { background: var(--dc-jaune); box-shadow: 0 0 0 1px var(--dc-noir); }
/* « tout est vérifié », le tampon qui tombe sur le coin du tableau */
.dc-l-tampon { height: 58px; padding: 0 26px 0 18px; font-size: 25px; gap: 12px; box-shadow: var(--dc-ombre-haute); }
.dc-l-tampon .dc-coche { flex: none; }