/* Landing Remap — styles de page (portés de « Remap Landing v3.dc.html »).
   Les styles de composition restent inline dans le HTML, fidèles au design ;
   ici : fond, animations, et adaptations responsive absentes du canvas. */

body { margin: 0; background: #0e0f18; }
a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-accent-400); }
input[type=range] { accent-color: #9184d9; }
[hidden] { display: none !important; }

@keyframes rmpSweepA { 0%,100% { transform: rotate(-26deg) } 50% { transform: rotate(-6deg) } }
@keyframes rmpSweepB { 0%,100% { transform: rotate(14deg) } 50% { transform: rotate(-14deg) } }
@keyframes rmpSweepC { 0%,100% { transform: rotate(28deg) } 50% { transform: rotate(4deg) } }
@keyframes rmpSweepD { 0%,100% { transform: rotate(-8deg) } 50% { transform: rotate(22deg) } }
@keyframes rmpSweepE { 0%,100% { transform: rotate(6deg) } 50% { transform: rotate(-22deg) } }
@keyframes rmpBreathe { 0%,100% { opacity: 0.55 } 50% { opacity: 0.95 } }
@keyframes rmpHaze { 0% { transform: translate3d(-3%,0,0) scale(1.05) } 100% { transform: translate3d(3%,2%,0) scale(1.12) } }
@keyframes rmpPool { 0%,100% { opacity: 0.35; transform: scaleX(0.9) } 50% { opacity: 0.7; transform: scaleX(1.1) } }
@keyframes rmpIn { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }

/* Responsive — le canvas est prévu pour 1280px ; en dessous on replie. */
@media (max-width: 980px) {
  .rmp-sim-grid, .rmp-photo-grid, .rmp-price-grid { grid-template-columns: 1fr !important; }
  .rmp-sim-viz { border-right: none !important; }
  .rmp-db-head { grid-template-columns: 1fr !important; }
  .rmp-checkout-grid { grid-template-columns: 1fr !important; }
  .rmp-checkout-left { display: none !important; }
}
@media (max-width: 700px) {
  .rmp-hero-h1 { font-size: 42px !important; }
  .rmp-nav-links { display: none !important; }
  .rmp-hosts-grid { grid-template-columns: 1fr !important; }
  .rmp-hosts-grid > div { border-right: none !important; padding-left: 0 !important; }
  .rmp-section { padding-left: 22px !important; padding-right: 22px !important; }
  .rmp-table-wrap { overflow-x: auto; }
}