/* Carapate / Garden Getaway : « la course du potager ». Feuilles qui tombent, potager en sillons,
   trois petites bêtes dessinées pour le site qui filent vers la grille, un dé qui roule. Rien sur la boîte. */
.sm--carapate {
  --sm-fond: #f2f3e2; --sm-fond-2: #f7f8ee; --sm-encre: #2a1f17; --sm-doux: #574536;
  --sm-accent: #4a661c; --sm-accent-fonce: #324612; --sm-carte: #fff;
  --sm-police: "Fredoka", var(--titre);
}
.sm--carapate .sm-ouverture { background: linear-gradient(#e6ecc8, #f2f3e2 75%); }
.sm--carapate h1 { font-weight: 700; }
.sm--carapate .sm-carte h2, .sm--carapate .sm-cote__titre { font-weight: 700; }
.cp-feuille { position: absolute; width: 1.6rem; height: 1rem; border-radius: 0 100% 0 100%; background: #9cb85a; opacity: 0.8; }
.cp-feuille--1 { left: 6%; top: 18%; } .cp-feuille--2 { left: 42%; top: 10%; background: #c9a53c; } .cp-feuille--3 { left: 94%; top: 30%; }
.cp-terre { fill: #8a6542; }
.cp-sillon { stroke: #6f4f31; stroke-width: 4; stroke-dasharray: 18 10; }
.cp-pousse path { fill: none; stroke: #4a661c; stroke-width: 3; stroke-linecap: round; }
.cp-pousse .cp-pousse__feuille { fill: #7fa83a; stroke: none; }
.cp-grille path { fill: none; stroke: #3b3b3b; stroke-width: 5; stroke-linecap: round; }
.cp-escargot__corps { fill: none; stroke: #b9895a; stroke-width: 9; stroke-linecap: round; }
.cp-escargot__coquille { fill: #e0a24a; stroke: #8a5a22; stroke-width: 3; }
.cp-escargot__spirale { fill: none; stroke: #8a5a22; stroke-width: 2.5; }
.cp-coccinelle__corps { fill: #d8322a; }
.cp-coccinelle__raie { stroke: #1d1d1d; stroke-width: 2; }
.cp-coccinelle__point, .cp-coccinelle__tete { fill: #1d1d1d; }
.cp-coureur--chenille circle { fill: #8cc152; stroke: #557a2a; stroke-width: 2; }
.cp-coureur--chenille .cp-chenille__tete { fill: #6fa83a; }
.cp-coureur--escargot { transform: translate(200px, 92px); }
.cp-coureur--coccinelle { transform: translate(420px, 120px); }
.cp-coureur--chenille { transform: translate(640px, 96px); }
.cp-de { position: absolute; left: clamp(1rem, 4vw, 3rem); top: 0.6rem; width: 2.6rem; aspect-ratio: 1; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: 0.35rem; background: #fff; border-radius: 0.5rem; box-shadow: 0 4px 0 #c9c3a8; }
.cp-de span { width: 0.45rem; aspect-ratio: 1; border-radius: 50%; background: #2a1f17; place-self: center; }
.cp-de span:nth-child(1) { grid-area: 1 / 1; } .cp-de span:nth-child(2) { grid-area: 2 / 2; } .cp-de span:nth-child(3) { grid-area: 3 / 3; }

@media (prefers-reduced-motion: no-preference) {
  .cp-feuille { animation: cp-feuille 9s ease-in-out infinite; }
  .cp-feuille--2 { animation-delay: -3s; } .cp-feuille--3 { animation-delay: -6s; }
  @keyframes cp-feuille { 0% { translate: 0 0; rotate: 0deg; opacity: 0; } 15% { opacity: 0.8; } 50% { translate: 2rem 5rem; rotate: 120deg; } 85% { opacity: 0.8; } 100% { translate: -1rem 10rem; rotate: 240deg; opacity: 0; } }
  .cp-coureur--escargot { animation: cp-escargot 18s linear infinite; }
  .cp-coureur--coccinelle { animation: cp-coccinelle 9s linear infinite; }
  .cp-coureur--chenille { animation: cp-chenille 13s linear infinite; }
  @keyframes cp-escargot { 0% { transform: translate(-40px, 92px); opacity: 0; } 5%, 92% { opacity: 1; } 100% { transform: translate(1040px, 92px); opacity: 0; } }
  @keyframes cp-coccinelle { 0% { transform: translate(-40px, 120px); opacity: 0; } 5%, 92% { opacity: 1; } 100% { transform: translate(1040px, 120px); opacity: 0; } }
  @keyframes cp-chenille { 0% { transform: translate(-40px, 96px); opacity: 0; } 5%, 92% { opacity: 1; } 100% { transform: translate(1040px, 96px); opacity: 0; } }
  .cp-de { animation: cp-de 4s ease-in-out infinite; }
  @keyframes cp-de { 0%, 70%, 100% { rotate: 0deg; translate: 0 0; } 78% { rotate: 90deg; translate: 0.6rem -0.8rem; } 86% { rotate: 180deg; translate: 1.2rem 0; } 92% { rotate: 200deg; translate: 1.2rem 0; } }
}