/* certifs-banner.css — bannière de la page Certifications, v2 (2026-10-15).
   Gauche : 3 chiffres clés. Droite : légende des étoiles en répartition
   par niveau (barre + nombre). Sans bordures : zones séparées par le fond. */
.ng-info-banner.cb {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(18px, 3vw, 34px);
    align-items: stretch;
    padding: clamp(18px, 3vw, 28px);
    border-radius: 28px;
}

/* ── Chiffres ── */
.cb-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cb-stat {
    position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px;
    min-height: 150px; padding: 16px 16px 18px; border-radius: 20px;
    background: var(--pro-s2, var(--ng-inner)); overflow: hidden;
}
.cb-stat::after {
    content: ''; position: absolute; inset: auto -30% -55% auto; width: 140px; height: 140px; border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--ng-accent, #2f4cf0) 18%, transparent), transparent 70%);
    pointer-events: none; transition: transform .5s ease;
}
.cb-stat:hover::after { transform: scale(1.25); }
.cb-stat-ic {
    position: absolute; top: 14px; left: 14px; display: grid; place-items: center;
    width: 34px; height: 34px; border-radius: 11px;
    background: color-mix(in srgb, var(--ng-accent, #2f4cf0) 12%, transparent); color: var(--ng-accent, #2f4cf0);
}
.cb-stat-ic svg { width: 17px; height: 17px; }
.cb-stat-num { font-size: clamp(34px, 4.4vw, 50px); font-weight: 700; line-height: 1; letter-spacing: -.04em; color: var(--ng-heading); font-variant-numeric: tabular-nums; }
.cb-stat-label { font-size: 13px; color: var(--ng-t55); }

/* ── Légende / répartition ── */
.cb-legend { display: flex; flex-direction: column; gap: 12px; padding: 4px 2px; min-width: 0; }
.cb-legend-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cb-legend-sub { font-size: 12px; color: var(--ng-t45); }
.cb-levels { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.cb-level {
    display: grid; grid-template-columns: 74px minmax(84px, auto) minmax(40px, 1fr) 26px; align-items: center; gap: 12px;
    padding: 9px 12px; border-radius: 12px; transition: background .2s ease;
}
.cb-level:hover { background: var(--pro-s2, var(--ng-inner)); transform: none; }
.cb-level-stars { display: flex; gap: 2px; }
.cb-level-name { font-size: 13.5px; font-weight: 600; color: var(--ng-heading); white-space: nowrap; }
.cb-level-bar { position: relative; height: 6px; border-radius: 99px; background: var(--pro-s2, var(--ng-inner)); overflow: hidden; }
.cb-level:hover .cb-level-bar { background: var(--pro-s1, var(--ng-inner)); }
.cb-level-bar i {
    position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); border-radius: inherit;
    background: linear-gradient(90deg, #fbbf24, #f59e0b);
    transform-origin: left; animation: cbGrow 1s cubic-bezier(.2, .8, .2, 1) .25s both;
}
.cb-level-n { font-size: 13px; font-weight: 600; text-align: right; color: var(--ng-t65); font-variant-numeric: tabular-nums; }
.cb-level.is-empty .cb-level-name, .cb-level.is-empty .cb-level-n { color: var(--ng-t40); }
@keyframes cbGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (max-width: 900px) {
    .ng-info-banner.cb { grid-template-columns: minmax(0, 1fr); }
    .cb-stat { min-height: 124px; }
}
@media (max-width: 520px) {
    .cb-stats { gap: 8px; }
    .cb-stat { min-height: 112px; padding: 12px 12px 14px; border-radius: 16px; }
    .cb-stat-ic { top: 10px; left: 10px; width: 28px; height: 28px; border-radius: 9px; }
    .cb-stat-ic svg { width: 14px; height: 14px; }
    .cb-stat-label { font-size: 12px; }
    .cb-level { grid-template-columns: 66px minmax(0, 1fr) 48px 22px; gap: 9px; padding: 8px 6px; }
    .cb-level-name { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
    .cb-level-bar i { animation: none; }
}