/* Accueil : exemple de trois fiches, un même calcul et trois décors */
.demo {
  display: grid; grid-template-columns: minmax(240px, 1fr) minmax(0, 1.6fr); gap: 32px; align-items: center;
  background: var(--carte); border: 1px solid var(--trait); border-radius: 12px; padding: 28px 32px;
}
.demo-texte h2 { font-size: 22px; margin: 0 0 8px; }
.demo-texte p { margin: 0 0 8px; max-width: 46ch; }
.feuilles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.feuille {
  position: relative; background: #ffffff; color: #1b1d22; border: 1px solid #d9dce3; border-radius: 4px;
  padding: 12px 12px 16px; font-size: 13px; line-height: 1.4; aspect-ratio: 210 / 260;
  box-shadow: 0 8px 20px rgba(42, 29, 69, .14); transform: rotate(var(--tourne));
  transition: transform .3s cubic-bezier(.16, 1, .3, 1);
}
.feuille:hover { transform: rotate(0deg) translateY(-4px); }
.feuille-tete { display: flex; justify-content: space-between; border-bottom: 1.5px solid #1b1d22; padding-bottom: 4px; margin-bottom: 8px; }
.feuille-theme { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; margin-bottom: 6px; }
.feuille p { margin: 0 0 10px; }
.feuille-calcul { font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
.feuille .tampon { position: absolute; right: 10px; bottom: 10px; color: #2e7d4f; }
.choix-principal { background: var(--action); border-color: var(--action); color: var(--sur-action); }
.choix-principal span { color: var(--sur-action); opacity: .85; }
.choix-principal:hover { background: var(--action-survol); border-color: var(--action-survol); }
@media (max-width: 1100px) { .demo { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .feuille { transition: none; } }