/* ==========================================================================
   Rapport-exemple de Léa (exemple-rapport.html, S4-02) : bandeau honnête, repère
   « exemple figé » du moment présent, CTA final. Jetons uniquement.
   ========================================================================== */

.sample-banner { display: grid; gap: 14px; max-width: 1080px; margin: 4px 16px 0; padding: 16px 18px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.sample-banner__lead { margin-top: 6px; font: 500 17px/1.4 var(--font-ui); color: var(--ink); }
.sample-banner__note { margin-top: 6px; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.sample-banner .btn { justify-self: stretch; }
@media (min-width: 720px) {
  .sample-banner { grid-template-columns: 1fr auto; align-items: center; gap: 24px; margin-inline: auto; width: calc(100% - 32px); }
  .sample-banner .btn { justify-self: end; }
}
@media (min-width: 1024px) { .sample-banner { width: calc(100% - 80px); } }

.now__frozen { margin: 0 0 14px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.now__frozen .tag { margin-right: 6px; vertical-align: 1px; }

.sample-cta { margin: 56px 0 0; padding: 56px 16px; text-align: center; background: var(--ink-block); color: var(--ink); }
.sample-cta .kicker { color: var(--accent-ink); }
.sample-cta h2 { margin: 12px auto 0; max-width: 18em; font: 500 clamp(30px, 6vw, 44px)/1.08 var(--font-display); }
.sample-cta p:not(.kicker) { margin: 14px auto 24px; max-width: 34em; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.sample-noscript { padding: 16px; text-align: center; font-size: 14px; }