{"id":9127,"date":"2025-06-13T11:52:13","date_gmt":"2025-06-13T09:52:13","guid":{"rendered":"https:\/\/dev.saalz.com\/?page_id=9127"},"modified":"2026-09-22T13:39:17","modified_gmt":"2026-09-22T11:39:17","slug":"dpa","status":"publish","type":"page","link":"https:\/\/saalz.com\/fr\/dpa\/","title":{"rendered":"DPA"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"9127\" class=\"elementor elementor-9127\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-5944866 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"5944866\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-1acc98e\" data-id=\"1acc98e\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-bc7a365 elementor-widget elementor-widget-html\" data-id=\"bc7a365\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n    \/* ============================\r\n       DESIGN TOKENS\r\n    ============================ *\/\r\n    :root {\r\n      --accent: #4F46E5;\r\n      --accent-hover: #4338CA;\r\n      --accent-active: #3730A3;\r\n      --accent-2: #3B82F6;\r\n      --accent-light: rgba(79, 70, 229, 0.08);\r\n      --accent-light-2: rgba(79, 70, 229, 0.15);\r\n      --navy: #0F172A;\r\n      --navy-2: #1E293B;\r\n      --color-bg: #F8F9FC;\r\n      --color-surface: #FFFFFF;\r\n      --color-surface-2: #F1F5F9;\r\n      --color-border: #E2E8F0;\r\n      --color-text: #0F172A;\r\n      --color-text-muted: #64748B;\r\n      --color-text-faint: #94A3B8;\r\n      --color-error: #EF4444;\r\n      --color-success: #22C55E;\r\n      --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;\r\n      --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;\r\n      --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);\r\n      --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);\r\n      --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);\r\n      --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);\r\n      --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);\r\n      --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);\r\n      --text-3xl: clamp(2.375rem, 1.5rem + 3vw, 4rem);\r\n      --space-1: 0.25rem;\r\n      --space-2: 0.5rem;\r\n      --space-3: 0.75rem;\r\n      --space-4: 1rem;\r\n      --space-5: 1.25rem;\r\n      --space-6: 1.5rem;\r\n      --space-8: 2rem;\r\n      --space-10: 2.5rem;\r\n      --space-12: 3rem;\r\n      --space-16: 4rem;\r\n      --space-20: 5rem;\r\n      --space-24: 6rem;\r\n      --radius-sm: 0.375rem;\r\n      --radius-md: 0.5rem;\r\n      --radius-lg: 0.75rem;\r\n      --radius-xl: 1rem;\r\n      --radius-2xl: 1.5rem;\r\n      --radius-full: 9999px;\r\n      --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);\r\n      --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);\r\n      --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);\r\n      --shadow-xl: 0 20px 48px rgba(15, 23, 42, 0.16);\r\n      --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);\r\n      --ease-out: cubic-bezier(0.16, 1, 0.3, 1);\r\n      --content-narrow: 640px;\r\n      --content-default: 960px;\r\n      --content-wide: 1200px;\r\n    }\r\n\r\n    \/* ============================\r\n       BASE RESET\r\n    ============================ *\/\r\n    *, *::before, *::after {\r\n      box-sizing: border-box;\r\n      margin: 0;\r\n      padding: 0;\r\n    }\r\n    html {\r\n      -webkit-text-size-adjust: none;\r\n      text-size-adjust: none;\r\n      -webkit-font-smoothing: antialiased;\r\n      -moz-osx-font-smoothing: grayscale;\r\n      text-rendering: optimizeLegibility;\r\n      scroll-behavior: smooth;\r\n      scroll-padding-top: 80px;\r\n    }\r\n    body {\r\n      min-height: 100dvh;\r\n      line-height: 1.6;\r\n      font-family: var(--font-body);\r\n      font-size: var(--text-base);\r\n      color: var(--color-text);\r\n      background-color: var(--color-bg);\r\n    }\r\n    img, picture, video, canvas, svg {\r\n      display: block;\r\n      max-width: 100%;\r\n    }\r\n    ul[role=\"list\"], ol[role=\"list\"] { list-style: none; }\r\n    input, button, textarea, select { font: inherit; color: inherit; }\r\n    h1, h2, h3, h4, h5, h6 {\r\n      text-wrap: balance;\r\n      line-height: 1.15;\r\n      font-family: var(--font-display);\r\n    }\r\n    p, li, figcaption { text-wrap: pretty; max-width: 72ch; }\r\n    button { cursor: pointer; background: none; border: none; }\r\n    a { text-decoration: none; color: inherit; }\r\n    @media (prefers-reduced-motion: reduce) {\r\n      *, *::before, *::after {\r\n        animation-duration: 0.01ms !important;\r\n        animation-iteration-count: 1 !important;\r\n        transition-duration: 0.01ms !important;\r\n        scroll-behavior: auto !important;\r\n      }\r\n    }\r\n\r\n    \/* ============================\r\n       LAYOUT UTILITIES\r\n    ============================ *\/\r\n    .container {\r\n      width: 100%;\r\n      max-width: var(--content-wide);\r\n      margin-inline: auto;\r\n      padding-inline: clamp(var(--space-4), 5vw, var(--space-12));\r\n    }\r\n    .container--narrow {\r\n      max-width: var(--content-narrow);\r\n      margin-inline: auto;\r\n    }\r\n    .section {\r\n      padding-block: clamp(var(--space-16), 8vw, var(--space-24));\r\n    }\r\n\r\n    \/* ============================\r\n       TYPOGRAPHY UTILITIES\r\n    ============================ *\/\r\n    .pill {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      gap: var(--space-2);\r\n      padding: var(--space-1) var(--space-3);\r\n      background: var(--accent-light);\r\n      color: var(--accent);\r\n      border-radius: var(--radius-full);\r\n      font-size: var(--text-xs);\r\n      font-weight: 600;\r\n      letter-spacing: 0.03em;\r\n      text-transform: uppercase;\r\n    }\r\n    .section-label {\r\n      font-size: var(--text-xs);\r\n      font-weight: 700;\r\n      letter-spacing: 0.1em;\r\n      text-transform: uppercase;\r\n      color: var(--color-text-faint);\r\n    }\r\n\r\n    \/* ============================\r\n       BUTTONS\r\n    ============================ *\/\r\n    .btn {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      gap: var(--space-2);\r\n      padding: 0.75rem 1.5rem;\r\n      border-radius: var(--radius-lg);\r\n      font-size: var(--text-sm);\r\n      font-weight: 700;\r\n      transition:\r\n        background var(--transition-interactive),\r\n        color var(--transition-interactive),\r\n        box-shadow var(--transition-interactive),\r\n        transform var(--transition-interactive),\r\n        border-color var(--transition-interactive);\r\n      cursor: pointer;\r\n      text-decoration: none;\r\n      white-space: nowrap;\r\n    }\r\n    .btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }\r\n    .btn:active { transform: translateY(0); box-shadow: var(--shadow-sm); }\r\n    .btn--primary {\r\n      background: var(--accent);\r\n      color: #fff;\r\n      border: 2px solid transparent;\r\n    }\r\n    .btn--primary:hover { background: var(--accent-hover); }\r\n    .btn--primary:active { background: var(--accent-active); }\r\n    .btn--ghost {\r\n      background: transparent;\r\n      color: var(--color-text);\r\n      border: 2px solid var(--color-border);\r\n    }\r\n    .btn--ghost:hover { border-color: var(--accent); color: var(--accent); }\r\n    .btn--ghost-white {\r\n      background: transparent;\r\n      color: #fff;\r\n      border: 2px solid rgba(255,255,255,0.4);\r\n    }\r\n    .btn--ghost-white:hover { border-color: #fff; background: rgba(255,255,255,0.1); }\r\n    .btn--white {\r\n      background: #fff;\r\n      color: var(--accent);\r\n      border: 2px solid transparent;\r\n    }\r\n    .btn--white:hover { background: #F0EFFF; }\r\n    .btn--lg {\r\n      padding: 0.875rem 2rem;\r\n      font-size: var(--text-base);\r\n      border-radius: var(--radius-xl);\r\n    }\r\n\r\n    \/* ============================\r\n       NAVIGATION\r\n    ============================ *\/\r\n    .nav {\r\n      position: sticky;\r\n      top: 0;\r\n      z-index: 100;\r\n      background: rgba(255,255,255,0.9);\r\n      backdrop-filter: blur(16px);\r\n      -webkit-backdrop-filter: blur(16px);\r\n      border-bottom: 1px solid var(--color-border);\r\n    }\r\n    .nav__inner {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: flex-start;\r\n      height: 68px;\r\n      gap: var(--space-6);\r\n    }\r\n    .nav__logo {\r\n      font-size: 1.5rem;\r\n      font-weight: 800;\r\n      color: var(--navy);\r\n      letter-spacing: -0.03em;\r\n      flex-shrink: 0;\r\n      display: flex;\r\n      align-items: center;\r\n      gap: var(--space-2);\r\n    }\r\n    .nav__logo-icon {\r\n      width: 36px;\r\n      height: 36px;\r\n      background: transparent;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n    }\r\n    .nav__links {\r\n      display: flex;\r\n      align-items: center;\r\n      gap: var(--space-6);\r\n      list-style: none;\r\n    }\r\n    .nav__links a {\r\n      font-size: var(--text-sm);\r\n      font-weight: 500;\r\n      font-size: 0.8rem;\r\n      color: var(--color-text-muted);\r\n      transition: color var(--transition-interactive);\r\n    }\r\n    .nav__links a:hover { color: var(--color-text); }\r\n    .nav__links a.nav__link--active { color: var(--accent); }\r\n    .nav__signin {\r\n      font-size: var(--text-sm);\r\n      font-weight: 500;\r\n      font-size: 0.8rem;\r\n      color: var(--color-text-muted);\r\n      transition: color var(--transition-interactive);\r\n      text-decoration: none;\r\n      padding: 0.375rem 0;\r\n    }\r\n    .nav__signin:hover { color: var(--color-text); }\r\n    .btn--nav-cta {\r\n      padding: 0.5rem 1.125rem;\r\n      font-size: 0.8125rem;\r\n      border-radius: var(--radius-full);\r\n      font-weight: 700;\r\n      background: var(--accent);\r\n      color: #fff;\r\n      border: none;\r\n      transition: background var(--transition-interactive), transform var(--transition-interactive);\r\n      white-space: nowrap;\r\n    }\r\n    .btn--nav-cta:hover { background: var(--accent-hover); transform: translateY(-1px); }\r\n    .nav__actions {\r\n      display: flex;\r\n      align-items: center;\r\n      gap: var(--space-2);\r\n      flex-shrink: 0;\r\n      margin-left: auto;\r\n    }\r\n    .nav__mobile-toggle {\r\n      display: none;\r\n      padding: var(--space-2);\r\n      color: var(--color-text);\r\n      border-radius: var(--radius-md);\r\n      transition: background var(--transition-interactive);\r\n    }\r\n    .nav__mobile-toggle:hover { background: var(--color-surface-2); }\r\n    @media (max-width: 900px) {\r\n      .nav__links { display: none; }\r\n      .nav__mobile-toggle { display: flex; }\r\n      .nav__actions .btn--ghost { display: none; }\r\n    }\r\n    @media (max-width: 600px) {\r\n      .nav__actions .btn--primary { padding: 0.5rem 0.875rem; font-size: var(--text-xs); }\r\n    }\r\n\r\n    \/* ============================\r\n       MEGA-MENU\r\n    ============================ *\/\r\n    .nav__item { position: static; }\r\n    .nav__item--mega { position: static; }\r\n    .nav__item--mega > a {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      gap: 5px;\r\n    }\r\n    .nav__item--mega > a .mm-chevron {\r\n      width: 10px; height: 10px;\r\n      border-right: 1.5px solid currentColor;\r\n      border-bottom: 1.5px solid currentColor;\r\n      transform: rotate(45deg) translateY(-2px);\r\n      transition: transform 200ms ease;\r\n      display: inline-block;\r\n      flex-shrink: 0;\r\n    }\r\n    .nav__item--mega.mm-open > a .mm-chevron {\r\n      transform: rotate(-135deg) translateY(2px);\r\n    }\r\n    .nav__inner { position: relative; }\r\n    .megamenu {\r\n      position: absolute;\r\n      top: calc(100% + 8px);\r\n      left: 0;\r\n      transform: translateY(4px);\r\n      width: min(860px, 92vw);\r\n      background: #fff;\r\n      border: 1px solid rgba(15,23,42,0.08);\r\n      border-radius: 18px;\r\n      box-shadow: 0 8px 16px rgba(15,23,42,0.06), 0 24px 56px rgba(15,23,42,0.12);\r\n      z-index: 300;\r\n      opacity: 0;\r\n      visibility: hidden;\r\n      pointer-events: none;\r\n      transition: opacity 180ms ease, transform 180ms ease, visibility 0ms 180ms;\r\n      overflow: hidden;\r\n    }\r\n    .nav__item--mega.mm-open .megamenu {\r\n      opacity: 1;\r\n      visibility: visible;\r\n      pointer-events: auto;\r\n      transform: translateY(0);\r\n      transition: opacity 180ms ease, transform 180ms ease, visibility 0ms 0ms;\r\n    }\r\n    .megamenu::before {\r\n      content: '';\r\n      position: absolute;\r\n      top: -16px;\r\n      left: 0; right: 0;\r\n      height: 16px;\r\n      background: transparent;\r\n    }\r\n    .megamenu::after {\r\n      content: '';\r\n      position: absolute;\r\n      top: -5px;\r\n      left: 48px;\r\n      transform: rotate(45deg);\r\n      width: 10px; height: 10px;\r\n      background: #fff;\r\n      border-top: 1px solid rgba(15,23,42,0.08);\r\n      border-left: 1px solid rgba(15,23,42,0.08);\r\n      border-radius: 2px;\r\n    }\r\n    .megamenu__inner {\r\n      display: grid;\r\n      grid-template-columns: repeat(4, 1fr);\r\n      gap: 0;\r\n      padding: 28px 28px 0;\r\n    }\r\n    .megamenu__col {\r\n      padding: 0 18px 24px;\r\n      border-right: 1px solid rgba(15,23,42,0.06);\r\n    }\r\n    .megamenu__col:first-child { padding-left: 0; }\r\n    .megamenu__col:last-child { border-right: none; padding-right: 0; }\r\n    .megamenu__col-label {\r\n      font-size: 0.65rem;\r\n      font-weight: 800;\r\n      letter-spacing: 0.1em;\r\n      text-transform: uppercase;\r\n      color: var(--color-text-faint);\r\n      margin-bottom: 14px;\r\n      padding-bottom: 8px;\r\n      border-bottom: 1px solid rgba(15,23,42,0.05);\r\n    }\r\n    .megamenu__items { display: flex; flex-direction: column; gap: 2px; }\r\n    .megamenu__item {\r\n      display: flex;\r\n      align-items: flex-start;\r\n      gap: 12px;\r\n      padding: 9px 10px;\r\n      border-radius: 10px;\r\n      cursor: pointer;\r\n      transition: background 130ms ease;\r\n      text-decoration: none;\r\n      color: inherit;\r\n    }\r\n    .megamenu__item:hover { background: #F8F9FF; }\r\n    .megamenu__item:hover .megamenu__item-label { color: var(--accent); }\r\n    .megamenu__item-icon {\r\n      width: 32px; height: 32px; flex-shrink: 0;\r\n      background: linear-gradient(135deg, rgba(79,70,229,0.08), rgba(59,130,246,0.08));\r\n      border-radius: 8px;\r\n      display: flex; align-items: center; justify-content: center;\r\n      margin-top: 1px;\r\n    }\r\n    .megamenu__item-label {\r\n      font-size: 0.8125rem;\r\n      font-weight: 700;\r\n      color: var(--color-text);\r\n      line-height: 1.3;\r\n      transition: color 130ms ease;\r\n    }\r\n    .megamenu__item-desc {\r\n      font-size: 0.7rem;\r\n      color: var(--color-text-muted);\r\n      line-height: 1.4;\r\n      margin-top: 1px;\r\n    }\r\n    .megamenu__footer {\r\n      margin: 8px 0 0;\r\n      padding: 16px 28px;\r\n      background: linear-gradient(135deg, rgba(79,70,229,0.04), rgba(59,130,246,0.04));\r\n      border-top: 1px solid rgba(79,70,229,0.08);\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: space-between;\r\n      gap: 16px;\r\n    }\r\n    .megamenu__footer-text {\r\n      font-size: 0.8125rem;\r\n      color: var(--color-text-muted);\r\n    }\r\n    .megamenu__footer-text strong { color: var(--color-text); }\r\n    .megamenu__footer-cta {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      gap: 6px;\r\n      padding: 0.45rem 1.1rem;\r\n      background: var(--accent);\r\n      color: #fff !important;\r\n      text-decoration: none !important;\r\n      border-radius: var(--radius-full);\r\n      font-size: 0.8rem;\r\n      font-weight: 700;\r\n      white-space: nowrap;\r\n      transition: background 150ms ease, transform 150ms ease;\r\n      flex-shrink: 0;\r\n    }\r\n    .megamenu__footer-cta:hover { background: var(--accent-hover); transform: translateY(-1px); }\r\n    @media (max-width: 1000px) {\r\n      .megamenu { display: none !important; }\r\n    }\r\n\r\n    \/* ============================\r\n       SCROLL REVEAL ANIMATIONS\r\n    ============================ *\/\r\n    .reveal {\r\n      opacity: 0;\r\n      transform: translateY(20px);\r\n      transition:\r\n        opacity 0.6s var(--ease-out),\r\n        transform 0.6s var(--ease-out);\r\n    }\r\n    .reveal.is-visible {\r\n      opacity: 1;\r\n      transform: translateY(0);\r\n    }\r\n    .reveal--delay-1 { transition-delay: 0.1s; }\r\n    .reveal--delay-2 { transition-delay: 0.2s; }\r\n    .reveal--delay-3 { transition-delay: 0.3s; }\r\n    .reveal--delay-4 { transition-delay: 0.4s; }\r\n    .reveal--delay-5 { transition-delay: 0.5s; }\r\n\r\n    \/* ============================\r\n       MISC UTILITIES\r\n    ============================ *\/\r\n    .text-center { text-align: center; }\r\n    .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; }\r\n\r\n    \/* ============================\r\n       HERO \u2014 TRUST CENTER\r\n    ============================ *\/\r\n    .hero {\r\n      position: relative;\r\n      overflow: hidden;\r\n      padding-block: clamp(var(--space-16), 9vw, 110px);\r\n      background: var(--color-bg);\r\n    }\r\n    .hero__mesh {\r\n      position: absolute;\r\n      inset: 0;\r\n      pointer-events: none;\r\n      z-index: 0;\r\n    }\r\n    .hero__mesh::before {\r\n      content: '';\r\n      position: absolute;\r\n      top: -15%;\r\n      left: -5%;\r\n      width: 55%;\r\n      height: 65%;\r\n      background: radial-gradient(ellipse at center, rgba(59, 130, 246, 0.09) 0%, transparent 70%);\r\n      animation: meshDrift1 14s ease-in-out infinite alternate;\r\n    }\r\n    .hero__mesh::after {\r\n      content: '';\r\n      position: absolute;\r\n      top: 15%;\r\n      right: -10%;\r\n      width: 45%;\r\n      height: 55%;\r\n      background: radial-gradient(ellipse at center, rgba(79, 70, 229, 0.07) 0%, transparent 70%);\r\n      animation: meshDrift2 17s ease-in-out infinite alternate;\r\n    }\r\n    @keyframes meshDrift1 { from { transform: translate(0, 0) scale(1); } to { transform: translate(3%, 4%) scale(1.05); } }\r\n    @keyframes meshDrift2 { from { transform: translate(0, 0) scale(1); } to { transform: translate(-4%, 3%) scale(1.06); } }\r\n\r\n    .hero__content {\r\n      position: relative;\r\n      z-index: 1;\r\n      display: flex;\r\n      flex-direction: column;\r\n      align-items: center;\r\n      text-align: center;\r\n      gap: var(--space-6);\r\n    }\r\n\r\n    .hero__badge {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      gap: var(--space-2);\r\n      padding: var(--space-2) var(--space-5);\r\n      background: var(--accent-light);\r\n      border: 1px solid rgba(79, 70, 229, 0.2);\r\n      border-radius: var(--radius-full);\r\n      font-size: var(--text-xs);\r\n      font-weight: 700;\r\n      color: var(--accent);\r\n      letter-spacing: 0.04em;\r\n    }\r\n\r\n    .hero__h1 {\r\n      font-size: clamp(2.5rem, 5.5vw, 4rem);\r\n      font-weight: 800;\r\n      color: var(--navy);\r\n      letter-spacing: -0.04em;\r\n      line-height: 1.08;\r\n      max-width: 14ch;\r\n    }\r\n    .hero__h1 .hero__h1-highlight {\r\n      background: linear-gradient(135deg, var(--accent-2) 0%, var(--accent) 100%);\r\n      -webkit-background-clip: text;\r\n      -webkit-text-fill-color: transparent;\r\n      background-clip: text;\r\n    }\r\n\r\n    .hero__sub {\r\n      font-size: 1.125rem;\r\n      color: var(--color-text-muted);\r\n      line-height: 1.7;\r\n      max-width: 56ch;\r\n      margin-inline: auto;\r\n    }\r\n\r\n    .hero__compliance-badges {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      gap: var(--space-3);\r\n      flex-wrap: wrap;\r\n      margin-top: var(--space-2);\r\n    }\r\n    .compliance-badge {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      gap: 8px;\r\n      padding: 0.5rem 1rem;\r\n      background: var(--color-surface);\r\n      border: 1px solid var(--color-border);\r\n      border-radius: var(--radius-full);\r\n      font-size: var(--text-xs);\r\n      font-weight: 700;\r\n      color: var(--navy);\r\n      box-shadow: var(--shadow-sm);\r\n      transition: box-shadow var(--transition-interactive), border-color var(--transition-interactive), transform var(--transition-interactive);\r\n    }\r\n    .compliance-badge:hover {\r\n      box-shadow: var(--shadow-md);\r\n      border-color: rgba(79,70,229,0.3);\r\n      transform: translateY(-1px);\r\n    }\r\n    .compliance-badge__icon {\r\n      width: 20px;\r\n      height: 20px;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      color: var(--accent);\r\n      flex-shrink: 0;\r\n    }\r\n\r\n    @media (max-width: 640px) {\r\n      .hero__h1 { font-size: clamp(2rem, 9vw, 2.8rem); }\r\n    }\r\n\r\n    \/* ============================\r\n       DOCUMENT CARDS GRID\r\n    ============================ *\/\r\n    .docs-section {\r\n      padding-block: clamp(var(--space-16), 8vw, var(--space-24));\r\n      background: var(--color-surface);\r\n    }\r\n    .docs-section__header {\r\n      text-align: center;\r\n      margin-bottom: clamp(var(--space-10), 5vw, var(--space-16));\r\n    }\r\n    .docs-section__h2 {\r\n      font-size: var(--text-2xl);\r\n      font-weight: 800;\r\n      color: var(--navy);\r\n      letter-spacing: -0.03em;\r\n      margin-bottom: var(--space-3);\r\n    }\r\n    .docs-section__sub {\r\n      font-size: var(--text-base);\r\n      color: var(--color-text-muted);\r\n      max-width: 52ch;\r\n      margin-inline: auto;\r\n    }\r\n\r\n    .docs-grid {\r\n      display: grid;\r\n      grid-template-columns: repeat(3, 1fr);\r\n      gap: var(--space-5);\r\n    }\r\n    \/* 5th card centered on its own row *\/\r\n    .doc-card:nth-child(4) { grid-column: 1; }\r\n    .doc-card:nth-child(5) { grid-column: 2; }\r\n\r\n    @media (max-width: 900px) {\r\n      .docs-grid {\r\n        grid-template-columns: 1fr 1fr;\r\n      }\r\n      .doc-card:nth-child(4),\r\n      .doc-card:nth-child(5) { grid-column: auto; }\r\n      .doc-card:nth-child(5) { grid-column: 1 \/ -1; max-width: 400px; margin-inline: auto; width: 100%; }\r\n    }\r\n    @media (max-width: 580px) {\r\n      .docs-grid { grid-template-columns: 1fr; }\r\n      .doc-card:nth-child(5) { grid-column: 1; max-width: none; }\r\n    }\r\n\r\n    .doc-card {\r\n      background: var(--color-bg);\r\n      border: 1px solid var(--color-border);\r\n      border-radius: var(--radius-2xl);\r\n      padding: var(--space-8) var(--space-6);\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: var(--space-5);\r\n      transition: box-shadow var(--transition-interactive), transform var(--transition-interactive), border-color var(--transition-interactive);\r\n      text-decoration: none;\r\n      color: inherit;\r\n    }\r\n    .doc-card:hover {\r\n      box-shadow: var(--shadow-lg);\r\n      transform: translateY(-3px);\r\n      border-color: rgba(79,70,229,0.25);\r\n    }\r\n    .doc-card__icon-wrap {\r\n      width: 52px;\r\n      height: 52px;\r\n      background: var(--accent-light);\r\n      border-radius: var(--radius-xl);\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      color: var(--accent);\r\n      flex-shrink: 0;\r\n    }\r\n    .doc-card__body {\r\n      flex: 1;\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: var(--space-2);\r\n    }\r\n    .doc-card__title {\r\n      font-size: var(--text-base);\r\n      font-weight: 800;\r\n      color: var(--navy);\r\n      line-height: 1.3;\r\n    }\r\n    .doc-card__desc {\r\n      font-size: var(--text-sm);\r\n      color: var(--color-text-muted);\r\n      line-height: 1.6;\r\n    }\r\n    .doc-card__arrow {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      gap: var(--space-2);\r\n      font-size: var(--text-sm);\r\n      font-weight: 700;\r\n      color: var(--accent);\r\n      transition: gap var(--transition-interactive);\r\n      margin-top: auto;\r\n    }\r\n    .doc-card:hover .doc-card__arrow { gap: var(--space-3); }\r\n\r\n    \/* ============================\r\n       TRUST PILLARS SECTION\r\n    ============================ *\/\r\n    .pillars-section {\r\n      padding-block: clamp(var(--space-16), 8vw, var(--space-24));\r\n      background: var(--color-bg);\r\n    }\r\n    .pillars-section__header {\r\n      text-align: center;\r\n      margin-bottom: clamp(var(--space-10), 5vw, var(--space-16));\r\n    }\r\n    .pillars-section__h2 {\r\n      font-size: var(--text-2xl);\r\n      font-weight: 800;\r\n      color: var(--navy);\r\n      letter-spacing: -0.03em;\r\n      margin-bottom: var(--space-3);\r\n    }\r\n    .pillars-section__sub {\r\n      font-size: var(--text-base);\r\n      color: var(--color-text-muted);\r\n      max-width: 54ch;\r\n      margin-inline: auto;\r\n    }\r\n    .pillars-grid {\r\n      display: grid;\r\n      grid-template-columns: repeat(3, 1fr);\r\n      gap: var(--space-5);\r\n    }\r\n    @media (max-width: 900px) { .pillars-grid { grid-template-columns: 1fr 1fr; } }\r\n    @media (max-width: 580px) { .pillars-grid { grid-template-columns: 1fr; } }\r\n\r\n    .pillar-card {\r\n      background: var(--color-surface);\r\n      border: 1px solid var(--color-border);\r\n      border-radius: var(--radius-2xl);\r\n      padding: var(--space-8) var(--space-6);\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: var(--space-4);\r\n      transition: box-shadow var(--transition-interactive), transform var(--transition-interactive), border-color var(--transition-interactive);\r\n    }\r\n    .pillar-card:hover {\r\n      box-shadow: var(--shadow-md);\r\n      transform: translateY(-2px);\r\n      border-color: rgba(79,70,229,0.2);\r\n    }\r\n    .pillar-card__icon {\r\n      width: 48px;\r\n      height: 48px;\r\n      background: var(--accent-light);\r\n      border-radius: var(--radius-xl);\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      color: var(--accent);\r\n    }\r\n    .pillar-card__title {\r\n      font-size: var(--text-base);\r\n      font-weight: 800;\r\n      color: var(--navy);\r\n      line-height: 1.3;\r\n    }\r\n    .pillar-card__desc {\r\n      font-size: var(--text-sm);\r\n      color: var(--color-text-muted);\r\n      line-height: 1.65;\r\n    }\r\n\r\n    \/* ============================\r\n       CTA SECTION\r\n    ============================ *\/\r\n    .trust-cta {\r\n      background: linear-gradient(135deg, #4F46E5 0%, #3B82F6 100%);\r\n      padding-block: clamp(var(--space-20), 10vw, 120px);\r\n      position: relative;\r\n      overflow: hidden;\r\n      text-align: center;\r\n    }\r\n    .trust-cta::before {\r\n      content: '';\r\n      position: absolute;\r\n      top: -30%;\r\n      left: -10%;\r\n      width: 60%;\r\n      height: 80%;\r\n      background: radial-gradient(ellipse, rgba(255,255,255,0.08) 0%, transparent 65%);\r\n      pointer-events: none;\r\n    }\r\n    .trust-cta::after {\r\n      content: '';\r\n      position: absolute;\r\n      bottom: -20%;\r\n      right: -5%;\r\n      width: 40%;\r\n      height: 60%;\r\n      background: radial-gradient(ellipse, rgba(255,255,255,0.06) 0%, transparent 65%);\r\n      pointer-events: none;\r\n    }\r\n    .trust-cta__content {\r\n      position: relative;\r\n      z-index: 1;\r\n    }\r\n    .trust-cta__eyebrow {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      gap: var(--space-2);\r\n      padding: 0.375rem 1rem;\r\n      background: rgba(255,255,255,0.15);\r\n      border: 1px solid rgba(255,255,255,0.25);\r\n      border-radius: var(--radius-full);\r\n      font-size: var(--text-xs);\r\n      font-weight: 700;\r\n      color: rgba(255,255,255,0.9);\r\n      letter-spacing: 0.06em;\r\n      text-transform: uppercase;\r\n      margin-bottom: var(--space-6);\r\n    }\r\n    .trust-cta__h2 {\r\n      font-size: var(--text-2xl);\r\n      font-weight: 800;\r\n      color: #fff;\r\n      letter-spacing: -0.03em;\r\n      margin-bottom: var(--space-4);\r\n    }\r\n    .trust-cta__sub {\r\n      font-size: var(--text-lg);\r\n      color: rgba(255,255,255,0.75);\r\n      margin-bottom: var(--space-8);\r\n      max-width: 48ch;\r\n      margin-inline: auto;\r\n    }\r\n    .trust-cta__actions {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      gap: var(--space-4);\r\n      flex-wrap: wrap;\r\n    }\r\n    .btn--cta-indigo {\r\n      background: #fff;\r\n      color: var(--accent);\r\n      border: 2px solid transparent;\r\n      padding: 0.875rem 2rem;\r\n      font-size: var(--text-base);\r\n      font-weight: 700;\r\n      border-radius: var(--radius-xl);\r\n      display: inline-flex;\r\n      align-items: center;\r\n      gap: var(--space-2);\r\n      transition: background var(--transition-interactive), transform var(--transition-interactive), box-shadow var(--transition-interactive);\r\n    }\r\n    .btn--cta-indigo:hover {\r\n      background: #F0EFFF;\r\n      transform: translateY(-1px);\r\n      box-shadow: var(--shadow-lg);\r\n    }\r\n\r\n    \/* ============================\r\n       FOOTER\r\n    ============================ *\/\r\n    .footer {\r\n      background: var(--navy);\r\n      padding-block: clamp(var(--space-16), 6vw, var(--space-20));\r\n      color: rgba(255,255,255,0.6);\r\n    }\r\n    .footer__top {\r\n      display: grid;\r\n      grid-template-columns:  1fr 1fr 1fr 1fr;\r\n      gap: clamp(var(--space-8), 4vw, var(--space-12));\r\n      margin-bottom: clamp(var(--space-12), 5vw, var(--space-16));\r\n      padding-bottom: clamp(var(--space-10), 4vw, var(--space-12));\r\n      border-bottom: 1px solid rgba(255,255,255,0.07);\r\n    }\r\n    .footer__logo {\r\n      font-size: 1.5rem;\r\n      font-weight: 800;\r\n      color: #fff;\r\n      letter-spacing: -0.03em;\r\n      margin-bottom: var(--space-2);\r\n    }\r\n    .footer__tagline {\r\n      font-size: var(--text-xs);\r\n      color: rgba(255,255,255,0.35);\r\n      font-weight: 600;\r\n      letter-spacing: 0.1em;\r\n      text-transform: uppercase;\r\n      margin-bottom: var(--space-5);\r\n    }\r\n    .footer__brand-desc {\r\n      font-size: var(--text-sm);\r\n      color: rgba(255,255,255,0.4);\r\n      line-height: 1.7;\r\n      max-width: 32ch;\r\n    }\r\n    .footer__col-title {\r\n      font-size: var(--text-xs);\r\n      font-weight: 700;\r\n      letter-spacing: 0.08em;\r\n      text-transform: uppercase;\r\n      color: rgba(255,255,255,0.5);\r\n      margin-bottom: var(--space-5);\r\n    }\r\n    .footer__links {\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: var(--space-3);\r\n      list-style: none;\r\n    }\r\n    .footer__links a {\r\n      font-size: var(--text-sm);\r\n      color: rgba(255,255,255,0.45);\r\n      transition: color var(--transition-interactive);\r\n    }\r\n    .footer__links a:hover { color: rgba(255,255,255,0.85); }\r\n    .footer__bottom {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: space-between;\r\n      gap: var(--space-4);\r\n      flex-wrap: wrap;\r\n    }\r\n    .footer__copy {\r\n      font-size: var(--text-xs);\r\n      color: rgba(255,255,255,0.3);\r\n    }\r\n    .footer__legal {\r\n      display: flex;\r\n      gap: var(--space-5);\r\n    }\r\n    .footer__legal a {\r\n      font-size: var(--text-xs);\r\n      color: rgba(255,255,255,0.3);\r\n      transition: color var(--transition-interactive);\r\n    }\r\n    .footer__legal a:hover { color: rgba(255,255,255,0.6); }\r\n    @media (max-width: 1000px) {\r\n      .footer__top { grid-template-columns: 1fr 1fr 1fr; }\r\n      .footer__brand { grid-column: 1 \/ -1; }\r\n    }\r\n    @media (max-width: 600px) {\r\n      .footer__top { grid-template-columns: 1fr 1fr; }\r\n    }\r\n      @media (max-width: 600px) {\r\n      \/* The nav CTA label is much longer in French: shrink it and drop the\r\n         secondary sign-in link so the burger button stays on screen. *\/\r\n      .nav__actions .btn--nav-cta { padding: 0.4rem 0.7rem; font-size: 0.7rem; }\r\n      .nav__actions .nav__signin { display: none; }\r\n      .nav__logo { font-size: 1.15rem; }\r\n      .nav__logo-icon { width: 26px; height: 26px; }\r\n      \/* Logo + CTA + burger and two 2rem gaps do not fit in 375px: tighten\r\n         the bar and the toggle so the burger stays inside the viewport. *\/\r\n      \/* `.nav .nav__inner` outranks the v3 rule that sets a 2rem gap later\r\n         in the stylesheet \u2014 a plain `.nav__inner` here would lose. *\/\r\n      .nav .nav__inner { gap: 0.5rem; }\r\n      .nav__actions .btn--nav-cta { padding: 0.35rem 0.6rem; font-size: 0.66rem; }\r\n      .nav__mobile-toggle { padding: 4px; }\r\n    }\r\n    \/* ============================\r\n       MEGA-MENU v2 \u2014 hierarchy, badges, mobile accordion\r\n    ============================ *\/\r\n    .megamenu { width: min(980px, 94vw); }\r\n    .megamenu__inner { padding: 26px 26px 0; gap: 0; }\r\n    .megamenu__col {\r\n      padding: 0 20px 22px;\r\n      border-right: 1px solid rgba(15,23,42,0.08);\r\n      display: flex;\r\n      flex-direction: column;\r\n    }\r\n    .megamenu__col:first-child { padding-left: 0; }\r\n    .megamenu__col:last-child { border-right: none; padding-right: 0; }\r\n\r\n    \/* Column title is a link to its hub page *\/\r\n    a.megamenu__col-label {\r\n      display: block;\r\n      font-size: 0.68rem;\r\n      font-weight: 800;\r\n      letter-spacing: 0.09em;\r\n      text-transform: uppercase;\r\n      color: var(--color-text-muted);\r\n      margin-bottom: 12px;\r\n      padding-bottom: 9px;\r\n      border-bottom: 1px solid rgba(15,23,42,0.07);\r\n      text-decoration: none;\r\n      transition: color 130ms ease, border-color 130ms ease;\r\n    }\r\n    a.megamenu__col-label:hover,\r\n    a.megamenu__col-label:focus-visible { color: var(--accent); border-color: rgba(79,70,229,0.35); }\r\n    a.megamenu__col-label:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }\r\n\r\n    .megamenu__items { display: flex; flex-direction: column; gap: 1px; }\r\n\r\n    \/* Featured entries: icon + label + one-line description *\/\r\n    .megamenu__item { padding: 8px 9px; gap: 10px; align-items: flex-start; }\r\n    .megamenu__item:hover,\r\n    .megamenu__item:focus-visible { background: rgba(79,70,229,0.07); }\r\n    .megamenu__item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }\r\n    .megamenu__item-icon { width: 28px; height: 28px; border-radius: 7px; }\r\n    .megamenu__item-label { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 0.8rem; }\r\n    .megamenu__item-desc {\r\n      font-size: 0.7rem;\r\n      line-height: 1.35;\r\n      color: var(--color-text-faint);\r\n      margin-top: 1px;\r\n      display: -webkit-box;\r\n      -webkit-line-clamp: 2;\r\n      -webkit-box-orient: vertical;\r\n      overflow: hidden;\r\n    }\r\n\r\n    \/* Compact secondary links *\/\r\n    .megamenu__links {\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: 0;\r\n      margin-top: 8px;\r\n      padding-top: 8px;\r\n      border-top: 1px solid rgba(15,23,42,0.05);\r\n    }\r\n    .megamenu__link {\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 6px;\r\n      padding: 6px 9px;\r\n      border-radius: 8px;\r\n      font-size: 0.78rem;\r\n      font-weight: 600;\r\n      color: var(--color-text-muted);\r\n      text-decoration: none;\r\n      transition: background 130ms ease, color 130ms ease;\r\n    }\r\n    .megamenu__link:hover,\r\n    .megamenu__link:focus-visible { background: rgba(79,70,229,0.07); color: var(--accent); }\r\n    .megamenu__link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }\r\n\r\n    \/* Column footer link *\/\r\n    .megamenu__col-cta {\r\n      margin-top: auto;\r\n      padding: 10px 9px 0;\r\n      font-size: 0.72rem;\r\n      font-weight: 700;\r\n      color: var(--accent);\r\n      text-decoration: none;\r\n      opacity: 0.85;\r\n      transition: opacity 130ms ease;\r\n    }\r\n    .megamenu__col-cta:hover, .megamenu__col-cta:focus-visible { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }\r\n    .megamenu__col-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }\r\n\r\n    \/* Badges *\/\r\n    .mm-badge {\r\n      font-size: 0.55rem;\r\n      font-weight: 800;\r\n      letter-spacing: 0.05em;\r\n      text-transform: uppercase;\r\n      padding: 2px 6px;\r\n      border-radius: var(--radius-full);\r\n      white-space: nowrap;\r\n      line-height: 1.4;\r\n    }\r\n    .mm-badge--new { background: rgba(79,70,229,0.12); color: var(--accent); }\r\n    .mm-badge--soon { background: var(--color-surface-2); color: var(--color-text-muted); }\r\n\r\n    \/* Menu footer *\/\r\n    .megamenu__footer { padding: 14px 26px; gap: 16px; flex-wrap: wrap; }\r\n    .megamenu__footer-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }\r\n    .megamenu__footer-link {\r\n      font-size: 0.78rem;\r\n      font-weight: 700;\r\n      color: var(--color-text-muted);\r\n      text-decoration: none;\r\n      transition: color 130ms ease;\r\n    }\r\n    .megamenu__footer-link:hover, .megamenu__footer-link:focus-visible { color: var(--accent); }\r\n    .megamenu__footer-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }\r\n\r\n    \/* ---- Mobile: the four columns become accordions ---- *\/\r\n    @media (max-width: 1000px) {\r\n      .megamenu {\r\n        display: block !important;\r\n        position: static;\r\n        width: 100%;\r\n        opacity: 1;\r\n        visibility: visible;\r\n        pointer-events: auto;\r\n        transform: none;\r\n        box-shadow: none;\r\n        border: none;\r\n        border-radius: 0;\r\n        margin-top: 8px;\r\n      }\r\n      .megamenu::after, .megamenu::before { display: none; }\r\n      .nav__item--mega:not(.mm-open) .megamenu { display: none !important; }\r\n      .megamenu__inner { display: block; padding: 0; }\r\n      .megamenu__col {\r\n        padding: 0;\r\n        border-right: none;\r\n        border-bottom: 1px solid var(--color-border);\r\n      }\r\n      a.megamenu__col-label {\r\n        position: relative;\r\n        margin-bottom: 0;\r\n        padding: 12px 30px 12px 4px;\r\n        border-bottom: none;\r\n        font-size: 0.72rem;\r\n        color: var(--color-text);\r\n      }\r\n      .megamenu__col-toggle {\r\n        position: absolute;\r\n        top: 50%;\r\n        right: 0;\r\n        transform: translateY(-50%);\r\n        width: 34px;\r\n        height: 34px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        border-radius: 8px;\r\n        color: var(--color-text-muted);\r\n        background: none;\r\n        border: none;\r\n        cursor: pointer;\r\n      }\r\n      .megamenu__col-toggle svg { transition: transform 180ms var(--ease-out); }\r\n      .megamenu__col-toggle[aria-expanded=\"true\"] svg { transform: rotate(180deg); }\r\n      .megamenu__col-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }\r\n      .megamenu__col-head { position: relative; }\r\n      .megamenu__col-body { display: none; padding-bottom: 12px; }\r\n      .megamenu__col-body.is-open { display: block; }\r\n      .megamenu__col-cta { margin-top: 6px; display: block; }\r\n      .megamenu__footer { flex-direction: column; align-items: flex-start; padding: 14px 4px; }\r\n    }\r\n    @media (prefers-reduced-motion: reduce) {\r\n      .megamenu__col-toggle svg { transition: none; }\r\n    }\r\n    \/* ============================================================\r\n       HEADER + MEGA-MENU v3 \u2014 sizing, contrast, panelled columns\r\n       ============================================================ *\/\r\n    :root {\r\n      --mm-ink:        #101828;   \/* feature titles          *\/\r\n      --mm-ink-soft:   #344054;   \/* nav links, footer links *\/\r\n      --mm-ink-label:  #475467;   \/* column titles           *\/\r\n      --mm-ink-desc:   #5F6C80;   \/* feature descriptions    *\/\r\n      --mm-arrow:      #98A2B3;   \/* column arrows at rest   *\/\r\n      --mm-panel-bg:   #FBFBFE;\r\n      --mm-panel-line: #EEF0F6;\r\n      --mm-tint:       #F4F3FF;   \/* hover wash on a standard entry *\/\r\n      --mm-tint-line:  #DDD9FE;\r\n      \/* Highlighted entries: a soft wash that reads as \"worth noticing\"\r\n         rather than \"currently selected\". Kept lighter than the hover\r\n         wash so hovering anything always darkens it. *\/\r\n      --mm-new-bg:     #F8F7FE;\r\n      --mm-new-line:   #ECEAFB;\r\n      --mm-new-hover:  #EFEDFD;\r\n      --mm-indigo-dk:  #3730A3;\r\n    }\r\n\r\n    \/* ---------- Primary navigation ---------- *\/\r\n    .nav__inner { height: 72px; gap: 2rem; }\r\n    .nav__logo { font-size: 1.65rem; }\r\n    .nav__logo-icon { width: 40px; height: 40px; }\r\n    .nav__logo-icon svg { width: 34px; height: 34px; }\r\n\r\n    .nav__links { gap: 30px; align-items: center; }\r\n    .nav__links > li { display: flex; align-items: center; }\r\n    .nav__links a {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      gap: 6px;\r\n      font-size: 15.5px;\r\n      font-weight: 600;\r\n      line-height: 1;\r\n      color: var(--mm-ink-soft);\r\n      padding: 8px 10px;\r\n      border-radius: 9px;\r\n      transition: color 140ms ease, background 140ms ease;\r\n    }\r\n    .nav__links a:hover { color: var(--accent); background: var(--mm-tint); }\r\n    .nav__links a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }\r\n    .nav__links a[aria-current=\"page\"], .nav__links a.nav__link--active { color: var(--mm-ink); }\r\n\r\n    \/* Product trigger: chevron aligned with the label, flips when open *\/\r\n    .nav__item--mega > a .mm-chevron,\r\n    .nav__item--mega > a::after { display: none; }\r\n    .nav__item--mega > a {\r\n      position: relative;\r\n      padding-right: 26px;\r\n    }\r\n    .nav__item--mega > a .mm-caret {\r\n      position: absolute;\r\n      right: 8px;\r\n      top: 50%;\r\n      width: 10px;\r\n      height: 10px;\r\n      margin-top: -5px;\r\n      transition: transform 160ms var(--ease-out);\r\n      pointer-events: none;\r\n    }\r\n    .nav__item--mega.mm-open > a {\r\n      background: var(--mm-tint);\r\n      color: var(--accent);\r\n    }\r\n    .nav__item--mega.mm-open > a .mm-caret { transform: rotate(180deg); }\r\n\r\n    \/* Sign in + primary CTA *\/\r\n    .nav__actions { gap: 14px; }\r\n    .nav__signin {\r\n      font-size: 15px;\r\n      font-weight: 600;\r\n      color: var(--mm-ink-soft);\r\n      padding: 8px 4px;\r\n    }\r\n    .nav__signin:hover { color: var(--accent); }\r\n    .nav__signin:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }\r\n    .btn--nav-cta {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      min-height: 43px;\r\n      padding: 0 1.4rem;\r\n      font-size: 15px;\r\n      font-weight: 600;\r\n      border-radius: 10px;\r\n    }\r\n    .btn--nav-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }\r\n\r\n    \/* ---------- Mega-menu shell ---------- *\/\r\n    .megamenu {\r\n      \/* The panel is anchored 48px from the viewport edge, so 96vw pushed its\r\n         right edge off-screen between 1001 and ~1195px and the whole page\r\n         gained a horizontal scrollbar. Reserving 48px on both sides keeps the\r\n         validated 1100px width everywhere above 1196px. *\/\r\n      width: min(1100px, calc(100vw - 96px));\r\n      border: 1px solid var(--mm-panel-line);\r\n      border-radius: 16px;\r\n      box-shadow: 0 4px 10px rgba(16,24,40,0.04), 0 18px 44px rgba(16,24,40,0.12);\r\n    }\r\n    .megamenu__inner {\r\n      display: grid;\r\n      grid-template-columns: repeat(4, 1fr);\r\n      gap: 14px;\r\n      padding: 18px;\r\n    }\r\n\r\n    \/* ---------- Columns as panels ---------- *\/\r\n    .megamenu__col {\r\n      background: var(--mm-panel-bg);\r\n      border: 1px solid var(--mm-panel-line);\r\n      border-radius: 12px;\r\n      padding: 16px 14px;\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: 10px;\r\n    }\r\n    a.megamenu__col-label {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      gap: 6px;\r\n      font-size: 0.72rem;\r\n      font-weight: 800;\r\n      letter-spacing: 0.07em;\r\n      text-transform: uppercase;\r\n      color: var(--mm-ink-label);\r\n      margin: 0 0 2px;\r\n      padding: 0 4px;\r\n      border-bottom: none;\r\n      text-decoration: none;\r\n    }\r\n    a.megamenu__col-label:hover { color: var(--accent); border-color: transparent; }\r\n    a.megamenu__col-label:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 5px; }\r\n    .mm-col-arrow {\r\n      flex-shrink: 0;\r\n      color: var(--mm-arrow);\r\n      transition: transform 160ms var(--ease-out), color 160ms ease;\r\n    }\r\n    a.megamenu__col-label:hover .mm-col-arrow { transform: translateX(3px); color: var(--accent); }\r\n\r\n    \/* No isolated accordion chevrons on desktop *\/\r\n    .megamenu__col-toggle { display: none; }\r\n    .megamenu__col-head { display: contents; }\r\n    .megamenu__col-body { display: contents; }\r\n\r\n    .megamenu__items { display: flex; flex-direction: column; gap: 3px; }\r\n\r\n    \/* ---------- One item component for every feature ----------\r\n       Every entry \u2014 highlighted or not \u2014 is a single anchor, so the whole\r\n       row is clickable, hoverable and focusable. The icon column, the gap\r\n       and the text column are identical everywhere, which is what puts all\r\n       the rows on one grid. *\/\r\n    .mm-item {\r\n      position: relative;\r\n      display: flex;\r\n      align-items: flex-start;\r\n      gap: 10px;\r\n      min-height: 52px;\r\n      padding: 9px 10px;\r\n      border: 1px solid transparent;\r\n      border-radius: 10px;\r\n      text-decoration: none;\r\n      color: inherit;\r\n      transition: background 140ms ease, border-color 140ms ease;\r\n    }\r\n    .mm-item:hover { background: var(--mm-tint); }\r\n    .mm-item:hover .mm-item__title { color: var(--mm-indigo-dk); }\r\n    .mm-item:hover .mm-item__icon { color: var(--accent); border-color: var(--mm-tint-line); }\r\n    .mm-item:focus-visible {\r\n      outline: 2px solid var(--accent);\r\n      outline-offset: -2px;\r\n      background: var(--mm-tint);\r\n      box-shadow: 0 0 0 3px rgba(79,70,229,0.16);\r\n    }\r\n    .mm-item__icon {\r\n      flex-shrink: 0;\r\n      width: 30px;\r\n      height: 30px;\r\n      border-radius: 8px;\r\n      background: #fff;\r\n      border: 1px solid var(--mm-panel-line);\r\n      color: var(--mm-ink-label);\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      margin-top: 1px;\r\n      transition: color 140ms ease, border-color 140ms ease;\r\n    }\r\n    .mm-item__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }\r\n    .mm-item__title {\r\n      display: -webkit-box;\r\n      -webkit-line-clamp: 2;\r\n      -webkit-box-orient: vertical;\r\n      overflow: hidden;\r\n      font-size: 0.855rem;\r\n      font-weight: 650;\r\n      line-height: 1.25;\r\n      color: var(--mm-ink);\r\n      transition: color 140ms ease;\r\n    }\r\n    .mm-item__desc {\r\n      font-size: 0.775rem;\r\n      line-height: 1.4;\r\n      color: var(--mm-ink-desc);\r\n      display: -webkit-box;\r\n      -webkit-line-clamp: 2;\r\n      -webkit-box-orient: vertical;\r\n      overflow: hidden;\r\n    }\r\n\r\n    \/* ---------- Badged entries ----------\r\n       The badge and the `--new` \/ `--soon` class are injected by\r\n       saalz-config.js from CONFIG.megamenuBadges; the markup ships without\r\n       them. These rules therefore have to work for any entry.\r\n\r\n       The badge floats to the top right of the title, so the first line of\r\n       the title flows beside it and the following line uses the full width.\r\n       The badge can therefore never sit alone under the title nor run under\r\n       the text, whatever the wording or the language \u2014 \"Nouveau\" reserves\r\n       more room than \"New\" without pushing the title onto a third line.\r\n\r\n       Title and description both reserve exactly two lines, so every badged\r\n       card ends up the same height with its icon, title, badge, description\r\n       and its top and bottom margins on the same lines. *\/\r\n    .mm-item--new,\r\n    .mm-item--soon { background: var(--mm-new-bg); border-color: var(--mm-new-line); }\r\n    .mm-item--new .mm-item__icon,\r\n    .mm-item--soon .mm-item__icon { color: var(--accent); border-color: var(--mm-new-line); }\r\n    .mm-item--new:hover,\r\n    .mm-item--soon:hover { background: var(--mm-new-hover); border-color: var(--mm-tint-line); }\r\n    .mm-item--new:focus-visible,\r\n    .mm-item--soon:focus-visible { background: var(--mm-new-hover); }\r\n\r\n    .mm-item--new .mm-item__title,\r\n    .mm-item--soon .mm-item__title {\r\n      display: block;\r\n      height: 2.5em;       \/* exactly two lines at line-height 1.25 *\/\r\n      overflow: hidden;\r\n    }\r\n    .mm-item--new .mm-item__desc,\r\n    .mm-item--soon .mm-item__desc { min-height: 2.8em; }  \/* two lines at line-height 1.4 *\/\r\n\r\n    \/* Kept deliberately compact \u2014 sentence case, no letter-spacing \u2014 because\r\n       the first word of the title has to fit beside it on line one and the\r\n       French wording (\"Nouveau\") is a third wider than the English one. *\/\r\n    .mm-badge {\r\n      float: right;\r\n      margin: 1px 0 0 6px;\r\n      font-size: 0.6rem;\r\n      font-weight: 800;\r\n      line-height: 1.45;\r\n      \/* Explicit: an earlier rule in the page still sets these. *\/\r\n      letter-spacing: 0;\r\n      text-transform: none;\r\n      padding: 1px 6px;\r\n      border-radius: var(--radius-full);\r\n      background: rgba(79,70,229,0.13);\r\n      color: var(--mm-indigo-dk);\r\n      white-space: nowrap;\r\n    }\r\n    .mm-badge--soon { background: #F2F4F7; color: var(--mm-ink-desc); }\r\n\r\n    \/* ---------- Footer ----------\r\n       The three actions stay on one row and keep their natural width; only\r\n       the sentence gives way, so the bar keeps a single baseline in French\r\n       as in English instead of breaking into two stacked rows. *\/\r\n    .megamenu__footer {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: space-between;\r\n      gap: 20px;\r\n      flex-wrap: nowrap;\r\n      padding: 9px 20px;\r\n      background: #fff;\r\n      border-top: 1px solid var(--mm-panel-line);\r\n    }\r\n    .megamenu__footer-text {\r\n      flex: 0 1 auto;\r\n      min-width: 0;\r\n      font-size: 0.82rem;\r\n      font-weight: 500;\r\n      line-height: 1.35;\r\n      color: var(--mm-ink-label);\r\n    }\r\n    .megamenu__footer-actions {\r\n      flex: 0 0 auto;\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 18px;\r\n      flex-wrap: nowrap;\r\n    }\r\n    .megamenu__footer-link {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      font-size: 0.82rem;\r\n      font-weight: 650;\r\n      line-height: 1.35;\r\n      color: var(--mm-ink-soft);\r\n      text-decoration: none;\r\n      transition: color 140ms ease;\r\n    }\r\n    .megamenu__footer-link:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }\r\n    .megamenu__footer-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 5px; }\r\n    .megamenu__footer-cta {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      min-height: 36px;\r\n      padding: 0 1.15rem;\r\n      font-size: 0.82rem;\r\n      font-weight: 700;\r\n      line-height: 1.35;\r\n      border-radius: 9px;\r\n    }\r\n\r\n    \/* ---------- Narrow desktop ----------\r\n       Between the accordion breakpoint and 1150px the shell is capped at\r\n       96vw, so the four columns get noticeably narrower and a long French\r\n       title stops fitting beside its badge. Tightening the shell spacing\r\n       gives the text back about twelve pixels per column. Nothing here\r\n       applies to the validated 1200px+ layout. *\/\r\n    @media (min-width: 1001px) and (max-width: 1195px) {\r\n      .megamenu__inner { padding: 12px; gap: 10px; }\r\n      .megamenu__col { padding: 14px 11px; }\r\n      .mm-item { padding: 9px 7px; }\r\n      \/* The columns get too narrow for a long French title to sit beside the\r\n         badge, so the badge takes its own line above the title instead of\r\n         squeezing \u2014 or worse, running under \u2014 the text. *\/\r\n      .mm-badge { float: none; display: inline-block; margin: 0 0 3px; padding: 1px 6px; }\r\n      .mm-item--new .mm-item__title,\r\n      .mm-item--soon .mm-item__title { height: auto; min-height: 3.6em; }\r\n      \/* A long French title can take a third line at the bottom of the band;\r\n         a common floor keeps the five cards identical there too. *\/\r\n      .mm-item--new,\r\n      .mm-item--soon { min-height: 7rem; }\r\n    }\r\n\r\n    \/* ---------- Tablet \/ mobile: accordions ---------- *\/\r\n    @media (max-width: 1000px) {\r\n      .nav__inner { height: 64px; }\r\n      .megamenu { width: 100%; border: none; box-shadow: none; border-radius: 0; }\r\n      .megamenu__inner { display: block; padding: 0; gap: 0; }\r\n      .megamenu__col {\r\n        background: transparent;\r\n        border: none;\r\n        border-bottom: 1px solid var(--color-border);\r\n        border-radius: 0;\r\n        padding: 0;\r\n        gap: 0;\r\n        display: block;\r\n      }\r\n      .megamenu__col-head { display: block; position: relative; }\r\n      a.megamenu__col-label {\r\n        display: flex;\r\n        width: 100%;\r\n        min-height: 48px;\r\n        align-items: center;\r\n        padding: 12px 44px 12px 4px;\r\n        font-size: 0.78rem;\r\n        color: var(--mm-ink);\r\n      }\r\n      .mm-col-arrow { display: none; }\r\n      .megamenu__col-toggle {\r\n        display: flex;\r\n        position: absolute;\r\n        top: 50%;\r\n        right: 0;\r\n        transform: translateY(-50%);\r\n        width: 44px;\r\n        height: 44px;\r\n        align-items: center;\r\n        justify-content: center;\r\n        border: none;\r\n        background: none;\r\n        border-radius: 9px;\r\n        color: var(--mm-ink-label);\r\n        cursor: pointer;\r\n      }\r\n      .megamenu__col-toggle svg { transition: transform 180ms var(--ease-out); }\r\n      .megamenu__col-toggle[aria-expanded=\"true\"] svg { transform: rotate(180deg); }\r\n      .megamenu__col-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }\r\n      .megamenu__col-body { display: none; padding-bottom: 10px; }\r\n      .megamenu__col-body.is-open { display: block; }\r\n      .mm-item { min-height: 48px; }\r\n      \/* One column: rows already share a width, so the reserved two-line\r\n         slots would only add dead space. *\/\r\n      .mm-item--new .mm-item__title,\r\n      .mm-item--soon .mm-item__title { height: auto; min-height: 0; }\r\n      .mm-item--new .mm-item__desc,\r\n      .mm-item--soon .mm-item__desc { min-height: 0; }\r\n      .megamenu__footer { flex-direction: column; align-items: flex-start; flex-wrap: wrap; padding: 14px 4px; }\r\n      .megamenu__footer-actions { flex-wrap: wrap; }\r\n    }\r\n    @media (prefers-reduced-motion: reduce) {\r\n      .mm-col-arrow,\r\n      .megamenu__col-toggle svg,\r\n      .nav__item--mega > a .mm-caret,\r\n      .nav__links a,\r\n      .mm-item,\r\n      .mm-item__icon,\r\n      .mm-item__title,\r\n      .megamenu__footer-link { transition: none; }\r\n    }\r\n    \/* ============================================================\r\n       LEGAL DOCUMENT \u2014 long-form reading layout\r\n       ============================================================ *\/\r\n    .legal-hero {\r\n      padding: calc(var(--space-8) + 40px) 0 var(--space-5);\r\n      background: linear-gradient(180deg, #F8F9FC 0%, #FFFFFF 100%);\r\n      border-bottom: 1px solid var(--color-border);\r\n    }\r\n    .legal-hero__inner { max-width: 800px; margin: 0 auto; padding: 0 var(--space-4); }\r\n    .legal-crumbs {\r\n      display: flex; align-items: center; flex-wrap: wrap; gap: 6px;\r\n      font-size: 0.82rem; color: #5F6C80; margin-bottom: var(--space-3);\r\n    }\r\n    .legal-crumbs a { color: #5F6C80; text-decoration: none; }\r\n    .legal-crumbs a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }\r\n    .legal-crumbs span[aria-current] { color: #101828; font-weight: 600; }\r\n    .legal-crumbs svg { flex-shrink: 0; color: #98A2B3; }\r\n    .legal-hero h1 {\r\n      font-size: clamp(1.7rem, 3.4vw, 2.4rem);\r\n      font-weight: 800; letter-spacing: -0.02em; line-height: 1.15;\r\n      color: #101828; margin: 0 0 var(--space-2); text-wrap: balance;\r\n    }\r\n    .legal-meta { font-size: 0.87rem; color: #5F6C80; margin: 0; }\r\n\r\n    .legal-doc { padding: var(--space-6) 0 var(--space-8); background: #fff; }\r\n    .legal-doc__inner { max-width: 800px; margin: 0 auto; padding: 0 var(--space-4); }\r\n\r\n    \/* The document body is injected verbatim from the source, so these\r\n       rules target bare tags rather than classes. *\/\r\n    .legal-doc__body { color: #384456; font-size: 1rem; line-height: 1.72; }\r\n    .legal-doc__body h1 {\r\n      font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; letter-spacing: -0.02em;\r\n      color: #101828; margin: var(--space-6) 0 var(--space-3); line-height: 1.2;\r\n    }\r\n    .legal-doc__body h1:first-child { margin-top: 0; }\r\n    .legal-doc__body h2 {\r\n      font-size: 1.28rem; font-weight: 750; letter-spacing: -0.01em; color: #101828;\r\n      margin: var(--space-6) 0 var(--space-2); line-height: 1.3;\r\n      padding-bottom: 8px; border-bottom: 1px solid #EEF0F6;\r\n    }\r\n    .legal-doc__body h3 {\r\n      font-size: 1.06rem; font-weight: 700; color: #1D2939;\r\n      margin: var(--space-5) 0 var(--space-2); line-height: 1.35;\r\n    }\r\n    .legal-doc__body h4 {\r\n      font-size: 0.97rem; font-weight: 700; color: #344054;\r\n      margin: var(--space-4) 0 var(--space-1);\r\n    }\r\n    .legal-doc__body p { margin: 0 0 var(--space-3); }\r\n    .legal-doc__body ul, .legal-doc__body ol { margin: 0 0 var(--space-3); padding-left: 1.4rem; }\r\n    .legal-doc__body li { margin-bottom: 0.45rem; }\r\n    .legal-doc__body strong { color: #101828; font-weight: 650; }\r\n    .legal-doc__body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }\r\n    .legal-doc__body a:hover { color: var(--mm-indigo-dk, #3730A3); }\r\n    .legal-doc__body a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }\r\n    .legal-doc__body hr { border: 0; border-top: 1px solid #EEF0F6; margin: var(--space-5) 0; }\r\n\r\n    \/* Wide tables scroll inside their own box, never the page. *\/\r\n    .legal-doc__body .table-scroll { overflow-x: auto; margin: 0 0 var(--space-4); }\r\n    .legal-doc__body table {\r\n      width: 100%; border-collapse: collapse; font-size: 0.88rem; min-width: 480px;\r\n    }\r\n    .legal-doc__body th, .legal-doc__body td {\r\n      text-align: left; padding: 10px 12px; border: 1px solid #EEF0F6; vertical-align: top;\r\n    }\r\n    .legal-doc__body th { background: #FBFBFE; font-weight: 700; color: #101828; }\r\n    .legal-doc__body tbody tr:nth-child(even) td { background: #FCFCFD; }\r\n\r\n    .legal-back {\r\n      display: inline-flex; align-items: center; gap: 7px;\r\n      margin-top: var(--space-6); padding: 10px 16px;\r\n      border: 1px solid var(--color-border); border-radius: var(--radius-full);\r\n      font-size: 0.88rem; font-weight: 650; color: #344054; text-decoration: none;\r\n      transition: border-color 140ms ease, color 140ms ease;\r\n    }\r\n    .legal-back:hover { border-color: #C7C3F7; color: var(--accent); }\r\n    .legal-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }\r\n\r\n    @media (max-width: 700px) {\r\n      .legal-hero { padding: calc(var(--space-6) + 32px) 0 var(--space-4); }\r\n      .legal-doc__body { font-size: 0.97rem; }\r\n    }\r\n  <\/style>\r\n  \r\n  <section class=\"legal-hero\">\r\n    <div class=\"legal-hero__inner\">\r\n      <nav class=\"legal-crumbs\" aria-label=\"Fil d'Ariane\">\r\n        <a href=\"\/trust\">Trust Center<\/a>\r\n        <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" aria-hidden=\"true\"><path d=\"M4.5 2.5L8 6l-3.5 3.5\"\/><\/svg>\r\n        <span aria-current=\"page\">DPA<\/span>\r\n      <\/nav>\r\n      <h1>DPA<\/h1>\r\n      \r\n    <\/div>\r\n  <\/section>\r\n\r\n  <section class=\"legal-doc\">\r\n    <div class=\"legal-doc__inner\">\r\n      <div class=\"legal-doc__body\">\r\n<p>01 Juin 2025<\/p>\r\n\r\n\r\n\r\n<h2>ACCORD DE TRAITEMENT DES DONN\u00c9ES<\/h2>\r\n\r\n<h2>Entre les parties :<\/h2>\r\n\r\n<ul>\r\n<li>\r\n\r\n\r\n<strong>Le Client :<\/strong> Responsable du traitement des donn\u00e9es\r\n<\/li>\r\n<li>\r\n\r\n\r\n<strong>Saalz (SaaS CRM), <\/strong> exploit\u00e9 par la soci\u00e9t\u00e9 SITENCO (\"Sous-traitant\")\r\n<\/li>\r\n<\/ul>\r\n\r\n<h2>Pr\u00e9ambule<\/h2>\r\n\r\n<p>Le pr\u00e9sent accord vise \u00e0 assurer la conformit\u00e9 des traitements de donn\u00e9es personnelles r\u00e9alis\u00e9s par Saalz pour le compte du Client, conform\u00e9ment aux articles 28.3 et 28.4 du R\u00e8glement (UE) 2016\/679 (RGPD).<\/p>\r\n\r\n<h2>1. OBJET DU CONTRAT<\/h2>\r\n\r\n<p>Ce contrat encadre les traitements de donn\u00e9es personnelles r\u00e9alis\u00e9s par Saalz pour le Client, dans le cadre de l\u2019utilisation de la plateforme CRM Saalz.<\/p>\r\n\r\n<h2>2. DESCRIPTION DU TRAITEMENT<\/h2>\r\n\r\n<ul>\r\n<li>\r\n\r\n\r\n<strong>Cat\u00e9gories de personnes concern\u00e9es :<\/strong> prospects et clients du Client (professionnels B2B).\r\n<\/li>\r\n<li>\r\n\r\n\r\n<strong>Cat\u00e9gories de donn\u00e9es trait\u00e9es :<\/strong> nom, pr\u00e9nom, email professionnel, num\u00e9ro de t\u00e9l\u00e9phone, poste occup\u00e9, soci\u00e9t\u00e9, donn\u00e9es publiques issues de LinkedIn et de sources publiques.\r\n<\/li>\r\n<li>\r\n\r\n\r\n<strong>Nature des traitements :<\/strong> enrichissement de donn\u00e9es, stockage temporaire, gestion de la relation client et prospection commerciale.\r\n<\/li>\r\n<li>\r\n\r\n\r\n<strong>Finalit\u00e9s :<\/strong> permettre au Client de g\u00e9rer ses op\u00e9rations de prospection et de relation client.\r\n<\/li>\r\n<li>\r\n\r\n\r\n<strong>Dur\u00e9e de conservation des donn\u00e9es :<\/strong> pendant la dur\u00e9e contractuelle et jusqu\u2019\u00e0 12 mois apr\u00e8s la r\u00e9siliation, sauf obligations l\u00e9gales contraires.\r\n<\/li>\r\n<\/ul>\r\n\r\n<h2>3. INSTRUCTIONS DOCUMENT\u00c9ES DU CLIENT<\/h2>\r\n\r\n<p>Saalz agit exclusivement sur instructions document\u00e9es du Client, sauf si une disposition du droit de l\u2019Union ou du droit fran\u00e7ais l\u2019y oblige. Dans ce cas, Saalz informera le Client de cette obligation, sauf interdiction l\u00e9gale.<\/p>\r\n\r\n<p>Saalz informera le Client si, selon lui, une instruction constitue une violation du RGPD ou d\u2019une autre r\u00e9glementation applicable.<\/p>\r\n\r\n<h2>4. S\u00c9CURIT\u00c9 DU TRAITEMENT<\/h2>\r\n\r\n<p>Saalz met en \u0153uvre des mesures techniques et organisationnelles adapt\u00e9es afin de garantir la confidentialit\u00e9, l\u2019int\u00e9grit\u00e9, la disponibilit\u00e9 et la r\u00e9silience des syst\u00e8mes et des donn\u00e9es (d\u00e9taill\u00e9es en Annexe 1).<\/p>\r\n\r\n<p>L\u2019acc\u00e8s aux donn\u00e9es est strictement limit\u00e9 aux collaborateurs habilit\u00e9s et soumis \u00e0 un engagement de confidentialit\u00e9.<\/p>\r\n\r\n<h2>5. DOCUMENTATION &amp; AUDIT<\/h2>\r\n\r\n<p>Saalz tient \u00e0 la disposition du Client l\u2019ensemble des informations n\u00e9cessaires \u00e0 la d\u00e9monstration de la conformit\u00e9 aux obligations pr\u00e9vues au pr\u00e9sent contrat.<\/p>\r\n\r\n<p>Sur demande motiv\u00e9e et en cas d\u2019indice s\u00e9rieux de non-conformit\u00e9, le Client pourra auditer les traitements r\u00e9alis\u00e9s, directement ou par un auditeur ind\u00e9pendant, avec un pr\u00e9avis de 30 jours. Ces audits seront r\u00e9alis\u00e9s durant les horaires ouvrables, dans des limites raisonnables de fr\u00e9quence.<\/p>\r\n\r\n<p>Saalz s\u2019engage \u00e0 collaborer avec les autorit\u00e9s de contr\u00f4le en cas de demande.<\/p>\r\n\r\n<h2>6. SOUS-TRAITANCE ULTERIEURE<\/h2>\r\n\r\nSaalz b\u00e9n\u00e9ficie d\u2019une autorisation g\u00e9n\u00e9rale pour faire appel \u00e0 des sous-traitants <a href=\"\/liste-sous-traitants\/\">(cf. liste des sous-traitants tenue \u00e0 jour).<\/a>\r\n\r\n<p>Saalz informera le Client de toute modification au moins 8 jours avant l\u2019ajout d\u2019un nouveau sous-traitant, afin de permettre au Client de formuler une objection motiv\u00e9e. \u00c0 d\u00e9faut d\u2019objection dans ce d\u00e9lai, le nouveau sous-traitant sera r\u00e9put\u00e9 accept\u00e9.<\/p>\r\n\r\n<p>Saalz impose contractuellement aux sous-traitants des engagements de protection des donn\u00e9es \u00e9quivalents \u00e0 ceux pr\u00e9vus dans le pr\u00e9sent DPA.<\/p>\r\n\r\n<h2>7. TRANSFERTS INTERNATIONAUX DE DONN\u00c9ES<\/h2>\r\n\r\n<p>Les donn\u00e9es sont h\u00e9berg\u00e9es au sein de l\u2019Union Europ\u00e9enne (Hetzner Cloud, Allemagne). Certains sous-traitants peuvent traiter ponctuellement des donn\u00e9es hors UE sous couvert de clauses contractuelles types (SCC) approuv\u00e9es par la Commission Europ\u00e9enne.<\/p>\r\n\r\n<p>Aucun transfert hors UE n\u2019est r\u00e9alis\u00e9 sans encadrement juridique conforme au RGPD (Chapitre V).<\/p>\r\n\r\n<h2>8. ASSISTANCE AU CLIENT<\/h2>\r\n\r\n<p>Saalz assiste le Client :<\/p>\r\n\r\n<ul>\r\n<li>\r\n\r\n\r\n<p>dans la gestion des demandes d\u2019exercice des droits (acc\u00e8s, rectification, opposition, suppression, limitation, portabilit\u00e9) des personnes concern\u00e9es ;<\/p>\r\n<\/li>\r\n<li>\r\n\r\n\r\n<p>en cas d\u2019analyse d\u2019impact relative \u00e0 la protection des donn\u00e9es (PIA\/DPIA) lorsque les traitements le n\u00e9cessitent ;<\/p>\r\n<\/li>\r\n<li>\r\n\r\n\r\n<p>pour toute consultation pr\u00e9alable \u00e9ventuelle aupr\u00e8s de la CNIL.<\/p>\r\n<\/li>\r\n<\/ul>\r\n\r\n<p>Les demandes d\u2019exercice de droits re\u00e7ues directement par Saalz seront syst\u00e9matiquement transmises au Client, sauf accord sp\u00e9cifique.<\/p>\r\n\r\n<h2>9. VIOLATIONS DE DONN\u00c9ES<\/h2>\r\n\r\n<p>En cas de violation de donn\u00e9es personnelles, Saalz en informera le Client sans d\u00e9lai indu apr\u00e8s en avoir pris connaissance.<\/p>\r\n\r\n<p>La notification comportera notamment :<\/p>\r\n\r\n<ul>\r\n<li>\r\n\r\n\r\n<p>la description de la nature de la violation,<\/p>\r\n<\/li>\r\n<li>\r\n\r\n\r\n<p>le nombre approximatif de personnes concern\u00e9es,<\/p>\r\n<\/li>\r\n<li>\r\n\r\n\r\n<p>les cons\u00e9quences probables,<\/p>\r\n<\/li>\r\n<li>\r\n\r\n\r\n<p>les mesures prises pour rem\u00e9dier \u00e0 l\u2019incident.<\/p>\r\n<\/li>\r\n<\/ul>\r\n\r\n<p>Lorsque toutes les informations ne sont pas imm\u00e9diatement disponibles, Saalz fournira les \u00e9l\u00e9ments progressivement au fur et \u00e0 mesure de leur obtention.<\/p>\r\n\r\n<h2>10. SORT DES DONN\u00c9ES EN FIN DE CONTRAT<\/h2>\r\n\r\n<p>A l\u2019expiration du contrat, les donn\u00e9es du Client sont conserv\u00e9es pendant une p\u00e9riode de 12 mois pour permettre une r\u00e9activation \u00e9ventuelle.<\/p>\r\n\r\n<p>Pass\u00e9 ce d\u00e9lai, les donn\u00e9es sont supprim\u00e9es de fa\u00e7on d\u00e9finitive, sauf obligations l\u00e9gales contraires. Les sauvegardes suivent la m\u00eame politique d\u2019effacement diff\u00e9r\u00e9.<\/p>\r\n\r\n<h2>11. RESPONSABILIT\u00c9 ET LIMITATION<\/h2>\r\n\r\n<p>Le Client reste responsable de la lic\u00e9it\u00e9 des donn\u00e9es collect\u00e9es et trait\u00e9es via Saalz. Saalz agit uniquement en qualit\u00e9 de sous-traitant technique.<\/p>\r\n\r\n<p>En cas de non-respect grave et r\u00e9p\u00e9t\u00e9 des obligations du pr\u00e9sent contrat par l\u2019une des parties, l\u2019autre partie pourra suspendre ou r\u00e9silier l\u2019accord.<\/p>\r\n\r\n<h2>12. DROIT APPLICABLE ET JURIDICTION<\/h2>\r\n\r\n<p>Le pr\u00e9sent accord est r\u00e9gi par le droit fran\u00e7ais. Tout litige sera de la comp\u00e9tence exclusive des tribunaux du ressort du si\u00e8ge social de SITENCO.<\/p>\r\n\r\n<h2>ANNEXE 1 \u2014 MESURES TECHNIQUES ET ORGANISATIONNELLES DE S\u00c9CURIT\u00c9<\/h2>\r\n\r\n<ul>\r\n<li>\r\n\r\n\r\n<strong>Chiffrement des donn\u00e9es<\/strong> : chiffrement SSL\/TLS des communications, chiffrement AES des donn\u00e9es au repos, hachage Bcrypt des mots de passe.\r\n<\/li>\r\n<li>\r\n\r\n\r\n<strong>Infrastructure cloisonn\u00e9e<\/strong> : serveurs isol\u00e9s sur cloud Hetzner (Allemagne), VPC s\u00e9curis\u00e9.\r\n<\/li>\r\n<li>\r\n\r\n\r\n<strong>Contr\u00f4le d\u2019acc\u00e8s<\/strong> : authentification forte, gestion des r\u00f4les RBAC, contr\u00f4le des acc\u00e8s internes avec tra\u00e7abilit\u00e9.\r\n<\/li>\r\n<li>\r\n\r\n\r\n<strong>Journalisation et logs<\/strong> : enregistrement des acc\u00e8s et actions critiques, conservation des logs 12 mois.\r\n<\/li>\r\n<li>\r\n\r\n\r\n<strong>Backups<\/strong> : sauvegardes quotidiennes s\u00e9curis\u00e9es, r\u00e9tention limit\u00e9e, tests r\u00e9guliers de restauration.\r\n<\/li>\r\n<li>\r\n\r\n\r\n<strong>Monitoring et d\u00e9tection d\u2019intrusion<\/strong> : surveillance proactive, alertes en cas d\u2019activit\u00e9 suspecte.\r\n<\/li>\r\n<li>\r\n\r\n\r\n<strong>Tests et audits internes<\/strong> : tests de s\u00e9curit\u00e9 r\u00e9currents sur les mises \u00e0 jour applicatives.\r\n<\/li>\r\n<li>\r\n\r\n\r\n<strong>Conformit\u00e9 des sous-traitants<\/strong> : s\u00e9lection de fournisseurs conformes RGPD et engagement contractuel renforc\u00e9.\r\n<\/li>\r\n<\/ul>\r\n      <\/div>\r\n      <a class=\"legal-back\" href=\"\/trust\">\r\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" aria-hidden=\"true\"><path d=\"M8.5 3L5 7l3.5 4\"\/><\/svg>\r\n        Retour au Trust Center\r\n      <\/a>\r\n    <\/div>\r\n  <\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Trust Center DPA DPA 01 Juin 2025 ACCORD DE TRAITEMENT DES DONN\u00c9ES Entre les parties : Le Client : Responsable du traitement des donn\u00e9es Saalz (SaaS CRM), exploit\u00e9 par la soci\u00e9t\u00e9 SITENCO (\u00ab\u00a0Sous-traitant\u00a0\u00bb) Pr\u00e9ambule Le pr\u00e9sent accord vise \u00e0 assurer la conformit\u00e9 des traitements de donn\u00e9es personnelles r\u00e9alis\u00e9s par Saalz pour le compte du Client, &hellip; <a href=\"https:\/\/saalz.com\/fr\/dpa\/\" class=\"more-link\">Continuer la lecture de <span class=\"screen-reader-text\">DPA<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"full-width-new.php","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-9127","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/saalz.com\/fr\/wp-json\/wp\/v2\/pages\/9127","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/saalz.com\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/saalz.com\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/saalz.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/saalz.com\/fr\/wp-json\/wp\/v2\/comments?post=9127"}],"version-history":[{"count":121,"href":"https:\/\/saalz.com\/fr\/wp-json\/wp\/v2\/pages\/9127\/revisions"}],"predecessor-version":[{"id":13969,"href":"https:\/\/saalz.com\/fr\/wp-json\/wp\/v2\/pages\/9127\/revisions\/13969"}],"wp:attachment":[{"href":"https:\/\/saalz.com\/fr\/wp-json\/wp\/v2\/media?parent=9127"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}