/* Rebuilt concept cards: one idea per card, two sentences, one big animated drawing, one check.
   Class colours are shared by every number drawing: unités teal, mille coral, millions violet, milliards gold. */
.rb-course {
  --rbv-unites: #10b3a3; --rbv-unites-soft: #d9f7f3;
  --rbv-mille: #ff6a55; --rbv-mille-soft: #ffe3de;
  --rbv-millions: #8b5cf6; --rbv-millions-soft: #ece4ff;
  --rbv-milliards: #f2a900; --rbv-milliards-soft: #fff1c9;
  --rbv-ink: #23202a; --rbv-right: #18a058; --rbv-wrong: #e0483d;
}

/* card layout */

/* check */

/* drawings */
.rb-course .rbv { margin: 0; display: grid; gap: 14px; justify-items: center; }
.rb-course .rbv figcaption { font-size: 16px; font-weight: 750; color: var(--rb-deep); text-align: center; }
.rb-course .rbv-number { display: inline-flex; align-items: center; gap: 5px; flex-wrap: nowrap; }
.rb-course .rbv-gap { display: inline-block; width: 12px; }
.rb-course .rbv-tile { display: inline-grid; place-items: center; width: clamp(32px, 3.4vw, 46px); height: clamp(42px, 4.4vw, 58px); border-radius: 12px; font-size: clamp(22px, 2.4vw, 32px); font-weight: 900; color: #ffffff; font-variant-numeric: tabular-nums; box-shadow: 0 4px 0 rgba(35, 32, 42, .18); animation: rbv-drop .45s cubic-bezier(.2, 1.4, .4, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }
.rb-course .rbv-tile.is-unites { background: var(--rbv-unites); }
.rb-course .rbv-tile.is-mille { background: var(--rbv-mille); }
.rb-course .rbv-tile.is-millions { background: var(--rbv-millions); }
.rb-course .rbv-tile.is-milliards { background: var(--rbv-milliards); }
.rb-course .rbv-tile.is-same { outline: 3px solid var(--rbv-right); outline-offset: 2px; }
.rb-course .rbv-tile.is-decide { transform: scale(1.18); outline: 4px solid #ffcf3f; outline-offset: 3px; animation: rbv-drop .45s cubic-bezier(.2, 1.4, .4, 1) both, rbv-pulse 1.4s ease 1.2s infinite; animation-delay: calc(var(--i, 0) * 70ms), 1.2s; }
.rb-course .rbv-tile.is-faded { opacity: .28; filter: grayscale(.6); }
.rb-course .rbv-tile.is-new { animation: rbv-pop .6s cubic-bezier(.2, 1.6, .4, 1) both 1.1s; }
.rb-course .rbv-tile.is-zero { animation-delay: calc(400ms + var(--i, 0) * 90ms); }
.rb-course .rbv-rows, .rb-course .rbv-scan, .rb-course .rbv-carry { display: grid; gap: 12px; justify-items: start; width: 100%; overflow-x: auto; padding: 6px 4px; }
.rb-course .rbv-row { position: relative; display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 18px; background: #ffffff; border: 2px solid #ece6f8; animation: rbv-rise .5s ease both; animation-delay: calc(var(--r, 0) * 250ms); }
.rb-course .rbv-row.is-win { border-color: #ffcf3f; box-shadow: 0 0 0 4px #fff3c4; }
.rb-course .rbv-count { display: grid; justify-items: center; min-width: 64px; padding: 4px 10px; border-radius: 14px; background: var(--rb-support); color: var(--rb-deep); }
.rb-course .rbv-count strong { font-size: 26px; line-height: 1; }
.rb-course .rbv-count small { font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.rb-course .rbv-crown { position: absolute; top: -16px; right: -10px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #ffcf3f; color: #7a4b00; font-size: 22px; box-shadow: 0 3px 0 #d9a400; animation: rbv-pop .6s cubic-bezier(.2, 1.6, .4, 1) both 1s; }
.rb-course .rbv-spaces { display: grid; gap: 12px; justify-items: center; }
.rb-course .rbv-stack { display: grid; justify-items: center; gap: 4px; }
.rb-course .rbv-stack small { font-weight: 900; color: var(--rb-deep); }
.rb-course .rbv-space { position: relative; display: inline-grid; place-items: center; width: 30px; height: 58px; border: 2px dashed #c9c2d6; border-radius: 10px; align-self: start; }
.rb-course .rbv-space span { position: absolute; top: 100%; font-size: 10px; font-weight: 900; color: var(--rbv-wrong); text-decoration: line-through; }
.rb-course .rbv-total { margin: 8px 0 0; font-size: 20px; font-weight: 800; }
.rb-course .rbv-total strong { color: var(--rb-deep); font-size: 30px; }
.rb-course .rbv-total s { color: var(--rbv-wrong); }
.rb-course .rbv-plus { display: flex; align-items: center; gap: 6px; padding-left: 14px; font-size: 24px; font-weight: 900; color: var(--rb-deep); }
.rb-course .rbv-arrow { font-style: normal; color: #ff8a00; animation: rbv-fade .3s ease both; animation-delay: calc(var(--i) * 90ms + 200ms); }
.rb-course .rbv-table { display: flex; gap: 8px; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; padding: 4px; }
.rb-course .rbv-class { border-radius: 16px; overflow: hidden; border: 3px solid; background: #ffffff; min-width: 0; }
.rb-course .rbv-class.is-unites { border-color: var(--rbv-unites); } .rb-course .rbv-class.is-unites header { background: var(--rbv-unites); }
.rb-course .rbv-class.is-mille { border-color: var(--rbv-mille); } .rb-course .rbv-class.is-mille header { background: var(--rbv-mille); }
.rb-course .rbv-class.is-millions { border-color: var(--rbv-millions); } .rb-course .rbv-class.is-millions header { background: var(--rbv-millions); }
.rb-course .rbv-class.is-milliards { border-color: var(--rbv-milliards); } .rb-course .rbv-class.is-milliards header { background: var(--rbv-milliards); }
.rb-course .rbv-class header { padding: 6px 10px; color: #ffffff; font-weight: 900; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; text-align: center; }
.rb-course .rbv-class > div { display: flex; }
.rb-course .rbv-class span { display: grid; justify-items: center; gap: 2px; width: clamp(36px, 3.6vw, 50px); padding: 6px 0 10px; }
.rb-course .rbv-class span small { font-size: 12px; font-weight: 900; color: #8a8496; }
.rb-course .rbv-class span b { font-size: clamp(24px, 2.6vw, 34px); font-weight: 900; color: var(--rbv-ink); animation: rbv-drop .45s cubic-bezier(.2, 1.4, .4, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }
.rb-course .rbv-class.is-focus { background: repeating-linear-gradient(135deg, #fff 0 10px, var(--rbv-mille-soft) 10px 20px); box-shadow: 0 0 0 4px #ffcf3f; }
.rb-course .rbv-class.is-focus p { margin: 0; padding: 6px 8px; background: #ffcf3f; font-size: 13px; font-weight: 900; text-align: center; color: #5b3d00; }
.rb-course .rbv-class span.is-pick { background: #fff3c4; box-shadow: inset 0 0 0 3px #ffcf3f; }
.rb-course .rbv-class span.is-pick b { animation: rbv-pulse 1.4s ease 1s infinite; }
.rb-course .rbv-say, .rb-course .rbv-locate { margin: 0; padding: 12px 16px; border-radius: 16px; background: #ffffff; border: 2px dashed var(--rb-dominant); font-size: 18px; font-weight: 750; text-align: center; animation: rbv-rise .5s ease both .9s; }
.rb-course .rbv-say span { display: block; font-size: 11px; font-weight: 900; letter-spacing: .14em; color: var(--rb-deep); }
.rb-course .rbv-locate b { display: inline-grid; place-items: center; width: 34px; height: 40px; border-radius: 10px; color: #fff; }
.rb-course .rbv-locate b.is-mille { background: var(--rbv-mille); } .rb-course .rbv-locate b.is-millions { background: var(--rbv-millions); } .rb-course .rbv-locate b.is-unites { background: var(--rbv-unites); }
.rb-course .rbv-locate em { font-style: normal; color: var(--rb-deep); font-weight: 900; }
.rb-course .rbv-balance { position: relative; width: min(100%, 460px); }
.rb-course .rbv-balance svg { width: 100%; height: auto; }
.rb-course .rbv-stand, .rb-course .rbv-beam path { fill: none; stroke: var(--rb-deep); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.rb-course .rbv-beam circle { fill: #ffcf3f; }
.rb-course .rbv-beam .rbv-pan { fill: var(--rb-support); stroke-width: 4; }
.rb-course .rbv-beam { transform-origin: 160px 62px; animation: rbv-tilt 1.6s cubic-bezier(.3, 1.4, .5, 1) both .4s; }
.rb-course .rbv-pan-label { position: absolute; display: grid; justify-items: center; gap: 4px; text-align: center; }
.rb-course .rbv-pan-label small { font-size: 12px; font-weight: 800; color: var(--rb-deep); max-width: 170px; }
.rb-course .rbv-pan-label .rbv-tile { width: 24px; height: 32px; font-size: 18px; border-radius: 8px; }
.rb-course .rbv-pan-label.is-heavy { left: -2%; top: 74%; }
.rb-course .rbv-pan-label.is-light { right: -2%; top: 42%; }
.rb-course .rbv-bins { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; justify-content: center; }
.rb-course .rbv-bin { display: grid; gap: 8px; align-content: start; padding: 10px; border-radius: 18px; background: #ffffff; border: 2px solid #e6def7; animation: rbv-rise .5s ease both; animation-delay: calc(var(--r) * 300ms); }
.rb-course .rbv-bin header { display: grid; text-align: center; }
.rb-course .rbv-bin header strong { font-size: 14px; font-weight: 900; color: var(--rb-deep); text-transform: uppercase; letter-spacing: .08em; }
.rb-course .rbv-bin header small { font-weight: 800; color: #e08a00; }
.rb-course .rbv-bin > div { display: grid; gap: 6px; justify-items: center; }
.rb-course .rbv-bin .rbv-tile { width: 22px; height: 30px; font-size: 17px; border-radius: 7px; }
.rb-course .rbv-bin .rbv-gap { width: 5px; }
.rb-course .rbv-lt, .rb-course .rbv-bin-lt { font-size: 22px; font-weight: 900; color: #e08a00; align-self: center; font-style: normal; }
.rb-course .rbv-compare { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; }
.rb-course .rbv-sign { font-size: 44px; color: #e08a00; }

@keyframes rbv-drop { from { opacity: 0; transform: translateY(-18px) scale(.8); } to { opacity: 1; transform: none; } }
@keyframes rbv-pop { 0% { opacity: 0; transform: scale(.3); } 70% { transform: scale(1.2); } 100% { opacity: 1; transform: scale(1); } }
@keyframes rbv-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes rbv-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rbv-pulse { 0%, 100% { transform: scale(1.18); } 50% { transform: scale(1.3); } }
@keyframes rbv-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@keyframes rbv-tilt { from { transform: rotate(0deg); } to { transform: rotate(-12deg); } }
@media (prefers-reduced-motion: reduce) { .rb-course .rbv *, .rb-course .rbv-tile { animation: none !important; } }

/* fit: the drawing gets the wider column; tiles shrink with the card, never overflow it */
.rb-course .rbv-tile { width: clamp(24px, 3.1cqi, 44px); height: clamp(32px, 4cqi, 56px); font-size: clamp(18px, 2.3cqi, 30px); border-radius: 10px; }
.rb-course .rbv-class span { width: clamp(28px, 3.3cqi, 48px); }
.rb-course .rbv-class span b { font-size: clamp(20px, 2.4cqi, 32px); }
.rb-course .rbv-number { gap: 4px; }
.rb-course .rbv-gap { width: 8px; }
.rb-course .rbv-row { padding: 10px 12px; gap: 10px; }
.rb-course .rbv-rows, .rb-course .rbv-scan, .rb-course .rbv-carry { overflow: visible; padding-top: 18px; }
.rb-course .rbv-row.rbv-ticks { padding-block: 0; background: transparent; border-color: transparent; box-shadow: none; animation: none; }
.rb-course .rbv-tick { display: inline-grid; place-items: center; width: clamp(28px, 3.1cqi, 44px); font-size: 24px; font-weight: 900; color: var(--rbv-right); animation: rbv-fade .3s ease both; animation-delay: calc(var(--i) * 260ms + 600ms); }
.rb-course .rbv-tick.is-decide { color: #e08a00; font-size: 32px; }
.rb-course .rbv-tile { width: clamp(28px, 3.1cqi, 44px); height: clamp(36px, 4cqi, 56px); }
.rb-course .rbv-tile.is-faded { opacity: .35; filter: saturate(.5); }
.rb-course .rbv-scan .rbv-number { gap: 7px; }
.rb-course .rbv-scan .rbv-tile.is-same { outline-offset: 1px; }
/* balance v2: the heavy pan goes down, each number sits under its pan */
.rb-course .rbv-balance { width: min(100%, 480px); display: grid; gap: 4px; }
.rb-course .rbv-beam { transform-origin: 180px 46px; animation: rbv-tilt 1.6s cubic-bezier(.3, 1.4, .5, 1) both .4s; }
.rb-course .rbv-string { stroke-width: 2 !important; stroke: #b8a6e8 !important; }
.rb-course .rbv-pans { display: flex; justify-content: space-between; gap: 12px; }
.rb-course .rbv-pan-label { position: static; max-width: 48%; }
.rb-course .rbv-pan-label.is-heavy { order: 0; transform: translateY(18px); }
.rb-course .rbv-pan-label.is-light { order: 1; transform: translateY(-18px); }
.rb-course .rbv-pan-label .rbv-gap { width: 4px; }
/* bins v2: one row per length, smallest at the top */
.rb-course .rbv-bins { display: grid; gap: 6px; justify-items: stretch; width: 100%; }
.rb-course .rbv-bin { grid-template-columns: 110px 1fr; align-items: center; }
.rb-course .rbv-bin header { text-align: left; }
.rb-course .rbv-bin > div { display: flex; flex-wrap: wrap; gap: 8px; justify-items: start; align-items: center; }
.rb-course .rbv-bin-lt { justify-self: center; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
/* 4 classes (10 to 12 digits): headers shrink instead of being cut */
.rb-course .rbv-table:has(.rbv-class:nth-child(4)) .rbv-class header { font-size: 10px; letter-spacing: .04em; padding: 6px 4px; }
.rb-course .rbv-table:has(.rbv-class:nth-child(4)) .rbv-class span { width: clamp(24px, 2.6cqi, 40px); }
.rb-course .rbv-class header { white-space: nowrap; overflow: visible; }