/* Baaa-tle : « la course au pré ». Ciel lavande, nuages en course, colline et barrière du pré ;
   trois moutons dessinés pour le site trottent et sautillent vers la barrière. Rien sur la boîte. */
.sm--baaaa-tle {
  --sm-fond: #efedf8; --sm-fond-2: #f6f5fb; --sm-encre: #24213a; --sm-doux: #504b6b;
  --sm-accent: #4f4a7a; --sm-accent-fonce: #36325a; --sm-carte: #fff;
  --sm-police: "Fredoka", var(--titre);
}
.sm--baaaa-tle .sm-ouverture { background: linear-gradient(#dcd8f3, #efedf8 70%); }
.sm--baaaa-tle h1 { font-weight: 700; }
.sm--baaaa-tle .sm-carte h2, .sm--baaaa-tle .sm-cote__titre { font-weight: 700; }
.bt-nuage { position: absolute; height: 2.6rem; border-radius: 2rem; background: #fff; opacity: 0.85; }
.bt-nuage::before, .bt-nuage::after { content: ""; position: absolute; background: #fff; border-radius: 50%; }
.bt-nuage::before { width: 2.6rem; height: 2.6rem; left: 18%; top: -1.2rem; }
.bt-nuage::after { width: 1.9rem; height: 1.9rem; left: 52%; top: -0.8rem; }
.bt-nuage--1 { width: 9rem; top: 4.5rem; left: 4%; }
.bt-nuage--2 { width: 6.5rem; top: 9rem; left: 38%; opacity: 0.7; }
.bt-nuage--3 { width: 7.5rem; top: 3rem; right: 6%; opacity: 0.6; }
.bt-colline { fill: #b9d98c; }
.bt-herbe { fill: #8fc163; }
.bt-barriere path { fill: none; stroke: #8a5b33; stroke-width: 7; stroke-linecap: round; }
.bt-mouton__laine circle { fill: #fff; stroke: #c9c4dd; stroke-width: 1.5; }
.bt-mouton__tete { fill: #3b3550; }
.bt-mouton__oeil { fill: #fff; }
.bt-mouton__oreille { stroke: #3b3550; stroke-width: 5; stroke-linecap: round; }
.bt-mouton__pattes path { stroke: #3b3550; stroke-width: 4; stroke-linecap: round; }
.bt-mouton--1 { transform: translate(180px, 82px); }
.bt-mouton--2 { transform: translate(470px, 88px) scale(0.9); }
.bt-mouton--3 { transform: translate(760px, 80px) scale(1.05); }

@media (prefers-reduced-motion: no-preference) {
  .bt-nuage { animation: bt-nuage 26s linear infinite alternate; }
  .bt-nuage--2 { animation-duration: 34s; } .bt-nuage--3 { animation-duration: 30s; animation-direction: alternate-reverse; }
  @keyframes bt-nuage { to { translate: 4rem 0; } }
  .bt-mouton { animation: bt-course 12s linear infinite; }
  .bt-mouton--2 { animation-delay: -4s; } .bt-mouton--3 { animation-delay: -8s; }
  @keyframes bt-course {
    0% { transform: translate(-60px, 88px); opacity: 0; } 4% { opacity: 1; } 94% { opacity: 1; }
    10% { transform: translate(40px, 80px); } 15% { transform: translate(90px, 88px); }
    25% { transform: translate(190px, 80px); } 30% { transform: translate(240px, 88px); }
    40% { transform: translate(340px, 80px); } 45% { transform: translate(390px, 88px); }
    55% { transform: translate(490px, 80px); } 60% { transform: translate(540px, 88px); }
    70% { transform: translate(640px, 80px); } 75% { transform: translate(690px, 88px); }
    85% { transform: translate(800px, 80px); } 90% { transform: translate(860px, 88px); }
    100% { transform: translate(1000px, 86px); opacity: 0; }
  }
}
@media (max-width: 52rem) { .bt-nuage--2 { display: none; } .bt-nuage--1 { top: 1.2rem; width: 6rem; left: -1.5rem; } .bt-nuage--3 { top: 1.6rem; width: 5rem; right: -1.5rem; } }