/* Mission Savane : « à la nuit tombée ». Ciel de crépuscule, soleil couchant, lucioles ; à l'horizon,
   trois cages dont les portes s'ouvrent tour à tour, une clé qui brille, un acacia et des herbes. Rien sur la boîte. */
.sm--mission-savane {
  --sm-fond: #fbf0d8; --sm-fond-2: #fbf4e6; --sm-encre: #2e2214; --sm-doux: #5c4630;
  --sm-accent: #874810; --sm-accent-fonce: #5f300a; --sm-carte: #fff;
  --sm-police: "Fredoka", var(--titre);
}
.sm--mission-savane .sm-ouverture { background: linear-gradient(#f7c98a 0%, #f6dcb0 45%, #fbf0d8 80%); }
.sm--mission-savane h1 { font-weight: 700; }
.sm--mission-savane .sm-carte h2, .sm--mission-savane .sm-cote__titre { font-weight: 700; }
.msv-soleil { position: absolute; left: 6%; bottom: clamp(5rem, 10vw, 7.5rem); width: clamp(5rem, 11vw, 8rem); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #ffd27a 0 55%, rgba(255, 168, 70, 0.35) 56% 70%, transparent 71%); }
.msv-luciole { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #fff6b0; box-shadow: 0 0 8px 3px rgba(255, 236, 140, 0.7); opacity: 0; }
.msv-luciole--1 { left: 8%; top: 30%; } .msv-luciole--2 { left: 3%; top: 45%; } .msv-luciole--3 { left: 40%; top: 18%; } .msv-luciole--4 { left: 97%; top: 40%; }
.msv-luciole--5 { left: 93%; top: 22%; } .msv-luciole--6 { left: 3%; top: 70%; } .msv-luciole--7 { left: 30%; top: 8%; } .msv-luciole--8 { left: 96%; top: 60%; }
.msv-sol { fill: #a8742f; }
.msv-acacia__tronc { fill: none; stroke: #3d2a14; stroke-width: 7; stroke-linecap: round; }
.msv-acacia__feuillage { fill: #3d2a14; }
.msv-cage__cadre { fill: rgba(61, 42, 20, 0.15); stroke: #3d2a14; stroke-width: 4; }
.msv-cage__porte path { stroke: #3d2a14; stroke-width: 3.5; }
.msv-cage__porte { transform-box: fill-box; transform-origin: left center; }
.msv-cle circle, .msv-cle path { fill: none; stroke: #f4b63a; stroke-width: 5; stroke-linecap: round; }
.msv-herbe { fill: none; stroke: #6b4a1d; stroke-width: 3; stroke-linecap: round; transform-box: fill-box; transform-origin: bottom; }

@media (prefers-reduced-motion: no-preference) {
  .msv-luciole { animation: msv-luciole 5s ease-in-out infinite; }
  .msv-luciole:nth-child(odd) { animation-duration: 6.5s; animation-delay: -2s; }
  .msv-luciole:nth-child(3n) { animation-delay: -3.5s; }
  @keyframes msv-luciole { 0%, 100% { opacity: 0; translate: 0 0; } 40%, 60% { opacity: 1; } 50% { translate: 12px -16px; } }
  .msv-cage__porte { animation: msv-ouvre 9s ease-in-out infinite; }
  .msv-cage--2 .msv-cage__porte { animation-delay: 1.5s; } .msv-cage--3 .msv-cage__porte { animation-delay: 3s; }
  @keyframes msv-ouvre { 0%, 15% { scale: 1 1; } 25%, 70% { scale: 0.08 1; } 80%, 100% { scale: 1 1; } }
  .msv-cle { animation: msv-cle 3s ease-in-out infinite; }
  @keyframes msv-cle { 50% { translate: 0 -6px; filter: drop-shadow(0 0 6px #ffd27a); } }
  .msv-herbe { animation: msv-vent 3.5s ease-in-out infinite alternate; }
  .msv-herbe--2 { animation-delay: -1.2s; } .msv-herbe--3 { animation-delay: -2.4s; }
  @keyframes msv-vent { from { rotate: -3deg; } to { rotate: 4deg; } }
}
@media (max-width: 52rem) { .msv-soleil { display: none; } }