{"id":39204,"date":"2026-05-05T16:36:25","date_gmt":"2026-05-05T14:36:25","guid":{"rendered":"https:\/\/www.collaborativeperks.com\/new-products\/"},"modified":"2026-05-06T11:48:24","modified_gmt":"2026-05-06T09:48:24","slug":"new-products","status":"publish","type":"page","link":"https:\/\/www.collaborativeperks.com\/fr\/new-products\/","title":{"rendered":"Nouveaux produits"},"content":{"rendered":"\n<style>\n\n  \/* Hublo palette - V2: organic, illustrative, blocked color sections *\/\n  :root {\n    --navy: #0a1254;\n    --navy-dark: #090f1d;\n    --mint: #36d1a2;\n    --mint-deep: #2bb88a;\n    --mint-soft: #e8faf3;\n    --peach: #ffce86;\n    --peach-soft: #fff8ed;\n    --coral: #ff6b6b;\n    --coral-soft: #ffe8e8;\n    --sky: #86d3ff;\n    --sky-soft: #e8f5ff;\n    --violet: #655cfe;\n    --violet-soft: #f0eeff;\n    --bg-soft: #f4f8ff;\n    --gray-line: #e5e7eb;\n    --gray-text: #6c7c8c;\n    --gray-deep: #414954;\n    --white: #ffffff;\n  }\n\n  \/* ====== HERO with mint background ====== *\/\n  .hero {\n    background: var(--mint-soft);\n    padding: 80px 24px 100px;\n    position: relative;\n    overflow: hidden;\n  }\n  .hero .blob-1 {\n    position: absolute;\n    top: -50px; right: -100px;\n    width: 600px; height: 600px;\n  }\n  .hero .blob-2 {\n    position: absolute;\n    bottom: -200px; left: -100px;\n    width: 400px; height: 400px;\n  }\n  .hero-inner {\n    max-width: 1280px;\n    margin: 0 auto;\n    display: grid;\n    grid-template-columns: 1.1fr 1fr;\n    gap: 60px;\n    align-items: center;\n    position: relative;\n    z-index: 1;\n  }\n  .hero-tag {\n    display: inline-flex;\n    align-items: center;\n    gap: 10px;\n    background: var(--white);\n    padding: 8px 18px 8px 8px;\n    border-radius: 999px;\n    font-size: 13px;\n    font-weight: 600;\n    color: var(--navy);\n    box-shadow: 0 2px 8px rgba(10, 18, 84, 0.06);\n    margin-bottom: 28px;\n  }\n  .hero-tag .pill {\n    background: var(--coral);\n    color: var(--white);\n    padding: 4px 12px;\n    border-radius: 999px;\n    font-size: 11px;\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n    font-weight: 700;\n  }\n  .hero h1 {\n    font-size: clamp(40px, 6vw, 76px);\n    margin-bottom: 28px;\n    color: var(--navy);\n    font-weight: 600;\n  }\n  .hero h1 .underline {\n    position: relative;\n    display: inline-block;\n    color: var(--navy);\n  }\n  .hero h1 .underline::after {\n    content: '';\n    position: absolute;\n    bottom: -4px;\n    left: -4px;\n    right: -4px;\n    height: 12px;\n    background: var(--peach);\n    z-index: -1;\n    border-radius: 4px;\n    transform: rotate(-1deg);\n  }\n  .hero-lede {\n    font-size: 18px;\n    color: var(--gray-deep);\n    margin-bottom: 36px;\n    max-width: 540px;\n    line-height: 1.7;\n  }\n  .hero-actions {\n    display: flex;\n    gap: 12px;\n    flex-wrap: wrap;\n  }\n  .hero-meta {\n    margin-top: 56px;\n    display: flex;\n    gap: 48px;\n    flex-wrap: wrap;\n  }\n  .hero-meta .stat strong {\n    display: block;\n    font-family: 'DM Sans', sans-serif;\n    font-size: 38px;\n    font-weight: 800;\n    color: var(--navy);\n    line-height: 1;\n  }\n  .hero-meta .stat strong .accent { color: var(--mint-deep); }\n  .hero-meta .stat span {\n    font-size: 13px;\n    color: var(--gray-text);\n    font-weight: 500;\n    margin-top: 6px;\n    display: block;\n  }\n\n  \/* Hero illustration - product mosaic *\/\n  .hero-illu {\n    position: relative;\n    height: 700px;\n  }\n  .ill-block {\n    position: absolute;\n    border-radius: 20px;\n    box-shadow: 0 12px 40px rgba(10, 18, 84, 0.12);\n    transition: transform 0.4s ease;\n  }\n  .ill-block:hover { transform: translateY(-6px) rotate(0); }\n\n  .ill-park {\n    top: 0; left: 0;\n    width: 290px;\n    background: var(--white);\n    padding: 0;\n    transform: rotate(-3deg);\n  }\n  .ill-park .ic-large {\n    width: 56px; height: 56px;\n    border-radius: 14px;\n    background: var(--mint);\n    display: flex; align-items: center; justify-content: center;\n    font-size: 26px;\n    margin-bottom: 14px;\n  }\n  .ill-park h4 {\n    font-size: 18px;\n    margin-bottom: 6px;\n  }\n  .ill-park p {\n    font-size: 13px;\n    color: var(--gray-text);\n    line-height: 1.5;\n  }\n\n  .ill-dei {\n    top: 80px; right: 0;\n    width: 290px;\n    background: var(--peach);\n    padding: 0;\n    transform: rotate(2deg);\n    z-index: 3;\n  }\n  .ill-dei .ic-large {\n    width: 56px; height: 56px;\n    border-radius: 14px;\n    background: var(--white);\n    display: flex; align-items: center; justify-content: center;\n    font-size: 26px;\n    margin-bottom: 14px;\n  }\n  .ill-dei h4 { font-size: 18px; margin-bottom: 6px; color: var(--navy); }\n  .ill-dei p { font-size: 13px; color: var(--navy); opacity: 0.8; line-height: 1.5; }\n  .ill-dei .mini-events {\n    margin-top: 14px;\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n  }\n  .ill-dei .mini-event {\n    background: rgba(255,255,255,0.6);\n    padding: 6px 10px;\n    border-radius: 8px;\n    font-size: 11px;\n    color: var(--navy);\n    display: flex;\n    justify-content: space-between;\n    font-weight: 600;\n  }\n\n  .ill-reuse {\n    bottom: 0; left: 50px;\n    width: 310px;\n    background: var(--violet);\n    color: var(--white);\n    padding: 0;\n    transform: rotate(-2deg);\n  }\n  .ill-reuse .ic-large {\n    width: 56px; height: 56px;\n    border-radius: 14px;\n    background: rgba(255,255,255,0.15);\n    display: flex; align-items: center; justify-content: center;\n    font-size: 26px;\n    margin-bottom: 14px;\n  }\n  .ill-reuse h4 { font-size: 18px; margin-bottom: 6px; color: white; }\n  .ill-reuse p { font-size: 13px; opacity: 0.9; line-height: 1.5; }\n  .ill-reuse .stat-mini {\n    background: rgba(255,255,255,0.15);\n    padding: 8px 12px;\n    border-radius: 10px;\n    margin-top: 10px;\n    font-size: 12px;\n    display: flex;\n    justify-content: space-between;\n  }\n  .ill-reuse .stat-mini strong { font-family: 'DM Sans', sans-serif; }\n\n  \/* Sticker *\/\n  .sticker {\n    position: absolute;\n    background: var(--coral);\n    color: var(--white);\n    width: 90px; height: 90px;\n    border-radius: 50%;\n    display: flex; align-items: center; justify-content: center;\n    text-align: center;\n    font-family: 'DM Sans', sans-serif;\n    font-weight: 800;\n    font-size: 12px;\n    line-height: 1.2;\n    transform: rotate(15deg);\n    top: 230px;\n    right: 10px;\n    z-index: 4;\n    animation: stickerSpin 8s linear infinite;\n  }\n  @keyframes stickerSpin {\n    from { transform: rotate(15deg); }\n    to { transform: rotate(375deg); }\n  }\n  .sticker-inner {\n    animation: stickerSpinReverse 8s linear infinite;\n  }\n  @keyframes stickerSpinReverse {\n    from { transform: rotate(-15deg); }\n    to { transform: rotate(-375deg); }\n  }\n\n  \/* ====== INTRO ====== *\/\n  .intro {\n    padding: 120px 24px 80px;\n    text-align: center;\n  }\n  .intro-inner { max-width: 760px; margin: 0 auto; }\n  .section-tag {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    background: var(--violet-soft);\n    color: var(--violet);\n    padding: 8px 18px;\n    border-radius: 999px;\n    font-size: 12px;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 0.1em;\n    margin-bottom: 24px;\n  }\n  .section-tag::before {\n    content: '';\n    width: 6px; height: 6px;\n    background: var(--violet);\n    border-radius: 50%;\n  }\n  .intro h2 {\n    font-size: clamp(36px, 5vw, 56px);\n    margin-bottom: 24px;\n  }\n  .intro h2 .accent { color: var(--mint-deep); }\n  .intro p {\n    font-size: 18px;\n    color: var(--gray-text);\n    line-height: 1.8;\n  }\n\n  \/* ====== MODULES (alternating colored sections) ====== *\/\n  .module {\n    padding: 100px 24px;\n    position: relative;\n    overflow: hidden;\n  }\n  .module-1 { background: var(--mint-soft); }\n  .module-2 { background: var(--peach-soft); }\n  .module-3 { background: var(--violet-soft); }\n\n  .module-inner {\n    max-width: 1280px;\n    margin: 0 auto;\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 80px;\n    align-items: center;\n    position: relative;\n    z-index: 2;\n  }\n  .module:nth-of-type(even) .module-content { order: 2; }\n\n  .module-eyebrow {\n    display: inline-flex;\n    align-items: center;\n    gap: 12px;\n    margin-bottom: 24px;\n    background: var(--white);\n    padding: 8px 16px 8px 8px;\n    border-radius: 999px;\n    box-shadow: 0 2px 8px rgba(10, 18, 84, 0.05);\n  }\n  .module-eyebrow .num {\n    width: 32px; height: 32px;\n    border-radius: 50%;\n    background: var(--mint);\n    color: var(--navy);\n    display: flex; align-items: center; justify-content: center;\n    font-family: 'DM Sans', sans-serif;\n    font-weight: 800;\n    font-size: 14px;\n  }\n  .module-2 .module-eyebrow .num { background: var(--peach); }\n  .module-3 .module-eyebrow .num { background: var(--violet); color: var(--white); }\n  .module-eyebrow .cat {\n    font-size: 12px;\n    font-weight: 700;\n    color: var(--navy);\n    text-transform: uppercase;\n    letter-spacing: 0.12em;\n  }\n\n  .module h3 {\n    font-size: clamp(40px, 5vw, 60px);\n    margin-bottom: 18px;\n  }\n  .module h3 .plus { color: var(--mint-deep); }\n  .module-2 h3 .plus { color: #d97706; }\n  .module-3 h3 .plus { color: var(--violet); }\n\n  .module-tagline {\n    font-size: 21px;\n    color: var(--navy);\n    font-weight: 600;\n    margin-bottom: 24px;\n    line-height: 1.3;\n  }\n  .module-desc {\n    color: var(--gray-deep);\n    font-size: 16px;\n    margin-bottom: 32px;\n    line-height: 1.7;\n  }\n  .module-features {\n    list-style: none;\n    margin-bottom: 36px;\n  }\n  .module-features li {\n    padding: 12px 0;\n    display: flex;\n    align-items: flex-start;\n    gap: 14px;\n    font-size: 15px;\n    color: var(--gray-deep);\n  }\n  .module-features li::before {\n    content: '';\n    width: 24px; height: 24px;\n    flex-shrink: 0;\n    border-radius: 8px;\n    background: var(--white);\n    background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2336d1a2' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C\/polyline%3E%3C\/svg%3E\");\n    background-position: center;\n    background-repeat: no-repeat;\n  }\n\n  \/* ====== Module Visual ====== *\/\n  .module-visual {\n    position: relative;\n  }\n  .visual-mock {\n    background: var(--white);\n    border-radius: 24px;\n    padding: 28px;\n    box-shadow: 0 20px 60px rgba(10, 18, 84, 0.1);\n    position: relative;\n    z-index: 2;\n  }\n  .visual-deco {\n    position: absolute;\n    width: 90px; height: 90px;\n    border-radius: 50%;\n    z-index: 0;\n  }\n  .visual-deco.vd1 { top: -30px; left: -30px; }\n  .visual-deco.vd2 { bottom: -20px; right: -20px; width: 70px; height: 70px; }\n  .module-1 .visual-deco.vd1 { background: var(--peach); }\n  .module-1 .visual-deco.vd2 { background: var(--mint); }\n  .module-2 .visual-deco.vd1 { background: var(--coral); }\n  .module-2 .visual-deco.vd2 { background: var(--violet); }\n  .module-3 .visual-deco.vd1 { background: var(--mint); }\n  .module-3 .visual-deco.vd2 { background: var(--peach); }\n\n  .visual-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding-bottom: 16px;\n    margin-bottom: 18px;\n    border-bottom: 1px solid var(--gray-line);\n  }\n  .vh-title {\n    font-family: 'DM Sans', sans-serif;\n    font-size: 14px;\n    font-weight: 700;\n    color: var(--navy);\n  }\n  .vh-sub { font-size: 11px; color: var(--gray-text); margin-top: 2px; }\n  .vh-status {\n    font-size: 11px;\n    color: var(--mint-deep);\n    background: var(--mint-soft);\n    padding: 5px 10px;\n    border-radius: 999px;\n    font-weight: 700;\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n  }\n  .vh-status::before {\n    content: '';\n    width: 6px; height: 6px;\n    border-radius: 50%;\n    background: var(--mint);\n  }\n\n  \/* Park visual *\/\n  .park-grid {\n    display: grid;\n    grid-template-columns: repeat(8, 1fr);\n    gap: 5px;\n    margin-bottom: 18px;\n  }\n  .park-spot {\n    aspect-ratio: 1 \/ 1.4;\n    border-radius: 5px;\n    background: var(--bg-soft);\n    display: flex;\n    align-items: flex-end;\n    justify-content: center;\n    padding: 3px;\n    font-size: 8px;\n    font-weight: 600;\n    color: var(--gray-text);\n  }\n  .park-spot.free {\n    background: var(--mint-soft);\n    color: var(--mint-deep);\n    border: 1.5px solid var(--mint);\n  }\n  .park-spot.your {\n    background: var(--peach);\n    color: var(--navy);\n  }\n  .park-legend {\n    display: flex;\n    gap: 16px;\n    font-size: 11px;\n    color: var(--gray-text);\n    padding-top: 12px;\n    border-top: 1px solid var(--gray-line);\n    font-weight: 500;\n  }\n  .park-legend span { display: inline-flex; align-items: center; gap: 6px; }\n  .park-legend .sw { width: 10px; height: 10px; border-radius: 2px; }\n  .park-legend .sw.taken { background: var(--bg-soft); }\n  .park-legend .sw.free-sw { background: var(--mint-soft); border: 1.5px solid var(--mint); }\n  .park-legend .sw.your-sw { background: var(--peach); }\n\n  \/* DEI visual *\/\n  .dei-events { display: flex; flex-direction: column; gap: 10px; }\n  .dei-card {\n    background: var(--bg-soft);\n    border-radius: 14px;\n    padding: 14px;\n    display: flex;\n    align-items: center;\n    gap: 14px;\n  }\n  .dei-card .date-badge {\n    flex-shrink: 0;\n    width: 52px; height: 52px;\n    border-radius: 12px;\n    background: var(--peach);\n    color: var(--navy);\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    font-family: 'DM Sans', sans-serif;\n  }\n  .dei-card.alt .date-badge { background: var(--mint); }\n  .dei-card.alt2 .date-badge { background: var(--violet); color: white; }\n  .dei-card.alt3 .date-badge { background: var(--coral); color: white; }\n  .dei-card .date-badge .d { font-size: 18px; font-weight: 800; line-height: 1; }\n  .dei-card .date-badge .m { font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; margin-top: 2px; }\n  .dei-card .info { flex: 1; min-width: 0; }\n  .dei-card .info .title { font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 700; color: var(--navy); margin-bottom: 3px; }\n  .dei-card .info .meta { font-size: 11px; color: var(--gray-text); }\n  .dei-card .pill { font-size: 10px; color: var(--mint-deep); background: var(--mint-soft); padding: 4px 10px; border-radius: 999px; font-weight: 700; flex-shrink: 0; }\n\n  \/* Reuse visual *\/\n  .reuse-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }\n  .reuse-stat { background: var(--bg-soft); border-radius: 12px; padding: 14px; }\n  .reuse-stat .v { font-family: 'DM Sans', sans-serif; font-size: 22px; font-weight: 800; color: var(--navy); line-height: 1; }\n  .reuse-stat .l { font-size: 11px; color: var(--gray-text); margin-top: 4px; font-weight: 500; }\n  .reuse-stat .delta { font-size: 10px; color: var(--mint-deep); font-weight: 700; margin-top: 4px; }\n  .reuse-list { display: flex; flex-direction: column; gap: 8px; }\n  .reuse-item {\n    background: var(--bg-soft);\n    border-radius: 12px;\n    padding: 12px;\n    display: flex;\n    align-items: center;\n    gap: 12px;\n  }\n  .reuse-item .ic {\n    width: 38px; height: 38px;\n    border-radius: 10px;\n    background: var(--violet);\n    color: var(--white);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 18px;\n    flex-shrink: 0;\n  }\n  .reuse-item:nth-child(2) .ic { background: var(--mint); color: var(--navy); }\n  .reuse-item:nth-child(3) .ic { background: var(--peach); color: var(--navy); }\n  .reuse-item .info { flex: 1; min-width: 0; }\n  .reuse-item .name { font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 700; color: var(--navy); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n  .reuse-item .meta { font-size: 11px; color: var(--gray-text); }\n  .reuse-item .price { text-align: right; flex-shrink: 0; }\n  .reuse-item .price .new { font-family: 'DM Sans', sans-serif; color: var(--navy); font-weight: 800; font-size: 13px; display: block; }\n  .reuse-item .price .old { color: var(--gray-text); font-size: 10px; text-decoration: line-through; }\n\n  \/* ====== STATS BAND ====== *\/\n  .stats-band {\n    background: var(--navy);\n    color: var(--white);\n    padding: 80px 24px;\n    position: relative;\n    overflow: hidden;\n  }\n  .stats-band::before {\n    content: '';\n    position: absolute;\n    top: -100px; right: 5%;\n    width: 300px; height: 300px;\n    background: var(--mint);\n    border-radius: 50%;\n    opacity: 0.15;\n  }\n  .stats-band::after {\n    content: '';\n    position: absolute;\n    bottom: -100px; left: 5%;\n    width: 250px; height: 250px;\n    background: var(--peach);\n    border-radius: 50%;\n    opacity: 0.15;\n  }\n  .stats-inner {\n    max-width: 1280px;\n    margin: 0 auto;\n    text-align: center;\n    position: relative;\n    z-index: 1;\n  }\n  .stats-inner h2 {\n    color: var(--white);\n    font-size: clamp(28px, 4vw, 42px);\n    margin-bottom: 60px;\n  }\n  .stats-inner h2 .accent { color: var(--mint); }\n  .stats-grid {\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    gap: 32px;\n  }\n  .stat-card {\n    background: rgba(255,255,255,0.05);\n    border: 1px solid rgba(255,255,255,0.1);\n    padding: 36px 24px;\n    border-radius: 20px;\n    text-align: center;\n  }\n  .stat-card .v {\n    font-family: 'DM Sans', sans-serif;\n    font-size: 56px;\n    font-weight: 800;\n    color: var(--mint);\n    line-height: 1;\n    margin-bottom: 12px;\n  }\n  .stat-card:nth-child(2) .v { color: var(--peach); }\n  .stat-card:nth-child(3) .v { color: var(--sky); }\n  .stat-card:nth-child(4) .v { color: var(--coral); }\n  .stat-card .l {\n    font-size: 14px;\n    color: rgba(255,255,255,0.75);\n    line-height: 1.5;\n  }\n\n  \/* ====== CTA ====== *\/\n  .cta {\n    padding: 120px 24px;\n    background: var(--mint);\n    text-align: center;\n    position: relative;\n    overflow: hidden;\n  }\n  .cta::before {\n    content: '';\n    position: absolute;\n    top: -100px; right: -100px;\n    width: 400px; height: 400px;\n    background: var(--peach);\n    border-radius: 50%;\n    opacity: 0.6;\n  }\n  .cta::after {\n    content: '';\n    position: absolute;\n    bottom: -150px; left: -100px;\n    width: 350px; height: 350px;\n    background: var(--white);\n    border-radius: 50%;\n    opacity: 0.2;\n  }\n  .cta-inner {\n    max-width: 720px;\n    margin: 0 auto;\n    position: relative;\n    z-index: 1;\n  }\n  .cta h2 {\n    font-size: clamp(36px, 5vw, 56px);\n    color: var(--navy);\n    margin-bottom: 20px;\n  }\n  .cta p {\n    font-size: 18px;\n    color: var(--navy);\n    opacity: 0.85;\n    margin-bottom: 40px;\n    line-height: 1.7;\n  }\n  .cta-actions {\n    display: flex;\n    gap: 12px;\n    justify-content: center;\n    flex-wrap: wrap;\n  }\n\n  \/* ====== RESPONSIVE ====== *\/\n  @media (max-width: 900px) {\n    .nav-menu { display: none; }\n    .hero-inner { grid-template-columns: 1fr; }\n    .hero-illu { height: 500px; }\n    .module-inner { grid-template-columns: 1fr; gap: 40px; }\n    .module:nth-of-type(even) .module-content { order: 0; }\n    .stats-grid { grid-template-columns: 1fr 1fr; }\n    .footer-inner { grid-template-columns: 1fr 1fr; }\n  }\n  @media (max-width: 500px) {\n    .stats-grid { grid-template-columns: 1fr; }\n    .footer-inner { grid-template-columns: 1fr; }\n  }\n\n\n  \/* ====== ILLUSTRATION CARDS ====== *\/\n  .module-illu-svg {\n    width: 100%;\n    height: auto;\n    display: block;\n    margin-bottom: 16px;\n    border-radius: 12px;\n  }\n\n  .ill-block.with-illu {\n    overflow: hidden;\n    padding: 0;\n  }\n  .ill-block.with-illu .illu-area {\n    width: 100%;\n    aspect-ratio: 5 \/ 3;\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n  .ill-block.with-illu .illu-area svg {\n    width: 100%;\n    height: 100%;\n    display: block;\n  }\n  .ill-block.with-illu .illu-content {\n    padding: 18px 22px 22px;\n  }\n  .ill-block.with-illu .illu-tag {\n    display: inline-block;\n    font-family: 'DM Sans', sans-serif;\n    font-size: 10px;\n    font-weight: 700;\n    letter-spacing: 0.12em;\n    text-transform: uppercase;\n    margin-bottom: 6px;\n    color: #36d1a2;\n    padding: 4px 10px;\n    border-radius: 999px;\n    background: rgba(54, 209, 162, 0.12);\n  }\n  .ill-block.ill-dei.with-illu .illu-tag { color: #b45309; background: rgba(255,255,255,0.5); }\n  .ill-block.ill-reuse.with-illu .illu-tag { color: #ffce86; background: rgba(255,255,255,0.1); }\n\n  .ill-dei.with-illu h4 { color: var(--navy); }\n  .ill-dei.with-illu p { color: var(--navy); opacity: 0.8; }\n  .ill-reuse.with-illu h4 { color: white; }\n  .ill-reuse.with-illu p { color: rgba(255,255,255,0.9); }\n\n  .module-section-illu {\n    width: 100%;\n    height: 220px;\n    background: var(--white);\n    border-radius: 16px;\n    overflow: hidden;\n    margin-bottom: 18px;\n    box-shadow: 0 4px 20px rgba(10, 18, 84, 0.06);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n  .module-section-illu svg {\n    width: 100%;\n    height: 100%;\n  }\n\n  \/* Override original card heights for new illustrated layout *\/\n  .ill-block.with-illu.ill-park { height: auto !important; }\n  .ill-block.with-illu.ill-dei { height: auto !important; }\n  .ill-block.with-illu.ill-reuse { height: auto !important; }\n\n\n\n  \/* ====== REAL LOGO STYLING ====== *\/\n  .logo {\n    \/* override gap\/font when logo-img present *\/\n    padding: 4px 0;\n  }\n  .logo-img {\n    height: 44px;\n    width: auto;\n    display: block;\n  }\n  .footer-logo-img {\n    height: 56px;\n    width: auto;\n    display: block;\n    margin-bottom: 16px;\n  }\n\n\n  \/* Vehicle type badges on parking spots *\/\n  .park-spot { position: relative; }\n  .vehicle-badge {\n    position: absolute;\n    top: 4px; right: 4px;\n    width: 14px; height: 14px;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 2;\n    box-shadow: 0 1px 3px rgba(0,0,0,0.15);\n  }\n  .vehicle-badge svg {\n    width: 9px; height: 9px;\n    display: block;\n  }\n  .vehicle-badge.electric { background: #2bb88a; }\n  .vehicle-badge.electric svg { color: #ffffff; }\n  .vehicle-badge.moto { background: #86d3ff; }\n  .vehicle-badge.moto svg { color: #0a1254; }\n  .vehicle-badge.pmr { background: #0a1254; }\n  .vehicle-badge.pmr svg { color: #ffffff; }\n  .vehicle-badge.bike { background: #ffce86; }\n  .vehicle-badge.bike svg { color: #0a1254; }\n\n  \/* Extended legend with vehicle types *\/\n  .park-legend.with-vehicles {\n    flex-wrap: wrap;\n    row-gap: 8px;\n  }\n  .park-legend.with-vehicles .vehicle-legend {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n  }\n  .park-legend.with-vehicles .vehicle-mark {\n    width: 14px; height: 14px;\n    border-radius: 50%;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n  }\n  .park-legend.with-vehicles .vehicle-mark svg {\n    width: 9px; height: 9px;\n  }\n\n\n  \/* ==== DEMO BUTTON STYLE ==== *\/\n  .btn-demo {\n    background: var(--mint);\n    color: var(--navy);\n    box-shadow: 0 4px 16px rgba(54, 209, 162, 0.45);\n    position: relative;\n    overflow: hidden;\n  }\n  .btn-demo:hover {\n    background: var(--mint-deep);\n    color: var(--white);\n    transform: translateY(-2px);\n    box-shadow: 0 8px 24px rgba(54, 209, 162, 0.55);\n  }\n  .btn-demo::before {\n    content: '';\n    position: absolute;\n    top: 0; left: -100%;\n    width: 100%; height: 100%;\n    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);\n    transition: left 0.6s ease;\n  }\n  .btn-demo:hover::before { left: 100%; }\n\n\n<\/style>\n\n\n\n<section class=\"hero\">\n  <svg class=\"blob-svg blob-1\" viewBox=\"0 0 600 600\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n    <path fill=\"#36d1a2\" fill-opacity=\"0.2\" d=\"M442.5,318.5Q420,387,360,425Q300,463,232,432Q164,401,123.5,335.5Q83,270,121,201.5Q159,133,225,109.5Q291,86,355.5,116Q420,146,447,208Q474,270,442.5,318.5Z\"\/>\n  <\/svg>\n  <svg class=\"blob-svg blob-2\" viewBox=\"0 0 400 400\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n    <path fill=\"#ffce86\" fill-opacity=\"0.4\" d=\"M309.5,239Q288,308,219,329.5Q150,351,99,295.5Q48,240,87,178Q126,116,196,86.5Q266,57,303.5,118.5Q341,180,309.5,239Z\"\/>\n  <\/svg>\n\n  <div class=\"hero-inner\">\n    <div>\n      <div class=\"hero-tag\">\n        <span class=\"pill\">Nouveau<\/span>\n        3 nouveaux modules \u00b7 printemps 2026\n      <\/div>\n      <h1>\n        Trois logiciels pour <span class=\"underline\">enrichir<\/span> votre portail collaborateurs.\n      <\/h1>\n      <p class=\"hero-lede\">\n        R\u00e9servation de parking, plateforme d\u00e9di\u00e9e \u00e0 la diversit\u00e9 &amp; inclusion, marketplace industrielle interne. Trois solutions int\u00e9gr\u00e9es \u00e0 votre plateforme Collaborative Perks, con\u00e7ues pour les grands groupes.\n      <\/p>\n      <div class=\"hero-actions\">\n        <a href=\"https:\/\/www.collaborativeperks.com\/demo\/\" class=\"btn btn-large\">R\u00e9server une d\u00e9mo \u2192<\/a>\n        <a href=\"#park\" class=\"btn btn-outline btn-large\">D\u00e9couvrir les modules<\/a>\n      <\/div>\n      <div class=\"hero-meta\">\n        <div class=\"stat\">\n          <strong><span class=\"accent\">+50<\/span><\/strong>\n          <span>Clients Global 2000<\/span>\n        <\/div>\n        <div class=\"stat\">\n          <strong>2,5M<\/strong>\n          <span>Collaborateurs<\/span>\n        <\/div>\n        <div class=\"stat\">\n          <strong>16<\/strong>\n          <span>Langues disponibles<\/span>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"hero-illu\">\n      <div class=\"ill-block ill-park with-illu\">\n        <div class=\"illu-area\" style=\"background: #f4f8ff;\">\n          <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 400 320\" fill=\"none\">\n  <style>\n    @keyframes carDrive {\n      0% { transform: translateX(-180px); opacity: 0; }\n      15% { opacity: 1; }\n      35% { transform: translateX(0); opacity: 1; }\n      85% { transform: translateX(0); opacity: 1; }\n      100% { transform: translateX(-180px); opacity: 0; }\n    }\n    @keyframes pulseRing {\n      0%, 100% { opacity: 0.3; transform: scale(1); }\n      50% { opacity: 0.6; transform: scale(1.05); }\n    }\n    @keyframes blink {\n      0%, 50%, 100% { opacity: 1; }\n      25%, 75% { opacity: 0.3; }\n    }\n    @keyframes fadeIn {\n      0% { opacity: 0; }\n      100% { opacity: 1; }\n    }\n    @keyframes spotFill {\n      0%, 25% { fill-opacity: 0.2; }\n      50%, 100% { fill-opacity: 1; }\n    }\n    @keyframes phoneScan {\n      0% { transform: translateY(-2px); }\n      50% { transform: translateY(2px); }\n      100% { transform: translateY(-2px); }\n    }\n    @keyframes checkPop {\n      0%, 50% { transform: scale(0); opacity: 0; }\n      65% { transform: scale(1.2); opacity: 1; }\n      75%, 90% { transform: scale(1); opacity: 1; }\n      100% { transform: scale(0); opacity: 0; }\n    }\n    @keyframes labelSlide {\n      0%, 35% { transform: translateY(-8px); opacity: 0; }\n      50%, 90% { transform: translateY(0); opacity: 1; }\n      100% { transform: translateY(-8px); opacity: 0; }\n    }\n\n    .park-car {\n      animation: carDrive 6s ease-in-out infinite;\n      transform-origin: center;\n    }\n    .park-spot-pulse {\n      animation: pulseRing 2.5s ease-in-out infinite;\n      transform-origin: 190px 169px;\n    }\n    .park-mobile-screen {\n      animation: phoneScan 2s ease-in-out infinite;\n      transform-origin: 39px 70px;\n    }\n    .park-mobile-led {\n      animation: blink 1.4s ease-in-out infinite;\n    }\n    .park-confirm-check {\n      animation: checkPop 6s ease-in-out infinite;\n      transform-origin: 140px 50px;\n    }\n    .park-spot-fill {\n      animation: spotFill 6s ease-in-out infinite;\n    }\n    .park-reserved-label {\n      animation: labelSlide 6s ease-in-out infinite;\n      transform-origin: 190px 116px;\n    }\n  \n\n  \/* ====== REAL LOGO STYLING ====== *\/\n  .logo {\n    \/* override gap\/font when logo-img present *\/\n    padding: 4px 0;\n  }\n  .logo-img {\n    height: 44px;\n    width: auto;\n    display: block;\n  }\n  .footer-logo-img {\n    height: 56px;\n    width: auto;\n    display: block;\n    margin-bottom: 16px;\n  }\n\n\n  \/* Vehicle type badges on parking spots *\/\n  .park-spot { position: relative; }\n  .vehicle-badge {\n    position: absolute;\n    top: 4px; right: 4px;\n    width: 14px; height: 14px;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 2;\n    box-shadow: 0 1px 3px rgba(0,0,0,0.15);\n  }\n  .vehicle-badge svg {\n    width: 9px; height: 9px;\n    display: block;\n  }\n  .vehicle-badge.electric { background: #2bb88a; }\n  .vehicle-badge.electric svg { color: #ffffff; }\n  .vehicle-badge.moto { background: #86d3ff; }\n  .vehicle-badge.moto svg { color: #0a1254; }\n  .vehicle-badge.pmr { background: #0a1254; }\n  .vehicle-badge.pmr svg { color: #ffffff; }\n  .vehicle-badge.bike { background: #ffce86; }\n  .vehicle-badge.bike svg { color: #0a1254; }\n\n  \/* Extended legend with vehicle types *\/\n  .park-legend.with-vehicles {\n    flex-wrap: wrap;\n    row-gap: 8px;\n  }\n  .park-legend.with-vehicles .vehicle-legend {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n  }\n  .park-legend.with-vehicles .vehicle-mark {\n    width: 14px; height: 14px;\n    border-radius: 50%;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n  }\n  .park-legend.with-vehicles .vehicle-mark svg {\n    width: 9px; height: 9px;\n  }\n\n<\/style>\n\n  <!-- Background blob -->\n  <ellipse cx=\"200\" cy=\"280\" rx=\"160\" ry=\"14\" fill=\"#0a1254\" opacity=\"0.06\"\/>\n\n  <!-- Parking lot floor -->\n  <rect x=\"40\" y=\"80\" width=\"320\" height=\"180\" rx=\"12\" fill=\"#f4f8ff\"\/>\n  <rect x=\"40\" y=\"80\" width=\"320\" height=\"180\" rx=\"12\" stroke=\"#e5e7eb\" stroke-width=\"1.5\"\/>\n\n  <!-- Parking lines -->\n  <line x1=\"100\" y1=\"100\" x2=\"100\" y2=\"240\" stroke=\"#cdd6e0\" stroke-width=\"2\" stroke-dasharray=\"4 4\"\/>\n  <line x1=\"160\" y1=\"100\" x2=\"160\" y2=\"240\" stroke=\"#cdd6e0\" stroke-width=\"2\" stroke-dasharray=\"4 4\"\/>\n  <line x1=\"220\" y1=\"100\" x2=\"220\" y2=\"240\" stroke=\"#cdd6e0\" stroke-width=\"2\" stroke-dasharray=\"4 4\"\/>\n  <line x1=\"280\" y1=\"100\" x2=\"280\" y2=\"240\" stroke=\"#cdd6e0\" stroke-width=\"2\" stroke-dasharray=\"4 4\"\/>\n\n  <!-- Reserved spot with pulse -->\n  <g class=\"park-spot-pulse\">\n    <rect x=\"162\" y=\"100\" width=\"56\" height=\"138\" rx=\"6\" fill=\"#36d1a2\" fill-opacity=\"0.18\"\/>\n    <rect x=\"162\" y=\"100\" width=\"56\" height=\"138\" rx=\"6\" stroke=\"#36d1a2\" stroke-width=\"2.5\"\/>\n  <\/g>\n\n  <!-- Reserved label (slides down) -->\n  <g class=\"park-reserved-label\">\n    <rect x=\"170\" y=\"108\" width=\"40\" height=\"16\" rx=\"8\" fill=\"#36d1a2\"\/>\n    <text x=\"190\" y=\"119\" font-family=\"DM Sans, sans-serif\" font-size=\"9\" font-weight=\"700\" fill=\"#0a1254\" text-anchor=\"middle\">R\u00c9SERV\u00c9<\/text>\n  <\/g>\n  <!-- EV charging indicator on reserved spot -->\n  <g transform=\"translate(168, 222)\">\n    <rect x=\"0\" y=\"0\" width=\"44\" height=\"11\" rx=\"5.5\" fill=\"#2bb88a\"\/>\n    <circle cx=\"6\" cy=\"5.5\" r=\"2.5\" fill=\"#ffffff\"\/>\n    <path d=\"M 6 4 L 4.5 6 L 6.5 6 L 5 8\" stroke=\"#2bb88a\" stroke-width=\"0.8\" stroke-linecap=\"round\" fill=\"none\"\/>\n    <text x=\"11\" y=\"8\" font-family=\"DM Sans, sans-serif\" font-size=\"6\" font-weight=\"700\" fill=\"#ffffff\">BORNE EV<\/text>\n  <\/g>\n\n  <!-- Car (animated drive in) -->\n  <g class=\"park-car\">\n    <rect x=\"166\" y=\"135\" width=\"48\" height=\"84\" rx=\"10\" fill=\"#0a1254\"\/>\n    <rect x=\"171\" y=\"142\" width=\"38\" height=\"22\" rx=\"4\" fill=\"#86d3ff\" opacity=\"0.7\"\/>\n    <rect x=\"171\" y=\"190\" width=\"38\" height=\"20\" rx=\"4\" fill=\"#86d3ff\" opacity=\"0.5\"\/>\n    <rect x=\"160\" y=\"150\" width=\"6\" height=\"14\" rx=\"2\" fill=\"#131415\"\/>\n    <rect x=\"214\" y=\"150\" width=\"6\" height=\"14\" rx=\"2\" fill=\"#131415\"\/>\n    <rect x=\"160\" y=\"195\" width=\"6\" height=\"14\" rx=\"2\" fill=\"#131415\"\/>\n    <rect x=\"214\" y=\"195\" width=\"6\" height=\"14\" rx=\"2\" fill=\"#131415\"\/>\n    <circle cx=\"190\" cy=\"175\" r=\"2\" fill=\"#ffce86\"\/>\n  <\/g>\n\n  <!-- Empty spots -->\n  <text x=\"130\" y=\"170\" font-family=\"DM Sans, sans-serif\" font-size=\"11\" font-weight=\"600\" fill=\"#9ca3af\" text-anchor=\"middle\">Libre<\/text>\n  <text x=\"250\" y=\"170\" font-family=\"DM Sans, sans-serif\" font-size=\"11\" font-weight=\"600\" fill=\"#9ca3af\" text-anchor=\"middle\">Libre<\/text>\n\n  <!-- Occupied spot -->\n  <rect x=\"288\" y=\"135\" width=\"40\" height=\"84\" rx=\"8\" fill=\"#cdd6e0\" opacity=\"0.5\"\/>\n  <text x=\"308\" y=\"180\" font-family=\"DM Sans, sans-serif\" font-size=\"11\" font-weight=\"600\" fill=\"#6c7c8c\" text-anchor=\"middle\">Occup\u00e9e<\/text>\n\n  <!-- Mobile phone -->\n  <g transform=\"translate(40, 110)\">\n    <rect x=\"2\" y=\"4\" width=\"78\" height=\"140\" rx=\"14\" fill=\"#0a1254\" opacity=\"0.15\"\/>\n    <rect x=\"0\" y=\"0\" width=\"78\" height=\"140\" rx=\"14\" fill=\"#ffffff\" stroke=\"#0a1254\" stroke-width=\"2\"\/>\n    <rect x=\"6\" y=\"14\" width=\"66\" height=\"112\" rx=\"6\" fill=\"#f4f8ff\"\/>\n    <rect x=\"32\" y=\"4\" width=\"14\" height=\"4\" rx=\"2\" fill=\"#0a1254\"\/>\n\n    <!-- App header -->\n    <rect x=\"10\" y=\"20\" width=\"58\" height=\"14\" rx=\"3\" fill=\"#0a1254\"\/>\n    <text x=\"39\" y=\"30\" font-family=\"DM Sans, sans-serif\" font-size=\"7\" font-weight=\"700\" fill=\"#ffffff\" text-anchor=\"middle\">Park+<\/text>\n\n    <!-- Date -->\n    <rect x=\"10\" y=\"40\" width=\"58\" height=\"14\" rx=\"3\" fill=\"#36d1a2\"\/>\n    <text x=\"39\" y=\"50\" font-family=\"DM Sans, sans-serif\" font-size=\"6\" font-weight=\"700\" fill=\"#0a1254\" text-anchor=\"middle\">MARDI 12 MAI<\/text>\n\n    <!-- Mini parking grid (animated fill) -->\n    <g transform=\"translate(12, 60)\">\n      <rect x=\"0\" y=\"0\" width=\"11\" height=\"14\" rx=\"1.5\" fill=\"#cdd6e0\"\/>\n      <rect x=\"13\" y=\"0\" width=\"11\" height=\"14\" rx=\"1.5\" fill=\"#36d1a2\" class=\"park-spot-fill\" style=\"animation-delay: 0s\"\/>\n      <rect x=\"26\" y=\"0\" width=\"11\" height=\"14\" rx=\"1.5\" fill=\"#cdd6e0\"\/>\n      <rect x=\"39\" y=\"0\" width=\"11\" height=\"14\" rx=\"1.5\" fill=\"#cdd6e0\"\/>\n      <rect x=\"52\" y=\"0\" width=\"11\" height=\"14\" rx=\"1.5\" fill=\"#36d1a2\" class=\"park-spot-fill\" style=\"animation-delay: 0.3s\"\/>\n\n      <rect x=\"0\" y=\"16\" width=\"11\" height=\"14\" rx=\"1.5\" fill=\"#cdd6e0\"\/>\n      <rect x=\"13\" y=\"16\" width=\"11\" height=\"14\" rx=\"1.5\" fill=\"#ffce86\" stroke=\"#0a1254\" stroke-width=\"1\"\/>\n      <rect x=\"26\" y=\"16\" width=\"11\" height=\"14\" rx=\"1.5\" fill=\"#cdd6e0\"\/>\n      <rect x=\"39\" y=\"16\" width=\"11\" height=\"14\" rx=\"1.5\" fill=\"#36d1a2\" class=\"park-spot-fill\" style=\"animation-delay: 0.6s\"\/>\n      <rect x=\"52\" y=\"16\" width=\"11\" height=\"14\" rx=\"1.5\" fill=\"#cdd6e0\"\/>\n\n      <rect x=\"0\" y=\"32\" width=\"11\" height=\"14\" rx=\"1.5\" fill=\"#36d1a2\" class=\"park-spot-fill\" style=\"animation-delay: 0.9s\"\/>\n      <rect x=\"13\" y=\"32\" width=\"11\" height=\"14\" rx=\"1.5\" fill=\"#cdd6e0\"\/>\n      <rect x=\"26\" y=\"32\" width=\"11\" height=\"14\" rx=\"1.5\" fill=\"#cdd6e0\"\/>\n      <rect x=\"39\" y=\"32\" width=\"11\" height=\"14\" rx=\"1.5\" fill=\"#cdd6e0\"\/>\n      <rect x=\"52\" y=\"32\" width=\"11\" height=\"14\" rx=\"1.5\" fill=\"#36d1a2\" class=\"park-spot-fill\" style=\"animation-delay: 1.2s\"\/>\n      <!-- Vehicle type markers on mini parking grid -->\n      <rect x=\"21\" y=\"1\" width=\"3\" height=\"3\" rx=\"0.5\" fill=\"#2bb88a\" stroke=\"#ffffff\" stroke-width=\"0.4\"\/>\n      <rect x=\"60\" y=\"1\" width=\"3\" height=\"3\" rx=\"0.5\" fill=\"#86d3ff\" stroke=\"#ffffff\" stroke-width=\"0.4\"\/>\n      <rect x=\"47\" y=\"17\" width=\"3\" height=\"3\" rx=\"0.5\" fill=\"#ffce86\" stroke=\"#ffffff\" stroke-width=\"0.4\"\/>\n      <rect x=\"8\" y=\"33\" width=\"3\" height=\"3\" rx=\"0.5\" fill=\"#0a1254\" stroke=\"#ffffff\" stroke-width=\"0.4\"\/>\n    <\/g>\n\n    <!-- Confirm button with LED dot -->\n    <rect x=\"10\" y=\"112\" width=\"58\" height=\"10\" rx=\"5\" fill=\"#0a1254\"\/>\n    <text x=\"39\" y=\"119\" font-family=\"DM Sans, sans-serif\" font-size=\"6\" font-weight=\"700\" fill=\"#ffffff\" text-anchor=\"middle\">R\u00c9SERVER B2<\/text>\n    <circle cx=\"14\" cy=\"117\" r=\"1.2\" fill=\"#36d1a2\" class=\"park-mobile-led\"\/>\n  <\/g>\n\n  <!-- Decorative dots -->\n  <circle cx=\"370\" cy=\"60\" r=\"4\" fill=\"#ffce86\"\/>\n  <circle cx=\"350\" cy=\"50\" r=\"2\" fill=\"#36d1a2\"\/>\n  <circle cx=\"60\" cy=\"70\" r=\"3\" fill=\"#36d1a2\" opacity=\"0.5\"\/>\n\n  <!-- Check mark badge (pop in) -->\n  <g class=\"park-confirm-check\" transform=\"translate(140, 50)\">\n    <circle cx=\"0\" cy=\"0\" r=\"18\" fill=\"#36d1a2\"\/>\n    <path d=\"M -7 0 L -2 5 L 7 -5\" stroke=\"#0a1254\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" fill=\"none\"\/>\n  <\/g>\n<\/svg>\n\n        <\/div>\n        <div class=\"illu-content\">\n          <div class=\"illu-tag\">Module 1 \u00b7 Mobilit\u00e9<\/div>\n          <h4>Park+<\/h4>\n          <p>R\u00e9servez votre place de parking avant d&#8217;aller au bureau.<\/p>\n        <\/div>\n      <\/div>\n      <div class=\"ill-block ill-dei with-illu\">\n        <div class=\"illu-area\" style=\"background: #fff8ed;\">\n          <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 400 320\" fill=\"none\">\n  <style>\n    @keyframes popIn {\n      0%, 5% { transform: scale(0); opacity: 0; }\n      15% { transform: scale(1.1); opacity: 1; }\n      20% { transform: scale(0.95); }\n      25%, 90% { transform: scale(1); opacity: 1; }\n      100% { transform: scale(0); opacity: 0; }\n    }\n    @keyframes slideInRight {\n      0%, 30% { transform: translateX(-30px); opacity: 0; }\n      40%, 90% { transform: translateX(0); opacity: 1; }\n      100% { transform: translateX(-30px); opacity: 0; }\n    }\n    @keyframes heartBeat {\n      0%, 100% { transform: scale(1); }\n      15% { transform: scale(1.2); }\n      30% { transform: scale(1); }\n      45% { transform: scale(1.15); }\n      60% { transform: scale(1); }\n    }\n    @keyframes connectPulse {\n      0%, 100% { opacity: 0.2; }\n      50% { opacity: 0.7; }\n    }\n    @keyframes drawLoop {\n      0%, 100% { opacity: 0; }\n      30%, 70% { opacity: 1; }\n    }\n\n    .person-1 { animation: popIn 6s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }\n    .person-2 { animation: popIn 6s ease-in-out infinite 0.2s; transform-origin: center; transform-box: fill-box; }\n    .person-3 { animation: popIn 6s ease-in-out infinite 0.4s; transform-origin: center; transform-box: fill-box; }\n    .person-4 { animation: popIn 6s ease-in-out infinite 0.6s; transform-origin: center; transform-box: fill-box; }\n    .person-5 { animation: popIn 6s ease-in-out infinite 0.8s; transform-origin: center; transform-box: fill-box; }\n\n    .event-1 { animation: slideInRight 6s ease-in-out infinite 0.4s; }\n    .event-2 { animation: slideInRight 6s ease-in-out infinite 0.7s; }\n    .event-3 { animation: slideInRight 6s ease-in-out infinite 1.0s; }\n\n    .heart-badge { animation: heartBeat 2.5s ease-in-out infinite; transform-origin: 285px 70px; }\n\n    .connect-dot-1 { animation: connectPulse 2s ease-in-out infinite 1.0s; }\n    .connect-dot-2 { animation: connectPulse 2s ease-in-out infinite 1.3s; }\n    .connect-dot-3 { animation: connectPulse 2s ease-in-out infinite 1.6s; }\n\n    .deco-1 { animation: drawLoop 3s ease-in-out infinite; }\n    .deco-2 { animation: drawLoop 3s ease-in-out infinite 0.8s; }\n    .deco-3 { animation: drawLoop 3s ease-in-out infinite 1.6s; }\n  \n\n  \/* ====== REAL LOGO STYLING ====== *\/\n  .logo {\n    \/* override gap\/font when logo-img present *\/\n    padding: 4px 0;\n  }\n  .logo-img {\n    height: 44px;\n    width: auto;\n    display: block;\n  }\n  .footer-logo-img {\n    height: 56px;\n    width: auto;\n    display: block;\n    margin-bottom: 16px;\n  }\n\n\n  \/* Vehicle type badges on parking spots *\/\n  .park-spot { position: relative; }\n  .vehicle-badge {\n    position: absolute;\n    top: 4px; right: 4px;\n    width: 14px; height: 14px;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 2;\n    box-shadow: 0 1px 3px rgba(0,0,0,0.15);\n  }\n  .vehicle-badge svg {\n    width: 9px; height: 9px;\n    display: block;\n  }\n  .vehicle-badge.electric { background: #2bb88a; }\n  .vehicle-badge.electric svg { color: #ffffff; }\n  .vehicle-badge.moto { background: #86d3ff; }\n  .vehicle-badge.moto svg { color: #0a1254; }\n  .vehicle-badge.pmr { background: #0a1254; }\n  .vehicle-badge.pmr svg { color: #ffffff; }\n  .vehicle-badge.bike { background: #ffce86; }\n  .vehicle-badge.bike svg { color: #0a1254; }\n\n  \/* Extended legend with vehicle types *\/\n  .park-legend.with-vehicles {\n    flex-wrap: wrap;\n    row-gap: 8px;\n  }\n  .park-legend.with-vehicles .vehicle-legend {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n  }\n  .park-legend.with-vehicles .vehicle-mark {\n    width: 14px; height: 14px;\n    border-radius: 50%;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n  }\n  .park-legend.with-vehicles .vehicle-mark svg {\n    width: 9px; height: 9px;\n  }\n\n<\/style>\n\n  <!-- Background blob -->\n  <ellipse cx=\"200\" cy=\"280\" rx=\"160\" ry=\"14\" fill=\"#0a1254\" opacity=\"0.06\"\/>\n\n  <!-- Background circle -->\n  <circle cx=\"200\" cy=\"160\" r=\"120\" fill=\"#fff8ed\" opacity=\"0.6\"\/>\n\n  <!-- Calendar\/event card (left) -->\n  <g transform=\"translate(40, 80)\">\n    <rect x=\"3\" y=\"5\" width=\"140\" height=\"160\" rx=\"12\" fill=\"#0a1254\" opacity=\"0.12\"\/>\n    <rect x=\"0\" y=\"0\" width=\"140\" height=\"160\" rx=\"12\" fill=\"#ffffff\" stroke=\"#e5e7eb\" stroke-width=\"1.5\"\/>\n\n    <!-- Card header -->\n    <rect x=\"0\" y=\"0\" width=\"140\" height=\"32\" rx=\"12\" fill=\"#0a1254\"\/>\n    <rect x=\"0\" y=\"20\" width=\"140\" height=\"12\" fill=\"#0a1254\"\/>\n    <text x=\"70\" y=\"20\" font-family=\"DM Sans, sans-serif\" font-size=\"11\" font-weight=\"700\" fill=\"#ffffff\" text-anchor=\"middle\">\u00c9v\u00e9nements D&amp;I<\/text>\n\n    <!-- Event 1 -->\n    <g class=\"event-1\" transform=\"translate(8, 42)\">\n      <rect x=\"0\" y=\"0\" width=\"124\" height=\"32\" rx=\"6\" fill=\"#fff8ed\"\/>\n      <rect x=\"6\" y=\"6\" width=\"22\" height=\"22\" rx=\"4\" fill=\"#ffce86\"\/>\n      <text x=\"17\" y=\"16\" font-family=\"DM Sans, sans-serif\" font-size=\"9\" font-weight=\"800\" fill=\"#0a1254\" text-anchor=\"middle\">14<\/text>\n      <text x=\"17\" y=\"24\" font-family=\"DM Sans, sans-serif\" font-size=\"6\" font-weight=\"700\" fill=\"#0a1254\" text-anchor=\"middle\">MAI<\/text>\n      <text x=\"34\" y=\"14\" font-family=\"DM Sans, sans-serif\" font-size=\"8\" font-weight=\"700\" fill=\"#0a1254\">Femmes &amp; leadership<\/text>\n      <text x=\"34\" y=\"24\" font-family=\"Inter, sans-serif\" font-size=\"7\" fill=\"#6c7c8c\">12h30 \u00b7 142 inscrits<\/text>\n    <\/g>\n\n    <!-- Event 2 -->\n    <g class=\"event-2\" transform=\"translate(8, 80)\">\n      <rect x=\"0\" y=\"0\" width=\"124\" height=\"32\" rx=\"6\" fill=\"#e8faf3\"\/>\n      <rect x=\"6\" y=\"6\" width=\"22\" height=\"22\" rx=\"4\" fill=\"#36d1a2\"\/>\n      <text x=\"17\" y=\"16\" font-family=\"DM Sans, sans-serif\" font-size=\"9\" font-weight=\"800\" fill=\"#0a1254\" text-anchor=\"middle\">22<\/text>\n      <text x=\"17\" y=\"24\" font-family=\"DM Sans, sans-serif\" font-size=\"6\" font-weight=\"700\" fill=\"#0a1254\" text-anchor=\"middle\">MAI<\/text>\n      <text x=\"34\" y=\"14\" font-family=\"DM Sans, sans-serif\" font-size=\"8\" font-weight=\"700\" fill=\"#0a1254\">Diversit\u00e9 culturelle<\/text>\n      <text x=\"34\" y=\"24\" font-family=\"Inter, sans-serif\" font-size=\"7\" fill=\"#6c7c8c\">8 ateliers \u00b7 Tous bureaux<\/text>\n    <\/g>\n\n    <!-- Event 3 -->\n    <g class=\"event-3\" transform=\"translate(8, 118)\">\n      <rect x=\"0\" y=\"0\" width=\"124\" height=\"32\" rx=\"6\" fill=\"#f0eeff\"\/>\n      <rect x=\"6\" y=\"6\" width=\"22\" height=\"22\" rx=\"4\" fill=\"#655cfe\"\/>\n      <text x=\"17\" y=\"16\" font-family=\"DM Sans, sans-serif\" font-size=\"9\" font-weight=\"800\" fill=\"#ffffff\" text-anchor=\"middle\">03<\/text>\n      <text x=\"17\" y=\"24\" font-family=\"DM Sans, sans-serif\" font-size=\"6\" font-weight=\"700\" fill=\"#ffffff\" text-anchor=\"middle\">JUIN<\/text>\n      <text x=\"34\" y=\"14\" font-family=\"DM Sans, sans-serif\" font-size=\"8\" font-weight=\"700\" fill=\"#0a1254\">Neurodiversit\u00e9<\/text>\n      <text x=\"34\" y=\"24\" font-family=\"Inter, sans-serif\" font-size=\"7\" fill=\"#6c7c8c\">Table ronde \u00b7 89 inscrits<\/text>\n    <\/g>\n  <\/g>\n\n  <!-- Group of people -->\n  <g transform=\"translate(220, 100)\">\n    <!-- Person 1 -->\n    <g class=\"person-1\" transform=\"translate(0, 30)\">\n      <circle cx=\"20\" cy=\"20\" r=\"20\" fill=\"#36d1a2\"\/>\n      <circle cx=\"20\" cy=\"14\" r=\"7\" fill=\"#fff8ed\"\/>\n      <path d=\"M 7 28 Q 7 20 20 20 Q 33 20 33 28 L 33 40 L 7 40 Z\" fill=\"#fff8ed\"\/>\n      <rect x=\"0\" y=\"40\" width=\"40\" height=\"20\" rx=\"4\" fill=\"#0a1254\"\/>\n    <\/g>\n\n    <!-- Person 2 -->\n    <g class=\"person-2\" transform=\"translate(46, 0)\">\n      <circle cx=\"20\" cy=\"20\" r=\"20\" fill=\"#ffce86\"\/>\n      <circle cx=\"20\" cy=\"14\" r=\"7\" fill=\"#5d4037\"\/>\n      <path d=\"M 7 28 Q 7 20 20 20 Q 33 20 33 28 L 33 40 L 7 40 Z\" fill=\"#5d4037\"\/>\n      <rect x=\"0\" y=\"40\" width=\"40\" height=\"20\" rx=\"4\" fill=\"#0a1254\"\/>\n    <\/g>\n\n    <!-- Person 3 -->\n    <g class=\"person-3\" transform=\"translate(92, 30)\">\n      <circle cx=\"20\" cy=\"20\" r=\"20\" fill=\"#655cfe\"\/>\n      <circle cx=\"20\" cy=\"14\" r=\"7\" fill=\"#ffe4c4\"\/>\n      <path d=\"M 7 28 Q 7 20 20 20 Q 33 20 33 28 L 33 40 L 7 40 Z\" fill=\"#ffe4c4\"\/>\n      <rect x=\"0\" y=\"40\" width=\"40\" height=\"20\" rx=\"4\" fill=\"#0a1254\"\/>\n      <path d=\"M 8 12 Q 8 4 20 4 Q 32 4 32 12 Q 32 18 20 18 Q 8 18 8 12 Z\" fill=\"#655cfe\" opacity=\"0.85\"\/>\n    <\/g>\n\n    <!-- Person 4 -->\n    <g class=\"person-4\" transform=\"translate(23, 70)\">\n      <circle cx=\"20\" cy=\"20\" r=\"20\" fill=\"#ff6b6b\"\/>\n      <circle cx=\"20\" cy=\"14\" r=\"7\" fill=\"#ffe4c4\"\/>\n      <path d=\"M 7 28 Q 7 20 20 20 Q 33 20 33 28 L 33 40 L 7 40 Z\" fill=\"#ffe4c4\"\/>\n      <rect x=\"0\" y=\"40\" width=\"40\" height=\"20\" rx=\"4\" fill=\"#0a1254\"\/>\n    <\/g>\n\n    <!-- Person 5 -->\n    <g class=\"person-5\" transform=\"translate(69, 70)\">\n      <circle cx=\"20\" cy=\"20\" r=\"20\" fill=\"#86d3ff\"\/>\n      <circle cx=\"20\" cy=\"14\" r=\"7\" fill=\"#8d6e63\"\/>\n      <path d=\"M 7 28 Q 7 20 20 20 Q 33 20 33 28 L 33 40 L 7 40 Z\" fill=\"#8d6e63\"\/>\n      <rect x=\"0\" y=\"40\" width=\"40\" height=\"20\" rx=\"4\" fill=\"#0a1254\"\/>\n    <\/g>\n  <\/g>\n\n  <!-- Connection dots -->\n  <circle class=\"connect-dot-1\" cx=\"190\" cy=\"120\" r=\"2\" fill=\"#36d1a2\"\/>\n  <circle class=\"connect-dot-2\" cx=\"200\" cy=\"135\" r=\"2\" fill=\"#36d1a2\"\/>\n  <circle class=\"connect-dot-3\" cx=\"210\" cy=\"145\" r=\"2\" fill=\"#36d1a2\"\/>\n\n  <!-- Heart badge (pulsing) -->\n  <g class=\"heart-badge\" transform=\"translate(285, 70)\">\n    <circle cx=\"0\" cy=\"0\" r=\"18\" fill=\"#ff6b6b\"\/>\n    <path d=\"M 0 5 C -8 -2, -8 -8, -3 -8 C -1 -8, 0 -6, 0 -5 C 0 -6, 1 -8, 3 -8 C 8 -8, 8 -2, 0 5 Z\" fill=\"#ffffff\"\/>\n  <\/g>\n\n  <!-- Decorative dots -->\n  <circle class=\"deco-1\" cx=\"370\" cy=\"60\" r=\"4\" fill=\"#36d1a2\"\/>\n  <circle class=\"deco-2\" cx=\"350\" cy=\"200\" r=\"3\" fill=\"#ffce86\"\/>\n  <circle class=\"deco-3\" cx=\"190\" cy=\"80\" r=\"2\" fill=\"#655cfe\"\/>\n<\/svg>\n\n        <\/div>\n        <div class=\"illu-content\">\n          <div class=\"illu-tag\">Module 2 \u00b7 Engagement<\/div>\n          <h4>Inclusive+<\/h4>\n          <p>Pilotez votre strat\u00e9gie D&amp;I \u00e0 l&#8217;\u00e9chelle.<\/p>\n        <\/div>\n      <\/div>\n      <div class=\"ill-block ill-reuse with-illu\">\n        <div class=\"illu-area\" style=\"background: #f0eeff;\">\n          <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 400 320\" fill=\"none\">\n  <style>\n    @keyframes equipMove {\n      0% { transform: translateX(-100px); opacity: 0; }\n      15% { opacity: 1; transform: translateX(-100px); }\n      40% { transform: translateX(0); }\n      60% { transform: translateX(0); }\n      80% { transform: translateX(110px); opacity: 1; }\n      100% { transform: translateX(110px); opacity: 0; }\n    }\n    @keyframes drawArrow {\n      0% { stroke-dashoffset: 240; }\n      40% { stroke-dashoffset: 0; }\n      80% { stroke-dashoffset: 0; }\n      100% { stroke-dashoffset: 240; }\n    }\n    @keyframes arrowHeadAppear {\n      0%, 35% { opacity: 0; }\n      45%, 75% { opacity: 0.6; }\n      100% { opacity: 0; }\n    }\n    @keyframes priceFlash {\n      0%, 100% { transform: scale(1); }\n      50% { transform: scale(1.1); }\n    }\n    @keyframes savingsTick {\n      0%, 100% { transform: translateY(0); }\n      50% { transform: translateY(-2px); }\n    }\n    @keyframes leafBob {\n      0%, 100% { transform: translateY(0) rotate(0); }\n      50% { transform: translateY(-4px) rotate(-5deg); }\n    }\n    @keyframes blinkLight {\n      0%, 100% { opacity: 0.3; }\n      50% { opacity: 1; }\n    }\n    @keyframes tagBounce {\n      0%, 100% { transform: scale(1) rotate(0); }\n      50% { transform: scale(1.05) rotate(-2deg); }\n    }\n    @keyframes pulseRing2 {\n      0% { r: 14; opacity: 0.6; }\n      100% { r: 28; opacity: 0; }\n    }\n\n    .equipment-moving {\n      animation: equipMove 5s ease-in-out infinite;\n      transform-origin: center;\n    }\n    .arrow-trace {\n      stroke-dasharray: 240;\n      animation: drawArrow 5s ease-in-out infinite;\n    }\n    .arrow-head {\n      animation: arrowHeadAppear 5s ease-in-out infinite;\n    }\n    .savings-bubble {\n      animation: savingsTick 2s ease-in-out infinite;\n      transform-origin: 200px 50px;\n    }\n    .price-tag {\n      animation: priceFlash 2s ease-in-out infinite;\n      transform-origin: 215px 130px;\n    }\n    .leaf-icon {\n      animation: leafBob 3s ease-in-out infinite;\n      transform-origin: 50px 60px;\n    }\n    .building-light-1 { animation: blinkLight 2s ease-in-out infinite 0.3s; }\n    .building-light-2 { animation: blinkLight 2s ease-in-out infinite 0.7s; }\n    .building-light-3 { animation: blinkLight 2s ease-in-out infinite 1.1s; }\n    .building-light-4 { animation: blinkLight 2s ease-in-out infinite 1.5s; }\n    .vend-tag { animation: tagBounce 2.5s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }\n    .achat-tag { animation: tagBounce 2.5s ease-in-out infinite 1.2s; transform-origin: center; transform-box: fill-box; }\n  \n\n  \/* ====== REAL LOGO STYLING ====== *\/\n  .logo {\n    \/* override gap\/font when logo-img present *\/\n    padding: 4px 0;\n  }\n  .logo-img {\n    height: 44px;\n    width: auto;\n    display: block;\n  }\n  .footer-logo-img {\n    height: 56px;\n    width: auto;\n    display: block;\n    margin-bottom: 16px;\n  }\n\n\n  \/* Vehicle type badges on parking spots *\/\n  .park-spot { position: relative; }\n  .vehicle-badge {\n    position: absolute;\n    top: 4px; right: 4px;\n    width: 14px; height: 14px;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 2;\n    box-shadow: 0 1px 3px rgba(0,0,0,0.15);\n  }\n  .vehicle-badge svg {\n    width: 9px; height: 9px;\n    display: block;\n  }\n  .vehicle-badge.electric { background: #2bb88a; }\n  .vehicle-badge.electric svg { color: #ffffff; }\n  .vehicle-badge.moto { background: #86d3ff; }\n  .vehicle-badge.moto svg { color: #0a1254; }\n  .vehicle-badge.pmr { background: #0a1254; }\n  .vehicle-badge.pmr svg { color: #ffffff; }\n  .vehicle-badge.bike { background: #ffce86; }\n  .vehicle-badge.bike svg { color: #0a1254; }\n\n  \/* Extended legend with vehicle types *\/\n  .park-legend.with-vehicles {\n    flex-wrap: wrap;\n    row-gap: 8px;\n  }\n  .park-legend.with-vehicles .vehicle-legend {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n  }\n  .park-legend.with-vehicles .vehicle-mark {\n    width: 14px; height: 14px;\n    border-radius: 50%;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n  }\n  .park-legend.with-vehicles .vehicle-mark svg {\n    width: 9px; height: 9px;\n  }\n\n<\/style>\n\n  <!-- Background blob -->\n  <ellipse cx=\"200\" cy=\"280\" rx=\"160\" ry=\"14\" fill=\"#0a1254\" opacity=\"0.06\"\/>\n\n  <!-- Background circle -->\n  <circle cx=\"200\" cy=\"160\" r=\"120\" fill=\"#f0eeff\" opacity=\"0.5\"\/>\n\n  <!-- Building 1 (left) - Selling -->\n  <g transform=\"translate(40, 130)\">\n    <rect x=\"0\" y=\"20\" width=\"80\" height=\"100\" rx=\"4\" fill=\"#ffffff\" stroke=\"#0a1254\" stroke-width=\"2\"\/>\n    <rect x=\"-4\" y=\"14\" width=\"88\" height=\"10\" rx=\"2\" fill=\"#0a1254\"\/>\n\n    <!-- Animated windows -->\n    <rect class=\"building-light-1\" x=\"10\" y=\"32\" width=\"14\" height=\"14\" rx=\"2\" fill=\"#86d3ff\"\/>\n    <rect x=\"33\" y=\"32\" width=\"14\" height=\"14\" rx=\"2\" fill=\"#86d3ff\"\/>\n    <rect class=\"building-light-2\" x=\"56\" y=\"32\" width=\"14\" height=\"14\" rx=\"2\" fill=\"#86d3ff\"\/>\n    <rect x=\"10\" y=\"54\" width=\"14\" height=\"14\" rx=\"2\" fill=\"#86d3ff\"\/>\n    <rect class=\"building-light-3\" x=\"33\" y=\"54\" width=\"14\" height=\"14\" rx=\"2\" fill=\"#86d3ff\"\/>\n    <rect x=\"56\" y=\"54\" width=\"14\" height=\"14\" rx=\"2\" fill=\"#86d3ff\"\/>\n\n    <rect x=\"33\" y=\"86\" width=\"14\" height=\"34\" rx=\"2\" fill=\"#0a1254\"\/>\n    <rect x=\"6\" y=\"0\" width=\"68\" height=\"14\" rx=\"3\" fill=\"#36d1a2\"\/>\n    <text x=\"40\" y=\"10\" font-family=\"DM Sans, sans-serif\" font-size=\"8\" font-weight=\"700\" fill=\"#0a1254\" text-anchor=\"middle\">FILIALE A<\/text>\n\n    <!-- Vend tag -->\n    <g class=\"vend-tag\" transform=\"translate(70, 76)\">\n      <rect x=\"0\" y=\"0\" width=\"34\" height=\"14\" rx=\"7\" fill=\"#ff6b6b\"\/>\n      <text x=\"17\" y=\"10\" font-family=\"DM Sans, sans-serif\" font-size=\"7\" font-weight=\"700\" fill=\"#ffffff\" text-anchor=\"middle\">VEND<\/text>\n    <\/g>\n  <\/g>\n\n  <!-- Building 2 (right) - Buying -->\n  <g transform=\"translate(280, 130)\">\n    <rect x=\"0\" y=\"20\" width=\"80\" height=\"100\" rx=\"4\" fill=\"#ffffff\" stroke=\"#0a1254\" stroke-width=\"2\"\/>\n    <rect x=\"-4\" y=\"14\" width=\"88\" height=\"10\" rx=\"2\" fill=\"#0a1254\"\/>\n\n    <!-- Animated windows -->\n    <rect x=\"10\" y=\"32\" width=\"14\" height=\"14\" rx=\"2\" fill=\"#86d3ff\"\/>\n    <rect class=\"building-light-4\" x=\"33\" y=\"32\" width=\"14\" height=\"14\" rx=\"2\" fill=\"#86d3ff\"\/>\n    <rect x=\"56\" y=\"32\" width=\"14\" height=\"14\" rx=\"2\" fill=\"#86d3ff\"\/>\n    <rect class=\"building-light-1\" x=\"10\" y=\"54\" width=\"14\" height=\"14\" rx=\"2\" fill=\"#86d3ff\"\/>\n    <rect x=\"33\" y=\"54\" width=\"14\" height=\"14\" rx=\"2\" fill=\"#86d3ff\"\/>\n    <rect class=\"building-light-2\" x=\"56\" y=\"54\" width=\"14\" height=\"14\" rx=\"2\" fill=\"#86d3ff\"\/>\n\n    <rect x=\"33\" y=\"86\" width=\"14\" height=\"34\" rx=\"2\" fill=\"#0a1254\"\/>\n    <rect x=\"6\" y=\"0\" width=\"68\" height=\"14\" rx=\"3\" fill=\"#655cfe\"\/>\n    <text x=\"40\" y=\"10\" font-family=\"DM Sans, sans-serif\" font-size=\"8\" font-weight=\"700\" fill=\"#ffffff\" text-anchor=\"middle\">FILIALE B<\/text>\n\n    <!-- Achat tag -->\n    <g class=\"achat-tag\" transform=\"translate(-26, 76)\">\n      <rect x=\"0\" y=\"0\" width=\"34\" height=\"14\" rx=\"7\" fill=\"#36d1a2\"\/>\n      <text x=\"17\" y=\"10\" font-family=\"DM Sans, sans-serif\" font-size=\"7\" font-weight=\"700\" fill=\"#0a1254\" text-anchor=\"middle\">ACHAT<\/text>\n    <\/g>\n  <\/g>\n\n  <!-- Equipment moving between buildings -->\n  <g class=\"equipment-moving\" transform=\"translate(150, 160)\">\n    <!-- Pallet -->\n    <rect x=\"-2\" y=\"60\" width=\"104\" height=\"10\" rx=\"1\" fill=\"#0a1254\" opacity=\"0.4\"\/>\n    <rect x=\"0\" y=\"58\" width=\"100\" height=\"6\" rx=\"1\" fill=\"#8d6e63\"\/>\n    <rect x=\"0\" y=\"64\" width=\"100\" height=\"6\" rx=\"1\" fill=\"#8d6e63\"\/>\n\n    <!-- Equipment box -->\n    <rect x=\"10\" y=\"0\" width=\"80\" height=\"60\" rx=\"6\" fill=\"#ffce86\" stroke=\"#0a1254\" stroke-width=\"2\"\/>\n    <rect x=\"20\" y=\"10\" width=\"60\" height=\"20\" rx=\"3\" fill=\"#0a1254\"\/>\n    <circle cx=\"30\" cy=\"20\" r=\"4\" fill=\"#36d1a2\"\/>\n    <circle cx=\"44\" cy=\"20\" r=\"4\" fill=\"#ff6b6b\"\/>\n    <circle cx=\"58\" cy=\"20\" r=\"4\" fill=\"#ffce86\"\/>\n    <rect x=\"20\" y=\"36\" width=\"35\" height=\"6\" rx=\"2\" fill=\"#0a1254\" opacity=\"0.7\"\/>\n    <rect x=\"20\" y=\"46\" width=\"50\" height=\"6\" rx=\"2\" fill=\"#0a1254\" opacity=\"0.5\"\/>\n\n    <!-- Price tag (pulsing) -->\n    <g class=\"price-tag\" transform=\"translate(50, -22)\">\n      <path d=\"M 0 0 L 30 0 L 38 8 L 30 16 L 0 16 Z\" fill=\"#36d1a2\"\/>\n      <text x=\"15\" y=\"11\" font-family=\"DM Sans, sans-serif\" font-size=\"8\" font-weight=\"800\" fill=\"#0a1254\" text-anchor=\"middle\">-66%<\/text>\n      <circle cx=\"4\" cy=\"8\" r=\"2\" fill=\"#0a1254\"\/>\n    <\/g>\n  <\/g>\n\n  <!-- Circular arrow (animated trace) -->\n  <g transform=\"translate(200, 160)\">\n    <path class=\"arrow-trace\"\n          d=\"M -100 0 Q -100 -80 0 -80 Q 100 -80 100 0\"\n          stroke=\"#0a1254\"\n          stroke-width=\"2.5\"\n          stroke-linecap=\"round\"\n          fill=\"none\"\n          opacity=\"0.5\"\/>\n    <path class=\"arrow-head\" d=\"M 95 -8 L 105 0 L 95 8\" stroke=\"#0a1254\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" fill=\"none\"\/>\n  <\/g>\n\n  <!-- Savings indicator (bouncing) -->\n  <g class=\"savings-bubble\" transform=\"translate(200, 50)\">\n    <rect x=\"-50\" y=\"-16\" width=\"100\" height=\"32\" rx=\"16\" fill=\"#0a1254\"\/>\n    <text x=\"-30\" y=\"5\" font-family=\"DM Sans, sans-serif\" font-size=\"14\" font-weight=\"800\" fill=\"#36d1a2\" text-anchor=\"middle\">\u20ac<\/text>\n    <text x=\"10\" y=\"-2\" font-family=\"DM Sans, sans-serif\" font-size=\"9\" font-weight=\"700\" fill=\"#ffffff\" text-anchor=\"middle\">\u00c9conomies<\/text>\n    <text x=\"10\" y=\"9\" font-family=\"DM Sans, sans-serif\" font-size=\"9\" font-weight=\"700\" fill=\"#36d1a2\" text-anchor=\"middle\">1,2 M\u20ac<\/text>\n  <\/g>\n\n  <!-- CO2 leaf icon (bobbing) -->\n  <g class=\"leaf-icon\" transform=\"translate(50, 60)\">\n    <circle cx=\"0\" cy=\"0\" r=\"18\" fill=\"#36d1a2\"\/>\n    <path d=\"M -7 -5 Q -7 -10 -2 -10 Q 5 -10 5 -5 Q 10 -5 10 0 Q 10 8 0 8 Q -10 8 -10 0 Q -10 -5 -7 -5 Z\" fill=\"#0a1254\" opacity=\"0.85\"\/>\n    <path d=\"M -2 -2 L 6 -8\" stroke=\"#36d1a2\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/>\n  <\/g>\n\n  <!-- Decorative dots -->\n  <circle cx=\"370\" cy=\"60\" r=\"4\" fill=\"#ffce86\"\/>\n  <circle cx=\"30\" cy=\"200\" r=\"3\" fill=\"#36d1a2\"\/>\n  <circle cx=\"380\" cy=\"240\" r=\"3\" fill=\"#655cfe\"\/>\n<\/svg>\n\n        <\/div>\n        <div class=\"illu-content\">\n          <div class=\"illu-tag\">Module 3 \u00b7 \u00c9conomie circulaire<\/div>\n          <h4>Reuse+<\/h4>\n          <p>Marketplace industrielle interne entre filiales.<\/p>\n        <\/div>\n      <\/div>\n      <div class=\"sticker\">\n        <div class=\"sticker-inner\">\n          NOUVEAU<br>2026\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n\n\n<section class=\"intro\">\n  <div class=\"intro-inner\">\n    <div class=\"section-tag\">Nouveaut\u00e9s 2026<\/div>\n    <h2>Une plateforme. D\u00e9sormais <span class=\"accent\">15 modules<\/span>.<\/h2>\n    <p>\n      Depuis 2011, Collaborative Perks accompagne les directions des ressources humaines de grands groupes internationaux. En 2026, nous \u00e9tendons notre catalogue avec trois nouveaux modules pens\u00e9s pour r\u00e9pondre aux besoins exprim\u00e9s par nos clients : mobilit\u00e9 au bureau, engagement D&amp;I, et \u00e9conomie circulaire.\n    <\/p>\n  <\/div>\n<\/section>\n\n\n\n<section class=\"module module-1\" id=\"park\">\n  <div class=\"module-inner\">\n    <div class=\"module-content\">\n      <div class=\"module-eyebrow\">\n        <span class=\"num\">1<\/span>\n        <span class=\"cat\">Module Mobilit\u00e9<\/span>\n      <\/div>\n      <h3>Park<span class=\"plus\">+<\/span><\/h3>\n      <p class=\"module-tagline\">Une place de parking, r\u00e9serv\u00e9e d&#8217;avance.<\/p>\n      <p class=\"module-desc\">\n        Avec le retour au bureau et les politiques de travail hybride, le parking d&#8217;entreprise est devenu une ressource rare. Park+ permet \u00e0 vos collaborateurs de r\u00e9server leur place de stationnement \u00e0 l&#8217;avance, en quelques secondes, depuis leur ordinateur ou leur mobile.\n      <\/p>\n      <ul class=\"module-features\">\n        <li>R\u00e9servation en temps r\u00e9el selon disponibilit\u00e9, par zone et type de v\u00e9hicule<\/li>\n        <li>R\u00e8gles d&#8217;attribution param\u00e9trables (priorit\u00e9s, quotas, badges PMR)<\/li>\n        <li>Int\u00e9gration aux SIRH et calendriers Outlook \/ Google Calendar<\/li>\n        <li>Tableau de bord d&#8217;occupation et reporting d&#8217;usage mensuel<\/li>\n        <li>Compatible v\u00e9hicules \u00e9lectriques, deux-roues et places PMR<\/li>\n      <\/ul>\n      <a href=\"https:\/\/parking.collaborativeperks.com\/fr\/index.html\" class=\"btn\" target=\"_blank\" rel=\"noopener\">D\u00e9couvrir Park+ \u2192<\/a>\n      <a href=\"https:\/\/parking.collaborativeperks.com\/fr\/index.html\" class=\"btn btn-demo\" target=\"_blank\" rel=\"noopener\" style=\"margin-top: 8px;\">\ud83d\ude80 Tester la d\u00e9mo en ligne<\/a>\n    <\/div>\n\n    <div class=\"module-visual\">\n      <div class=\"visual-deco vd1\"><\/div>\n      <div class=\"visual-deco vd2\"><\/div>\n      <div class=\"module-section-illu\">\n        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 400 320\" fill=\"none\">\n  <style>\n    @keyframes carDrive {\n      0% { transform: translateX(-180px); opacity: 0; }\n      15% { opacity: 1; }\n      35% { transform: translateX(0); opacity: 1; }\n      85% { transform: translateX(0); opacity: 1; }\n      100% { transform: translateX(-180px); opacity: 0; }\n    }\n    @keyframes pulseRing {\n      0%, 100% { opacity: 0.3; transform: scale(1); }\n      50% { opacity: 0.6; transform: scale(1.05); }\n    }\n    @keyframes blink {\n      0%, 50%, 100% { opacity: 1; }\n      25%, 75% { opacity: 0.3; }\n    }\n    @keyframes fadeIn {\n      0% { opacity: 0; }\n      100% { opacity: 1; }\n    }\n    @keyframes spotFill {\n      0%, 25% { fill-opacity: 0.2; }\n      50%, 100% { fill-opacity: 1; }\n    }\n    @keyframes phoneScan {\n      0% { transform: translateY(-2px); }\n      50% { transform: translateY(2px); }\n      100% { transform: translateY(-2px); }\n    }\n    @keyframes checkPop {\n      0%, 50% { transform: scale(0); opacity: 0; }\n      65% { transform: scale(1.2); opacity: 1; }\n      75%, 90% { transform: scale(1); opacity: 1; }\n      100% { transform: scale(0); opacity: 0; }\n    }\n    @keyframes labelSlide {\n      0%, 35% { transform: translateY(-8px); opacity: 0; }\n      50%, 90% { transform: translateY(0); opacity: 1; }\n      100% { transform: translateY(-8px); opacity: 0; }\n    }\n\n    .park-car {\n      animation: carDrive 6s ease-in-out infinite;\n      transform-origin: center;\n    }\n    .park-spot-pulse {\n      animation: pulseRing 2.5s ease-in-out infinite;\n      transform-origin: 190px 169px;\n    }\n    .park-mobile-screen {\n      animation: phoneScan 2s ease-in-out infinite;\n      transform-origin: 39px 70px;\n    }\n    .park-mobile-led {\n      animation: blink 1.4s ease-in-out infinite;\n    }\n    .park-confirm-check {\n      animation: checkPop 6s ease-in-out infinite;\n      transform-origin: 140px 50px;\n    }\n    .park-spot-fill {\n      animation: spotFill 6s ease-in-out infinite;\n    }\n    .park-reserved-label {\n      animation: labelSlide 6s ease-in-out infinite;\n      transform-origin: 190px 116px;\n    }\n  \n\n  \/* ====== REAL LOGO STYLING ====== *\/\n  .logo {\n    \/* override gap\/font when logo-img present *\/\n    padding: 4px 0;\n  }\n  .logo-img {\n    height: 44px;\n    width: auto;\n    display: block;\n  }\n  .footer-logo-img {\n    height: 56px;\n    width: auto;\n    display: block;\n    margin-bottom: 16px;\n  }\n\n\n  \/* Vehicle type badges on parking spots *\/\n  .park-spot { position: relative; }\n  .vehicle-badge {\n    position: absolute;\n    top: 4px; right: 4px;\n    width: 14px; height: 14px;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 2;\n    box-shadow: 0 1px 3px rgba(0,0,0,0.15);\n  }\n  .vehicle-badge svg {\n    width: 9px; height: 9px;\n    display: block;\n  }\n  .vehicle-badge.electric { background: #2bb88a; }\n  .vehicle-badge.electric svg { color: #ffffff; }\n  .vehicle-badge.moto { background: #86d3ff; }\n  .vehicle-badge.moto svg { color: #0a1254; }\n  .vehicle-badge.pmr { background: #0a1254; }\n  .vehicle-badge.pmr svg { color: #ffffff; }\n  .vehicle-badge.bike { background: #ffce86; }\n  .vehicle-badge.bike svg { color: #0a1254; }\n\n  \/* Extended legend with vehicle types *\/\n  .park-legend.with-vehicles {\n    flex-wrap: wrap;\n    row-gap: 8px;\n  }\n  .park-legend.with-vehicles .vehicle-legend {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n  }\n  .park-legend.with-vehicles .vehicle-mark {\n    width: 14px; height: 14px;\n    border-radius: 50%;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n  }\n  .park-legend.with-vehicles .vehicle-mark svg {\n    width: 9px; height: 9px;\n  }\n\n<\/style>\n\n  <!-- Background blob -->\n  <ellipse cx=\"200\" cy=\"280\" rx=\"160\" ry=\"14\" fill=\"#0a1254\" opacity=\"0.06\"\/>\n\n  <!-- Parking lot floor -->\n  <rect x=\"40\" y=\"80\" width=\"320\" height=\"180\" rx=\"12\" fill=\"#f4f8ff\"\/>\n  <rect x=\"40\" y=\"80\" width=\"320\" height=\"180\" rx=\"12\" stroke=\"#e5e7eb\" stroke-width=\"1.5\"\/>\n\n  <!-- Parking lines -->\n  <line x1=\"100\" y1=\"100\" x2=\"100\" y2=\"240\" stroke=\"#cdd6e0\" stroke-width=\"2\" stroke-dasharray=\"4 4\"\/>\n  <line x1=\"160\" y1=\"100\" x2=\"160\" y2=\"240\" stroke=\"#cdd6e0\" stroke-width=\"2\" stroke-dasharray=\"4 4\"\/>\n  <line x1=\"220\" y1=\"100\" x2=\"220\" y2=\"240\" stroke=\"#cdd6e0\" stroke-width=\"2\" stroke-dasharray=\"4 4\"\/>\n  <line x1=\"280\" y1=\"100\" x2=\"280\" y2=\"240\" stroke=\"#cdd6e0\" stroke-width=\"2\" stroke-dasharray=\"4 4\"\/>\n\n  <!-- Reserved spot with pulse -->\n  <g class=\"park-spot-pulse\">\n    <rect x=\"162\" y=\"100\" width=\"56\" height=\"138\" rx=\"6\" fill=\"#36d1a2\" fill-opacity=\"0.18\"\/>\n    <rect x=\"162\" y=\"100\" width=\"56\" height=\"138\" rx=\"6\" stroke=\"#36d1a2\" stroke-width=\"2.5\"\/>\n  <\/g>\n\n  <!-- Reserved label (slides down) -->\n  <g class=\"park-reserved-label\">\n    <rect x=\"170\" y=\"108\" width=\"40\" height=\"16\" rx=\"8\" fill=\"#36d1a2\"\/>\n    <text x=\"190\" y=\"119\" font-family=\"DM Sans, sans-serif\" font-size=\"9\" font-weight=\"700\" fill=\"#0a1254\" text-anchor=\"middle\">R\u00c9SERV\u00c9<\/text>\n  <\/g>\n  <!-- EV charging indicator on reserved spot -->\n  <g transform=\"translate(168, 222)\">\n    <rect x=\"0\" y=\"0\" width=\"44\" height=\"11\" rx=\"5.5\" fill=\"#2bb88a\"\/>\n    <circle cx=\"6\" cy=\"5.5\" r=\"2.5\" fill=\"#ffffff\"\/>\n    <path d=\"M 6 4 L 4.5 6 L 6.5 6 L 5 8\" stroke=\"#2bb88a\" stroke-width=\"0.8\" stroke-linecap=\"round\" fill=\"none\"\/>\n    <text x=\"11\" y=\"8\" font-family=\"DM Sans, sans-serif\" font-size=\"6\" font-weight=\"700\" fill=\"#ffffff\">BORNE EV<\/text>\n  <\/g>\n\n  <!-- Car (animated drive in) -->\n  <g class=\"park-car\">\n    <rect x=\"166\" y=\"135\" width=\"48\" height=\"84\" rx=\"10\" fill=\"#0a1254\"\/>\n    <rect x=\"171\" y=\"142\" width=\"38\" height=\"22\" rx=\"4\" fill=\"#86d3ff\" opacity=\"0.7\"\/>\n    <rect x=\"171\" y=\"190\" width=\"38\" height=\"20\" rx=\"4\" fill=\"#86d3ff\" opacity=\"0.5\"\/>\n    <rect x=\"160\" y=\"150\" width=\"6\" height=\"14\" rx=\"2\" fill=\"#131415\"\/>\n    <rect x=\"214\" y=\"150\" width=\"6\" height=\"14\" rx=\"2\" fill=\"#131415\"\/>\n    <rect x=\"160\" y=\"195\" width=\"6\" height=\"14\" rx=\"2\" fill=\"#131415\"\/>\n    <rect x=\"214\" y=\"195\" width=\"6\" height=\"14\" rx=\"2\" fill=\"#131415\"\/>\n    <circle cx=\"190\" cy=\"175\" r=\"2\" fill=\"#ffce86\"\/>\n  <\/g>\n\n  <!-- Empty spots -->\n  <text x=\"130\" y=\"170\" font-family=\"DM Sans, sans-serif\" font-size=\"11\" font-weight=\"600\" fill=\"#9ca3af\" text-anchor=\"middle\">Libre<\/text>\n  <text x=\"250\" y=\"170\" font-family=\"DM Sans, sans-serif\" font-size=\"11\" font-weight=\"600\" fill=\"#9ca3af\" text-anchor=\"middle\">Libre<\/text>\n\n  <!-- Occupied spot -->\n  <rect x=\"288\" y=\"135\" width=\"40\" height=\"84\" rx=\"8\" fill=\"#cdd6e0\" opacity=\"0.5\"\/>\n  <text x=\"308\" y=\"180\" font-family=\"DM Sans, sans-serif\" font-size=\"11\" font-weight=\"600\" fill=\"#6c7c8c\" text-anchor=\"middle\">Occup\u00e9e<\/text>\n\n  <!-- Mobile phone -->\n  <g transform=\"translate(40, 110)\">\n    <rect x=\"2\" y=\"4\" width=\"78\" height=\"140\" rx=\"14\" fill=\"#0a1254\" opacity=\"0.15\"\/>\n    <rect x=\"0\" y=\"0\" width=\"78\" height=\"140\" rx=\"14\" fill=\"#ffffff\" stroke=\"#0a1254\" stroke-width=\"2\"\/>\n    <rect x=\"6\" y=\"14\" width=\"66\" height=\"112\" rx=\"6\" fill=\"#f4f8ff\"\/>\n    <rect x=\"32\" y=\"4\" width=\"14\" height=\"4\" rx=\"2\" fill=\"#0a1254\"\/>\n\n    <!-- App header -->\n    <rect x=\"10\" y=\"20\" width=\"58\" height=\"14\" rx=\"3\" fill=\"#0a1254\"\/>\n    <text x=\"39\" y=\"30\" font-family=\"DM Sans, sans-serif\" font-size=\"7\" font-weight=\"700\" fill=\"#ffffff\" text-anchor=\"middle\">Park+<\/text>\n\n    <!-- Date -->\n    <rect x=\"10\" y=\"40\" width=\"58\" height=\"14\" rx=\"3\" fill=\"#36d1a2\"\/>\n    <text x=\"39\" y=\"50\" font-family=\"DM Sans, sans-serif\" font-size=\"6\" font-weight=\"700\" fill=\"#0a1254\" text-anchor=\"middle\">MARDI 12 MAI<\/text>\n\n    <!-- Mini parking grid (animated fill) -->\n    <g transform=\"translate(12, 60)\">\n      <rect x=\"0\" y=\"0\" width=\"11\" height=\"14\" rx=\"1.5\" fill=\"#cdd6e0\"\/>\n      <rect x=\"13\" y=\"0\" width=\"11\" height=\"14\" rx=\"1.5\" fill=\"#36d1a2\" class=\"park-spot-fill\" style=\"animation-delay: 0s\"\/>\n      <rect x=\"26\" y=\"0\" width=\"11\" height=\"14\" rx=\"1.5\" fill=\"#cdd6e0\"\/>\n      <rect x=\"39\" y=\"0\" width=\"11\" height=\"14\" rx=\"1.5\" fill=\"#cdd6e0\"\/>\n      <rect x=\"52\" y=\"0\" width=\"11\" height=\"14\" rx=\"1.5\" fill=\"#36d1a2\" class=\"park-spot-fill\" style=\"animation-delay: 0.3s\"\/>\n\n      <rect x=\"0\" y=\"16\" width=\"11\" height=\"14\" rx=\"1.5\" fill=\"#cdd6e0\"\/>\n      <rect x=\"13\" y=\"16\" width=\"11\" height=\"14\" rx=\"1.5\" fill=\"#ffce86\" stroke=\"#0a1254\" stroke-width=\"1\"\/>\n      <rect x=\"26\" y=\"16\" width=\"11\" height=\"14\" rx=\"1.5\" fill=\"#cdd6e0\"\/>\n      <rect x=\"39\" y=\"16\" width=\"11\" height=\"14\" rx=\"1.5\" fill=\"#36d1a2\" class=\"park-spot-fill\" style=\"animation-delay: 0.6s\"\/>\n      <rect x=\"52\" y=\"16\" width=\"11\" height=\"14\" rx=\"1.5\" fill=\"#cdd6e0\"\/>\n\n      <rect x=\"0\" y=\"32\" width=\"11\" height=\"14\" rx=\"1.5\" fill=\"#36d1a2\" class=\"park-spot-fill\" style=\"animation-delay: 0.9s\"\/>\n      <rect x=\"13\" y=\"32\" width=\"11\" height=\"14\" rx=\"1.5\" fill=\"#cdd6e0\"\/>\n      <rect x=\"26\" y=\"32\" width=\"11\" height=\"14\" rx=\"1.5\" fill=\"#cdd6e0\"\/>\n      <rect x=\"39\" y=\"32\" width=\"11\" height=\"14\" rx=\"1.5\" fill=\"#cdd6e0\"\/>\n      <rect x=\"52\" y=\"32\" width=\"11\" height=\"14\" rx=\"1.5\" fill=\"#36d1a2\" class=\"park-spot-fill\" style=\"animation-delay: 1.2s\"\/>\n      <!-- Vehicle type markers on mini parking grid -->\n      <rect x=\"21\" y=\"1\" width=\"3\" height=\"3\" rx=\"0.5\" fill=\"#2bb88a\" stroke=\"#ffffff\" stroke-width=\"0.4\"\/>\n      <rect x=\"60\" y=\"1\" width=\"3\" height=\"3\" rx=\"0.5\" fill=\"#86d3ff\" stroke=\"#ffffff\" stroke-width=\"0.4\"\/>\n      <rect x=\"47\" y=\"17\" width=\"3\" height=\"3\" rx=\"0.5\" fill=\"#ffce86\" stroke=\"#ffffff\" stroke-width=\"0.4\"\/>\n      <rect x=\"8\" y=\"33\" width=\"3\" height=\"3\" rx=\"0.5\" fill=\"#0a1254\" stroke=\"#ffffff\" stroke-width=\"0.4\"\/>\n    <\/g>\n\n    <!-- Confirm button with LED dot -->\n    <rect x=\"10\" y=\"112\" width=\"58\" height=\"10\" rx=\"5\" fill=\"#0a1254\"\/>\n    <text x=\"39\" y=\"119\" font-family=\"DM Sans, sans-serif\" font-size=\"6\" font-weight=\"700\" fill=\"#ffffff\" text-anchor=\"middle\">R\u00c9SERVER B2<\/text>\n    <circle cx=\"14\" cy=\"117\" r=\"1.2\" fill=\"#36d1a2\" class=\"park-mobile-led\"\/>\n  <\/g>\n\n  <!-- Decorative dots -->\n  <circle cx=\"370\" cy=\"60\" r=\"4\" fill=\"#ffce86\"\/>\n  <circle cx=\"350\" cy=\"50\" r=\"2\" fill=\"#36d1a2\"\/>\n  <circle cx=\"60\" cy=\"70\" r=\"3\" fill=\"#36d1a2\" opacity=\"0.5\"\/>\n\n  <!-- Check mark badge (pop in) -->\n  <g class=\"park-confirm-check\" transform=\"translate(140, 50)\">\n    <circle cx=\"0\" cy=\"0\" r=\"18\" fill=\"#36d1a2\"\/>\n    <path d=\"M -7 0 L -2 5 L 7 -5\" stroke=\"#0a1254\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" fill=\"none\"\/>\n  <\/g>\n<\/svg>\n\n      <\/div>\n      <div class=\"visual-mock\">\n        <div class=\"visual-header\">\n          <div>\n            <div class=\"vh-title\">Niveau -1 \u00b7 Aile Est<\/div>\n            <div class=\"vh-sub\">Mardi 12 mai \u00b7 09:00 \u2014 18:00<\/div>\n          <\/div>\n          <div class=\"vh-status\">14 libres<\/div>\n        <\/div>\n        <div class=\"park-grid\">\n          <div class=\"park-spot\">A1<\/div><div class=\"park-spot free\"><span class=\"vehicle-badge electric\" title=\"Borne de recharge \u00e9lectrique\"><svg viewBox=\"0 0 24 24\" fill=\"currentColor\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M13 2L4 14h7l-2 8 9-12h-7l2-8z\"\/><\/svg><\/span>A2<\/div><div class=\"park-spot\">A3<\/div><div class=\"park-spot\">A4<\/div>\n          <div class=\"park-spot free\"><span class=\"vehicle-badge electric\" title=\"Borne de recharge \u00e9lectrique\"><svg viewBox=\"0 0 24 24\" fill=\"currentColor\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M13 2L4 14h7l-2 8 9-12h-7l2-8z\"\/><\/svg><\/span>A5<\/div><div class=\"park-spot\">A6<\/div><div class=\"park-spot\">A7<\/div><div class=\"park-spot free\"><span class=\"vehicle-badge moto\" title=\"Place moto \/ 2 roues\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><circle cx=\"6\" cy=\"17\" r=\"3\"\/><circle cx=\"18\" cy=\"17\" r=\"3\"\/><path d=\"M6 17h8l4-7h3\"\/><path d=\"M9 10h5\"\/><\/svg><\/span>A8<\/div>\n          <div class=\"park-spot\">B1<\/div><div class=\"park-spot your\">B2<\/div><div class=\"park-spot\">B3<\/div><div class=\"park-spot free\"><span class=\"vehicle-badge pmr\" title=\"Place PMR\"><svg viewBox=\"0 0 24 24\" fill=\"currentColor\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><circle cx=\"12\" cy=\"4\" r=\"2\"\/><path d=\"M10 7v6h4l3 7h2l-3.5-8H12V7h-2z\"\/><circle cx=\"11\" cy=\"17\" r=\"4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\/><\/svg><\/span>B4<\/div>\n          <div class=\"park-spot\">B5<\/div><div class=\"park-spot\">B6<\/div><div class=\"park-spot free\"><span class=\"vehicle-badge bike\" title=\"Place v\u00e9lo\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><circle cx=\"6\" cy=\"17\" r=\"4\"\/><circle cx=\"18\" cy=\"17\" r=\"4\"\/><path d=\"M6 17l4-9h4l4 9\"\/><path d=\"M10 8l-2-3h-2\"\/><\/svg><\/span>B7<\/div><div class=\"park-spot\">B8<\/div>\n          <div class=\"park-spot free\">C1<\/div><div class=\"park-spot\">C2<\/div><div class=\"park-spot\">C3<\/div><div class=\"park-spot free\">C4<\/div>\n          <div class=\"park-spot\">C5<\/div><div class=\"park-spot free\">C6<\/div><div class=\"park-spot\">C7<\/div><div class=\"park-spot\">C8<\/div>\n        <\/div>\n        <div class=\"park-legend with-vehicles\">\n          <span><span class=\"sw taken\"><\/span>Occup\u00e9e<\/span>\n          <span><span class=\"sw free-sw\"><\/span>Disponible<\/span>\n          <span><span class=\"sw your-sw\"><\/span>Votre place<\/span>\n          <span class=\"vehicle-legend\"><span class=\"vehicle-mark electric\" style=\"background: #2bb88a; color: #fff;\"><svg viewBox=\"0 0 24 24\" fill=\"currentColor\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M13 2L4 14h7l-2 8 9-12h-7l2-8z\"\/><\/svg><\/span>\u00c9lectrique<\/span>\n          <span class=\"vehicle-legend\"><span class=\"vehicle-mark moto\" style=\"background: #86d3ff; color: #0a1254;\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><circle cx=\"6\" cy=\"17\" r=\"3\"\/><circle cx=\"18\" cy=\"17\" r=\"3\"\/><path d=\"M6 17h8l4-7h3\"\/><path d=\"M9 10h5\"\/><\/svg><\/span>Moto<\/span>\n          <span class=\"vehicle-legend\"><span class=\"vehicle-mark pmr\" style=\"background: #0a1254; color: #fff;\"><svg viewBox=\"0 0 24 24\" fill=\"currentColor\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><circle cx=\"12\" cy=\"4\" r=\"2\"\/><path d=\"M10 7v6h4l3 7h2l-3.5-8H12V7h-2z\"\/><circle cx=\"11\" cy=\"17\" r=\"4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\/><\/svg><\/span>PMR<\/span>\n          <span class=\"vehicle-legend\"><span class=\"vehicle-mark bike\" style=\"background: #ffce86; color: #0a1254;\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><circle cx=\"6\" cy=\"17\" r=\"4\"\/><circle cx=\"18\" cy=\"17\" r=\"4\"\/><path d=\"M6 17l4-9h4l4 9\"\/><path d=\"M10 8l-2-3h-2\"\/><\/svg><\/span>V\u00e9lo<\/span>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n\n\n<section class=\"module module-2\">\n  <div class=\"module-inner\">\n    <div class=\"module-content\">\n      <div class=\"module-eyebrow\">\n        <span class=\"num\">2<\/span>\n        <span class=\"cat\">Module Engagement<\/span>\n      <\/div>\n      <h3>Inclusive<span class=\"plus\">+<\/span><\/h3>\n      <p class=\"module-tagline\">Pilotez votre strat\u00e9gie D&amp;I \u00e0 l&#8217;\u00e9chelle.<\/p>\n      <p class=\"module-desc\">\n        Inclusive+ donne aux \u00e9quipes Diversit\u00e9 &amp; Inclusion un espace d\u00e9di\u00e9 pour f\u00e9d\u00e9rer leurs communaut\u00e9s, organiser des \u00e9v\u00e9nements, partager des contenus p\u00e9dagogiques et mesurer l&#8217;engagement r\u00e9el des collaborateurs autour de leurs initiatives.\n      <\/p>\n      <ul class=\"module-features\">\n        <li>Cr\u00e9ation et gestion d&#8217;\u00e9v\u00e9nements D&amp;I avec inscriptions et reporting<\/li>\n        <li>Biblioth\u00e8que documentaire centralis\u00e9e \u2014 articles, vid\u00e9os, podcasts, formations<\/li>\n        <li>Communaut\u00e9s th\u00e9matiques : femmes, LGBTQ+, parentalit\u00e9, neurodiversit\u00e9\u2026<\/li>\n        <li>Sondages anonymes et barom\u00e8tres d&#8217;inclusion<\/li>\n        <li>Indicateurs ESG exportables pour vos rapports CSRD<\/li>\n      <\/ul>\n      <a href=\"https:\/\/dei.collaborativeperks.com\/fr\/index.html\" class=\"btn\">D\u00e9couvrir Inclusive+ \u2192<\/a>\n    <\/div>\n\n    <div class=\"module-visual\">\n      <div class=\"visual-deco vd1\"><\/div>\n      <div class=\"visual-deco vd2\"><\/div>\n      <div class=\"module-section-illu\">\n        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 400 320\" fill=\"none\">\n  <style>\n    @keyframes popIn {\n      0%, 5% { transform: scale(0); opacity: 0; }\n      15% { transform: scale(1.1); opacity: 1; }\n      20% { transform: scale(0.95); }\n      25%, 90% { transform: scale(1); opacity: 1; }\n      100% { transform: scale(0); opacity: 0; }\n    }\n    @keyframes slideInRight {\n      0%, 30% { transform: translateX(-30px); opacity: 0; }\n      40%, 90% { transform: translateX(0); opacity: 1; }\n      100% { transform: translateX(-30px); opacity: 0; }\n    }\n    @keyframes heartBeat {\n      0%, 100% { transform: scale(1); }\n      15% { transform: scale(1.2); }\n      30% { transform: scale(1); }\n      45% { transform: scale(1.15); }\n      60% { transform: scale(1); }\n    }\n    @keyframes connectPulse {\n      0%, 100% { opacity: 0.2; }\n      50% { opacity: 0.7; }\n    }\n    @keyframes drawLoop {\n      0%, 100% { opacity: 0; }\n      30%, 70% { opacity: 1; }\n    }\n\n    .person-1 { animation: popIn 6s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }\n    .person-2 { animation: popIn 6s ease-in-out infinite 0.2s; transform-origin: center; transform-box: fill-box; }\n    .person-3 { animation: popIn 6s ease-in-out infinite 0.4s; transform-origin: center; transform-box: fill-box; }\n    .person-4 { animation: popIn 6s ease-in-out infinite 0.6s; transform-origin: center; transform-box: fill-box; }\n    .person-5 { animation: popIn 6s ease-in-out infinite 0.8s; transform-origin: center; transform-box: fill-box; }\n\n    .event-1 { animation: slideInRight 6s ease-in-out infinite 0.4s; }\n    .event-2 { animation: slideInRight 6s ease-in-out infinite 0.7s; }\n    .event-3 { animation: slideInRight 6s ease-in-out infinite 1.0s; }\n\n    .heart-badge { animation: heartBeat 2.5s ease-in-out infinite; transform-origin: 285px 70px; }\n\n    .connect-dot-1 { animation: connectPulse 2s ease-in-out infinite 1.0s; }\n    .connect-dot-2 { animation: connectPulse 2s ease-in-out infinite 1.3s; }\n    .connect-dot-3 { animation: connectPulse 2s ease-in-out infinite 1.6s; }\n\n    .deco-1 { animation: drawLoop 3s ease-in-out infinite; }\n    .deco-2 { animation: drawLoop 3s ease-in-out infinite 0.8s; }\n    .deco-3 { animation: drawLoop 3s ease-in-out infinite 1.6s; }\n  \n\n  \/* ====== REAL LOGO STYLING ====== *\/\n  .logo {\n    \/* override gap\/font when logo-img present *\/\n    padding: 4px 0;\n  }\n  .logo-img {\n    height: 44px;\n    width: auto;\n    display: block;\n  }\n  .footer-logo-img {\n    height: 56px;\n    width: auto;\n    display: block;\n    margin-bottom: 16px;\n  }\n\n\n  \/* Vehicle type badges on parking spots *\/\n  .park-spot { position: relative; }\n  .vehicle-badge {\n    position: absolute;\n    top: 4px; right: 4px;\n    width: 14px; height: 14px;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 2;\n    box-shadow: 0 1px 3px rgba(0,0,0,0.15);\n  }\n  .vehicle-badge svg {\n    width: 9px; height: 9px;\n    display: block;\n  }\n  .vehicle-badge.electric { background: #2bb88a; }\n  .vehicle-badge.electric svg { color: #ffffff; }\n  .vehicle-badge.moto { background: #86d3ff; }\n  .vehicle-badge.moto svg { color: #0a1254; }\n  .vehicle-badge.pmr { background: #0a1254; }\n  .vehicle-badge.pmr svg { color: #ffffff; }\n  .vehicle-badge.bike { background: #ffce86; }\n  .vehicle-badge.bike svg { color: #0a1254; }\n\n  \/* Extended legend with vehicle types *\/\n  .park-legend.with-vehicles {\n    flex-wrap: wrap;\n    row-gap: 8px;\n  }\n  .park-legend.with-vehicles .vehicle-legend {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n  }\n  .park-legend.with-vehicles .vehicle-mark {\n    width: 14px; height: 14px;\n    border-radius: 50%;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n  }\n  .park-legend.with-vehicles .vehicle-mark svg {\n    width: 9px; height: 9px;\n  }\n\n<\/style>\n\n  <!-- Background blob -->\n  <ellipse cx=\"200\" cy=\"280\" rx=\"160\" ry=\"14\" fill=\"#0a1254\" opacity=\"0.06\"\/>\n\n  <!-- Background circle -->\n  <circle cx=\"200\" cy=\"160\" r=\"120\" fill=\"#fff8ed\" opacity=\"0.6\"\/>\n\n  <!-- Calendar\/event card (left) -->\n  <g transform=\"translate(40, 80)\">\n    <rect x=\"3\" y=\"5\" width=\"140\" height=\"160\" rx=\"12\" fill=\"#0a1254\" opacity=\"0.12\"\/>\n    <rect x=\"0\" y=\"0\" width=\"140\" height=\"160\" rx=\"12\" fill=\"#ffffff\" stroke=\"#e5e7eb\" stroke-width=\"1.5\"\/>\n\n    <!-- Card header -->\n    <rect x=\"0\" y=\"0\" width=\"140\" height=\"32\" rx=\"12\" fill=\"#0a1254\"\/>\n    <rect x=\"0\" y=\"20\" width=\"140\" height=\"12\" fill=\"#0a1254\"\/>\n    <text x=\"70\" y=\"20\" font-family=\"DM Sans, sans-serif\" font-size=\"11\" font-weight=\"700\" fill=\"#ffffff\" text-anchor=\"middle\">\u00c9v\u00e9nements D&amp;I<\/text>\n\n    <!-- Event 1 -->\n    <g class=\"event-1\" transform=\"translate(8, 42)\">\n      <rect x=\"0\" y=\"0\" width=\"124\" height=\"32\" rx=\"6\" fill=\"#fff8ed\"\/>\n      <rect x=\"6\" y=\"6\" width=\"22\" height=\"22\" rx=\"4\" fill=\"#ffce86\"\/>\n      <text x=\"17\" y=\"16\" font-family=\"DM Sans, sans-serif\" font-size=\"9\" font-weight=\"800\" fill=\"#0a1254\" text-anchor=\"middle\">14<\/text>\n      <text x=\"17\" y=\"24\" font-family=\"DM Sans, sans-serif\" font-size=\"6\" font-weight=\"700\" fill=\"#0a1254\" text-anchor=\"middle\">MAI<\/text>\n      <text x=\"34\" y=\"14\" font-family=\"DM Sans, sans-serif\" font-size=\"8\" font-weight=\"700\" fill=\"#0a1254\">Femmes &amp; leadership<\/text>\n      <text x=\"34\" y=\"24\" font-family=\"Inter, sans-serif\" font-size=\"7\" fill=\"#6c7c8c\">12h30 \u00b7 142 inscrits<\/text>\n    <\/g>\n\n    <!-- Event 2 -->\n    <g class=\"event-2\" transform=\"translate(8, 80)\">\n      <rect x=\"0\" y=\"0\" width=\"124\" height=\"32\" rx=\"6\" fill=\"#e8faf3\"\/>\n      <rect x=\"6\" y=\"6\" width=\"22\" height=\"22\" rx=\"4\" fill=\"#36d1a2\"\/>\n      <text x=\"17\" y=\"16\" font-family=\"DM Sans, sans-serif\" font-size=\"9\" font-weight=\"800\" fill=\"#0a1254\" text-anchor=\"middle\">22<\/text>\n      <text x=\"17\" y=\"24\" font-family=\"DM Sans, sans-serif\" font-size=\"6\" font-weight=\"700\" fill=\"#0a1254\" text-anchor=\"middle\">MAI<\/text>\n      <text x=\"34\" y=\"14\" font-family=\"DM Sans, sans-serif\" font-size=\"8\" font-weight=\"700\" fill=\"#0a1254\">Diversit\u00e9 culturelle<\/text>\n      <text x=\"34\" y=\"24\" font-family=\"Inter, sans-serif\" font-size=\"7\" fill=\"#6c7c8c\">8 ateliers \u00b7 Tous bureaux<\/text>\n    <\/g>\n\n    <!-- Event 3 -->\n    <g class=\"event-3\" transform=\"translate(8, 118)\">\n      <rect x=\"0\" y=\"0\" width=\"124\" height=\"32\" rx=\"6\" fill=\"#f0eeff\"\/>\n      <rect x=\"6\" y=\"6\" width=\"22\" height=\"22\" rx=\"4\" fill=\"#655cfe\"\/>\n      <text x=\"17\" y=\"16\" font-family=\"DM Sans, sans-serif\" font-size=\"9\" font-weight=\"800\" fill=\"#ffffff\" text-anchor=\"middle\">03<\/text>\n      <text x=\"17\" y=\"24\" font-family=\"DM Sans, sans-serif\" font-size=\"6\" font-weight=\"700\" fill=\"#ffffff\" text-anchor=\"middle\">JUIN<\/text>\n      <text x=\"34\" y=\"14\" font-family=\"DM Sans, sans-serif\" font-size=\"8\" font-weight=\"700\" fill=\"#0a1254\">Neurodiversit\u00e9<\/text>\n      <text x=\"34\" y=\"24\" font-family=\"Inter, sans-serif\" font-size=\"7\" fill=\"#6c7c8c\">Table ronde \u00b7 89 inscrits<\/text>\n    <\/g>\n  <\/g>\n\n  <!-- Group of people -->\n  <g transform=\"translate(220, 100)\">\n    <!-- Person 1 -->\n    <g class=\"person-1\" transform=\"translate(0, 30)\">\n      <circle cx=\"20\" cy=\"20\" r=\"20\" fill=\"#36d1a2\"\/>\n      <circle cx=\"20\" cy=\"14\" r=\"7\" fill=\"#fff8ed\"\/>\n      <path d=\"M 7 28 Q 7 20 20 20 Q 33 20 33 28 L 33 40 L 7 40 Z\" fill=\"#fff8ed\"\/>\n      <rect x=\"0\" y=\"40\" width=\"40\" height=\"20\" rx=\"4\" fill=\"#0a1254\"\/>\n    <\/g>\n\n    <!-- Person 2 -->\n    <g class=\"person-2\" transform=\"translate(46, 0)\">\n      <circle cx=\"20\" cy=\"20\" r=\"20\" fill=\"#ffce86\"\/>\n      <circle cx=\"20\" cy=\"14\" r=\"7\" fill=\"#5d4037\"\/>\n      <path d=\"M 7 28 Q 7 20 20 20 Q 33 20 33 28 L 33 40 L 7 40 Z\" fill=\"#5d4037\"\/>\n      <rect x=\"0\" y=\"40\" width=\"40\" height=\"20\" rx=\"4\" fill=\"#0a1254\"\/>\n    <\/g>\n\n    <!-- Person 3 -->\n    <g class=\"person-3\" transform=\"translate(92, 30)\">\n      <circle cx=\"20\" cy=\"20\" r=\"20\" fill=\"#655cfe\"\/>\n      <circle cx=\"20\" cy=\"14\" r=\"7\" fill=\"#ffe4c4\"\/>\n      <path d=\"M 7 28 Q 7 20 20 20 Q 33 20 33 28 L 33 40 L 7 40 Z\" fill=\"#ffe4c4\"\/>\n      <rect x=\"0\" y=\"40\" width=\"40\" height=\"20\" rx=\"4\" fill=\"#0a1254\"\/>\n      <path d=\"M 8 12 Q 8 4 20 4 Q 32 4 32 12 Q 32 18 20 18 Q 8 18 8 12 Z\" fill=\"#655cfe\" opacity=\"0.85\"\/>\n    <\/g>\n\n    <!-- Person 4 -->\n    <g class=\"person-4\" transform=\"translate(23, 70)\">\n      <circle cx=\"20\" cy=\"20\" r=\"20\" fill=\"#ff6b6b\"\/>\n      <circle cx=\"20\" cy=\"14\" r=\"7\" fill=\"#ffe4c4\"\/>\n      <path d=\"M 7 28 Q 7 20 20 20 Q 33 20 33 28 L 33 40 L 7 40 Z\" fill=\"#ffe4c4\"\/>\n      <rect x=\"0\" y=\"40\" width=\"40\" height=\"20\" rx=\"4\" fill=\"#0a1254\"\/>\n    <\/g>\n\n    <!-- Person 5 -->\n    <g class=\"person-5\" transform=\"translate(69, 70)\">\n      <circle cx=\"20\" cy=\"20\" r=\"20\" fill=\"#86d3ff\"\/>\n      <circle cx=\"20\" cy=\"14\" r=\"7\" fill=\"#8d6e63\"\/>\n      <path d=\"M 7 28 Q 7 20 20 20 Q 33 20 33 28 L 33 40 L 7 40 Z\" fill=\"#8d6e63\"\/>\n      <rect x=\"0\" y=\"40\" width=\"40\" height=\"20\" rx=\"4\" fill=\"#0a1254\"\/>\n    <\/g>\n  <\/g>\n\n  <!-- Connection dots -->\n  <circle class=\"connect-dot-1\" cx=\"190\" cy=\"120\" r=\"2\" fill=\"#36d1a2\"\/>\n  <circle class=\"connect-dot-2\" cx=\"200\" cy=\"135\" r=\"2\" fill=\"#36d1a2\"\/>\n  <circle class=\"connect-dot-3\" cx=\"210\" cy=\"145\" r=\"2\" fill=\"#36d1a2\"\/>\n\n  <!-- Heart badge (pulsing) -->\n  <g class=\"heart-badge\" transform=\"translate(285, 70)\">\n    <circle cx=\"0\" cy=\"0\" r=\"18\" fill=\"#ff6b6b\"\/>\n    <path d=\"M 0 5 C -8 -2, -8 -8, -3 -8 C -1 -8, 0 -6, 0 -5 C 0 -6, 1 -8, 3 -8 C 8 -8, 8 -2, 0 5 Z\" fill=\"#ffffff\"\/>\n  <\/g>\n\n  <!-- Decorative dots -->\n  <circle class=\"deco-1\" cx=\"370\" cy=\"60\" r=\"4\" fill=\"#36d1a2\"\/>\n  <circle class=\"deco-2\" cx=\"350\" cy=\"200\" r=\"3\" fill=\"#ffce86\"\/>\n  <circle class=\"deco-3\" cx=\"190\" cy=\"80\" r=\"2\" fill=\"#655cfe\"\/>\n<\/svg>\n\n      <\/div>\n      <div class=\"visual-mock\">\n        <div class=\"visual-header\">\n          <div>\n            <div class=\"vh-title\">Prochains \u00e9v\u00e9nements D&amp;I<\/div>\n            <div class=\"vh-sub\">Mai &amp; Juin 2026<\/div>\n          <\/div>\n          <div class=\"vh-status\">12 ce mois<\/div>\n        <\/div>\n        <div class=\"dei-events\">\n          <div class=\"dei-card\">\n            <div class=\"date-badge\"><span class=\"d\">14<\/span><span class=\"m\">Mai<\/span><\/div>\n            <div class=\"info\">\n              <div class=\"title\">Femmes &amp; leadership \u2014 Conf\u00e9rence<\/div>\n              <div class=\"meta\">12h30 \u00b7 Auditorium \u00b7 142 inscrits<\/div>\n            <\/div>\n            <span class=\"pill\">142<\/span>\n          <\/div>\n          <div class=\"dei-card alt\">\n            <div class=\"date-badge\"><span class=\"d\">22<\/span><span class=\"m\">Mai<\/span><\/div>\n            <div class=\"info\">\n              <div class=\"title\">Mois de la diversit\u00e9 culturelle<\/div>\n              <div class=\"meta\">8 ateliers \u00b7 Tous bureaux<\/div>\n            <\/div>\n            <span class=\"pill\">8<\/span>\n          <\/div>\n          <div class=\"dei-card alt2\">\n            <div class=\"date-badge\"><span class=\"d\">03<\/span><span class=\"m\">Juin<\/span><\/div>\n            <div class=\"info\">\n              <div class=\"title\">Neurodiversit\u00e9 \u2014 Table ronde<\/div>\n              <div class=\"meta\">18h00 \u00b7 En ligne \u00b7 89 inscrits<\/div>\n            <\/div>\n            <span class=\"pill\">89<\/span>\n          <\/div>\n          <div class=\"dei-card alt3\">\n            <div class=\"date-badge\"><span class=\"d\">17<\/span><span class=\"m\">Juin<\/span><\/div>\n            <div class=\"info\">\n              <div class=\"title\">Pride Month \u2014 Allyship<\/div>\n              <div class=\"meta\">17h00 \u00b7 En ligne \u00b7 214 inscrits<\/div>\n            <\/div>\n            <span class=\"pill\">214<\/span>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n\n\n<section class=\"module module-3\">\n  <div class=\"module-inner\">\n    <div class=\"module-content\">\n      <div class=\"module-eyebrow\">\n        <span class=\"num\">3<\/span>\n        <span class=\"cat\">Module \u00c9conomie circulaire<\/span>\n      <\/div>\n      <h3>Reuse<span class=\"plus\">+<\/span><\/h3>\n      <p class=\"module-tagline\">L&#8217;\u00e9conomie circulaire entre filiales d&#8217;un m\u00eame groupe.<\/p>\n      <p class=\"module-desc\">\n        Reuse+ est une place de march\u00e9 interne qui permet aux diff\u00e9rentes entit\u00e9s d&#8217;un m\u00eame groupe de revendre, \u00e9changer ou c\u00e9der leurs \u00e9quipements professionnels inutilis\u00e9s ou sous-exploit\u00e9s. Une approche d&#8217;\u00e9conomie circulaire qui r\u00e9duit les d\u00e9penses et valorise les actifs dormants.\n      <\/p>\n      <ul class=\"module-features\">\n        <li>Listing d&#8217;\u00e9quipements industriels, IT, mobilier, machines, v\u00e9hicules<\/li>\n        <li>Transactions inter-filiales s\u00e9curis\u00e9es avec validation hi\u00e9rarchique<\/li>\n        <li>Estimation automatique de la valeur r\u00e9siduelle<\/li>\n        <li>Reporting des \u00e9conomies r\u00e9alis\u00e9es et impact CO\u2082 \u00e9vit\u00e9<\/li>\n        <li>Audit trail complet pour conformit\u00e9 comptable et fiscale<\/li>\n      <\/ul>\n      <a href=\"https:\/\/market.collaborativeperks.com\/fr\/index.html\" class=\"btn\" target=\"_blank\" rel=\"noopener\">D\u00e9couvrir Reuse+ \u2192<\/a>\n      <a href=\"https:\/\/market.collaborativeperks.com\/fr\/index.html\" class=\"btn btn-demo\" target=\"_blank\" rel=\"noopener\" style=\"margin-top: 8px;\">\ud83d\ude80 Tester la d\u00e9mo en ligne<\/a>\n    <\/div>\n\n    <div class=\"module-visual\">\n      <div class=\"visual-deco vd1\"><\/div>\n      <div class=\"visual-deco vd2\"><\/div>\n      <div class=\"module-section-illu\">\n        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 400 320\" fill=\"none\">\n  <style>\n    @keyframes equipMove {\n      0% { transform: translateX(-100px); opacity: 0; }\n      15% { opacity: 1; transform: translateX(-100px); }\n      40% { transform: translateX(0); }\n      60% { transform: translateX(0); }\n      80% { transform: translateX(110px); opacity: 1; }\n      100% { transform: translateX(110px); opacity: 0; }\n    }\n    @keyframes drawArrow {\n      0% { stroke-dashoffset: 240; }\n      40% { stroke-dashoffset: 0; }\n      80% { stroke-dashoffset: 0; }\n      100% { stroke-dashoffset: 240; }\n    }\n    @keyframes arrowHeadAppear {\n      0%, 35% { opacity: 0; }\n      45%, 75% { opacity: 0.6; }\n      100% { opacity: 0; }\n    }\n    @keyframes priceFlash {\n      0%, 100% { transform: scale(1); }\n      50% { transform: scale(1.1); }\n    }\n    @keyframes savingsTick {\n      0%, 100% { transform: translateY(0); }\n      50% { transform: translateY(-2px); }\n    }\n    @keyframes leafBob {\n      0%, 100% { transform: translateY(0) rotate(0); }\n      50% { transform: translateY(-4px) rotate(-5deg); }\n    }\n    @keyframes blinkLight {\n      0%, 100% { opacity: 0.3; }\n      50% { opacity: 1; }\n    }\n    @keyframes tagBounce {\n      0%, 100% { transform: scale(1) rotate(0); }\n      50% { transform: scale(1.05) rotate(-2deg); }\n    }\n    @keyframes pulseRing2 {\n      0% { r: 14; opacity: 0.6; }\n      100% { r: 28; opacity: 0; }\n    }\n\n    .equipment-moving {\n      animation: equipMove 5s ease-in-out infinite;\n      transform-origin: center;\n    }\n    .arrow-trace {\n      stroke-dasharray: 240;\n      animation: drawArrow 5s ease-in-out infinite;\n    }\n    .arrow-head {\n      animation: arrowHeadAppear 5s ease-in-out infinite;\n    }\n    .savings-bubble {\n      animation: savingsTick 2s ease-in-out infinite;\n      transform-origin: 200px 50px;\n    }\n    .price-tag {\n      animation: priceFlash 2s ease-in-out infinite;\n      transform-origin: 215px 130px;\n    }\n    .leaf-icon {\n      animation: leafBob 3s ease-in-out infinite;\n      transform-origin: 50px 60px;\n    }\n    .building-light-1 { animation: blinkLight 2s ease-in-out infinite 0.3s; }\n    .building-light-2 { animation: blinkLight 2s ease-in-out infinite 0.7s; }\n    .building-light-3 { animation: blinkLight 2s ease-in-out infinite 1.1s; }\n    .building-light-4 { animation: blinkLight 2s ease-in-out infinite 1.5s; }\n    .vend-tag { animation: tagBounce 2.5s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }\n    .achat-tag { animation: tagBounce 2.5s ease-in-out infinite 1.2s; transform-origin: center; transform-box: fill-box; }\n  \n\n  \/* ====== REAL LOGO STYLING ====== *\/\n  .logo {\n    \/* override gap\/font when logo-img present *\/\n    padding: 4px 0;\n  }\n  .logo-img {\n    height: 44px;\n    width: auto;\n    display: block;\n  }\n  .footer-logo-img {\n    height: 56px;\n    width: auto;\n    display: block;\n    margin-bottom: 16px;\n  }\n\n\n  \/* Vehicle type badges on parking spots *\/\n  .park-spot { position: relative; }\n  .vehicle-badge {\n    position: absolute;\n    top: 4px; right: 4px;\n    width: 14px; height: 14px;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 2;\n    box-shadow: 0 1px 3px rgba(0,0,0,0.15);\n  }\n  .vehicle-badge svg {\n    width: 9px; height: 9px;\n    display: block;\n  }\n  .vehicle-badge.electric { background: #2bb88a; }\n  .vehicle-badge.electric svg { color: #ffffff; }\n  .vehicle-badge.moto { background: #86d3ff; }\n  .vehicle-badge.moto svg { color: #0a1254; }\n  .vehicle-badge.pmr { background: #0a1254; }\n  .vehicle-badge.pmr svg { color: #ffffff; }\n  .vehicle-badge.bike { background: #ffce86; }\n  .vehicle-badge.bike svg { color: #0a1254; }\n\n  \/* Extended legend with vehicle types *\/\n  .park-legend.with-vehicles {\n    flex-wrap: wrap;\n    row-gap: 8px;\n  }\n  .park-legend.with-vehicles .vehicle-legend {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n  }\n  .park-legend.with-vehicles .vehicle-mark {\n    width: 14px; height: 14px;\n    border-radius: 50%;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n  }\n  .park-legend.with-vehicles .vehicle-mark svg {\n    width: 9px; height: 9px;\n  }\n\n<\/style>\n\n  <!-- Background blob -->\n  <ellipse cx=\"200\" cy=\"280\" rx=\"160\" ry=\"14\" fill=\"#0a1254\" opacity=\"0.06\"\/>\n\n  <!-- Background circle -->\n  <circle cx=\"200\" cy=\"160\" r=\"120\" fill=\"#f0eeff\" opacity=\"0.5\"\/>\n\n  <!-- Building 1 (left) - Selling -->\n  <g transform=\"translate(40, 130)\">\n    <rect x=\"0\" y=\"20\" width=\"80\" height=\"100\" rx=\"4\" fill=\"#ffffff\" stroke=\"#0a1254\" stroke-width=\"2\"\/>\n    <rect x=\"-4\" y=\"14\" width=\"88\" height=\"10\" rx=\"2\" fill=\"#0a1254\"\/>\n\n    <!-- Animated windows -->\n    <rect class=\"building-light-1\" x=\"10\" y=\"32\" width=\"14\" height=\"14\" rx=\"2\" fill=\"#86d3ff\"\/>\n    <rect x=\"33\" y=\"32\" width=\"14\" height=\"14\" rx=\"2\" fill=\"#86d3ff\"\/>\n    <rect class=\"building-light-2\" x=\"56\" y=\"32\" width=\"14\" height=\"14\" rx=\"2\" fill=\"#86d3ff\"\/>\n    <rect x=\"10\" y=\"54\" width=\"14\" height=\"14\" rx=\"2\" fill=\"#86d3ff\"\/>\n    <rect class=\"building-light-3\" x=\"33\" y=\"54\" width=\"14\" height=\"14\" rx=\"2\" fill=\"#86d3ff\"\/>\n    <rect x=\"56\" y=\"54\" width=\"14\" height=\"14\" rx=\"2\" fill=\"#86d3ff\"\/>\n\n    <rect x=\"33\" y=\"86\" width=\"14\" height=\"34\" rx=\"2\" fill=\"#0a1254\"\/>\n    <rect x=\"6\" y=\"0\" width=\"68\" height=\"14\" rx=\"3\" fill=\"#36d1a2\"\/>\n    <text x=\"40\" y=\"10\" font-family=\"DM Sans, sans-serif\" font-size=\"8\" font-weight=\"700\" fill=\"#0a1254\" text-anchor=\"middle\">FILIALE A<\/text>\n\n    <!-- Vend tag -->\n    <g class=\"vend-tag\" transform=\"translate(70, 76)\">\n      <rect x=\"0\" y=\"0\" width=\"34\" height=\"14\" rx=\"7\" fill=\"#ff6b6b\"\/>\n      <text x=\"17\" y=\"10\" font-family=\"DM Sans, sans-serif\" font-size=\"7\" font-weight=\"700\" fill=\"#ffffff\" text-anchor=\"middle\">VEND<\/text>\n    <\/g>\n  <\/g>\n\n  <!-- Building 2 (right) - Buying -->\n  <g transform=\"translate(280, 130)\">\n    <rect x=\"0\" y=\"20\" width=\"80\" height=\"100\" rx=\"4\" fill=\"#ffffff\" stroke=\"#0a1254\" stroke-width=\"2\"\/>\n    <rect x=\"-4\" y=\"14\" width=\"88\" height=\"10\" rx=\"2\" fill=\"#0a1254\"\/>\n\n    <!-- Animated windows -->\n    <rect x=\"10\" y=\"32\" width=\"14\" height=\"14\" rx=\"2\" fill=\"#86d3ff\"\/>\n    <rect class=\"building-light-4\" x=\"33\" y=\"32\" width=\"14\" height=\"14\" rx=\"2\" fill=\"#86d3ff\"\/>\n    <rect x=\"56\" y=\"32\" width=\"14\" height=\"14\" rx=\"2\" fill=\"#86d3ff\"\/>\n    <rect class=\"building-light-1\" x=\"10\" y=\"54\" width=\"14\" height=\"14\" rx=\"2\" fill=\"#86d3ff\"\/>\n    <rect x=\"33\" y=\"54\" width=\"14\" height=\"14\" rx=\"2\" fill=\"#86d3ff\"\/>\n    <rect class=\"building-light-2\" x=\"56\" y=\"54\" width=\"14\" height=\"14\" rx=\"2\" fill=\"#86d3ff\"\/>\n\n    <rect x=\"33\" y=\"86\" width=\"14\" height=\"34\" rx=\"2\" fill=\"#0a1254\"\/>\n    <rect x=\"6\" y=\"0\" width=\"68\" height=\"14\" rx=\"3\" fill=\"#655cfe\"\/>\n    <text x=\"40\" y=\"10\" font-family=\"DM Sans, sans-serif\" font-size=\"8\" font-weight=\"700\" fill=\"#ffffff\" text-anchor=\"middle\">FILIALE B<\/text>\n\n    <!-- Achat tag -->\n    <g class=\"achat-tag\" transform=\"translate(-26, 76)\">\n      <rect x=\"0\" y=\"0\" width=\"34\" height=\"14\" rx=\"7\" fill=\"#36d1a2\"\/>\n      <text x=\"17\" y=\"10\" font-family=\"DM Sans, sans-serif\" font-size=\"7\" font-weight=\"700\" fill=\"#0a1254\" text-anchor=\"middle\">ACHAT<\/text>\n    <\/g>\n  <\/g>\n\n  <!-- Equipment moving between buildings -->\n  <g class=\"equipment-moving\" transform=\"translate(150, 160)\">\n    <!-- Pallet -->\n    <rect x=\"-2\" y=\"60\" width=\"104\" height=\"10\" rx=\"1\" fill=\"#0a1254\" opacity=\"0.4\"\/>\n    <rect x=\"0\" y=\"58\" width=\"100\" height=\"6\" rx=\"1\" fill=\"#8d6e63\"\/>\n    <rect x=\"0\" y=\"64\" width=\"100\" height=\"6\" rx=\"1\" fill=\"#8d6e63\"\/>\n\n    <!-- Equipment box -->\n    <rect x=\"10\" y=\"0\" width=\"80\" height=\"60\" rx=\"6\" fill=\"#ffce86\" stroke=\"#0a1254\" stroke-width=\"2\"\/>\n    <rect x=\"20\" y=\"10\" width=\"60\" height=\"20\" rx=\"3\" fill=\"#0a1254\"\/>\n    <circle cx=\"30\" cy=\"20\" r=\"4\" fill=\"#36d1a2\"\/>\n    <circle cx=\"44\" cy=\"20\" r=\"4\" fill=\"#ff6b6b\"\/>\n    <circle cx=\"58\" cy=\"20\" r=\"4\" fill=\"#ffce86\"\/>\n    <rect x=\"20\" y=\"36\" width=\"35\" height=\"6\" rx=\"2\" fill=\"#0a1254\" opacity=\"0.7\"\/>\n    <rect x=\"20\" y=\"46\" width=\"50\" height=\"6\" rx=\"2\" fill=\"#0a1254\" opacity=\"0.5\"\/>\n\n    <!-- Price tag (pulsing) -->\n    <g class=\"price-tag\" transform=\"translate(50, -22)\">\n      <path d=\"M 0 0 L 30 0 L 38 8 L 30 16 L 0 16 Z\" fill=\"#36d1a2\"\/>\n      <text x=\"15\" y=\"11\" font-family=\"DM Sans, sans-serif\" font-size=\"8\" font-weight=\"800\" fill=\"#0a1254\" text-anchor=\"middle\">-66%<\/text>\n      <circle cx=\"4\" cy=\"8\" r=\"2\" fill=\"#0a1254\"\/>\n    <\/g>\n  <\/g>\n\n  <!-- Circular arrow (animated trace) -->\n  <g transform=\"translate(200, 160)\">\n    <path class=\"arrow-trace\"\n          d=\"M -100 0 Q -100 -80 0 -80 Q 100 -80 100 0\"\n          stroke=\"#0a1254\"\n          stroke-width=\"2.5\"\n          stroke-linecap=\"round\"\n          fill=\"none\"\n          opacity=\"0.5\"\/>\n    <path class=\"arrow-head\" d=\"M 95 -8 L 105 0 L 95 8\" stroke=\"#0a1254\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" fill=\"none\"\/>\n  <\/g>\n\n  <!-- Savings indicator (bouncing) -->\n  <g class=\"savings-bubble\" transform=\"translate(200, 50)\">\n    <rect x=\"-50\" y=\"-16\" width=\"100\" height=\"32\" rx=\"16\" fill=\"#0a1254\"\/>\n    <text x=\"-30\" y=\"5\" font-family=\"DM Sans, sans-serif\" font-size=\"14\" font-weight=\"800\" fill=\"#36d1a2\" text-anchor=\"middle\">\u20ac<\/text>\n    <text x=\"10\" y=\"-2\" font-family=\"DM Sans, sans-serif\" font-size=\"9\" font-weight=\"700\" fill=\"#ffffff\" text-anchor=\"middle\">\u00c9conomies<\/text>\n    <text x=\"10\" y=\"9\" font-family=\"DM Sans, sans-serif\" font-size=\"9\" font-weight=\"700\" fill=\"#36d1a2\" text-anchor=\"middle\">1,2 M\u20ac<\/text>\n  <\/g>\n\n  <!-- CO2 leaf icon (bobbing) -->\n  <g class=\"leaf-icon\" transform=\"translate(50, 60)\">\n    <circle cx=\"0\" cy=\"0\" r=\"18\" fill=\"#36d1a2\"\/>\n    <path d=\"M -7 -5 Q -7 -10 -2 -10 Q 5 -10 5 -5 Q 10 -5 10 0 Q 10 8 0 8 Q -10 8 -10 0 Q -10 -5 -7 -5 Z\" fill=\"#0a1254\" opacity=\"0.85\"\/>\n    <path d=\"M -2 -2 L 6 -8\" stroke=\"#36d1a2\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/>\n  <\/g>\n\n  <!-- Decorative dots -->\n  <circle cx=\"370\" cy=\"60\" r=\"4\" fill=\"#ffce86\"\/>\n  <circle cx=\"30\" cy=\"200\" r=\"3\" fill=\"#36d1a2\"\/>\n  <circle cx=\"380\" cy=\"240\" r=\"3\" fill=\"#655cfe\"\/>\n<\/svg>\n\n      <\/div>\n      <div class=\"visual-mock\">\n        <div class=\"visual-header\">\n          <div>\n            <div class=\"vh-title\">Marketplace interne<\/div>\n            <div class=\"vh-sub\">Avril 2026 \u00b7 14 entit\u00e9s actives<\/div>\n          <\/div>\n          <div class=\"vh-status\">312 produits<\/div>\n        <\/div>\n        <div class=\"reuse-stats\">\n          <div class=\"reuse-stat\">\n            <div class=\"v\">1,2 M\u20ac<\/div>\n            <div class=\"l\">\u00c9conomies r\u00e9alis\u00e9es<\/div>\n            <div class=\"delta\">\u2191 +18%<\/div>\n          <\/div>\n          <div class=\"reuse-stat\">\n            <div class=\"v\">84 t<\/div>\n            <div class=\"l\">CO\u2082 \u00e9vit\u00e9<\/div>\n            <div class=\"delta\">\u2191 vs achat neuf<\/div>\n          <\/div>\n        <\/div>\n        <div class=\"reuse-list\">\n          <div class=\"reuse-item\">\n            <div class=\"ic\">\ud83d\udda8\ufe0f<\/div>\n            <div class=\"info\">\n              <div class=\"name\">Imprimante 3D Stratasys<\/div>\n              <div class=\"meta\">Filiale Allemagne<\/div>\n            <\/div>\n            <div class=\"price\">\n              <span class=\"new\">6 200 \u20ac<\/span>\n              <span class=\"old\">18 400 \u20ac<\/span>\n            <\/div>\n          <\/div>\n          <div class=\"reuse-item\">\n            <div class=\"ic\">\ud83d\ude9c<\/div>\n            <div class=\"info\">\n              <div class=\"name\">Chariot \u00e9l\u00e9vateur 2,5T<\/div>\n              <div class=\"meta\">Logistique Lyon<\/div>\n            <\/div>\n            <div class=\"price\">\n              <span class=\"new\">14 500 \u20ac<\/span>\n              <span class=\"old\">32 000 \u20ac<\/span>\n            <\/div>\n          <\/div>\n          <div class=\"reuse-item\">\n            <div class=\"ic\">\ud83e\ude91<\/div>\n            <div class=\"info\">\n              <div class=\"name\">Mobilier (lot 40 postes)<\/div>\n              <div class=\"meta\">Si\u00e8ge Madrid<\/div>\n            <\/div>\n            <div class=\"price\">\n              <span class=\"new\">4 800 \u20ac<\/span>\n              <span class=\"old\">22 000 \u20ac<\/span>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n\n\n<section class=\"stats-band\">\n  <div class=\"stats-inner\">\n    <h2>Une plateforme <span class=\"accent\">utilis\u00e9e chaque jour<\/span> par 2,5 millions de collaborateurs.<\/h2>\n    <div class=\"stats-grid\">\n      <div class=\"stat-card\">\n        <div class=\"v\">+50<\/div>\n        <div class=\"l\">Clients du Global 2000<\/div>\n      <\/div>\n      <div class=\"stat-card\">\n        <div class=\"v\">2,5M<\/div>\n        <div class=\"l\">Collaborateurs \u00e9quip\u00e9s<\/div>\n      <\/div>\n      <div class=\"stat-card\">\n        <div class=\"v\">16<\/div>\n        <div class=\"l\">Langues disponibles<\/div>\n      <\/div>\n      <div class=\"stat-card\">\n        <div class=\"v\">15<\/div>\n        <div class=\"l\">Modules \u00e0 la carte<\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n\n\n<section class=\"cta\">\n  <div class=\"cta-inner\">\n    <h2>Pr\u00eats \u00e0 enrichir votre portail collaborateurs ?<\/h2>\n    <p>R\u00e9servez 30 minutes avec notre \u00e9quipe pour d\u00e9couvrir comment Park+, Inclusive+ et Reuse+ peuvent s&#8217;int\u00e9grer \u00e0 votre plateforme Collaborative Perks existante.<\/p>\n    <div class=\"cta-actions\">\n      <a href=\"https:\/\/www.collaborativeperks.com\/fr\/demo\/\" class=\"btn btn-large\">R\u00e9server une d\u00e9mo \u2192<\/a>\n    <\/div>\n  <\/div>\n<\/section>\n","protected":false},"excerpt":{"rendered":"<p>Nouveau 3 nouveaux modules \u00b7 printemps 2026 Trois logiciels pour enrichir votre portail collaborateurs. R\u00e9servation de parking, plateforme d\u00e9di\u00e9e \u00e0 la diversit\u00e9 &amp; inclusion, marketplace industrielle interne. Trois solutions int\u00e9gr\u00e9es \u00e0 votre plateforme Collaborative Perks, con\u00e7ues pour les grands groupes. R\u00e9server une d\u00e9mo \u2192 D\u00e9couvrir les modules +50 Clients Global 2000 2,5M Collaborateurs 16 Langues&#8230;<\/p>\n","protected":false},"author":7,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-39204","page","type-page","status-publish","hentry","no-post-thumbnail"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Nouveaux produits - Collaborative Perks<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.collaborativeperks.com\/fr\/new-products\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Nouveaux produits - Collaborative Perks\" \/>\n<meta property=\"og:description\" content=\"Nouveau 3 nouveaux modules \u00b7 printemps 2026 Trois logiciels pour enrichir votre portail collaborateurs. R\u00e9servation de parking, plateforme d\u00e9di\u00e9e \u00e0 la diversit\u00e9 &amp; inclusion, marketplace industrielle interne. Trois solutions int\u00e9gr\u00e9es \u00e0 votre plateforme Collaborative Perks, con\u00e7ues pour les grands groupes. R\u00e9server une d\u00e9mo \u2192 D\u00e9couvrir les modules +50 Clients Global 2000 2,5M Collaborateurs 16 Langues...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.collaborativeperks.com\/fr\/new-products\/\" \/>\n<meta property=\"og:site_name\" content=\"Collaborative Perks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/facebook.com\/collabperks\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-06T09:48:24+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@CollabPerks\" \/>\n<meta name=\"twitter:label1\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.collaborativeperks.com\\\/fr\\\/new-products\\\/\",\"url\":\"https:\\\/\\\/www.collaborativeperks.com\\\/fr\\\/new-products\\\/\",\"name\":\"Nouveaux produits - Collaborative Perks\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.collaborativeperks.com\\\/#website\"},\"datePublished\":\"2026-05-05T14:36:25+00:00\",\"dateModified\":\"2026-05-06T09:48:24+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.collaborativeperks.com\\\/fr\\\/new-products\\\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.collaborativeperks.com\\\/fr\\\/new-products\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.collaborativeperks.com\\\/fr\\\/new-products\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.collaborativeperks.com\\\/es\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Nouveaux produits\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.collaborativeperks.com\\\/#website\",\"url\":\"https:\\\/\\\/www.collaborativeperks.com\\\/\",\"name\":\"Collaborative Perks\",\"description\":\"Innovative employee benefits\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.collaborativeperks.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.collaborativeperks.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.collaborativeperks.com\\\/#organization\",\"name\":\"Collaborative Perks\",\"url\":\"https:\\\/\\\/www.collaborativeperks.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/www.collaborativeperks.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"\",\"contentUrl\":\"\",\"caption\":\"Collaborative Perks\"},\"image\":{\"@id\":\"https:\\\/\\\/www.collaborativeperks.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/facebook.com\\\/collabperks\",\"https:\\\/\\\/x.com\\\/CollabPerks\",\"https:\\\/\\\/www.instagram.com\\\/collaborativeperks\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/collaborativeperks\\\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Nouveaux produits - Collaborative Perks","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.collaborativeperks.com\/fr\/new-products\/","og_locale":"fr_FR","og_type":"article","og_title":"Nouveaux produits - Collaborative Perks","og_description":"Nouveau 3 nouveaux modules \u00b7 printemps 2026 Trois logiciels pour enrichir votre portail collaborateurs. R\u00e9servation de parking, plateforme d\u00e9di\u00e9e \u00e0 la diversit\u00e9 &amp; inclusion, marketplace industrielle interne. Trois solutions int\u00e9gr\u00e9es \u00e0 votre plateforme Collaborative Perks, con\u00e7ues pour les grands groupes. R\u00e9server une d\u00e9mo \u2192 D\u00e9couvrir les modules +50 Clients Global 2000 2,5M Collaborateurs 16 Langues...","og_url":"https:\/\/www.collaborativeperks.com\/fr\/new-products\/","og_site_name":"Collaborative Perks","article_publisher":"https:\/\/facebook.com\/collabperks","article_modified_time":"2026-05-06T09:48:24+00:00","twitter_card":"summary_large_image","twitter_site":"@CollabPerks","twitter_misc":{"Dur\u00e9e de lecture estim\u00e9e":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.collaborativeperks.com\/fr\/new-products\/","url":"https:\/\/www.collaborativeperks.com\/fr\/new-products\/","name":"Nouveaux produits - Collaborative Perks","isPartOf":{"@id":"https:\/\/www.collaborativeperks.com\/#website"},"datePublished":"2026-05-05T14:36:25+00:00","dateModified":"2026-05-06T09:48:24+00:00","breadcrumb":{"@id":"https:\/\/www.collaborativeperks.com\/fr\/new-products\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.collaborativeperks.com\/fr\/new-products\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.collaborativeperks.com\/fr\/new-products\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.collaborativeperks.com\/es\/"},{"@type":"ListItem","position":2,"name":"Nouveaux produits"}]},{"@type":"WebSite","@id":"https:\/\/www.collaborativeperks.com\/#website","url":"https:\/\/www.collaborativeperks.com\/","name":"Collaborative Perks","description":"Innovative employee benefits","publisher":{"@id":"https:\/\/www.collaborativeperks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.collaborativeperks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/www.collaborativeperks.com\/#organization","name":"Collaborative Perks","url":"https:\/\/www.collaborativeperks.com\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.collaborativeperks.com\/#\/schema\/logo\/image\/","url":"","contentUrl":"","caption":"Collaborative Perks"},"image":{"@id":"https:\/\/www.collaborativeperks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/facebook.com\/collabperks","https:\/\/x.com\/CollabPerks","https:\/\/www.instagram.com\/collaborativeperks\/","https:\/\/www.linkedin.com\/company\/collaborativeperks\/"]}]}},"_links":{"self":[{"href":"https:\/\/www.collaborativeperks.com\/fr\/wp-json\/wp\/v2\/pages\/39204","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.collaborativeperks.com\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.collaborativeperks.com\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.collaborativeperks.com\/fr\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.collaborativeperks.com\/fr\/wp-json\/wp\/v2\/comments?post=39204"}],"version-history":[{"count":2,"href":"https:\/\/www.collaborativeperks.com\/fr\/wp-json\/wp\/v2\/pages\/39204\/revisions"}],"predecessor-version":[{"id":39227,"href":"https:\/\/www.collaborativeperks.com\/fr\/wp-json\/wp\/v2\/pages\/39204\/revisions\/39227"}],"wp:attachment":[{"href":"https:\/\/www.collaborativeperks.com\/fr\/wp-json\/wp\/v2\/media?parent=39204"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}