@media (max-width: 520px) { .act > header { grid-template-columns: auto minmax(0, 1fr); } .composte { grid-column: 1 / -1; grid-row: 3; justify-self: start; margin-top: 8px; } .entracte { gap: 14px; } .entracte .titre { font-size: 2.1rem; } }
@media (max-width: 520px) { .act { padding: 18px; } .act .num { width: 64px; height: 64px; font-size: 2.2rem; } .act h2 { font-size: 1.8rem; } body { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } .reel-btn small { max-width: 16ch; } }
@media (prefers-reduced-motion: reduce) { body::after, .act .num, .act .num::before, .reel-menu, .choix span.focus::after, .cornet i, .sortie::after, .composte { animation: none !important; } }
/* Doigt plutôt que souris : des cibles d'au moins 44 px (les points de la réclame gardent leur taille, seule la zone à toucher grandit). */
@media (hover: none), (pointer: coarse) {
  .composte { min-height: 44px; }
  .faq details { padding: 3px 0; }
  .faq summary, .manual summary { padding-block: 10px; }
  .rb-gestes label { min-height: 44px; padding-block: 10px; }
  .reel-menu a { padding: 12px; }
  .r-dots { gap: 0; }
  .r-dots button { box-sizing: border-box; width: 30px; height: 30px; padding: 10px; background-clip: content-box; }
  .r-dots button.r-pause { min-height: 44px; padding: 0 14px; }
}