/* --- 1. l'analyse en fast track : le fil des calculs, la carte noire du pont de la hausse ---------------- */
.dc-r-num { background: var(--dc-noir); color: var(--dc-carte); border-radius: 50%; font: 700 17px/34px var(--dc-mono); text-align: center; }
.dc-r-calc-q { font-weight: 700; font-size: 21px; line-height: 27px; letter-spacing: -0.01em; color: var(--dc-noir); }
.dc-r-calc-q .dc-n { white-space: nowrap; }
.dc-r-calc-r { font: 700 17px/24px var(--dc-mono); color: var(--dc-noir); white-space: nowrap; }
.dc-r-panneau { border-radius: 28px; }
/* ce qui se pose sur une carte noire sans en être l'enfant : les couleurs de la carte noire */
.dc-r-sur-noir { color: var(--dc-carte); }
.dc-r-sur-noir .dc-s-kicker { color: var(--dc-blanc-efface); }
.dc-r-sur-noir .dc-s-kicker b { color: var(--dc-carte); }
.dc-r-pont-ecart { font-size: 52px; text-align: right; color: var(--dc-carte); }
.dc-r-barre { border-radius: 6px 6px 0 0; }
.dc-r-barre-avant { background: #6f717a; }
.dc-r-barre-semaine { background: #d4d5da; }
.dc-r-marche { background: #a4a6ae; border-radius: 3px; }
.dc-r-marche-forte { background: var(--dc-carte); }
.dc-r-pont-val { font-weight: 900; font-size: 30px; letter-spacing: -0.02em; text-align: center; white-space: nowrap; }
.dc-r-pont-part { font-weight: 900; font-size: 30px; letter-spacing: -0.02em; text-align: center; white-space: nowrap; color: var(--dc-carte); }
.dc-r-pont-part-fort { font-size: 46px; color: var(--dc-jaune); }
.dc-r-pont-pt { font: 400 15px/1 var(--dc-mono); text-align: center; white-space: nowrap; color: var(--dc-blanc-doux); }
.dc-r-pont-nom { font: 400 13px/18px var(--dc-mono); letter-spacing: 0.08em; text-transform: uppercase; text-align: center; color: var(--dc-blanc-efface); }
.dc-r-pont-nom-fort { color: var(--dc-carte); font-weight: 700; }
.dc-r-onde-svg { pointer-events: none; }

/* --- 2. le plan héros : le verdict ------------------------------------------------------------------- */
.dc-r-fond { background: var(--dc-noir); border-radius: 32px; }
.dc-r-heros { border-radius: 32px; }
.dc-r-heros-l1 { font-size: 50px; color: var(--dc-carte); white-space: nowrap; }
.dc-r-heros-masque { overflow: hidden; }
.dc-r-heros-l2 { font-size: 146px; line-height: 164px; white-space: nowrap; }
.dc-r-lettre { display: inline-block; transform-origin: 0 100%; }
.dc-r-heros-ecart { font-size: 112px; color: var(--dc-carte); }
.dc-r-heros-legende { font-size: 19px; line-height: 1.35; color: var(--dc-blanc-doux); }
.dc-r-segment { border-radius: 8px; }
/* la légende de la barre, en ligne : sa teinte, son nom, sa part */
.dc-r-part { display: flex; align-items: center; gap: 12px; font-size: 20px; line-height: 34px; color: var(--dc-blanc-doux); white-space: nowrap; }
.dc-r-part-teinte { width: 16px; height: 16px; border-radius: 4px; flex: none; }
.dc-r-part-pc { font: 700 20px/1 var(--dc-mono); }
.dc-r-part-fort { color: var(--dc-carte); font-weight: 700; }
/* les deux lignes du verdict, cochées au trait */
.dc-r-heros-coche { background: var(--dc-carte); border-radius: 50%; }
.dc-r-heros-ligne-t { font-size: 28px; line-height: 1.3; color: var(--dc-blanc-doux); white-space: nowrap; }
.dc-r-heros-ligne-forte .dc-r-heros-ligne-t { font-size: 34px; line-height: 40px; color: var(--dc-carte); }

/* --- 3. l'image finale : la checklist, le message, le gain ------------------------------------------ */
/* la checklist */
.dc-r-filet-noir { background: var(--dc-noir); }
.dc-r-boite { background: var(--dc-noir); border-radius: 7px; }
.dc-r-boite-vide { border: 2.5px solid var(--dc-noir); border-radius: 7px; }
.dc-r-item { font-size: 18px; line-height: 24px; }
.dc-r-destinataire { height: 40px; padding: 0 16px 0 10px; font-size: 16px; gap: 6px; }
.dc-r-copier {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  background: var(--dc-noir); color: var(--dc-carte); border-radius: 26px; font-size: 20px; font-weight: 700;
}
.dc-r-onde { border: 3px solid var(--dc-noir); border-radius: 50%; }
/* le message prêt à partager */
.dc-r-msg-pret { font-size: 16px; color: var(--dc-gris-texte); }
.dc-r-copie { justify-content: center; font-size: 16px; height: 40px; gap: 7px; }
.dc-r-msg-boite { background: #f4f4f6; border-radius: 16px; }
.dc-r-msg-ligne { font-size: 18px; line-height: 27px; white-space: nowrap; color: var(--dc-noir); }
.dc-r-msg-fort { font-weight: 700; }
/* le gain, sur la carte noire de la preuve */
.dc-r-gain-label { font-size: 13px; color: var(--dc-blanc-efface); }
.dc-r-gain-avant { font-size: 64px; color: var(--dc-gris-fonce); }
.dc-r-gain-barre { background: var(--dc-carte); border-radius: 4px; }
.dc-r-gain-vingt { font-size: 160px; }
.dc-r-gain-source { font-size: 16px; line-height: 1.45; color: var(--dc-blanc-doux); }

/* --- 4. la construction (le product manager, les agents de code, le fichier, le volet, la fin) ---------- */
.dc-r-c-pm { font-size: 17px; }
.dc-r-agent { border-radius: 18px; }
.dc-r-agent-invite { font: 700 20px/1 var(--dc-mono); color: var(--dc-carte); }
.dc-r-agent-ligne { background: #6f717a; border-radius: 4px; }
.dc-r-agent-ligne-claire { background: #c8c9cf; }
.dc-r-fichier-ligne { background: #b9bbc3; border-radius: 4px; }
.dc-r-fichier-ligne-noire { background: var(--dc-noir); }
.dc-r-c-fichier { font-size: 26px; }
.dc-r-c-poste { font-size: 17px; }
.dc-r-c-puce { background: var(--dc-noir); border-radius: 50%; }
.dc-r-c-phrase { font-size: 31px; line-height: 1.16; }
.dc-r-fin-kicker { text-align: center; font-size: 17px; }
.dc-r-fin-titre { text-align: center; font-size: 96px; line-height: 1.0; }
.dc-r-fin-masque { overflow: hidden; }
.dc-r-fin-ligne { text-align: center; line-height: 100px; }
.dc-r-agent-curseur { background: var(--dc-carte); border-radius: 1px; }
.dc-r-c-sceau { background: var(--dc-carte); border-radius: 50%; border: 3px solid var(--dc-noir); }
.dc-r-fin-estampille { display: flex; justify-content: center; }
.dc-r-fin-estampille .dc-s-pastille { height: 70px; padding: 0 34px 0 32px; font-size: 28px; gap: 14px; }
.dc-r-fin-accent { color: var(--dc-jaune); font-size: 23px; font-weight: 700; letter-spacing: 0.12em; }
.dc-r-fin-boutons { display: flex; justify-content: center; gap: 18px; }
.dc-r-volet { background: var(--dc-noir); }