// figma node: 9472:3005 Component 4 (20 variants)
const __venc = (v) => String(v).replace(/[%|=]/g, encodeURIComponent);
const __vkey = (p) => "variant=" + __venc(p.variant) + '|' + "hover=" + __venc(p.hover);

export function Component4(_p = {}) {
  const props = { ..._p, variant: _p.variant ?? "1", hover: _p.hover ?? true };
  const __body0 = () => (
    <div className={props.className} style={{
      width: 382,
      height: 528.19,
      borderRadius: 16,
      position: "relative",
      ...props.style,
    }}>
      <div style={{
        position: "absolute",
        left: 0,
        top: 300,
        width: 382,
        minHeight: 120,
        borderTop: "1px solid rgb(229,231,235)",
        borderRight: "1px solid rgb(229,231,235)",
        borderBottom: "1px solid rgb(229,231,235)",
        borderLeft: "1px solid rgb(229,231,235)",
        display: "flex",
        flexDirection: "column",
        gap: 31.989999771118164,
        padding: "16px 16px 16px 16px",
        alignItems: "flex-start",
        flexWrap: "nowrap",
        boxSizing: "border-box",
      }}>
        <div style={{
          position: "relative",
          overflow: "hidden",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          flexWrap: "nowrap",
          flexShrink: 0,
          alignSelf: "stretch",
        }}>
          <span style={{
            position: "relative",
            fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
            fontWeight: 600,
            fontSize: 16,
            textAlign: "center",
            lineHeight: "21.600px",
            color: "rgb(31,41,55)",
            flexShrink: 0,
            whiteSpace: "pre-wrap",
          }}>{props.text1 ?? "On va où ?, l'application qui sécurise vos\ntrajets du quotidien"}</span>
        </div>
        <div style={{
          position: "relative",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          flexWrap: "nowrap",
          flexShrink: 0,
          alignSelf: "stretch",
        }}>
          <span style={{
            position: "relative",
            fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
            fontWeight: 400,
            fontSize: 14,
            textAlign: "center",
            whiteSpace: "nowrap",
            lineHeight: "24px",
            color: "rgb(107,114,128)",
            flexShrink: 0,
          }}>{props.text2 ?? "par Baltee"}</span>
        </div>
      </div>
      <div style={{
        position: "absolute",
        left: 0,
        top: 0,
        width: 382,
        height: 300,
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "flex-start",
        flexWrap: "nowrap",
      }}>
        <svg viewBox="0 0 382 300" fill="none" style={{
          position: "relative",
          overflow: "hidden",
          flexGrow: 1,
          alignSelf: "stretch",
        }}>
          <path d={"M 0 0 L 382 0 L 382 300 L 0 300 L 0 0 Z"} fill="currentColor" fillRule="nonzero" />
        </svg>
      </div>
      <div style={{
        position: "absolute",
        left: 0,
        top: 432.18,
        width: 382,
        height: 96,
        minHeight: 96,
        backgroundColor: "rgb(249,250,251)",
        borderTop: "1px solid rgb(229,231,235)",
        borderRight: "1px solid rgb(229,231,235)",
        borderBottom: "1px solid rgb(229,231,235)",
        borderLeft: "1px solid rgb(229,231,235)",
        display: "flex",
        flexDirection: "row",
        padding: "10px 16px 10px 16px",
        justifyContent: "center",
        alignItems: "center",
        flexWrap: "nowrap",
        boxSizing: "border-box",
      }}>
        <div style={{
          position: "relative",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          flexWrap: "nowrap",
          flexShrink: 0,
        }}>
          <div style={{
            position: "relative",
            display: "flex",
            flexDirection: "column",
            gap: -0.5,
            alignItems: "center",
            flexWrap: "nowrap",
            flexShrink: 0,
          }}>
            <span style={{
              position: "relative",
              fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
              fontWeight: 400,
              fontSize: 11,
              textAlign: "center",
              whiteSpace: "nowrap",
              lineHeight: "16.500px",
              color: "rgb(107,114,128)",
              flexShrink: 0,
            }}>{props.text3 ?? "Prix après subventions"}</span>
            <div style={{
              position: "relative",
              display: "flex",
              flexDirection: "row",
              justifyContent: "center",
              alignItems: "center",
              flexWrap: "nowrap",
              flexShrink: 0,
            }}>
              <span style={{
                position: "relative",
                fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
                fontWeight: 600,
                fontSize: 24,
                textAlign: "center",
                whiteSpace: "nowrap",
                lineHeight: "30px",
                color: "rgb(44,62,125)",
                flexShrink: 0,
              }}>{props.text4 ?? "11.99€"}</span>
            </div>
          </div>
          <span style={{
            position: "relative",
            fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
            fontWeight: 400,
            fontSize: 12,
            textAlign: "center",
            whiteSpace: "nowrap",
            lineHeight: "18px",
            color: "rgb(156,163,175)",
            flexShrink: 0,
          }}>Prix de référence : 11.99€</span>
        </div>
      </div>
      <svg width={382} height={528.190} viewBox="0 0 382 528.190" fill="none" style={{
        position: "absolute",
        left: 0,
        top: 0,
        width: 382,
        height: 528.19,
        opacity: 0.04,
        overflow: "hidden",
        borderRadius: 16,
        color: "rgb(85,89,117)",
      }}>
        <path d={"M 0 16 C 0 7.163 7.163 0 16 0 L 366 0 C 374.837 0 382 7.163 382 16 L 382 512.19 C 382 521.027 374.837 528.19 366 528.19 L 16 528.19 C 7.163 528.19 0 521.027 0 512.19 L 0 16 Z"} fill="currentColor" fillRule="nonzero" />
      </svg>
    </div>
  );
  const __body1 = () => (
    <div className={props.className} style={{
      width: 382,
      height: 528.19,
      borderRadius: 16,
      position: "relative",
      ...props.style,
    }}>
      <div style={{
        position: "absolute",
        left: 0,
        top: 300,
        width: 382,
        minHeight: 120,
        borderTop: "1px solid rgb(229,231,235)",
        borderRight: "1px solid rgb(229,231,235)",
        borderBottom: "1px solid rgb(229,231,235)",
        borderLeft: "1px solid rgb(229,231,235)",
        display: "flex",
        flexDirection: "column",
        gap: 31.989999771118164,
        padding: "16px 16px 16px 16px",
        alignItems: "flex-start",
        flexWrap: "nowrap",
        boxSizing: "border-box",
      }}>
        <div style={{
          position: "relative",
          overflow: "hidden",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          flexWrap: "nowrap",
          flexShrink: 0,
          alignSelf: "stretch",
        }}>
          <span style={{
            position: "relative",
            fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
            fontWeight: 600,
            fontSize: 16,
            textAlign: "center",
            lineHeight: "21.600px",
            color: "rgb(31,41,55)",
            flexShrink: 0,
            whiteSpace: "pre-wrap",
          }}>{props.text1 ?? "On va où ?, l'application qui sécurise vos\ntrajets du quotidien"}</span>
        </div>
        <div style={{
          position: "relative",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          flexWrap: "nowrap",
          flexShrink: 0,
          alignSelf: "stretch",
        }}>
          <span style={{
            position: "relative",
            fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
            fontWeight: 400,
            fontSize: 14,
            textAlign: "center",
            whiteSpace: "nowrap",
            lineHeight: "24px",
            color: "rgb(107,114,128)",
            flexShrink: 0,
          }}>{props.text2 ?? "par Baltee"}</span>
        </div>
      </div>
      <div style={{
        position: "absolute",
        left: 0,
        top: 0,
        width: 382,
        height: 300,
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "flex-start",
        flexWrap: "nowrap",
      }}>
        <svg viewBox="0 0 382 300" fill="none" style={{
          position: "relative",
          overflow: "hidden",
          flexGrow: 1,
          alignSelf: "stretch",
        }}>
          <path d={"M 0 0 L 382 0 L 382 300 L 0 300 L 0 0 Z"} fill="currentColor" fillRule="nonzero" />
        </svg>
      </div>
      <div style={{
        position: "absolute",
        left: 0,
        top: 432.18,
        width: 382,
        height: 96,
        minHeight: 96,
        backgroundColor: "rgb(249,250,251)",
        borderTop: "1px solid rgb(229,231,235)",
        borderRight: "1px solid rgb(229,231,235)",
        borderBottom: "1px solid rgb(229,231,235)",
        borderLeft: "1px solid rgb(229,231,235)",
        display: "flex",
        flexDirection: "row",
        padding: "10px 16px 10px 16px",
        justifyContent: "center",
        alignItems: "center",
        flexWrap: "nowrap",
        boxSizing: "border-box",
      }}>
        <div style={{
          position: "relative",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          flexWrap: "nowrap",
          flexShrink: 0,
        }}>
          <div style={{
            position: "relative",
            display: "flex",
            flexDirection: "column",
            gap: -0.5,
            alignItems: "center",
            flexWrap: "nowrap",
            flexShrink: 0,
          }}>
            <span style={{
              position: "relative",
              fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
              fontWeight: 400,
              fontSize: 11,
              textAlign: "center",
              whiteSpace: "nowrap",
              lineHeight: "16.500px",
              color: "rgb(107,114,128)",
              flexShrink: 0,
            }}>{props.text3 ?? "Prix après subventions"}</span>
            <div style={{
              position: "relative",
              display: "flex",
              flexDirection: "row",
              justifyContent: "center",
              alignItems: "center",
              flexWrap: "nowrap",
              flexShrink: 0,
            }}>
              <span style={{
                position: "relative",
                fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
                fontWeight: 600,
                fontSize: 24,
                textAlign: "center",
                whiteSpace: "nowrap",
                lineHeight: "30px",
                color: "rgb(44,62,125)",
                flexShrink: 0,
              }}>{props.text4 ?? "11.99€"}</span>
            </div>
          </div>
          <span style={{
            position: "relative",
            fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
            fontWeight: 400,
            fontSize: 12,
            textAlign: "center",
            whiteSpace: "nowrap",
            lineHeight: "18px",
            color: "rgb(156,163,175)",
            flexShrink: 0,
          }}>Prix de référence : 11.99€</span>
        </div>
      </div>
      <svg width={382} height={528.190} viewBox="0 0 382 528.190" fill="none" style={{
        position: "absolute",
        left: 0,
        top: 0,
        width: 382,
        height: 528.19,
        opacity: 0,
        overflow: "hidden",
        borderRadius: 16,
        color: "rgb(85,89,117)",
      }}>
        <path d={"M 0 16 C 0 7.163 7.163 0 16 0 L 366 0 C 374.837 0 382 7.163 382 16 L 382 512.19 C 382 521.027 374.837 528.19 366 528.19 L 16 528.19 C 7.163 528.19 0 521.027 0 512.19 L 0 16 Z"} fill="currentColor" fillRule="nonzero" />
      </svg>
    </div>
  );
  const __body2 = () => (
    <div className={props.className} style={{
      width: 382,
      height: 516,
      borderRadius: 16,
      position: "relative",
      ...props.style,
    }}>
      <div style={{
        position: "absolute",
        left: 0,
        top: 300,
        width: 382,
        minHeight: 120,
        borderTop: "1px solid rgb(229,231,235)",
        borderRight: "1px solid rgb(229,231,235)",
        borderBottom: "1px solid rgb(229,231,235)",
        borderLeft: "1px solid rgb(229,231,235)",
        display: "flex",
        flexDirection: "column",
        gap: 32,
        padding: "16px 16px 25.410px 16px",
        alignItems: "flex-start",
        flexWrap: "nowrap",
        boxSizing: "border-box",
      }}>
        <div style={{
          position: "relative",
          overflow: "hidden",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          flexWrap: "nowrap",
          flexShrink: 0,
          alignSelf: "stretch",
        }}>
          <span style={{
            position: "relative",
            fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
            fontWeight: 600,
            fontSize: 16,
            textAlign: "center",
            whiteSpace: "nowrap",
            lineHeight: "21.600px",
            color: "rgb(31,41,55)",
            flexShrink: 0,
          }}>{props.text1 ?? "Clamshell 25 _Original edt."}</span>
        </div>
        <div style={{
          position: "relative",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          flexWrap: "nowrap",
          flexShrink: 0,
          alignSelf: "stretch",
        }}>
          <span style={{
            position: "relative",
            fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
            fontWeight: 400,
            fontSize: 14,
            textAlign: "center",
            whiteSpace: "nowrap",
            lineHeight: "24px",
            color: "rgb(107,114,128)",
            flexShrink: 0,
          }}>{props.text2 ?? "par Haize Project"}</span>
        </div>
      </div>
      <div style={{
        position: "absolute",
        left: 0,
        top: 0,
        width: 382,
        height: 300,
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "flex-start",
        flexWrap: "nowrap",
      }}>
        <svg viewBox="0 0 382 300" fill="none" style={{
          position: "relative",
          overflow: "hidden",
          flexGrow: 1,
          alignSelf: "stretch",
        }}>
          <path d={"M 0 0 L 382 0 L 382 300 L 0 300 L 0 0 Z"} fill="currentColor" fillRule="nonzero" />
        </svg>
      </div>
      <div style={{
        position: "absolute",
        left: 0,
        top: 420,
        width: 382,
        height: 96,
        minHeight: 96,
        backgroundColor: "rgb(249,250,251)",
        borderTop: "1px solid rgb(229,231,235)",
        borderRight: "1px solid rgb(229,231,235)",
        borderBottom: "1px solid rgb(229,231,235)",
        borderLeft: "1px solid rgb(229,231,235)",
        display: "flex",
        flexDirection: "row",
        padding: "10px 16px 10px 16px",
        justifyContent: "center",
        alignItems: "center",
        flexWrap: "nowrap",
        boxSizing: "border-box",
      }}>
        <div style={{
          position: "relative",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          flexWrap: "nowrap",
          flexShrink: 0,
        }}>
          <div style={{
            position: "relative",
            display: "flex",
            flexDirection: "column",
            gap: -0.5,
            alignItems: "center",
            flexWrap: "nowrap",
            flexShrink: 0,
          }}>
            <span style={{
              position: "relative",
              fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
              fontWeight: 400,
              fontSize: 11,
              textAlign: "center",
              whiteSpace: "nowrap",
              lineHeight: "16.500px",
              color: "rgb(107,114,128)",
              flexShrink: 0,
            }}>{props.text3 ?? "Prix après subventions"}</span>
            <div style={{
              position: "relative",
              display: "flex",
              flexDirection: "row",
              justifyContent: "center",
              alignItems: "center",
              flexWrap: "nowrap",
              flexShrink: 0,
            }}>
              <span style={{
                position: "relative",
                fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
                fontWeight: 600,
                fontSize: 24,
                textAlign: "center",
                whiteSpace: "nowrap",
                lineHeight: "30px",
                color: "rgb(44,62,125)",
                flexShrink: 0,
              }}>{props.text4 ?? "279€"}</span>
            </div>
          </div>
          <span style={{
            position: "relative",
            fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
            fontWeight: 400,
            fontSize: 12,
            textAlign: "center",
            whiteSpace: "nowrap",
            lineHeight: "18px",
            color: "rgb(156,163,175)",
            flexShrink: 0,
          }}>Prix de référence : 279€</span>
        </div>
      </div>
      <svg width={382} height={516} viewBox="0 0 382 516" fill="none" style={{
        position: "absolute",
        left: 0,
        top: 0,
        width: 382,
        height: 516,
        opacity: 0.04,
        overflow: "hidden",
        borderRadius: 16,
        color: "rgb(85,89,117)",
      }}>
        <path d={"M 0 16 C 0 7.163 7.163 0 16 0 L 366 0 C 374.837 0 382 7.163 382 16 L 382 500 C 382 508.837 374.837 516 366 516 L 16 516 C 7.163 516 0 508.837 0 500 L 0 16 Z"} fill="currentColor" fillRule="nonzero" />
      </svg>
    </div>
  );
  const __body3 = () => (
    <div className={props.className} style={{
      width: 382,
      height: 516,
      borderRadius: 16,
      position: "relative",
      ...props.style,
    }}>
      <div style={{
        position: "absolute",
        left: 0,
        top: 300,
        width: 382,
        minHeight: 120,
        borderTop: "1px solid rgb(229,231,235)",
        borderRight: "1px solid rgb(229,231,235)",
        borderBottom: "1px solid rgb(229,231,235)",
        borderLeft: "1px solid rgb(229,231,235)",
        display: "flex",
        flexDirection: "column",
        gap: 32,
        padding: "16px 16px 25.410px 16px",
        alignItems: "flex-start",
        flexWrap: "nowrap",
        boxSizing: "border-box",
      }}>
        <div style={{
          position: "relative",
          overflow: "hidden",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          flexWrap: "nowrap",
          flexShrink: 0,
          alignSelf: "stretch",
        }}>
          <span style={{
            position: "relative",
            fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
            fontWeight: 600,
            fontSize: 16,
            textAlign: "center",
            whiteSpace: "nowrap",
            lineHeight: "21.600px",
            color: "rgb(31,41,55)",
            flexShrink: 0,
          }}>{props.text1 ?? "Clamshell 25 _Original edt."}</span>
        </div>
        <div style={{
          position: "relative",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          flexWrap: "nowrap",
          flexShrink: 0,
          alignSelf: "stretch",
        }}>
          <span style={{
            position: "relative",
            fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
            fontWeight: 400,
            fontSize: 14,
            textAlign: "center",
            whiteSpace: "nowrap",
            lineHeight: "24px",
            color: "rgb(107,114,128)",
            flexShrink: 0,
          }}>{props.text2 ?? "par Haize Project"}</span>
        </div>
      </div>
      <div style={{
        position: "absolute",
        left: 0,
        top: 0,
        width: 382,
        height: 300,
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "flex-start",
        flexWrap: "nowrap",
      }}>
        <svg viewBox="0 0 382 300" fill="none" style={{
          position: "relative",
          overflow: "hidden",
          flexGrow: 1,
          alignSelf: "stretch",
        }}>
          <path d={"M 0 0 L 382 0 L 382 300 L 0 300 L 0 0 Z"} fill="currentColor" fillRule="nonzero" />
        </svg>
      </div>
      <div style={{
        position: "absolute",
        left: 0,
        top: 420,
        width: 382,
        height: 96,
        minHeight: 96,
        backgroundColor: "rgb(249,250,251)",
        borderTop: "1px solid rgb(229,231,235)",
        borderRight: "1px solid rgb(229,231,235)",
        borderBottom: "1px solid rgb(229,231,235)",
        borderLeft: "1px solid rgb(229,231,235)",
        display: "flex",
        flexDirection: "row",
        padding: "10px 16px 10px 16px",
        justifyContent: "center",
        alignItems: "center",
        flexWrap: "nowrap",
        boxSizing: "border-box",
      }}>
        <div style={{
          position: "relative",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          flexWrap: "nowrap",
          flexShrink: 0,
        }}>
          <div style={{
            position: "relative",
            display: "flex",
            flexDirection: "column",
            gap: -0.5,
            alignItems: "center",
            flexWrap: "nowrap",
            flexShrink: 0,
          }}>
            <span style={{
              position: "relative",
              fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
              fontWeight: 400,
              fontSize: 11,
              textAlign: "center",
              whiteSpace: "nowrap",
              lineHeight: "16.500px",
              color: "rgb(107,114,128)",
              flexShrink: 0,
            }}>{props.text3 ?? "Prix après subventions"}</span>
            <div style={{
              position: "relative",
              display: "flex",
              flexDirection: "row",
              justifyContent: "center",
              alignItems: "center",
              flexWrap: "nowrap",
              flexShrink: 0,
            }}>
              <span style={{
                position: "relative",
                fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
                fontWeight: 600,
                fontSize: 24,
                textAlign: "center",
                whiteSpace: "nowrap",
                lineHeight: "30px",
                color: "rgb(44,62,125)",
                flexShrink: 0,
              }}>{props.text4 ?? "279€"}</span>
            </div>
          </div>
          <span style={{
            position: "relative",
            fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
            fontWeight: 400,
            fontSize: 12,
            textAlign: "center",
            whiteSpace: "nowrap",
            lineHeight: "18px",
            color: "rgb(156,163,175)",
            flexShrink: 0,
          }}>Prix de référence : 279€</span>
        </div>
      </div>
      <svg width={382} height={516} viewBox="0 0 382 516" fill="none" style={{
        position: "absolute",
        left: 0,
        top: 0,
        width: 382,
        height: 516,
        opacity: 0,
        overflow: "hidden",
        borderRadius: 16,
        color: "rgb(85,89,117)",
      }}>
        <path d={"M 0 16 C 0 7.163 7.163 0 16 0 L 366 0 C 374.837 0 382 7.163 382 16 L 382 500 C 382 508.837 374.837 516 366 516 L 16 516 C 7.163 516 0 508.837 0 500 L 0 16 Z"} fill="currentColor" fillRule="nonzero" />
      </svg>
    </div>
  );
  const __body4 = () => (
    <div className={props.className} style={{
      width: 382,
      height: 528.19,
      borderRadius: 16,
      position: "relative",
      ...props.style,
    }}>
      <div style={{
        position: "absolute",
        left: 0,
        top: 300,
        width: 382,
        minHeight: 120,
        borderTop: "1px solid rgb(229,231,235)",
        borderRight: "1px solid rgb(229,231,235)",
        borderBottom: "1px solid rgb(229,231,235)",
        borderLeft: "1px solid rgb(229,231,235)",
        display: "flex",
        flexDirection: "column",
        gap: 31.989999771118164,
        padding: "16px 16px 16px 16px",
        alignItems: "flex-start",
        flexWrap: "nowrap",
        boxSizing: "border-box",
      }}>
        <div style={{
          position: "relative",
          overflow: "hidden",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          flexWrap: "nowrap",
          flexShrink: 0,
          alignSelf: "stretch",
        }}>
          <span style={{
            position: "relative",
            fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
            fontWeight: 600,
            fontSize: 16,
            textAlign: "center",
            lineHeight: "21.600px",
            color: "rgb(31,41,55)",
            flexShrink: 0,
            whiteSpace: "pre-wrap",
          }}>{props.text1 ?? "Sacoche vélo 3-en-1 vélo étanche-sac à\ndos bandoulière, porte-bagage,PC 17"}</span>
        </div>
        <div style={{
          position: "relative",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          flexWrap: "nowrap",
          flexShrink: 0,
          alignSelf: "stretch",
        }}>
          <span style={{
            position: "relative",
            fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
            fontWeight: 400,
            fontSize: 14,
            textAlign: "center",
            whiteSpace: "nowrap",
            lineHeight: "24px",
            color: "rgb(107,114,128)",
            flexShrink: 0,
          }}>{props.text2 ?? "par Gadista"}</span>
        </div>
      </div>
      <div style={{
        position: "absolute",
        left: 0,
        top: 0,
        width: 382,
        height: 300,
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "flex-start",
        flexWrap: "nowrap",
      }}>
        <svg viewBox="0 0 382 300" fill="none" style={{
          position: "relative",
          overflow: "hidden",
          flexGrow: 1,
          alignSelf: "stretch",
        }}>
          <path d={"M 0 0 L 382 0 L 382 300 L 0 300 L 0 0 Z"} fill="currentColor" fillRule="nonzero" />
        </svg>
      </div>
      <div style={{
        position: "absolute",
        left: 0,
        top: 432.18,
        width: 382,
        height: 96,
        minHeight: 96,
        backgroundColor: "rgb(249,250,251)",
        borderTop: "1px solid rgb(229,231,235)",
        borderRight: "1px solid rgb(229,231,235)",
        borderBottom: "1px solid rgb(229,231,235)",
        borderLeft: "1px solid rgb(229,231,235)",
        display: "flex",
        flexDirection: "row",
        padding: "10px 16px 10px 16px",
        justifyContent: "center",
        alignItems: "center",
        flexWrap: "nowrap",
        boxSizing: "border-box",
      }}>
        <div style={{
          position: "relative",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          flexWrap: "nowrap",
          flexShrink: 0,
        }}>
          <div style={{
            position: "relative",
            display: "flex",
            flexDirection: "column",
            gap: -0.5,
            alignItems: "center",
            flexWrap: "nowrap",
            flexShrink: 0,
          }}>
            <span style={{
              position: "relative",
              fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
              fontWeight: 400,
              fontSize: 11,
              textAlign: "center",
              whiteSpace: "nowrap",
              lineHeight: "16.500px",
              color: "rgb(107,114,128)",
              flexShrink: 0,
            }}>{props.text3 ?? "Prix après subventions"}</span>
            <div style={{
              position: "relative",
              display: "flex",
              flexDirection: "row",
              justifyContent: "center",
              alignItems: "center",
              flexWrap: "nowrap",
              flexShrink: 0,
            }}>
              <span style={{
                position: "relative",
                fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
                fontWeight: 600,
                fontSize: 24,
                textAlign: "center",
                whiteSpace: "nowrap",
                lineHeight: "30px",
                color: "rgb(44,62,125)",
                flexShrink: 0,
              }}>{props.text4 ?? "92.99€"}</span>
            </div>
          </div>
          <span style={{
            position: "relative",
            fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
            fontWeight: 400,
            fontSize: 12,
            textAlign: "center",
            whiteSpace: "nowrap",
            lineHeight: "18px",
            color: "rgb(156,163,175)",
            flexShrink: 0,
          }}>Prix de référence : 92.99€</span>
        </div>
      </div>
      <svg width={382} height={528.190} viewBox="0 0 382 528.190" fill="none" style={{
        position: "absolute",
        left: 0,
        top: 0,
        width: 382,
        height: 528.19,
        opacity: 0.04,
        overflow: "hidden",
        borderRadius: 16,
        color: "rgb(85,89,117)",
      }}>
        <path d={"M 0 16 C 0 7.163 7.163 0 16 0 L 366 0 C 374.837 0 382 7.163 382 16 L 382 512.19 C 382 521.027 374.837 528.19 366 528.19 L 16 528.19 C 7.163 528.19 0 521.027 0 512.19 L 0 16 Z"} fill="currentColor" fillRule="nonzero" />
      </svg>
    </div>
  );
  const __body5 = () => (
    <div className={props.className} style={{
      width: 382,
      height: 528.19,
      borderRadius: 16,
      position: "relative",
      ...props.style,
    }}>
      <div style={{
        position: "absolute",
        left: 0,
        top: 300,
        width: 382,
        minHeight: 120,
        borderTop: "1px solid rgb(229,231,235)",
        borderRight: "1px solid rgb(229,231,235)",
        borderBottom: "1px solid rgb(229,231,235)",
        borderLeft: "1px solid rgb(229,231,235)",
        display: "flex",
        flexDirection: "column",
        gap: 31.989999771118164,
        padding: "16px 16px 16px 16px",
        alignItems: "flex-start",
        flexWrap: "nowrap",
        boxSizing: "border-box",
      }}>
        <div style={{
          position: "relative",
          overflow: "hidden",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          flexWrap: "nowrap",
          flexShrink: 0,
          alignSelf: "stretch",
        }}>
          <span style={{
            position: "relative",
            fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
            fontWeight: 600,
            fontSize: 16,
            textAlign: "center",
            lineHeight: "21.600px",
            color: "rgb(31,41,55)",
            flexShrink: 0,
            whiteSpace: "pre-wrap",
          }}>{props.text1 ?? "Sacoche vélo 3-en-1 vélo étanche-sac à\ndos bandoulière, porte-bagage,PC 17"}</span>
        </div>
        <div style={{
          position: "relative",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          flexWrap: "nowrap",
          flexShrink: 0,
          alignSelf: "stretch",
        }}>
          <span style={{
            position: "relative",
            fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
            fontWeight: 400,
            fontSize: 14,
            textAlign: "center",
            whiteSpace: "nowrap",
            lineHeight: "24px",
            color: "rgb(107,114,128)",
            flexShrink: 0,
          }}>{props.text2 ?? "par Gadista"}</span>
        </div>
      </div>
      <div style={{
        position: "absolute",
        left: 0,
        top: 0,
        width: 382,
        height: 300,
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "flex-start",
        flexWrap: "nowrap",
      }}>
        <svg viewBox="0 0 382 300" fill="none" style={{
          position: "relative",
          overflow: "hidden",
          flexGrow: 1,
          alignSelf: "stretch",
        }}>
          <path d={"M 0 0 L 382 0 L 382 300 L 0 300 L 0 0 Z"} fill="currentColor" fillRule="nonzero" />
        </svg>
      </div>
      <div style={{
        position: "absolute",
        left: 0,
        top: 432.18,
        width: 382,
        height: 96,
        minHeight: 96,
        backgroundColor: "rgb(249,250,251)",
        borderTop: "1px solid rgb(229,231,235)",
        borderRight: "1px solid rgb(229,231,235)",
        borderBottom: "1px solid rgb(229,231,235)",
        borderLeft: "1px solid rgb(229,231,235)",
        display: "flex",
        flexDirection: "row",
        padding: "10px 16px 10px 16px",
        justifyContent: "center",
        alignItems: "center",
        flexWrap: "nowrap",
        boxSizing: "border-box",
      }}>
        <div style={{
          position: "relative",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          flexWrap: "nowrap",
          flexShrink: 0,
        }}>
          <div style={{
            position: "relative",
            display: "flex",
            flexDirection: "column",
            gap: -0.5,
            alignItems: "center",
            flexWrap: "nowrap",
            flexShrink: 0,
          }}>
            <span style={{
              position: "relative",
              fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
              fontWeight: 400,
              fontSize: 11,
              textAlign: "center",
              whiteSpace: "nowrap",
              lineHeight: "16.500px",
              color: "rgb(107,114,128)",
              flexShrink: 0,
            }}>{props.text3 ?? "Prix après subventions"}</span>
            <div style={{
              position: "relative",
              display: "flex",
              flexDirection: "row",
              justifyContent: "center",
              alignItems: "center",
              flexWrap: "nowrap",
              flexShrink: 0,
            }}>
              <span style={{
                position: "relative",
                fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
                fontWeight: 600,
                fontSize: 24,
                textAlign: "center",
                whiteSpace: "nowrap",
                lineHeight: "30px",
                color: "rgb(44,62,125)",
                flexShrink: 0,
              }}>{props.text4 ?? "92.99€"}</span>
            </div>
          </div>
          <span style={{
            position: "relative",
            fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
            fontWeight: 400,
            fontSize: 12,
            textAlign: "center",
            whiteSpace: "nowrap",
            lineHeight: "18px",
            color: "rgb(156,163,175)",
            flexShrink: 0,
          }}>Prix de référence : 92.99€</span>
        </div>
      </div>
      <svg width={382} height={528.190} viewBox="0 0 382 528.190" fill="none" style={{
        position: "absolute",
        left: 0,
        top: 0,
        width: 382,
        height: 528.19,
        opacity: 0,
        overflow: "hidden",
        borderRadius: 16,
        color: "rgb(85,89,117)",
      }}>
        <path d={"M 0 16 C 0 7.163 7.163 0 16 0 L 366 0 C 374.837 0 382 7.163 382 16 L 382 512.19 C 382 521.027 374.837 528.19 366 528.19 L 16 528.19 C 7.163 528.19 0 521.027 0 512.19 L 0 16 Z"} fill="currentColor" fillRule="nonzero" />
      </svg>
    </div>
  );
  const __body6 = () => (
    <div className={props.className} style={{
      width: 382,
      height: 516,
      borderRadius: 16,
      position: "relative",
      ...props.style,
    }}>
      <div style={{
        position: "absolute",
        left: 0,
        top: 300,
        width: 382,
        minHeight: 120,
        borderTop: "1px solid rgb(229,231,235)",
        borderRight: "1px solid rgb(229,231,235)",
        borderBottom: "1px solid rgb(229,231,235)",
        borderLeft: "1px solid rgb(229,231,235)",
        display: "flex",
        flexDirection: "column",
        gap: 32.0099983215332,
        padding: "16px 16px 25.400px 16px",
        alignItems: "flex-start",
        flexWrap: "nowrap",
        boxSizing: "border-box",
      }}>
        <div style={{
          position: "relative",
          overflow: "hidden",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          flexWrap: "nowrap",
          flexShrink: 0,
          alignSelf: "stretch",
        }}>
          <span style={{
            position: "relative",
            fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
            fontWeight: 600,
            fontSize: 16,
            textAlign: "center",
            whiteSpace: "nowrap",
            lineHeight: "21.600px",
            color: "rgb(31,41,55)",
            flexShrink: 0,
          }}>{props.text1 ?? "RIDER PRO MAX"}</span>
        </div>
        <div style={{
          position: "relative",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          flexWrap: "nowrap",
          flexShrink: 0,
          alignSelf: "stretch",
        }}>
          <span style={{
            position: "relative",
            fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
            fontWeight: 400,
            fontSize: 14,
            textAlign: "center",
            whiteSpace: "nowrap",
            lineHeight: "24px",
            color: "rgb(107,114,128)",
            flexShrink: 0,
          }}>{props.text2 ?? "par Punk Electric"}</span>
        </div>
      </div>
      <div style={{
        position: "absolute",
        left: 0,
        top: 0,
        width: 382,
        height: 300,
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "flex-start",
        flexWrap: "nowrap",
      }}>
        <svg viewBox="0 0 382 300" fill="none" style={{
          position: "relative",
          overflow: "hidden",
          flexGrow: 1,
          alignSelf: "stretch",
        }}>
          <path d={"M 0 0 L 382 0 L 382 300 L 0 300 L 0 0 Z"} fill="currentColor" fillRule="nonzero" />
        </svg>
        <div style={{
          position: "absolute",
          left: 12,
          top: 12,
          width: 314,
          display: "flex",
          flexDirection: "row",
          alignItems: "center",
          flexWrap: "wrap",
        }}>
          <div style={{
            position: "relative",
            height: 32,
            maxWidth: 314,
            maxHeight: null,
            borderRadius: 16,
            backgroundColor: "rgb(255,109,36)",
            display: "flex",
            flexDirection: "row",
            justifyContent: "center",
            alignItems: "center",
            flexWrap: "nowrap",
            flexShrink: 0,
          }}>
            <div style={{
              position: "relative",
              display: "flex",
              flexDirection: "column",
              padding: "0px 8px 0px 8px",
              alignItems: "center",
              flexWrap: "nowrap",
              boxSizing: "border-box",
              flexShrink: 0,
            }}>
              <span style={{
                position: "relative",
                fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
                fontWeight: 500,
                fontSize: 13,
                textAlign: "center",
                whiteSpace: "nowrap",
                lineHeight: "19.500px",
                color: "rgb(255,255,255)",
                flexShrink: 0,
              }}>{props.text3 ?? "rupture de stock"}</span>
            </div>
          </div>
        </div>
      </div>
      <div style={{
        position: "absolute",
        left: 0,
        top: 420,
        width: 382,
        height: 96,
        minHeight: 96,
        backgroundColor: "rgb(249,250,251)",
        borderTop: "1px solid rgb(229,231,235)",
        borderRight: "1px solid rgb(229,231,235)",
        borderBottom: "1px solid rgb(229,231,235)",
        borderLeft: "1px solid rgb(229,231,235)",
        display: "flex",
        flexDirection: "row",
        padding: "10px 16px 10px 16px",
        justifyContent: "center",
        alignItems: "center",
        flexWrap: "nowrap",
        boxSizing: "border-box",
      }}>
        <div style={{
          position: "relative",
          display: "flex",
          flexDirection: "row",
          justifyContent: "space-between",
          alignItems: "flex-start",
          flexWrap: "wrap",
          flexGrow: 1,
        }}>
          <div style={{
            position: "relative",
            maxWidth: 175,
            maxHeight: null,
            display: "flex",
            flexDirection: "column",
            padding: "0px 6px 0px 0px",
            alignItems: "flex-start",
            flexWrap: "nowrap",
            boxSizing: "border-box",
            flexGrow: 1,
            alignSelf: "stretch",
          }}>
            <div style={{
              position: "relative",
              display: "flex",
              flexDirection: "column",
              alignItems: "flex-start",
              flexWrap: "nowrap",
              flexShrink: 0,
              alignSelf: "stretch",
            }}>
              <span style={{
                position: "relative",
                fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
                fontWeight: 400,
                fontSize: 9,
                lineHeight: "13.500px",
                color: "rgb(107,114,128)",
                flexShrink: 0,
                alignSelf: "stretch",
                whiteSpace: "nowrap",
              }}>{props.text4 ?? "Avec vos subventions"}</span>
            </div>
            <div style={{
              position: "relative",
              display: "flex",
              flexDirection: "row",
              alignItems: "center",
              flexWrap: "nowrap",
              flexShrink: 0,
            }}>
              <span style={{
                position: "relative",
                fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
                fontWeight: 600,
                fontSize: 17,
                whiteSpace: "nowrap",
                lineHeight: "30px",
                color: "rgb(44,62,125)",
                flexShrink: 0,
              }}>64.93€/mois</span>
            </div>
            <div style={{
              position: "relative",
              display: "flex",
              flexDirection: "column",
              alignItems: "flex-start",
              flexWrap: "nowrap",
              flexShrink: 0,
              alignSelf: "stretch",
            }}>
              <span style={{
                position: "relative",
                fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
                fontWeight: 400,
                fontSize: 9,
                lineHeight: "13.500px",
                color: "rgb(156,163,175)",
                flexShrink: 0,
                alignSelf: "stretch",
              }}>Prix de référence : 64.93€/mois</span>
            </div>
          </div>
          <div style={{
            position: "relative",
            maxWidth: 175,
            maxHeight: null,
            display: "flex",
            flexDirection: "column",
            padding: "0px 6px 0px 6px",
            alignItems: "flex-start",
            flexWrap: "nowrap",
            boxSizing: "border-box",
            flexGrow: 1,
            alignSelf: "stretch",
          }}>
            <div style={{
              position: "relative",
              display: "flex",
              flexDirection: "column",
              gap: -0.25,
              alignItems: "flex-end",
              flexWrap: "nowrap",
              flexShrink: 0,
              alignSelf: "stretch",
            }}>
              <span style={{
                position: "relative",
                fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
                fontWeight: 400,
                fontSize: 9,
                textAlign: "right",
                whiteSpace: "nowrap",
                lineHeight: "13.500px",
                color: "rgb(107,114,128)",
                flexShrink: 0,
              }}>Avec vos subventions</span>
              <div style={{
                position: "relative",
                display: "flex",
                flexDirection: "row",
                justifyContent: "flex-end",
                alignItems: "center",
                flexWrap: "nowrap",
                flexShrink: 0,
              }}>
                <span style={{
                  position: "relative",
                  fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
                  fontWeight: 600,
                  fontSize: 17,
                  textAlign: "right",
                  whiteSpace: "nowrap",
                  lineHeight: "30px",
                  color: "rgb(44,62,125)",
                  flexShrink: 0,
                }}>1 359€</span>
              </div>
            </div>
            <div style={{
              position: "relative",
              display: "flex",
              flexDirection: "column",
              alignItems: "flex-end",
              flexWrap: "nowrap",
              flexShrink: 0,
              alignSelf: "stretch",
            }}>
              <span style={{
                position: "relative",
                fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
                fontWeight: 400,
                fontSize: 9,
                textAlign: "right",
                whiteSpace: "nowrap",
                lineHeight: "13.500px",
                color: "rgb(156,163,175)",
                flexShrink: 0,
              }}>Prix de référence : 1 359€</span>
            </div>
          </div>
        </div>
        <div style={{
          position: "absolute",
          left: 191,
          top: 1,
          width: 1,
          height: 95,
          backgroundColor: "rgb(229,231,235)",
        }} />
      </div>
      <svg width={382} height={516} viewBox="0 0 382 516" fill="none" style={{
        position: "absolute",
        left: 0,
        top: 0,
        width: 382,
        height: 516,
        opacity: 0.04,
        overflow: "hidden",
        borderRadius: 16,
        color: "rgb(85,89,117)",
      }}>
        <path d={"M 0 16 C 0 7.163 7.163 0 16 0 L 366 0 C 374.837 0 382 7.163 382 16 L 382 500 C 382 508.837 374.837 516 366 516 L 16 516 C 7.163 516 0 508.837 0 500 L 0 16 Z"} fill="currentColor" fillRule="nonzero" />
      </svg>
    </div>
  );
  const __body7 = () => (
    <div className={props.className} style={{
      width: 382,
      height: 516,
      borderRadius: 16,
      position: "relative",
      ...props.style,
    }}>
      <div style={{
        position: "absolute",
        left: 0,
        top: 300,
        width: 382,
        minHeight: 120,
        borderTop: "1px solid rgb(229,231,235)",
        borderRight: "1px solid rgb(229,231,235)",
        borderBottom: "1px solid rgb(229,231,235)",
        borderLeft: "1px solid rgb(229,231,235)",
        display: "flex",
        flexDirection: "column",
        gap: 32.0099983215332,
        padding: "16px 16px 25.400px 16px",
        alignItems: "flex-start",
        flexWrap: "nowrap",
        boxSizing: "border-box",
      }}>
        <div style={{
          position: "relative",
          overflow: "hidden",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          flexWrap: "nowrap",
          flexShrink: 0,
          alignSelf: "stretch",
        }}>
          <span style={{
            position: "relative",
            fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
            fontWeight: 600,
            fontSize: 16,
            textAlign: "center",
            whiteSpace: "nowrap",
            lineHeight: "21.600px",
            color: "rgb(31,41,55)",
            flexShrink: 0,
          }}>{props.text1 ?? "RIDER PRO MAX"}</span>
        </div>
        <div style={{
          position: "relative",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          flexWrap: "nowrap",
          flexShrink: 0,
          alignSelf: "stretch",
        }}>
          <span style={{
            position: "relative",
            fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
            fontWeight: 400,
            fontSize: 14,
            textAlign: "center",
            whiteSpace: "nowrap",
            lineHeight: "24px",
            color: "rgb(107,114,128)",
            flexShrink: 0,
          }}>{props.text2 ?? "par Punk Electric"}</span>
        </div>
      </div>
      <div style={{
        position: "absolute",
        left: 0,
        top: 0,
        width: 382,
        height: 300,
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "flex-start",
        flexWrap: "nowrap",
      }}>
        <svg viewBox="0 0 382 300" fill="none" style={{
          position: "relative",
          overflow: "hidden",
          flexGrow: 1,
          alignSelf: "stretch",
        }}>
          <path d={"M 0 0 L 382 0 L 382 300 L 0 300 L 0 0 Z"} fill="currentColor" fillRule="nonzero" />
        </svg>
        <div style={{
          position: "absolute",
          left: 12,
          top: 12,
          width: 314,
          display: "flex",
          flexDirection: "row",
          alignItems: "center",
          flexWrap: "wrap",
        }}>
          <div style={{
            position: "relative",
            height: 32,
            maxWidth: 314,
            maxHeight: null,
            borderRadius: 16,
            backgroundColor: "rgb(255,109,36)",
            display: "flex",
            flexDirection: "row",
            justifyContent: "center",
            alignItems: "center",
            flexWrap: "nowrap",
            flexShrink: 0,
          }}>
            <div style={{
              position: "relative",
              display: "flex",
              flexDirection: "column",
              padding: "0px 8px 0px 8px",
              alignItems: "center",
              flexWrap: "nowrap",
              boxSizing: "border-box",
              flexShrink: 0,
            }}>
              <span style={{
                position: "relative",
                fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
                fontWeight: 500,
                fontSize: 13,
                textAlign: "center",
                whiteSpace: "nowrap",
                lineHeight: "19.500px",
                color: "rgb(255,255,255)",
                flexShrink: 0,
              }}>{props.text3 ?? "rupture de stock"}</span>
            </div>
          </div>
        </div>
      </div>
      <div style={{
        position: "absolute",
        left: 0,
        top: 420,
        width: 382,
        height: 96,
        minHeight: 96,
        backgroundColor: "rgb(249,250,251)",
        borderTop: "1px solid rgb(229,231,235)",
        borderRight: "1px solid rgb(229,231,235)",
        borderBottom: "1px solid rgb(229,231,235)",
        borderLeft: "1px solid rgb(229,231,235)",
        display: "flex",
        flexDirection: "row",
        padding: "10px 16px 10px 16px",
        justifyContent: "center",
        alignItems: "center",
        flexWrap: "nowrap",
        boxSizing: "border-box",
      }}>
        <div style={{
          position: "relative",
          display: "flex",
          flexDirection: "row",
          justifyContent: "space-between",
          alignItems: "flex-start",
          flexWrap: "wrap",
          flexGrow: 1,
        }}>
          <div style={{
            position: "relative",
            maxWidth: 175,
            maxHeight: null,
            display: "flex",
            flexDirection: "column",
            padding: "0px 6px 0px 0px",
            alignItems: "flex-start",
            flexWrap: "nowrap",
            boxSizing: "border-box",
            flexGrow: 1,
            alignSelf: "stretch",
          }}>
            <div style={{
              position: "relative",
              display: "flex",
              flexDirection: "column",
              alignItems: "flex-start",
              flexWrap: "nowrap",
              flexShrink: 0,
              alignSelf: "stretch",
            }}>
              <span style={{
                position: "relative",
                fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
                fontWeight: 400,
                fontSize: 9,
                lineHeight: "13.500px",
                color: "rgb(107,114,128)",
                flexShrink: 0,
                alignSelf: "stretch",
                whiteSpace: "nowrap",
              }}>{props.text4 ?? "Avec vos subventions"}</span>
            </div>
            <div style={{
              position: "relative",
              display: "flex",
              flexDirection: "row",
              alignItems: "center",
              flexWrap: "nowrap",
              flexShrink: 0,
            }}>
              <span style={{
                position: "relative",
                fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
                fontWeight: 600,
                fontSize: 17,
                whiteSpace: "nowrap",
                lineHeight: "30px",
                color: "rgb(44,62,125)",
                flexShrink: 0,
              }}>64.93€/mois</span>
            </div>
            <div style={{
              position: "relative",
              display: "flex",
              flexDirection: "column",
              alignItems: "flex-start",
              flexWrap: "nowrap",
              flexShrink: 0,
              alignSelf: "stretch",
            }}>
              <span style={{
                position: "relative",
                fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
                fontWeight: 400,
                fontSize: 9,
                lineHeight: "13.500px",
                color: "rgb(156,163,175)",
                flexShrink: 0,
                alignSelf: "stretch",
              }}>Prix de référence : 64.93€/mois</span>
            </div>
          </div>
          <div style={{
            position: "relative",
            maxWidth: 175,
            maxHeight: null,
            display: "flex",
            flexDirection: "column",
            padding: "0px 6px 0px 6px",
            alignItems: "flex-start",
            flexWrap: "nowrap",
            boxSizing: "border-box",
            flexGrow: 1,
            alignSelf: "stretch",
          }}>
            <div style={{
              position: "relative",
              display: "flex",
              flexDirection: "column",
              gap: -0.25,
              alignItems: "flex-end",
              flexWrap: "nowrap",
              flexShrink: 0,
              alignSelf: "stretch",
            }}>
              <span style={{
                position: "relative",
                fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
                fontWeight: 400,
                fontSize: 9,
                textAlign: "right",
                whiteSpace: "nowrap",
                lineHeight: "13.500px",
                color: "rgb(107,114,128)",
                flexShrink: 0,
              }}>Avec vos subventions</span>
              <div style={{
                position: "relative",
                display: "flex",
                flexDirection: "row",
                justifyContent: "flex-end",
                alignItems: "center",
                flexWrap: "nowrap",
                flexShrink: 0,
              }}>
                <span style={{
                  position: "relative",
                  fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
                  fontWeight: 600,
                  fontSize: 17,
                  textAlign: "right",
                  whiteSpace: "nowrap",
                  lineHeight: "30px",
                  color: "rgb(44,62,125)",
                  flexShrink: 0,
                }}>1 359€</span>
              </div>
            </div>
            <div style={{
              position: "relative",
              display: "flex",
              flexDirection: "column",
              alignItems: "flex-end",
              flexWrap: "nowrap",
              flexShrink: 0,
              alignSelf: "stretch",
            }}>
              <span style={{
                position: "relative",
                fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
                fontWeight: 400,
                fontSize: 9,
                textAlign: "right",
                whiteSpace: "nowrap",
                lineHeight: "13.500px",
                color: "rgb(156,163,175)",
                flexShrink: 0,
              }}>Prix de référence : 1 359€</span>
            </div>
          </div>
        </div>
        <div style={{
          position: "absolute",
          left: 191,
          top: 1,
          width: 1,
          height: 95,
          backgroundColor: "rgb(229,231,235)",
        }} />
      </div>
      <svg width={382} height={516} viewBox="0 0 382 516" fill="none" style={{
        position: "absolute",
        left: 0,
        top: 0,
        width: 382,
        height: 516,
        opacity: 0,
        overflow: "hidden",
        borderRadius: 16,
        color: "rgb(85,89,117)",
      }}>
        <path d={"M 0 16 C 0 7.163 7.163 0 16 0 L 366 0 C 374.837 0 382 7.163 382 16 L 382 500 C 382 508.837 374.837 516 366 516 L 16 516 C 7.163 516 0 508.837 0 500 L 0 16 Z"} fill="currentColor" fillRule="nonzero" />
      </svg>
    </div>
  );
  const __body8 = () => (
    <div className={props.className} style={{
      width: 382,
      height: 516,
      borderRadius: 16,
      position: "relative",
      ...props.style,
    }}>
      <div style={{
        position: "absolute",
        left: 0,
        top: 300,
        width: 382,
        minHeight: 120,
        borderTop: "1px solid rgb(229,231,235)",
        borderRight: "1px solid rgb(229,231,235)",
        borderBottom: "1px solid rgb(229,231,235)",
        borderLeft: "1px solid rgb(229,231,235)",
        display: "flex",
        flexDirection: "column",
        gap: 32.0099983215332,
        padding: "16px 16px 25.400px 16px",
        alignItems: "flex-start",
        flexWrap: "nowrap",
        boxSizing: "border-box",
      }}>
        <div style={{
          position: "relative",
          overflow: "hidden",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          flexWrap: "nowrap",
          flexShrink: 0,
          alignSelf: "stretch",
        }}>
          <span style={{
            position: "relative",
            fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
            fontWeight: 600,
            fontSize: 16,
            textAlign: "center",
            whiteSpace: "nowrap",
            lineHeight: "21.600px",
            color: "rgb(31,41,55)",
            flexShrink: 0,
          }}>{props.text1 ?? "T7"}</span>
        </div>
        <div style={{
          position: "relative",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          flexWrap: "nowrap",
          flexShrink: 0,
          alignSelf: "stretch",
        }}>
          <span style={{
            position: "relative",
            fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
            fontWeight: 400,
            fontSize: 14,
            textAlign: "center",
            whiteSpace: "nowrap",
            lineHeight: "24px",
            color: "rgb(107,114,128)",
            flexShrink: 0,
          }}>{props.text2 ?? "par Ncm"}</span>
        </div>
      </div>
      <div style={{
        position: "absolute",
        left: 0,
        top: 0,
        width: 382,
        height: 300,
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "flex-start",
        flexWrap: "nowrap",
      }}>
        <svg viewBox="0 0 382 300" fill="none" style={{
          position: "relative",
          overflow: "hidden",
          flexGrow: 1,
          alignSelf: "stretch",
        }}>
          <path d={"M 0 0 L 382 0 L 382 300 L 0 300 L 0 0 Z"} fill="currentColor" fillRule="nonzero" />
        </svg>
        <div style={{
          position: "absolute",
          left: 12,
          top: 12,
          width: 314,
          display: "flex",
          flexDirection: "row",
          alignItems: "center",
          flexWrap: "wrap",
        }}>
          <div style={{
            position: "relative",
            height: 32,
            maxWidth: 314,
            maxHeight: null,
            borderRadius: 16,
            backgroundColor: "rgb(255,109,36)",
            display: "flex",
            flexDirection: "row",
            justifyContent: "center",
            alignItems: "center",
            flexWrap: "nowrap",
            flexShrink: 0,
          }}>
            <div style={{
              position: "relative",
              display: "flex",
              flexDirection: "column",
              padding: "0px 8px 0px 8px",
              alignItems: "center",
              flexWrap: "nowrap",
              boxSizing: "border-box",
              flexShrink: 0,
            }}>
              <span style={{
                position: "relative",
                fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
                fontWeight: 500,
                fontSize: 13,
                textAlign: "center",
                whiteSpace: "nowrap",
                lineHeight: "19.500px",
                color: "rgb(255,255,255)",
                flexShrink: 0,
              }}>{props.text3 ?? "Promo -10%"}</span>
            </div>
          </div>
        </div>
      </div>
      <div style={{
        position: "absolute",
        left: 0,
        top: 420,
        width: 382,
        height: 96,
        minHeight: 96,
        backgroundColor: "rgb(249,250,251)",
        borderTop: "1px solid rgb(229,231,235)",
        borderRight: "1px solid rgb(229,231,235)",
        borderBottom: "1px solid rgb(229,231,235)",
        borderLeft: "1px solid rgb(229,231,235)",
        display: "flex",
        flexDirection: "row",
        padding: "10px 16px 10px 16px",
        justifyContent: "center",
        alignItems: "center",
        flexWrap: "nowrap",
        boxSizing: "border-box",
      }}>
        <div style={{
          position: "relative",
          display: "flex",
          flexDirection: "row",
          justifyContent: "space-between",
          alignItems: "flex-start",
          flexWrap: "wrap",
          flexGrow: 1,
        }}>
          <div style={{
            position: "relative",
            maxWidth: 175,
            maxHeight: null,
            display: "flex",
            flexDirection: "column",
            padding: "0px 6px 0px 0px",
            alignItems: "flex-start",
            flexWrap: "nowrap",
            boxSizing: "border-box",
            flexGrow: 1,
            alignSelf: "stretch",
          }}>
            <div style={{
              position: "relative",
              display: "flex",
              flexDirection: "column",
              alignItems: "flex-start",
              flexWrap: "nowrap",
              flexShrink: 0,
              alignSelf: "stretch",
            }}>
              <span style={{
                position: "relative",
                fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
                fontWeight: 400,
                fontSize: 9,
                lineHeight: "13.500px",
                color: "rgb(107,114,128)",
                flexShrink: 0,
                alignSelf: "stretch",
                whiteSpace: "nowrap",
              }}>{props.text4 ?? "Avec vos subventions"}</span>
            </div>
            <div style={{
              position: "relative",
              display: "flex",
              flexDirection: "row",
              alignItems: "center",
              flexWrap: "nowrap",
              flexShrink: 0,
            }}>
              <span style={{
                position: "relative",
                fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
                fontWeight: 600,
                fontSize: 17,
                whiteSpace: "nowrap",
                lineHeight: "30px",
                color: "rgb(44,62,125)",
                flexShrink: 0,
              }}>71.31€/mois</span>
            </div>
            <div style={{
              position: "relative",
              display: "flex",
              flexDirection: "column",
              alignItems: "flex-start",
              flexWrap: "nowrap",
              flexShrink: 0,
              alignSelf: "stretch",
            }}>
              <span style={{
                position: "relative",
                fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
                fontWeight: 400,
                fontSize: 9,
                lineHeight: "13.500px",
                color: "rgb(156,163,175)",
                flexShrink: 0,
                alignSelf: "stretch",
              }}>Prix de référence : 78.67€/mois</span>
            </div>
          </div>
          <div style={{
            position: "relative",
            maxWidth: 175,
            maxHeight: null,
            display: "flex",
            flexDirection: "column",
            padding: "0px 6px 0px 6px",
            alignItems: "flex-start",
            flexWrap: "nowrap",
            boxSizing: "border-box",
            flexGrow: 1,
            alignSelf: "stretch",
          }}>
            <div style={{
              position: "relative",
              display: "flex",
              flexDirection: "column",
              gap: -0.25,
              alignItems: "flex-end",
              flexWrap: "nowrap",
              flexShrink: 0,
              alignSelf: "stretch",
            }}>
              <span style={{
                position: "relative",
                fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
                fontWeight: 400,
                fontSize: 9,
                textAlign: "right",
                whiteSpace: "nowrap",
                lineHeight: "13.500px",
                color: "rgb(107,114,128)",
                flexShrink: 0,
              }}>Avec vos subventions</span>
              <div style={{
                position: "relative",
                display: "flex",
                flexDirection: "row",
                justifyContent: "flex-end",
                alignItems: "center",
                flexWrap: "nowrap",
                flexShrink: 0,
              }}>
                <span style={{
                  position: "relative",
                  fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
                  fontWeight: 600,
                  fontSize: 17,
                  textAlign: "right",
                  whiteSpace: "nowrap",
                  lineHeight: "30px",
                  color: "rgb(44,62,125)",
                  flexShrink: 0,
                }}>1 889.10€</span>
              </div>
            </div>
            <div style={{
              position: "relative",
              display: "flex",
              flexDirection: "column",
              alignItems: "flex-end",
              flexWrap: "nowrap",
              flexShrink: 0,
              alignSelf: "stretch",
            }}>
              <span style={{
                position: "relative",
                fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
                fontWeight: 400,
                fontSize: 9,
                textAlign: "right",
                whiteSpace: "nowrap",
                lineHeight: "13.500px",
                color: "rgb(156,163,175)",
                flexShrink: 0,
              }}>Prix de référence : 2 099€</span>
            </div>
          </div>
        </div>
        <div style={{
          position: "absolute",
          left: 191,
          top: 1,
          width: 1,
          height: 95,
          backgroundColor: "rgb(229,231,235)",
        }} />
      </div>
      <svg width={382} height={516} viewBox="0 0 382 516" fill="none" style={{
        position: "absolute",
        left: 0,
        top: 0,
        width: 382,
        height: 516,
        opacity: 0.04,
        overflow: "hidden",
        borderRadius: 16,
        color: "rgb(85,89,117)",
      }}>
        <path d={"M 0 16 C 0 7.163 7.163 0 16 0 L 366 0 C 374.837 0 382 7.163 382 16 L 382 500 C 382 508.837 374.837 516 366 516 L 16 516 C 7.163 516 0 508.837 0 500 L 0 16 Z"} fill="currentColor" fillRule="nonzero" />
      </svg>
    </div>
  );
  const __body9 = () => (
    <div className={props.className} style={{
      width: 382,
      height: 516,
      borderRadius: 16,
      position: "relative",
      ...props.style,
    }}>
      <div style={{
        position: "absolute",
        left: 0,
        top: 300,
        width: 382,
        minHeight: 120,
        borderTop: "1px solid rgb(229,231,235)",
        borderRight: "1px solid rgb(229,231,235)",
        borderBottom: "1px solid rgb(229,231,235)",
        borderLeft: "1px solid rgb(229,231,235)",
        display: "flex",
        flexDirection: "column",
        gap: 32.0099983215332,
        padding: "16px 16px 25.400px 16px",
        alignItems: "flex-start",
        flexWrap: "nowrap",
        boxSizing: "border-box",
      }}>
        <div style={{
          position: "relative",
          overflow: "hidden",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          flexWrap: "nowrap",
          flexShrink: 0,
          alignSelf: "stretch",
        }}>
          <span style={{
            position: "relative",
            fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
            fontWeight: 600,
            fontSize: 16,
            textAlign: "center",
            whiteSpace: "nowrap",
            lineHeight: "21.600px",
            color: "rgb(31,41,55)",
            flexShrink: 0,
          }}>{props.text1 ?? "T7"}</span>
        </div>
        <div style={{
          position: "relative",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          flexWrap: "nowrap",
          flexShrink: 0,
          alignSelf: "stretch",
        }}>
          <span style={{
            position: "relative",
            fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
            fontWeight: 400,
            fontSize: 14,
            textAlign: "center",
            whiteSpace: "nowrap",
            lineHeight: "24px",
            color: "rgb(107,114,128)",
            flexShrink: 0,
          }}>{props.text2 ?? "par Ncm"}</span>
        </div>
      </div>
      <div style={{
        position: "absolute",
        left: 0,
        top: 0,
        width: 382,
        height: 300,
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "flex-start",
        flexWrap: "nowrap",
      }}>
        <svg viewBox="0 0 382 300" fill="none" style={{
          position: "relative",
          overflow: "hidden",
          flexGrow: 1,
          alignSelf: "stretch",
        }}>
          <path d={"M 0 0 L 382 0 L 382 300 L 0 300 L 0 0 Z"} fill="currentColor" fillRule="nonzero" />
        </svg>
        <div style={{
          position: "absolute",
          left: 12,
          top: 12,
          width: 314,
          display: "flex",
          flexDirection: "row",
          alignItems: "center",
          flexWrap: "wrap",
        }}>
          <div style={{
            position: "relative",
            height: 32,
            maxWidth: 314,
            maxHeight: null,
            borderRadius: 16,
            backgroundColor: "rgb(255,109,36)",
            display: "flex",
            flexDirection: "row",
            justifyContent: "center",
            alignItems: "center",
            flexWrap: "nowrap",
            flexShrink: 0,
          }}>
            <div style={{
              position: "relative",
              display: "flex",
              flexDirection: "column",
              padding: "0px 8px 0px 8px",
              alignItems: "center",
              flexWrap: "nowrap",
              boxSizing: "border-box",
              flexShrink: 0,
            }}>
              <span style={{
                position: "relative",
                fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
                fontWeight: 500,
                fontSize: 13,
                textAlign: "center",
                whiteSpace: "nowrap",
                lineHeight: "19.500px",
                color: "rgb(255,255,255)",
                flexShrink: 0,
              }}>{props.text3 ?? "Promo -10%"}</span>
            </div>
          </div>
        </div>
      </div>
      <div style={{
        position: "absolute",
        left: 0,
        top: 420,
        width: 382,
        height: 96,
        minHeight: 96,
        backgroundColor: "rgb(249,250,251)",
        borderTop: "1px solid rgb(229,231,235)",
        borderRight: "1px solid rgb(229,231,235)",
        borderBottom: "1px solid rgb(229,231,235)",
        borderLeft: "1px solid rgb(229,231,235)",
        display: "flex",
        flexDirection: "row",
        padding: "10px 16px 10px 16px",
        justifyContent: "center",
        alignItems: "center",
        flexWrap: "nowrap",
        boxSizing: "border-box",
      }}>
        <div style={{
          position: "relative",
          display: "flex",
          flexDirection: "row",
          justifyContent: "space-between",
          alignItems: "flex-start",
          flexWrap: "wrap",
          flexGrow: 1,
        }}>
          <div style={{
            position: "relative",
            maxWidth: 175,
            maxHeight: null,
            display: "flex",
            flexDirection: "column",
            padding: "0px 6px 0px 0px",
            alignItems: "flex-start",
            flexWrap: "nowrap",
            boxSizing: "border-box",
            flexGrow: 1,
            alignSelf: "stretch",
          }}>
            <div style={{
              position: "relative",
              display: "flex",
              flexDirection: "column",
              alignItems: "flex-start",
              flexWrap: "nowrap",
              flexShrink: 0,
              alignSelf: "stretch",
            }}>
              <span style={{
                position: "relative",
                fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
                fontWeight: 400,
                fontSize: 9,
                lineHeight: "13.500px",
                color: "rgb(107,114,128)",
                flexShrink: 0,
                alignSelf: "stretch",
                whiteSpace: "nowrap",
              }}>{props.text4 ?? "Avec vos subventions"}</span>
            </div>
            <div style={{
              position: "relative",
              display: "flex",
              flexDirection: "row",
              alignItems: "center",
              flexWrap: "nowrap",
              flexShrink: 0,
            }}>
              <span style={{
                position: "relative",
                fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
                fontWeight: 600,
                fontSize: 17,
                whiteSpace: "nowrap",
                lineHeight: "30px",
                color: "rgb(44,62,125)",
                flexShrink: 0,
              }}>71.31€/mois</span>
            </div>
            <div style={{
              position: "relative",
              display: "flex",
              flexDirection: "column",
              alignItems: "flex-start",
              flexWrap: "nowrap",
              flexShrink: 0,
              alignSelf: "stretch",
            }}>
              <span style={{
                position: "relative",
                fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
                fontWeight: 400,
                fontSize: 9,
                lineHeight: "13.500px",
                color: "rgb(156,163,175)",
                flexShrink: 0,
                alignSelf: "stretch",
              }}>Prix de référence : 78.67€/mois</span>
            </div>
          </div>
          <div style={{
            position: "relative",
            maxWidth: 175,
            maxHeight: null,
            display: "flex",
            flexDirection: "column",
            padding: "0px 6px 0px 6px",
            alignItems: "flex-start",
            flexWrap: "nowrap",
            boxSizing: "border-box",
            flexGrow: 1,
            alignSelf: "stretch",
          }}>
            <div style={{
              position: "relative",
              display: "flex",
              flexDirection: "column",
              gap: -0.25,
              alignItems: "flex-end",
              flexWrap: "nowrap",
              flexShrink: 0,
              alignSelf: "stretch",
            }}>
              <span style={{
                position: "relative",
                fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
                fontWeight: 400,
                fontSize: 9,
                textAlign: "right",
                whiteSpace: "nowrap",
                lineHeight: "13.500px",
                color: "rgb(107,114,128)",
                flexShrink: 0,
              }}>Avec vos subventions</span>
              <div style={{
                position: "relative",
                display: "flex",
                flexDirection: "row",
                justifyContent: "flex-end",
                alignItems: "center",
                flexWrap: "nowrap",
                flexShrink: 0,
              }}>
                <span style={{
                  position: "relative",
                  fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
                  fontWeight: 600,
                  fontSize: 17,
                  textAlign: "right",
                  whiteSpace: "nowrap",
                  lineHeight: "30px",
                  color: "rgb(44,62,125)",
                  flexShrink: 0,
                }}>1 889.10€</span>
              </div>
            </div>
            <div style={{
              position: "relative",
              display: "flex",
              flexDirection: "column",
              alignItems: "flex-end",
              flexWrap: "nowrap",
              flexShrink: 0,
              alignSelf: "stretch",
            }}>
              <span style={{
                position: "relative",
                fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
                fontWeight: 400,
                fontSize: 9,
                textAlign: "right",
                whiteSpace: "nowrap",
                lineHeight: "13.500px",
                color: "rgb(156,163,175)",
                flexShrink: 0,
              }}>Prix de référence : 2 099€</span>
            </div>
          </div>
        </div>
        <div style={{
          position: "absolute",
          left: 191,
          top: 1,
          width: 1,
          height: 95,
          backgroundColor: "rgb(229,231,235)",
        }} />
      </div>
      <svg width={382} height={516} viewBox="0 0 382 516" fill="none" style={{
        position: "absolute",
        left: 0,
        top: 0,
        width: 382,
        height: 516,
        opacity: 0,
        overflow: "hidden",
        borderRadius: 16,
        color: "rgb(85,89,117)",
      }}>
        <path d={"M 0 16 C 0 7.163 7.163 0 16 0 L 366 0 C 374.837 0 382 7.163 382 16 L 382 500 C 382 508.837 374.837 516 366 516 L 16 516 C 7.163 516 0 508.837 0 500 L 0 16 Z"} fill="currentColor" fillRule="nonzero" />
      </svg>
    </div>
  );
  const __body10 = () => (
    <div className={props.className} style={{
      width: 382,
      height: 516,
      borderRadius: 16,
      position: "relative",
      ...props.style,
    }}>
      <div style={{
        position: "absolute",
        left: 0,
        top: 300,
        width: 382,
        minHeight: 120,
        borderTop: "1px solid rgb(229,231,235)",
        borderRight: "1px solid rgb(229,231,235)",
        borderBottom: "1px solid rgb(229,231,235)",
        borderLeft: "1px solid rgb(229,231,235)",
        display: "flex",
        flexDirection: "column",
        gap: 32.0099983215332,
        padding: "16px 16px 25.400px 16px",
        alignItems: "flex-start",
        flexWrap: "nowrap",
        boxSizing: "border-box",
      }}>
        <div style={{
          position: "relative",
          overflow: "hidden",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          flexWrap: "nowrap",
          flexShrink: 0,
          alignSelf: "stretch",
        }}>
          <span style={{
            position: "relative",
            fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
            fontWeight: 600,
            fontSize: 16,
            textAlign: "center",
            whiteSpace: "nowrap",
            lineHeight: "21.600px",
            color: "rgb(31,41,55)",
            flexShrink: 0,
          }}>{props.text1 ?? "Punk Rider"}</span>
        </div>
        <div style={{
          position: "relative",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          flexWrap: "nowrap",
          flexShrink: 0,
          alignSelf: "stretch",
        }}>
          <span style={{
            position: "relative",
            fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
            fontWeight: 400,
            fontSize: 14,
            textAlign: "center",
            whiteSpace: "nowrap",
            lineHeight: "24px",
            color: "rgb(107,114,128)",
            flexShrink: 0,
          }}>{props.text2 ?? "par Punk Electric"}</span>
        </div>
      </div>
      <div style={{
        position: "absolute",
        left: 0,
        top: 0,
        width: 382,
        height: 300,
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "flex-start",
        flexWrap: "nowrap",
      }}>
        <svg viewBox="0 0 382 300" fill="none" style={{
          position: "relative",
          overflow: "hidden",
          flexGrow: 1,
          alignSelf: "stretch",
        }}>
          <path d={"M 0 0 L 382 0 L 382 300 L 0 300 L 0 0 Z"} fill="currentColor" fillRule="nonzero" />
        </svg>
      </div>
      <div style={{
        position: "absolute",
        left: 0,
        top: 420,
        width: 382,
        height: 96,
        minHeight: 96,
        backgroundColor: "rgb(249,250,251)",
        borderTop: "1px solid rgb(229,231,235)",
        borderRight: "1px solid rgb(229,231,235)",
        borderBottom: "1px solid rgb(229,231,235)",
        borderLeft: "1px solid rgb(229,231,235)",
        display: "flex",
        flexDirection: "row",
        padding: "10px 16px 10px 16px",
        justifyContent: "center",
        alignItems: "center",
        flexWrap: "nowrap",
        boxSizing: "border-box",
      }}>
        <div style={{
          position: "relative",
          display: "flex",
          flexDirection: "row",
          justifyContent: "space-between",
          alignItems: "flex-start",
          flexWrap: "wrap",
          flexGrow: 1,
        }}>
          <div style={{
            position: "relative",
            maxWidth: 175,
            maxHeight: null,
            display: "flex",
            flexDirection: "column",
            padding: "0px 6px 0px 0px",
            alignItems: "flex-start",
            flexWrap: "nowrap",
            boxSizing: "border-box",
            flexGrow: 1,
            alignSelf: "stretch",
          }}>
            <div style={{
              position: "relative",
              display: "flex",
              flexDirection: "column",
              alignItems: "flex-start",
              flexWrap: "nowrap",
              flexShrink: 0,
              alignSelf: "stretch",
            }}>
              <span style={{
                position: "relative",
                fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
                fontWeight: 400,
                fontSize: 9,
                lineHeight: "13.500px",
                color: "rgb(107,114,128)",
                flexShrink: 0,
                alignSelf: "stretch",
                whiteSpace: "nowrap",
              }}>{props.text3 ?? "Avec vos subventions"}</span>
            </div>
            <div style={{
              position: "relative",
              display: "flex",
              flexDirection: "row",
              alignItems: "center",
              flexWrap: "nowrap",
              flexShrink: 0,
            }}>
              <span style={{
                position: "relative",
                fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
                fontWeight: 600,
                fontSize: 17,
                whiteSpace: "nowrap",
                lineHeight: "30px",
                color: "rgb(44,62,125)",
                flexShrink: 0,
              }}>{props.text4 ?? "44.65€/mois"}</span>
            </div>
            <div style={{
              position: "relative",
              display: "flex",
              flexDirection: "column",
              alignItems: "flex-start",
              flexWrap: "nowrap",
              flexShrink: 0,
              alignSelf: "stretch",
            }}>
              <span style={{
                position: "relative",
                fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
                fontWeight: 400,
                fontSize: 9,
                lineHeight: "13.500px",
                color: "rgb(156,163,175)",
                flexShrink: 0,
                alignSelf: "stretch",
              }}>Prix de référence : 44.65€/mois</span>
            </div>
          </div>
          <div style={{
            position: "relative",
            maxWidth: 175,
            maxHeight: null,
            display: "flex",
            flexDirection: "column",
            padding: "0px 6px 0px 6px",
            alignItems: "flex-start",
            flexWrap: "nowrap",
            boxSizing: "border-box",
            flexGrow: 1,
            alignSelf: "stretch",
          }}>
            <div style={{
              position: "relative",
              display: "flex",
              flexDirection: "column",
              gap: -0.25,
              alignItems: "flex-end",
              flexWrap: "nowrap",
              flexShrink: 0,
              alignSelf: "stretch",
            }}>
              <span style={{
                position: "relative",
                fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
                fontWeight: 400,
                fontSize: 9,
                textAlign: "right",
                whiteSpace: "nowrap",
                lineHeight: "13.500px",
                color: "rgb(107,114,128)",
                flexShrink: 0,
              }}>Avec vos subventions</span>
              <div style={{
                position: "relative",
                display: "flex",
                flexDirection: "row",
                justifyContent: "flex-end",
                alignItems: "center",
                flexWrap: "nowrap",
                flexShrink: 0,
              }}>
                <span style={{
                  position: "relative",
                  fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
                  fontWeight: 600,
                  fontSize: 17,
                  textAlign: "right",
                  whiteSpace: "nowrap",
                  lineHeight: "30px",
                  color: "rgb(44,62,125)",
                  flexShrink: 0,
                }}>899€</span>
              </div>
            </div>
            <div style={{
              position: "relative",
              display: "flex",
              flexDirection: "column",
              alignItems: "flex-end",
              flexWrap: "nowrap",
              flexShrink: 0,
              alignSelf: "stretch",
            }}>
              <span style={{
                position: "relative",
                fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
                fontWeight: 400,
                fontSize: 9,
                textAlign: "right",
                whiteSpace: "nowrap",
                lineHeight: "13.500px",
                color: "rgb(156,163,175)",
                flexShrink: 0,
              }}>Prix de référence : 899€</span>
            </div>
          </div>
        </div>
        <div style={{
          position: "absolute",
          left: 191,
          top: 1,
          width: 1,
          height: 95,
          backgroundColor: "rgb(229,231,235)",
        }} />
      </div>
      <svg width={382} height={516} viewBox="0 0 382 516" fill="none" style={{
        position: "absolute",
        left: 0,
        top: 0,
        width: 382,
        height: 516,
        opacity: 0.04,
        overflow: "hidden",
        borderRadius: 16,
        color: "rgb(85,89,117)",
      }}>
        <path d={"M 0 16 C 0 7.163 7.163 0 16 0 L 366 0 C 374.837 0 382 7.163 382 16 L 382 500 C 382 508.837 374.837 516 366 516 L 16 516 C 7.163 516 0 508.837 0 500 L 0 16 Z"} fill="currentColor" fillRule="nonzero" />
      </svg>
    </div>
  );
  const __body11 = () => (
    <div className={props.className} style={{
      width: 382,
      height: 516,
      borderRadius: 16,
      position: "relative",
      ...props.style,
    }}>
      <div style={{
        position: "absolute",
        left: 0,
        top: 300,
        width: 382,
        minHeight: 120,
        borderTop: "1px solid rgb(229,231,235)",
        borderRight: "1px solid rgb(229,231,235)",
        borderBottom: "1px solid rgb(229,231,235)",
        borderLeft: "1px solid rgb(229,231,235)",
        display: "flex",
        flexDirection: "column",
        gap: 32.0099983215332,
        padding: "16px 16px 25.400px 16px",
        alignItems: "flex-start",
        flexWrap: "nowrap",
        boxSizing: "border-box",
      }}>
        <div style={{
          position: "relative",
          overflow: "hidden",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          flexWrap: "nowrap",
          flexShrink: 0,
          alignSelf: "stretch",
        }}>
          <span style={{
            position: "relative",
            fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
            fontWeight: 600,
            fontSize: 16,
            textAlign: "center",
            whiteSpace: "nowrap",
            lineHeight: "21.600px",
            color: "rgb(31,41,55)",
            flexShrink: 0,
          }}>{props.text1 ?? "Punk Rider"}</span>
        </div>
        <div style={{
          position: "relative",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          flexWrap: "nowrap",
          flexShrink: 0,
          alignSelf: "stretch",
        }}>
          <span style={{
            position: "relative",
            fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
            fontWeight: 400,
            fontSize: 14,
            textAlign: "center",
            whiteSpace: "nowrap",
            lineHeight: "24px",
            color: "rgb(107,114,128)",
            flexShrink: 0,
          }}>{props.text2 ?? "par Punk Electric"}</span>
        </div>
      </div>
      <div style={{
        position: "absolute",
        left: 0,
        top: 0,
        width: 382,
        height: 300,
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "flex-start",
        flexWrap: "nowrap",
      }}>
        <svg viewBox="0 0 382 300" fill="none" style={{
          position: "relative",
          overflow: "hidden",
          flexGrow: 1,
          alignSelf: "stretch",
        }}>
          <path d={"M 0 0 L 382 0 L 382 300 L 0 300 L 0 0 Z"} fill="currentColor" fillRule="nonzero" />
        </svg>
      </div>
      <div style={{
        position: "absolute",
        left: 0,
        top: 420,
        width: 382,
        height: 96,
        minHeight: 96,
        backgroundColor: "rgb(249,250,251)",
        borderTop: "1px solid rgb(229,231,235)",
        borderRight: "1px solid rgb(229,231,235)",
        borderBottom: "1px solid rgb(229,231,235)",
        borderLeft: "1px solid rgb(229,231,235)",
        display: "flex",
        flexDirection: "row",
        padding: "10px 16px 10px 16px",
        justifyContent: "center",
        alignItems: "center",
        flexWrap: "nowrap",
        boxSizing: "border-box",
      }}>
        <div style={{
          position: "relative",
          display: "flex",
          flexDirection: "row",
          justifyContent: "space-between",
          alignItems: "flex-start",
          flexWrap: "wrap",
          flexGrow: 1,
        }}>
          <div style={{
            position: "relative",
            maxWidth: 175,
            maxHeight: null,
            display: "flex",
            flexDirection: "column",
            padding: "0px 6px 0px 0px",
            alignItems: "flex-start",
            flexWrap: "nowrap",
            boxSizing: "border-box",
            flexGrow: 1,
            alignSelf: "stretch",
          }}>
            <div style={{
              position: "relative",
              display: "flex",
              flexDirection: "column",
              alignItems: "flex-start",
              flexWrap: "nowrap",
              flexShrink: 0,
              alignSelf: "stretch",
            }}>
              <span style={{
                position: "relative",
                fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
                fontWeight: 400,
                fontSize: 9,
                lineHeight: "13.500px",
                color: "rgb(107,114,128)",
                flexShrink: 0,
                alignSelf: "stretch",
                whiteSpace: "nowrap",
              }}>{props.text3 ?? "Avec vos subventions"}</span>
            </div>
            <div style={{
              position: "relative",
              display: "flex",
              flexDirection: "row",
              alignItems: "center",
              flexWrap: "nowrap",
              flexShrink: 0,
            }}>
              <span style={{
                position: "relative",
                fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
                fontWeight: 600,
                fontSize: 17,
                whiteSpace: "nowrap",
                lineHeight: "30px",
                color: "rgb(44,62,125)",
                flexShrink: 0,
              }}>{props.text4 ?? "44.65€/mois"}</span>
            </div>
            <div style={{
              position: "relative",
              display: "flex",
              flexDirection: "column",
              alignItems: "flex-start",
              flexWrap: "nowrap",
              flexShrink: 0,
              alignSelf: "stretch",
            }}>
              <span style={{
                position: "relative",
                fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
                fontWeight: 400,
                fontSize: 9,
                lineHeight: "13.500px",
                color: "rgb(156,163,175)",
                flexShrink: 0,
                alignSelf: "stretch",
              }}>Prix de référence : 44.65€/mois</span>
            </div>
          </div>
          <div style={{
            position: "relative",
            maxWidth: 175,
            maxHeight: null,
            display: "flex",
            flexDirection: "column",
            padding: "0px 6px 0px 6px",
            alignItems: "flex-start",
            flexWrap: "nowrap",
            boxSizing: "border-box",
            flexGrow: 1,
            alignSelf: "stretch",
          }}>
            <div style={{
              position: "relative",
              display: "flex",
              flexDirection: "column",
              gap: -0.25,
              alignItems: "flex-end",
              flexWrap: "nowrap",
              flexShrink: 0,
              alignSelf: "stretch",
            }}>
              <span style={{
                position: "relative",
                fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
                fontWeight: 400,
                fontSize: 9,
                textAlign: "right",
                whiteSpace: "nowrap",
                lineHeight: "13.500px",
                color: "rgb(107,114,128)",
                flexShrink: 0,
              }}>Avec vos subventions</span>
              <div style={{
                position: "relative",
                display: "flex",
                flexDirection: "row",
                justifyContent: "flex-end",
                alignItems: "center",
                flexWrap: "nowrap",
                flexShrink: 0,
              }}>
                <span style={{
                  position: "relative",
                  fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
                  fontWeight: 600,
                  fontSize: 17,
                  textAlign: "right",
                  whiteSpace: "nowrap",
                  lineHeight: "30px",
                  color: "rgb(44,62,125)",
                  flexShrink: 0,
                }}>899€</span>
              </div>
            </div>
            <div style={{
              position: "relative",
              display: "flex",
              flexDirection: "column",
              alignItems: "flex-end",
              flexWrap: "nowrap",
              flexShrink: 0,
              alignSelf: "stretch",
            }}>
              <span style={{
                position: "relative",
                fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
                fontWeight: 400,
                fontSize: 9,
                textAlign: "right",
                whiteSpace: "nowrap",
                lineHeight: "13.500px",
                color: "rgb(156,163,175)",
                flexShrink: 0,
              }}>Prix de référence : 899€</span>
            </div>
          </div>
        </div>
        <div style={{
          position: "absolute",
          left: 191,
          top: 1,
          width: 1,
          height: 95,
          backgroundColor: "rgb(229,231,235)",
        }} />
      </div>
      <svg width={382} height={516} viewBox="0 0 382 516" fill="none" style={{
        position: "absolute",
        left: 0,
        top: 0,
        width: 382,
        height: 516,
        opacity: 0,
        overflow: "hidden",
        borderRadius: 16,
        color: "rgb(85,89,117)",
      }}>
        <path d={"M 0 16 C 0 7.163 7.163 0 16 0 L 366 0 C 374.837 0 382 7.163 382 16 L 382 500 C 382 508.837 374.837 516 366 516 L 16 516 C 7.163 516 0 508.837 0 500 L 0 16 Z"} fill="currentColor" fillRule="nonzero" />
      </svg>
    </div>
  );
  const __body12 = () => (
    <div className={props.className} style={{
      width: 304,
      height: 434.89,
      borderRadius: 16,
      position: "relative",
      ...props.style,
    }}>
      <div style={{
        position: "absolute",
        left: 0,
        top: 200,
        width: 304,
        minHeight: 80,
        borderTop: "1px solid rgb(229,231,235)",
        borderRight: "1px solid rgb(229,231,235)",
        borderBottom: "1px solid rgb(229,231,235)",
        borderLeft: "1px solid rgb(229,231,235)",
        display: "flex",
        flexDirection: "column",
        gap: 32,
        padding: "16px 16px 16px 16px",
        alignItems: "flex-start",
        flexWrap: "nowrap",
        boxSizing: "border-box",
      }}>
        <div style={{
          position: "relative",
          height: 45.89,
          overflow: "hidden",
          flexShrink: 0,
          alignSelf: "stretch",
        }}>
          <span style={{
            position: "absolute",
            left: 17.6,
            top: -0.555,
            width: 237,
            height: 69,
            fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
            fontWeight: 600,
            fontSize: 17,
            textAlign: "center",
            lineHeight: "22.950px",
            color: "rgb(31,41,55)",
            whiteSpace: "pre-wrap",
          }}>{props.text1 ?? "On va où ?, l'application qui\nsécurise vos trajets du…\nquotidien"}</span>
        </div>
        <div style={{
          position: "relative",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          flexWrap: "nowrap",
          flexShrink: 0,
          alignSelf: "stretch",
        }}>
          <span style={{
            position: "relative",
            fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
            fontWeight: 400,
            fontSize: 14,
            textAlign: "center",
            whiteSpace: "nowrap",
            lineHeight: "24px",
            color: "rgb(107,114,128)",
            flexShrink: 0,
          }}>{props.text2 ?? "par Baltee"}</span>
        </div>
      </div>
      <div style={{
        position: "absolute",
        left: 0,
        top: 0,
        width: 304,
        height: 200,
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "flex-start",
        flexWrap: "nowrap",
      }}>
        <svg viewBox="0 0 304 200" fill="none" style={{
          position: "relative",
          overflow: "hidden",
          flexGrow: 1,
          alignSelf: "stretch",
        }}>
          <path d={"M 0 0 L 304 0 L 304 200 L 0 200 L 0 0 Z"} fill="currentColor" fillRule="nonzero" />
        </svg>
      </div>
      <div style={{
        position: "absolute",
        left: 0,
        top: 334.89,
        width: 304,
        minHeight: 100,
        backgroundColor: "rgb(249,250,251)",
        borderTop: "1px solid rgb(229,231,235)",
        borderRight: "1px solid rgb(229,231,235)",
        borderBottom: "1px solid rgb(229,231,235)",
        borderLeft: "1px solid rgb(229,231,235)",
        display: "flex",
        flexDirection: "row",
        padding: "17.250px 14px 17.250px 14px",
        justifyContent: "center",
        alignItems: "center",
        flexWrap: "nowrap",
        boxSizing: "border-box",
      }}>
        <div style={{
          position: "relative",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          flexWrap: "nowrap",
          flexShrink: 0,
        }}>
          <div style={{
            position: "relative",
            display: "flex",
            flexDirection: "column",
            gap: -0.5,
            alignItems: "center",
            flexWrap: "nowrap",
            flexShrink: 0,
          }}>
            <span style={{
              position: "relative",
              fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
              fontWeight: 400,
              fontSize: 11,
              textAlign: "center",
              whiteSpace: "nowrap",
              lineHeight: "16.500px",
              color: "rgb(107,114,128)",
              flexShrink: 0,
            }}>{props.text3 ?? "Prix après subventions"}</span>
            <div style={{
              position: "relative",
              display: "flex",
              flexDirection: "row",
              justifyContent: "center",
              alignItems: "center",
              flexWrap: "nowrap",
              flexShrink: 0,
            }}>
              <span style={{
                position: "relative",
                fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
                fontWeight: 600,
                fontSize: 24,
                textAlign: "center",
                whiteSpace: "nowrap",
                lineHeight: "30px",
                color: "rgb(44,62,125)",
                flexShrink: 0,
              }}>{props.text4 ?? "11.99€"}</span>
            </div>
          </div>
          <span style={{
            position: "relative",
            fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
            fontWeight: 400,
            fontSize: 12,
            textAlign: "center",
            whiteSpace: "nowrap",
            lineHeight: "18px",
            color: "rgb(156,163,175)",
            flexShrink: 0,
          }}>Prix de référence : 11.99€</span>
        </div>
      </div>
      <svg width={304} height={434.890} viewBox="0 0 304 434.890" fill="none" style={{
        position: "absolute",
        left: 0,
        top: 0,
        width: 304,
        height: 434.89,
        opacity: 0.04,
        overflow: "hidden",
        borderRadius: 16,
        color: "rgb(85,89,117)",
      }}>
        <path d={"M 0 16 C 0 7.163 7.163 0 16 0 L 288 0 C 296.837 0 304 7.163 304 16 L 304 418.89 C 304 427.727 296.837 434.89 288 434.89 L 16 434.89 C 7.163 434.89 0 427.727 0 418.89 L 0 16 Z"} fill="currentColor" fillRule="nonzero" />
      </svg>
    </div>
  );
  const __body13 = () => (
    <div className={props.className} style={{
      width: 304,
      height: 434.89,
      borderRadius: 16,
      position: "relative",
      ...props.style,
    }}>
      <div style={{
        position: "absolute",
        left: 0,
        top: 200,
        width: 304,
        minHeight: 80,
        borderTop: "1px solid rgb(229,231,235)",
        borderRight: "1px solid rgb(229,231,235)",
        borderBottom: "1px solid rgb(229,231,235)",
        borderLeft: "1px solid rgb(229,231,235)",
        display: "flex",
        flexDirection: "column",
        gap: 32,
        padding: "16px 16px 16px 16px",
        alignItems: "flex-start",
        flexWrap: "nowrap",
        boxSizing: "border-box",
      }}>
        <div style={{
          position: "relative",
          height: 45.89,
          overflow: "hidden",
          flexShrink: 0,
          alignSelf: "stretch",
        }}>
          <span style={{
            position: "absolute",
            left: 17.6,
            top: -0.555,
            width: 237,
            height: 69,
            fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
            fontWeight: 600,
            fontSize: 17,
            textAlign: "center",
            lineHeight: "22.950px",
            color: "rgb(31,41,55)",
            whiteSpace: "pre-wrap",
          }}>{props.text1 ?? "On va où ?, l'application qui\nsécurise vos trajets du…\nquotidien"}</span>
        </div>
        <div style={{
          position: "relative",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          flexWrap: "nowrap",
          flexShrink: 0,
          alignSelf: "stretch",
        }}>
          <span style={{
            position: "relative",
            fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
            fontWeight: 400,
            fontSize: 14,
            textAlign: "center",
            whiteSpace: "nowrap",
            lineHeight: "24px",
            color: "rgb(107,114,128)",
            flexShrink: 0,
          }}>{props.text2 ?? "par Baltee"}</span>
        </div>
      </div>
      <div style={{
        position: "absolute",
        left: 0,
        top: 0,
        width: 304,
        height: 200,
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "flex-start",
        flexWrap: "nowrap",
      }}>
        <svg viewBox="0 0 304 200" fill="none" style={{
          position: "relative",
          overflow: "hidden",
          flexGrow: 1,
          alignSelf: "stretch",
        }}>
          <path d={"M 0 0 L 304 0 L 304 200 L 0 200 L 0 0 Z"} fill="currentColor" fillRule="nonzero" />
        </svg>
      </div>
      <div style={{
        position: "absolute",
        left: 0,
        top: 334.89,
        width: 304,
        minHeight: 100,
        backgroundColor: "rgb(249,250,251)",
        borderTop: "1px solid rgb(229,231,235)",
        borderRight: "1px solid rgb(229,231,235)",
        borderBottom: "1px solid rgb(229,231,235)",
        borderLeft: "1px solid rgb(229,231,235)",
        display: "flex",
        flexDirection: "row",
        padding: "17.250px 14px 17.250px 14px",
        justifyContent: "center",
        alignItems: "center",
        flexWrap: "nowrap",
        boxSizing: "border-box",
      }}>
        <div style={{
          position: "relative",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          flexWrap: "nowrap",
          flexShrink: 0,
        }}>
          <div style={{
            position: "relative",
            display: "flex",
            flexDirection: "column",
            gap: -0.5,
            alignItems: "center",
            flexWrap: "nowrap",
            flexShrink: 0,
          }}>
            <span style={{
              position: "relative",
              fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
              fontWeight: 400,
              fontSize: 11,
              textAlign: "center",
              whiteSpace: "nowrap",
              lineHeight: "16.500px",
              color: "rgb(107,114,128)",
              flexShrink: 0,
            }}>{props.text3 ?? "Prix après subventions"}</span>
            <div style={{
              position: "relative",
              display: "flex",
              flexDirection: "row",
              justifyContent: "center",
              alignItems: "center",
              flexWrap: "nowrap",
              flexShrink: 0,
            }}>
              <span style={{
                position: "relative",
                fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
                fontWeight: 600,
                fontSize: 24,
                textAlign: "center",
                whiteSpace: "nowrap",
                lineHeight: "30px",
                color: "rgb(44,62,125)",
                flexShrink: 0,
              }}>{props.text4 ?? "11.99€"}</span>
            </div>
          </div>
          <span style={{
            position: "relative",
            fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
            fontWeight: 400,
            fontSize: 12,
            textAlign: "center",
            whiteSpace: "nowrap",
            lineHeight: "18px",
            color: "rgb(156,163,175)",
            flexShrink: 0,
          }}>Prix de référence : 11.99€</span>
        </div>
      </div>
      <svg width={304} height={434.890} viewBox="0 0 304 434.890" fill="none" style={{
        position: "absolute",
        left: 0,
        top: 0,
        width: 304,
        height: 434.89,
        opacity: 0,
        overflow: "hidden",
        borderRadius: 16,
        color: "rgb(85,89,117)",
      }}>
        <path d={"M 0 16 C 0 7.163 7.163 0 16 0 L 288 0 C 296.837 0 304 7.163 304 16 L 304 418.89 C 304 427.727 296.837 434.89 288 434.89 L 16 434.89 C 7.163 434.89 0 427.727 0 418.89 L 0 16 Z"} fill="currentColor" fillRule="nonzero" />
      </svg>
    </div>
  );
  const __body14 = () => (
    <div className={props.className} style={{
      width: 304,
      height: 416.45,
      borderRadius: 16,
      position: "relative",
      ...props.style,
    }}>
      <div style={{
        position: "absolute",
        left: 0,
        top: 200,
        width: 304,
        minHeight: 80,
        borderTop: "1px solid rgb(229,231,235)",
        borderRight: "1px solid rgb(229,231,235)",
        borderBottom: "1px solid rgb(229,231,235)",
        borderLeft: "1px solid rgb(229,231,235)",
        display: "flex",
        flexDirection: "column",
        gap: 31.989999771118164,
        padding: "16px 16px 16px 16px",
        alignItems: "flex-start",
        flexWrap: "nowrap",
        boxSizing: "border-box",
      }}>
        <div style={{
          position: "relative",
          overflow: "hidden",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          flexWrap: "nowrap",
          flexShrink: 0,
          alignSelf: "stretch",
        }}>
          <span style={{
            position: "relative",
            fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
            fontWeight: 600,
            fontSize: 17,
            textAlign: "center",
            whiteSpace: "nowrap",
            lineHeight: "22.950px",
            color: "rgb(31,41,55)",
            flexShrink: 0,
          }}>{props.text1 ?? "RIDER PRO MAX"}</span>
        </div>
        <div style={{
          position: "relative",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          flexWrap: "nowrap",
          flexShrink: 0,
          alignSelf: "stretch",
        }}>
          <span style={{
            position: "relative",
            fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
            fontWeight: 400,
            fontSize: 14,
            textAlign: "center",
            whiteSpace: "nowrap",
            lineHeight: "24px",
            color: "rgb(107,114,128)",
            flexShrink: 0,
          }}>{props.text2 ?? "par Punk Electric"}</span>
        </div>
      </div>
      <div style={{
        position: "absolute",
        left: 0,
        top: 0,
        width: 304,
        height: 200,
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "flex-start",
        flexWrap: "nowrap",
      }}>
        <svg viewBox="0 0 304 200" fill="none" style={{
          position: "relative",
          overflow: "hidden",
          flexGrow: 1,
          alignSelf: "stretch",
        }}>
          <path d={"M 0 0 L 304 0 L 304 200 L 0 200 L 0 0 Z"} fill="currentColor" fillRule="nonzero" />
        </svg>
        <div style={{
          position: "absolute",
          left: 12,
          top: 12,
          width: 236,
          display: "flex",
          flexDirection: "column",
          alignItems: "flex-start",
          flexWrap: "nowrap",
        }}>
          <div style={{
            position: "relative",
            height: 24,
            maxWidth: 236,
            maxHeight: null,
            borderRadius: 16,
            backgroundColor: "rgb(255,109,36)",
            display: "flex",
            flexDirection: "row",
            justifyContent: "center",
            alignItems: "center",
            flexWrap: "nowrap",
            flexShrink: 0,
          }}>
            <div style={{
              position: "relative",
              display: "flex",
              flexDirection: "column",
              padding: "0px 8px 0px 8px",
              alignItems: "center",
              flexWrap: "nowrap",
              boxSizing: "border-box",
              flexShrink: 0,
            }}>
              <span style={{
                position: "relative",
                fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
                fontWeight: 500,
                fontSize: 12,
                textAlign: "center",
                whiteSpace: "nowrap",
                lineHeight: "18px",
                color: "rgb(255,255,255)",
                flexShrink: 0,
              }}>{props.text3 ?? "rupture de stock"}</span>
            </div>
          </div>
        </div>
      </div>
      <div style={{
        position: "absolute",
        left: 0,
        top: 311.94,
        width: 304,
        minHeight: 100,
        backgroundColor: "rgb(249,250,251)",
        borderTop: "1px solid rgb(229,231,235)",
        borderRight: "1px solid rgb(229,231,235)",
        borderBottom: "1px solid rgb(229,231,235)",
        borderLeft: "1px solid rgb(229,231,235)",
        display: "flex",
        flexDirection: "row",
        padding: "12px 14px 12px 14px",
        justifyContent: "center",
        alignItems: "center",
        flexWrap: "nowrap",
        boxSizing: "border-box",
      }}>
        <div style={{
          position: "relative",
          display: "flex",
          flexDirection: "row",
          alignItems: "flex-start",
          flexWrap: "nowrap",
          flexGrow: 1,
        }}>
          <div style={{
            position: "relative",
            width: 129.5,
            display: "flex",
            flexDirection: "column",
            gap: -0.20000000298023224,
            alignItems: "center",
            flexWrap: "nowrap",
            flexShrink: 0,
            alignSelf: "stretch",
          }}>
            <span style={{
              position: "relative",
              fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
              fontWeight: 400,
              fontSize: 11,
              textAlign: "center",
              whiteSpace: "nowrap",
              lineHeight: "16.500px",
              color: "rgb(107,114,128)",
              flexShrink: 0,
            }}>{props.text4 ?? "Avec vos subventions"}</span>
            <div style={{
              position: "relative",
              display: "flex",
              flexDirection: "row",
              justifyContent: "center",
              alignItems: "center",
              flexWrap: "nowrap",
              flexShrink: 0,
            }}>
              <span style={{
                position: "relative",
                fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
                fontWeight: 600,
                fontSize: 17,
                textAlign: "center",
                whiteSpace: "nowrap",
                lineHeight: "30px",
                color: "rgb(44,62,125)",
                flexShrink: 0,
              }}>64.93€/mois</span>
            </div>
            <div style={{
              position: "relative",
              display: "flex",
              flexDirection: "column",
              padding: "0px 16.410px 0px 16.410px",
              alignItems: "center",
              flexWrap: "nowrap",
              boxSizing: "border-box",
              flexShrink: 0,
              alignSelf: "stretch",
            }}>
              <span style={{
                position: "relative",
                fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
                fontWeight: 400,
                fontSize: 11,
                textAlign: "center",
                lineHeight: "16.500px",
                color: "rgb(156,163,175)",
                textDecoration: "line-through",
                flexShrink: 0,
                alignSelf: "stretch",
                whiteSpace: "pre-wrap",
              }}>{"Prix de référence :\n64.93€/mois"}</span>
            </div>
          </div>
          <div style={{
            position: "relative",
            display: "flex",
            flexDirection: "row",
            alignItems: "flex-start",
            flexWrap: "nowrap",
            flexShrink: 0,
            alignSelf: "stretch",
          }}>
            <div style={{
              position: "relative",
              display: "flex",
              flexDirection: "column",
              padding: "0px 8px 0px 8px",
              justifyContent: "center",
              alignItems: "flex-start",
              flexWrap: "nowrap",
              boxSizing: "border-box",
              flexShrink: 0,
              alignSelf: "stretch",
            }}>
              <div style={{
                position: "relative",
                width: 1,
                borderRight: "1px solid rgba(0,0,0,0.12)",
                flexGrow: 1,
              }} />
            </div>
          </div>
          <div style={{
            position: "relative",
            width: 137.5,
            display: "flex",
            flexDirection: "column",
            padding: "0px 8px 0px 8px",
            justifyContent: "center",
            alignItems: "flex-start",
            flexWrap: "nowrap",
            boxSizing: "border-box",
            flexShrink: 0,
            alignSelf: "stretch",
          }}>
            <div style={{
              position: "relative",
              display: "flex",
              flexDirection: "column",
              gap: -0.20000000298023224,
              alignItems: "center",
              flexWrap: "nowrap",
              flexGrow: 1,
              alignSelf: "stretch",
            }}>
              <span style={{
                position: "relative",
                fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
                fontWeight: 400,
                fontSize: 11,
                textAlign: "center",
                whiteSpace: "nowrap",
                lineHeight: "16.500px",
                color: "rgb(107,114,128)",
                flexShrink: 0,
              }}>Avec vos subventions</span>
              <div style={{
                position: "relative",
                display: "flex",
                flexDirection: "row",
                justifyContent: "center",
                alignItems: "center",
                flexWrap: "nowrap",
                flexShrink: 0,
              }}>
                <span style={{
                  position: "relative",
                  fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
                  fontWeight: 600,
                  fontSize: 17,
                  textAlign: "center",
                  whiteSpace: "nowrap",
                  lineHeight: "30px",
                  color: "rgb(44,62,125)",
                  flexShrink: 0,
                }}>1 359€</span>
              </div>
              <div style={{
                position: "relative",
                display: "flex",
                flexDirection: "column",
                padding: "0px 16.410px 0px 16.410px",
                alignItems: "center",
                flexWrap: "nowrap",
                boxSizing: "border-box",
                flexShrink: 0,
                alignSelf: "stretch",
              }}>
                <span style={{
                  position: "relative",
                  fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
                  fontWeight: 400,
                  fontSize: 11,
                  textAlign: "center",
                  lineHeight: "16.500px",
                  color: "rgb(156,163,175)",
                  textDecoration: "line-through",
                  flexShrink: 0,
                  alignSelf: "stretch",
                  whiteSpace: "pre-wrap",
                }}>{"Prix de référence :\n1 359€"}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <svg width={304} height={416.450} viewBox="0 0 304 416.450" fill="none" style={{
        position: "absolute",
        left: 0,
        top: 0,
        width: 304,
        height: 416.45,
        opacity: 0.04,
        overflow: "hidden",
        borderRadius: 16,
        color: "rgb(85,89,117)",
      }}>
        <path d={"M 0 16 C 0 7.163 7.163 0 16 0 L 288 0 C 296.837 0 304 7.163 304 16 L 304 400.45 C 304 409.287 296.837 416.45 288 416.45 L 16 416.45 C 7.163 416.45 0 409.287 0 400.45 L 0 16 Z"} fill="currentColor" fillRule="nonzero" />
      </svg>
    </div>
  );
  const __body15 = () => (
    <div className={props.className} style={{
      width: 304,
      height: 416.45,
      borderRadius: 16,
      position: "relative",
      ...props.style,
    }}>
      <div style={{
        position: "absolute",
        left: 0,
        top: 200,
        width: 304,
        minHeight: 80,
        borderTop: "1px solid rgb(229,231,235)",
        borderRight: "1px solid rgb(229,231,235)",
        borderBottom: "1px solid rgb(229,231,235)",
        borderLeft: "1px solid rgb(229,231,235)",
        display: "flex",
        flexDirection: "column",
        gap: 31.989999771118164,
        padding: "16px 16px 16px 16px",
        alignItems: "flex-start",
        flexWrap: "nowrap",
        boxSizing: "border-box",
      }}>
        <div style={{
          position: "relative",
          overflow: "hidden",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          flexWrap: "nowrap",
          flexShrink: 0,
          alignSelf: "stretch",
        }}>
          <span style={{
            position: "relative",
            fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
            fontWeight: 600,
            fontSize: 17,
            textAlign: "center",
            whiteSpace: "nowrap",
            lineHeight: "22.950px",
            color: "rgb(31,41,55)",
            flexShrink: 0,
          }}>{props.text1 ?? "RIDER PRO MAX"}</span>
        </div>
        <div style={{
          position: "relative",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          flexWrap: "nowrap",
          flexShrink: 0,
          alignSelf: "stretch",
        }}>
          <span style={{
            position: "relative",
            fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
            fontWeight: 400,
            fontSize: 14,
            textAlign: "center",
            whiteSpace: "nowrap",
            lineHeight: "24px",
            color: "rgb(107,114,128)",
            flexShrink: 0,
          }}>{props.text2 ?? "par Punk Electric"}</span>
        </div>
      </div>
      <div style={{
        position: "absolute",
        left: 0,
        top: 0,
        width: 304,
        height: 200,
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "flex-start",
        flexWrap: "nowrap",
      }}>
        <svg viewBox="0 0 304 200" fill="none" style={{
          position: "relative",
          overflow: "hidden",
          flexGrow: 1,
          alignSelf: "stretch",
        }}>
          <path d={"M 0 0 L 304 0 L 304 200 L 0 200 L 0 0 Z"} fill="currentColor" fillRule="nonzero" />
        </svg>
        <div style={{
          position: "absolute",
          left: 12,
          top: 12,
          width: 236,
          display: "flex",
          flexDirection: "column",
          alignItems: "flex-start",
          flexWrap: "nowrap",
        }}>
          <div style={{
            position: "relative",
            height: 24,
            maxWidth: 236,
            maxHeight: null,
            borderRadius: 16,
            backgroundColor: "rgb(255,109,36)",
            display: "flex",
            flexDirection: "row",
            justifyContent: "center",
            alignItems: "center",
            flexWrap: "nowrap",
            flexShrink: 0,
          }}>
            <div style={{
              position: "relative",
              display: "flex",
              flexDirection: "column",
              padding: "0px 8px 0px 8px",
              alignItems: "center",
              flexWrap: "nowrap",
              boxSizing: "border-box",
              flexShrink: 0,
            }}>
              <span style={{
                position: "relative",
                fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
                fontWeight: 500,
                fontSize: 12,
                textAlign: "center",
                whiteSpace: "nowrap",
                lineHeight: "18px",
                color: "rgb(255,255,255)",
                flexShrink: 0,
              }}>{props.text3 ?? "rupture de stock"}</span>
            </div>
          </div>
        </div>
      </div>
      <div style={{
        position: "absolute",
        left: 0,
        top: 311.94,
        width: 304,
        minHeight: 100,
        backgroundColor: "rgb(249,250,251)",
        borderTop: "1px solid rgb(229,231,235)",
        borderRight: "1px solid rgb(229,231,235)",
        borderBottom: "1px solid rgb(229,231,235)",
        borderLeft: "1px solid rgb(229,231,235)",
        display: "flex",
        flexDirection: "row",
        padding: "12px 14px 12px 14px",
        justifyContent: "center",
        alignItems: "center",
        flexWrap: "nowrap",
        boxSizing: "border-box",
      }}>
        <div style={{
          position: "relative",
          display: "flex",
          flexDirection: "row",
          alignItems: "flex-start",
          flexWrap: "nowrap",
          flexGrow: 1,
        }}>
          <div style={{
            position: "relative",
            width: 129.5,
            display: "flex",
            flexDirection: "column",
            gap: -0.20000000298023224,
            alignItems: "center",
            flexWrap: "nowrap",
            flexShrink: 0,
            alignSelf: "stretch",
          }}>
            <span style={{
              position: "relative",
              fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
              fontWeight: 400,
              fontSize: 11,
              textAlign: "center",
              whiteSpace: "nowrap",
              lineHeight: "16.500px",
              color: "rgb(107,114,128)",
              flexShrink: 0,
            }}>{props.text4 ?? "Avec vos subventions"}</span>
            <div style={{
              position: "relative",
              display: "flex",
              flexDirection: "row",
              justifyContent: "center",
              alignItems: "center",
              flexWrap: "nowrap",
              flexShrink: 0,
            }}>
              <span style={{
                position: "relative",
                fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
                fontWeight: 600,
                fontSize: 17,
                textAlign: "center",
                whiteSpace: "nowrap",
                lineHeight: "30px",
                color: "rgb(44,62,125)",
                flexShrink: 0,
              }}>64.93€/mois</span>
            </div>
            <div style={{
              position: "relative",
              display: "flex",
              flexDirection: "column",
              padding: "0px 16.410px 0px 16.410px",
              alignItems: "center",
              flexWrap: "nowrap",
              boxSizing: "border-box",
              flexShrink: 0,
              alignSelf: "stretch",
            }}>
              <span style={{
                position: "relative",
                fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
                fontWeight: 400,
                fontSize: 11,
                textAlign: "center",
                lineHeight: "16.500px",
                color: "rgb(156,163,175)",
                textDecoration: "line-through",
                flexShrink: 0,
                alignSelf: "stretch",
                whiteSpace: "pre-wrap",
              }}>{"Prix de référence :\n64.93€/mois"}</span>
            </div>
          </div>
          <div style={{
            position: "relative",
            display: "flex",
            flexDirection: "row",
            alignItems: "flex-start",
            flexWrap: "nowrap",
            flexShrink: 0,
            alignSelf: "stretch",
          }}>
            <div style={{
              position: "relative",
              display: "flex",
              flexDirection: "column",
              padding: "0px 8px 0px 8px",
              justifyContent: "center",
              alignItems: "flex-start",
              flexWrap: "nowrap",
              boxSizing: "border-box",
              flexShrink: 0,
              alignSelf: "stretch",
            }}>
              <div style={{
                position: "relative",
                width: 1,
                borderRight: "1px solid rgba(0,0,0,0.12)",
                flexGrow: 1,
              }} />
            </div>
          </div>
          <div style={{
            position: "relative",
            width: 137.5,
            display: "flex",
            flexDirection: "column",
            padding: "0px 8px 0px 8px",
            justifyContent: "center",
            alignItems: "flex-start",
            flexWrap: "nowrap",
            boxSizing: "border-box",
            flexShrink: 0,
            alignSelf: "stretch",
          }}>
            <div style={{
              position: "relative",
              display: "flex",
              flexDirection: "column",
              gap: -0.20000000298023224,
              alignItems: "center",
              flexWrap: "nowrap",
              flexGrow: 1,
              alignSelf: "stretch",
            }}>
              <span style={{
                position: "relative",
                fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
                fontWeight: 400,
                fontSize: 11,
                textAlign: "center",
                whiteSpace: "nowrap",
                lineHeight: "16.500px",
                color: "rgb(107,114,128)",
                flexShrink: 0,
              }}>Avec vos subventions</span>
              <div style={{
                position: "relative",
                display: "flex",
                flexDirection: "row",
                justifyContent: "center",
                alignItems: "center",
                flexWrap: "nowrap",
                flexShrink: 0,
              }}>
                <span style={{
                  position: "relative",
                  fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
                  fontWeight: 600,
                  fontSize: 17,
                  textAlign: "center",
                  whiteSpace: "nowrap",
                  lineHeight: "30px",
                  color: "rgb(44,62,125)",
                  flexShrink: 0,
                }}>1 359€</span>
              </div>
              <div style={{
                position: "relative",
                display: "flex",
                flexDirection: "column",
                padding: "0px 16.410px 0px 16.410px",
                alignItems: "center",
                flexWrap: "nowrap",
                boxSizing: "border-box",
                flexShrink: 0,
                alignSelf: "stretch",
              }}>
                <span style={{
                  position: "relative",
                  fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
                  fontWeight: 400,
                  fontSize: 11,
                  textAlign: "center",
                  lineHeight: "16.500px",
                  color: "rgb(156,163,175)",
                  textDecoration: "line-through",
                  flexShrink: 0,
                  alignSelf: "stretch",
                  whiteSpace: "pre-wrap",
                }}>{"Prix de référence :\n1 359€"}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <svg width={304} height={416.450} viewBox="0 0 304 416.450" fill="none" style={{
        position: "absolute",
        left: 0,
        top: 0,
        width: 304,
        height: 416.45,
        opacity: 0,
        overflow: "hidden",
        borderRadius: 16,
        color: "rgb(85,89,117)",
      }}>
        <path d={"M 0 16 C 0 7.163 7.163 0 16 0 L 288 0 C 296.837 0 304 7.163 304 16 L 304 400.45 C 304 409.287 296.837 416.45 288 416.45 L 16 416.45 C 7.163 416.45 0 409.287 0 400.45 L 0 16 Z"} fill="currentColor" fillRule="nonzero" />
      </svg>
    </div>
  );
  const __body16 = () => (
    <div className={props.className} style={{
      width: 382,
      height: 528.19,
      borderRadius: 16,
      position: "relative",
      ...props.style,
    }}>
      <div style={{
        position: "absolute",
        left: 0,
        top: 300,
        width: 382,
        minHeight: 120,
        borderTop: "1px solid rgb(229,231,235)",
        borderRight: "1px solid rgb(229,231,235)",
        borderBottom: "1px solid rgb(229,231,235)",
        borderLeft: "1px solid rgb(229,231,235)",
        display: "flex",
        flexDirection: "column",
        gap: 32,
        padding: "16px 16px 16px 16px",
        alignItems: "flex-start",
        flexWrap: "nowrap",
        boxSizing: "border-box",
      }}>
        <div style={{
          position: "relative",
          overflow: "hidden",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          flexWrap: "nowrap",
          flexShrink: 0,
          alignSelf: "stretch",
        }}>
          <span style={{
            position: "relative",
            fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
            fontWeight: 600,
            fontSize: 16,
            textAlign: "center",
            lineHeight: "21.600px",
            color: "rgb(31,41,55)",
            flexShrink: 0,
            whiteSpace: "pre-wrap",
          }}>{props.text1 ?? "On va où ?, l'application qui sécurise vos\ntrajets du quotidien"}</span>
        </div>
        <div style={{
          position: "relative",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          flexWrap: "nowrap",
          flexShrink: 0,
          alignSelf: "stretch",
        }}>
          <span style={{
            position: "relative",
            fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
            fontWeight: 400,
            fontSize: 14,
            textAlign: "center",
            whiteSpace: "nowrap",
            lineHeight: "24px",
            color: "rgb(107,114,128)",
            flexShrink: 0,
          }}>{props.text2 ?? "par Baltee"}</span>
        </div>
      </div>
      <div style={{
        position: "absolute",
        left: 0,
        top: 0,
        width: 382,
        height: 300,
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "flex-start",
        flexWrap: "nowrap",
      }}>
        <svg viewBox="0 0 382 300" fill="none" style={{
          position: "relative",
          overflow: "hidden",
          flexGrow: 1,
          alignSelf: "stretch",
        }}>
          <path d={"M 0 0 L 382 0 L 382 300 L 0 300 L 0 0 Z"} fill="currentColor" fillRule="nonzero" />
        </svg>
      </div>
      <div style={{
        position: "absolute",
        left: 0,
        top: 432.19,
        width: 382,
        height: 96,
        minHeight: 96,
        backgroundColor: "rgb(249,250,251)",
        borderTop: "1px solid rgb(229,231,235)",
        borderRight: "1px solid rgb(229,231,235)",
        borderBottom: "1px solid rgb(229,231,235)",
        borderLeft: "1px solid rgb(229,231,235)",
        display: "flex",
        flexDirection: "row",
        padding: "10px 16px 10px 16px",
        justifyContent: "center",
        alignItems: "center",
        flexWrap: "nowrap",
        boxSizing: "border-box",
      }}>
        <div style={{
          position: "relative",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          flexWrap: "nowrap",
          flexShrink: 0,
        }}>
          <div style={{
            position: "relative",
            display: "flex",
            flexDirection: "column",
            gap: -0.5,
            alignItems: "center",
            flexWrap: "nowrap",
            flexShrink: 0,
          }}>
            <span style={{
              position: "relative",
              fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
              fontWeight: 400,
              fontSize: 11,
              textAlign: "center",
              whiteSpace: "nowrap",
              lineHeight: "16.500px",
              color: "rgb(107,114,128)",
              flexShrink: 0,
            }}>{props.text3 ?? "Prix après subventions"}</span>
            <div style={{
              position: "relative",
              display: "flex",
              flexDirection: "row",
              justifyContent: "center",
              alignItems: "center",
              flexWrap: "nowrap",
              flexShrink: 0,
            }}>
              <span style={{
                position: "relative",
                fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
                fontWeight: 600,
                fontSize: 24,
                textAlign: "center",
                whiteSpace: "nowrap",
                lineHeight: "30px",
                color: "rgb(44,62,125)",
                flexShrink: 0,
              }}>{props.text4 ?? "11.99€"}</span>
            </div>
          </div>
          <span style={{
            position: "relative",
            fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
            fontWeight: 400,
            fontSize: 12,
            textAlign: "center",
            whiteSpace: "nowrap",
            lineHeight: "18px",
            color: "rgb(156,163,175)",
            flexShrink: 0,
          }}>Prix de référence : 11.99€</span>
        </div>
      </div>
      <svg width={382} height={528.190} viewBox="0 0 382 528.190" fill="none" style={{
        position: "absolute",
        left: 0,
        top: 0,
        width: 382,
        height: 528.19,
        opacity: 0.04,
        overflow: "hidden",
        borderRadius: 16,
        color: "rgb(85,89,117)",
      }}>
        <path d={"M 0 16 C 0 7.163 7.163 0 16 0 L 366 0 C 374.837 0 382 7.163 382 16 L 382 512.19 C 382 521.027 374.837 528.19 366 528.19 L 16 528.19 C 7.163 528.19 0 521.027 0 512.19 L 0 16 Z"} fill="currentColor" fillRule="nonzero" />
      </svg>
    </div>
  );
  const __body17 = () => (
    <div className={props.className} style={{
      width: 382,
      height: 528.19,
      borderRadius: 16,
      position: "relative",
      ...props.style,
    }}>
      <div style={{
        position: "absolute",
        left: 0,
        top: 300,
        width: 382,
        minHeight: 120,
        borderTop: "1px solid rgb(229,231,235)",
        borderRight: "1px solid rgb(229,231,235)",
        borderBottom: "1px solid rgb(229,231,235)",
        borderLeft: "1px solid rgb(229,231,235)",
        display: "flex",
        flexDirection: "column",
        gap: 32,
        padding: "16px 16px 16px 16px",
        alignItems: "flex-start",
        flexWrap: "nowrap",
        boxSizing: "border-box",
      }}>
        <div style={{
          position: "relative",
          overflow: "hidden",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          flexWrap: "nowrap",
          flexShrink: 0,
          alignSelf: "stretch",
        }}>
          <span style={{
            position: "relative",
            fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
            fontWeight: 600,
            fontSize: 16,
            textAlign: "center",
            lineHeight: "21.600px",
            color: "rgb(31,41,55)",
            flexShrink: 0,
            whiteSpace: "pre-wrap",
          }}>{props.text1 ?? "On va où ?, l'application qui sécurise vos\ntrajets du quotidien"}</span>
        </div>
        <div style={{
          position: "relative",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          flexWrap: "nowrap",
          flexShrink: 0,
          alignSelf: "stretch",
        }}>
          <span style={{
            position: "relative",
            fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
            fontWeight: 400,
            fontSize: 14,
            textAlign: "center",
            whiteSpace: "nowrap",
            lineHeight: "24px",
            color: "rgb(107,114,128)",
            flexShrink: 0,
          }}>{props.text2 ?? "par Baltee"}</span>
        </div>
      </div>
      <div style={{
        position: "absolute",
        left: 0,
        top: 0,
        width: 382,
        height: 300,
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "flex-start",
        flexWrap: "nowrap",
      }}>
        <svg viewBox="0 0 382 300" fill="none" style={{
          position: "relative",
          overflow: "hidden",
          flexGrow: 1,
          alignSelf: "stretch",
        }}>
          <path d={"M 0 0 L 382 0 L 382 300 L 0 300 L 0 0 Z"} fill="currentColor" fillRule="nonzero" />
        </svg>
      </div>
      <div style={{
        position: "absolute",
        left: 0,
        top: 432.19,
        width: 382,
        height: 96,
        minHeight: 96,
        backgroundColor: "rgb(249,250,251)",
        borderTop: "1px solid rgb(229,231,235)",
        borderRight: "1px solid rgb(229,231,235)",
        borderBottom: "1px solid rgb(229,231,235)",
        borderLeft: "1px solid rgb(229,231,235)",
        display: "flex",
        flexDirection: "row",
        padding: "10px 16px 10px 16px",
        justifyContent: "center",
        alignItems: "center",
        flexWrap: "nowrap",
        boxSizing: "border-box",
      }}>
        <div style={{
          position: "relative",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          flexWrap: "nowrap",
          flexShrink: 0,
        }}>
          <div style={{
            position: "relative",
            display: "flex",
            flexDirection: "column",
            gap: -0.5,
            alignItems: "center",
            flexWrap: "nowrap",
            flexShrink: 0,
          }}>
            <span style={{
              position: "relative",
              fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
              fontWeight: 400,
              fontSize: 11,
              textAlign: "center",
              whiteSpace: "nowrap",
              lineHeight: "16.500px",
              color: "rgb(107,114,128)",
              flexShrink: 0,
            }}>{props.text3 ?? "Prix après subventions"}</span>
            <div style={{
              position: "relative",
              display: "flex",
              flexDirection: "row",
              justifyContent: "center",
              alignItems: "center",
              flexWrap: "nowrap",
              flexShrink: 0,
            }}>
              <span style={{
                position: "relative",
                fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
                fontWeight: 600,
                fontSize: 24,
                textAlign: "center",
                whiteSpace: "nowrap",
                lineHeight: "30px",
                color: "rgb(44,62,125)",
                flexShrink: 0,
              }}>{props.text4 ?? "11.99€"}</span>
            </div>
          </div>
          <span style={{
            position: "relative",
            fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
            fontWeight: 400,
            fontSize: 12,
            textAlign: "center",
            whiteSpace: "nowrap",
            lineHeight: "18px",
            color: "rgb(156,163,175)",
            flexShrink: 0,
          }}>Prix de référence : 11.99€</span>
        </div>
      </div>
      <svg width={382} height={528.190} viewBox="0 0 382 528.190" fill="none" style={{
        position: "absolute",
        left: 0,
        top: 0,
        width: 382,
        height: 528.19,
        opacity: 0,
        overflow: "hidden",
        borderRadius: 16,
        color: "rgb(85,89,117)",
      }}>
        <path d={"M 0 16 C 0 7.163 7.163 0 16 0 L 366 0 C 374.837 0 382 7.163 382 16 L 382 512.19 C 382 521.027 374.837 528.19 366 528.19 L 16 528.19 C 7.163 528.19 0 521.027 0 512.19 L 0 16 Z"} fill="currentColor" fillRule="nonzero" />
      </svg>
    </div>
  );
  const __body18 = () => (
    <div className={props.className} style={{
      width: 382,
      height: 528.19,
      borderRadius: 16,
      position: "relative",
      ...props.style,
    }}>
      <div style={{
        position: "absolute",
        left: 0,
        top: 300,
        width: 382,
        minHeight: 120,
        borderTop: "1px solid rgb(229,231,235)",
        borderRight: "1px solid rgb(229,231,235)",
        borderBottom: "1px solid rgb(229,231,235)",
        borderLeft: "1px solid rgb(229,231,235)",
        display: "flex",
        flexDirection: "column",
        gap: 32,
        padding: "16px 16px 16px 16px",
        alignItems: "flex-start",
        flexWrap: "nowrap",
        boxSizing: "border-box",
      }}>
        <div style={{
          position: "relative",
          overflow: "hidden",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          flexWrap: "nowrap",
          flexShrink: 0,
          alignSelf: "stretch",
        }}>
          <span style={{
            position: "relative",
            fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
            fontWeight: 600,
            fontSize: 16,
            textAlign: "center",
            lineHeight: "21.600px",
            color: "rgb(31,41,55)",
            flexShrink: 0,
            whiteSpace: "pre-wrap",
          }}>{props.text1 ?? "Sacoche vélo 3-en-1 vélo étanche-sac à\ndos bandoulière, porte-bagage,PC 17"}</span>
        </div>
        <div style={{
          position: "relative",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          flexWrap: "nowrap",
          flexShrink: 0,
          alignSelf: "stretch",
        }}>
          <span style={{
            position: "relative",
            fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
            fontWeight: 400,
            fontSize: 14,
            textAlign: "center",
            whiteSpace: "nowrap",
            lineHeight: "24px",
            color: "rgb(107,114,128)",
            flexShrink: 0,
          }}>{props.text2 ?? "par Gadista"}</span>
        </div>
      </div>
      <div style={{
        position: "absolute",
        left: 0,
        top: 0,
        width: 382,
        height: 300,
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "flex-start",
        flexWrap: "nowrap",
      }}>
        <svg viewBox="0 0 382 300" fill="none" style={{
          position: "relative",
          overflow: "hidden",
          flexGrow: 1,
          alignSelf: "stretch",
        }}>
          <path d={"M 0 0 L 382 0 L 382 300 L 0 300 L 0 0 Z"} fill="currentColor" fillRule="nonzero" />
        </svg>
      </div>
      <div style={{
        position: "absolute",
        left: 0,
        top: 432.19,
        width: 382,
        height: 96,
        minHeight: 96,
        backgroundColor: "rgb(249,250,251)",
        borderTop: "1px solid rgb(229,231,235)",
        borderRight: "1px solid rgb(229,231,235)",
        borderBottom: "1px solid rgb(229,231,235)",
        borderLeft: "1px solid rgb(229,231,235)",
        display: "flex",
        flexDirection: "row",
        padding: "10px 16px 10px 16px",
        justifyContent: "center",
        alignItems: "center",
        flexWrap: "nowrap",
        boxSizing: "border-box",
      }}>
        <div style={{
          position: "relative",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          flexWrap: "nowrap",
          flexShrink: 0,
        }}>
          <div style={{
            position: "relative",
            display: "flex",
            flexDirection: "column",
            gap: -0.5,
            alignItems: "center",
            flexWrap: "nowrap",
            flexShrink: 0,
          }}>
            <span style={{
              position: "relative",
              fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
              fontWeight: 400,
              fontSize: 11,
              textAlign: "center",
              whiteSpace: "nowrap",
              lineHeight: "16.500px",
              color: "rgb(107,114,128)",
              flexShrink: 0,
            }}>{props.text3 ?? "Prix après subventions"}</span>
            <div style={{
              position: "relative",
              display: "flex",
              flexDirection: "row",
              justifyContent: "center",
              alignItems: "center",
              flexWrap: "nowrap",
              flexShrink: 0,
            }}>
              <span style={{
                position: "relative",
                fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
                fontWeight: 600,
                fontSize: 24,
                textAlign: "center",
                whiteSpace: "nowrap",
                lineHeight: "30px",
                color: "rgb(44,62,125)",
                flexShrink: 0,
              }}>{props.text4 ?? "92.99€"}</span>
            </div>
          </div>
          <span style={{
            position: "relative",
            fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
            fontWeight: 400,
            fontSize: 12,
            textAlign: "center",
            whiteSpace: "nowrap",
            lineHeight: "18px",
            color: "rgb(156,163,175)",
            flexShrink: 0,
          }}>Prix de référence : 92.99€</span>
        </div>
      </div>
      <svg width={382} height={528.190} viewBox="0 0 382 528.190" fill="none" style={{
        position: "absolute",
        left: 0,
        top: 0,
        width: 382,
        height: 528.19,
        opacity: 0.04,
        overflow: "hidden",
        borderRadius: 16,
        color: "rgb(85,89,117)",
      }}>
        <path d={"M 0 16 C 0 7.163 7.163 0 16 0 L 366 0 C 374.837 0 382 7.163 382 16 L 382 512.19 C 382 521.027 374.837 528.19 366 528.19 L 16 528.19 C 7.163 528.19 0 521.027 0 512.19 L 0 16 Z"} fill="currentColor" fillRule="nonzero" />
      </svg>
    </div>
  );
  const __body19 = () => (
    <div className={props.className} style={{
      width: 382,
      height: 528.19,
      borderRadius: 16,
      position: "relative",
      ...props.style,
    }}>
      <div style={{
        position: "absolute",
        left: 0,
        top: 300,
        width: 382,
        minHeight: 120,
        borderTop: "1px solid rgb(229,231,235)",
        borderRight: "1px solid rgb(229,231,235)",
        borderBottom: "1px solid rgb(229,231,235)",
        borderLeft: "1px solid rgb(229,231,235)",
        display: "flex",
        flexDirection: "column",
        gap: 32,
        padding: "16px 16px 16px 16px",
        alignItems: "flex-start",
        flexWrap: "nowrap",
        boxSizing: "border-box",
      }}>
        <div style={{
          position: "relative",
          overflow: "hidden",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          flexWrap: "nowrap",
          flexShrink: 0,
          alignSelf: "stretch",
        }}>
          <span style={{
            position: "relative",
            fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
            fontWeight: 600,
            fontSize: 16,
            textAlign: "center",
            lineHeight: "21.600px",
            color: "rgb(31,41,55)",
            flexShrink: 0,
            whiteSpace: "pre-wrap",
          }}>{props.text1 ?? "Sacoche vélo 3-en-1 vélo étanche-sac à\ndos bandoulière, porte-bagage,PC 17"}</span>
        </div>
        <div style={{
          position: "relative",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          flexWrap: "nowrap",
          flexShrink: 0,
          alignSelf: "stretch",
        }}>
          <span style={{
            position: "relative",
            fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
            fontWeight: 400,
            fontSize: 14,
            textAlign: "center",
            whiteSpace: "nowrap",
            lineHeight: "24px",
            color: "rgb(107,114,128)",
            flexShrink: 0,
          }}>{props.text2 ?? "par Gadista"}</span>
        </div>
      </div>
      <div style={{
        position: "absolute",
        left: 0,
        top: 0,
        width: 382,
        height: 300,
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "flex-start",
        flexWrap: "nowrap",
      }}>
        <svg viewBox="0 0 382 300" fill="none" style={{
          position: "relative",
          overflow: "hidden",
          flexGrow: 1,
          alignSelf: "stretch",
        }}>
          <path d={"M 0 0 L 382 0 L 382 300 L 0 300 L 0 0 Z"} fill="currentColor" fillRule="nonzero" />
        </svg>
      </div>
      <div style={{
        position: "absolute",
        left: 0,
        top: 432.19,
        width: 382,
        height: 96,
        minHeight: 96,
        backgroundColor: "rgb(249,250,251)",
        borderTop: "1px solid rgb(229,231,235)",
        borderRight: "1px solid rgb(229,231,235)",
        borderBottom: "1px solid rgb(229,231,235)",
        borderLeft: "1px solid rgb(229,231,235)",
        display: "flex",
        flexDirection: "row",
        padding: "10px 16px 10px 16px",
        justifyContent: "center",
        alignItems: "center",
        flexWrap: "nowrap",
        boxSizing: "border-box",
      }}>
        <div style={{
          position: "relative",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          flexWrap: "nowrap",
          flexShrink: 0,
        }}>
          <div style={{
            position: "relative",
            display: "flex",
            flexDirection: "column",
            gap: -0.5,
            alignItems: "center",
            flexWrap: "nowrap",
            flexShrink: 0,
          }}>
            <span style={{
              position: "relative",
              fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
              fontWeight: 400,
              fontSize: 11,
              textAlign: "center",
              whiteSpace: "nowrap",
              lineHeight: "16.500px",
              color: "rgb(107,114,128)",
              flexShrink: 0,
            }}>{props.text3 ?? "Prix après subventions"}</span>
            <div style={{
              position: "relative",
              display: "flex",
              flexDirection: "row",
              justifyContent: "center",
              alignItems: "center",
              flexWrap: "nowrap",
              flexShrink: 0,
            }}>
              <span style={{
                position: "relative",
                fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
                fontWeight: 600,
                fontSize: 24,
                textAlign: "center",
                whiteSpace: "nowrap",
                lineHeight: "30px",
                color: "rgb(44,62,125)",
                flexShrink: 0,
              }}>{props.text4 ?? "92.99€"}</span>
            </div>
          </div>
          <span style={{
            position: "relative",
            fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
            fontWeight: 400,
            fontSize: 12,
            textAlign: "center",
            whiteSpace: "nowrap",
            lineHeight: "18px",
            color: "rgb(156,163,175)",
            flexShrink: 0,
          }}>Prix de référence : 92.99€</span>
        </div>
      </div>
      <svg width={382} height={528.190} viewBox="0 0 382 528.190" fill="none" style={{
        position: "absolute",
        left: 0,
        top: 0,
        width: 382,
        height: 528.19,
        opacity: 0,
        overflow: "hidden",
        borderRadius: 16,
        color: "rgb(85,89,117)",
      }}>
        <path d={"M 0 16 C 0 7.163 7.163 0 16 0 L 366 0 C 374.837 0 382 7.163 382 16 L 382 512.19 C 382 521.027 374.837 528.19 366 528.19 L 16 528.19 C 7.163 528.19 0 521.027 0 512.19 L 0 16 Z"} fill="currentColor" fillRule="nonzero" />
      </svg>
    </div>
  );
  const __impls = {
    // figma: variant=1,:hover=true
    "variant=1|hover=true": __body0,
    // figma: variant=1,:hover=false
    "variant=1|hover=false": __body1,
    // figma: variant=2,:hover=true
    "variant=2|hover=true": __body2,
    // figma: variant=2,:hover=false
    "variant=2|hover=false": __body3,
    // figma: variant=3,:hover=true
    "variant=3|hover=true": __body4,
    // figma: variant=3,:hover=false
    "variant=3|hover=false": __body5,
    // figma: variant=4,:hover=true
    "variant=4|hover=true": __body6,
    // figma: variant=4,:hover=false
    "variant=4|hover=false": __body7,
    // figma: variant=5,:hover=true
    "variant=5|hover=true": __body8,
    // figma: variant=5,:hover=false
    "variant=5|hover=false": __body9,
    // figma: variant=6,:hover=true
    "variant=6|hover=true": __body10,
    // figma: variant=6,:hover=false
    "variant=6|hover=false": __body11,
    // figma: variant=7,:hover=true
    "variant=7|hover=true": __body12,
    // figma: variant=7,:hover=false
    "variant=7|hover=false": __body13,
    // figma: variant=8,:hover=true
    "variant=8|hover=true": __body14,
    // figma: variant=8,:hover=false
    "variant=8|hover=false": __body15,
    // figma: variant=9,:hover=true
    "variant=9|hover=true": __body16,
    // figma: variant=9,:hover=false
    "variant=9|hover=false": __body17,
    // figma: variant=10,:hover=true
    "variant=10|hover=true": __body18,
    // figma: variant=10,:hover=false
    "variant=10|hover=false": __body19,
  };
  return (__impls[__vkey(props)] ?? __body0)();
}
export default Component4;
