/* Stacking cards - transition de scale sur les cartes enfouies */
    .service-card {
      will-change: transform;
    }

    /* ============================================
       RESET & CSS VARIABLES
    ============================================= */
    *,
    *::before,
    *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    :root {
      /* --- Palette Brannity --- */
      --navy: #0B1B3D;
      /* Retour au bleu logo original */
      --royal: #1A53FF;
      --electric: #00D4FF;
      --white: #FFFFFF;
      --off-white: #F8FAFF;

      /* --- Palette dérivée pour mode CLAIR --- */
      --text-main: #000000;
      --text-muted: #1a1a1a;
      /* Très sombre pour un contraste maximal style Yumcall */
      --bg-white: var(--white);
      --navbar-bg: rgba(255, 255, 255, 0.9);
      --electric-soft: rgba(0, 212, 255, 0.08);
      --royal-soft: rgba(26, 83, 255, 0.05);
      --border-light: rgba(11, 27, 61, 0.08);

      /* --- Typographie --- */
      --font-display: 'Satoshi', sans-serif;
      --font-body: 'Satoshi', sans-serif;

      /* --- Navbar --- */
      --navbar-height: 72px;

      /* --- Layout --- */
      --container-width: 1200px;
      --container-padding: 48px;
    }

    .container {
      max-width: var(--container-width);
      margin: 0 auto;
      padding: 0 var(--container-padding);
      width: 100%;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: var(--font-body);
      background-color: var(--bg-white);
      color: var(--text-main);
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
      font-size: 18px;
      line-height: 1.7;
    }

    a {
      text-decoration: none;
      color: inherit;
    }

    ul {
      list-style: none;
    }

    ul {
      list-style: none;
    }

    /* ============================================
       NAVBAR
    ============================================= */
    .navbar {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 72px;
      z-index: 100;
      background: transparent;
      backdrop-filter: blur(0px);
      -webkit-backdrop-filter: blur(0px);
      border-bottom: 1px solid transparent;
      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      /* Initial state for js animation */
      opacity: 0;
    }

    .navbar.navbar--scrolled {
      background: rgba(255, 255, 255, 0.85);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-bottom: 1px solid rgba(11, 27, 61, 0.06);
      height: 64px;
      /* Slightly thinner when scrolled */
    }

    .navbar .container {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    /* --- Logo Navbar --- */
    .navbar__logo {
      display: flex;
      align-items: center;
      height: 100%;
      z-index: 1001;
    }

    .navbar__logo img {
      max-width: 130px;
      height: auto;
      object-fit: contain;
      transition: filter 0.3s ease;
    }

    /* --- Navigation links --- */
    .navbar__links {
      display: flex;
      align-items: center;
      gap: 36px;
      margin: 0;
      padding: 0;
    }

    .navbar__links a {
      font-size: 16px;
      font-weight: 500;
      color: var(--text-main);
      transition: color 0.2s ease;
      display: inline-flex;
      align-items: center;
    }

    .nav-flip {
      display: inline-block;
      height: 1.2em;
      overflow: hidden;
      position: relative;
    }

    .nav-flip-inner {
      display: flex;
      flex-direction: column;
      transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .navbar__links a:hover .nav-flip-inner {
      transform: translateY(-50%);
    }

    .nav-flip-top,
    .nav-flip-bottom {
      display: block;
      height: 1.2em;
      line-height: 1.2em;
      white-space: nowrap;
    }

    .nav-flip-bottom {
      color: #1A53FF;
    }

    .navbar__links a:hover {
      color: #1A53FF;
    }

    /* --- CTA Button --- */
    .navbar__actions {
      display: flex;
      align-items: center;
      z-index: 1001;
    }

    .navbar__cta {
      font-family: var(--font-body);
      font-size: 15px;
      font-weight: 500;
      color: #FFFFFF;
      background: #1A53FF;
      border: none;
      border-radius: 7px;
      padding: 0;
      cursor: pointer;
      box-shadow: none;
      transition: all 0.2s ease;
      overflow: hidden;
      position: relative;
    }

    .navbar__cta:hover {
      background: #0B1B3D;
    }

    .navbar__cta .cta-text-top,
    .navbar__cta .cta-text-bottom {
      padding: 10px 22px;
    }

    .navbar__cta:hover .cta-flip-inner {
      transform: translateY(-100%);
    }

    /* --- Mobile Hamburger Menu --- */
    .navbar__hamburger {
      display: none;
      background: none;
      border: none;
      cursor: pointer;
      width: 24px;
      height: 24px;
      position: relative;
      margin-left: 20px;
    }

    .navbar__hamburger span {
      display: block;
      width: 100%;
      height: 2px;
      background: #0B1B3D;
      position: absolute;
      left: 0;
      transition: all 0.3s ease;
    }

    .navbar__hamburger span:nth-child(1) {
      top: 4px;
    }

    .navbar__hamburger span:nth-child(2) {
      top: 11px;
    }

    .navbar__hamburger span:nth-child(3) {
      top: 18px;
    }

    .navbar__hamburger.open span:nth-child(1) {
      top: 11px;
      transform: rotate(45deg);
      background: var(--navy);
    }

    .navbar__hamburger.open span:nth-child(2) {
      opacity: 0;
    }

    .navbar__hamburger.open span:nth-child(3) {
      top: 11px;
      transform: rotate(-45deg);
      background: var(--navy);
    }

    /* Navigation Onglets Tarifs */
    .tarifs-nav-container {
      position: relative;
      max-width: 800px;
      margin: 0 auto 40px;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .tarifs-nav {
      display: flex;
      gap: 12px;
      overflow-x: auto;
      scroll-behavior: smooth;
      scrollbar-width: none; /* Firefox */
      -ms-overflow-style: none; /* IE/Edge */
      padding: 4px;
      flex: 1;
    }

    .tarifs-nav::-webkit-scrollbar {
      display: none; /* Chrome/Safari */
    }

    .nav-arrow {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: #fff;
      border: 1px solid rgba(11, 27, 61, 0.08);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: var(--text-main);
      transition: all 0.3s ease;
      flex-shrink: 0;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }

    .nav-arrow:hover {
      background: var(--primary);
      color: #fff;
      border-color: var(--primary);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(26, 83, 255, 0.2);
    }

    .nav-arrow svg {
      width: 18px;
      height: 18px;
    }
    
    @media (min-width: 769px) {
      .nav-arrow {
        display: none;
      }
      .tarifs-nav {
        justify-content: center;
      }
    }

    /* ============================================
       HERO SECTION
    ============================================= */
    .hero {
      position: relative;
      width: 100%;
      height: 100vh;
      min-height: 100vh;
      overflow: hidden;
    }

    .hero__bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      overflow: hidden;
    }

    .hero__bg video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .hero .container {
      position: relative;
      z-index: 2;
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      text-align: center;
    }

    .hero__content {
      position: relative;
      max-width: 980px;
      width: 100%;
      margin: 0 auto;
      padding-top: 130px;
    }

    /* --- Hero Aurora --- */
    .hero__aura {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      overflow: hidden;
    }

    /* Overlay léger �?" laisse les blobs et la vidéo respirer */
    .hero__aura::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 2;
      background: linear-gradient(180deg,
          rgba(245, 248, 255, 0.55) 0%,
          rgba(245, 248, 255, 0.20) 40%,
          rgba(245, 248, 255, 0) 60%);
    }

    @keyframes aura-drift-1 {

      0%,
      100% {
        transform: translate(0, 0) scale(1);
      }

      40% {
        transform: translate(50px, -35px) scale(1.12);
      }

      75% {
        transform: translate(-30px, 20px) scale(0.94);
      }
    }

    @keyframes aura-drift-2 {

      0%,
      100% {
        transform: translate(0, 0) scale(1);
      }

      33% {
        transform: translate(-55px, 28px) scale(1.08);
      }

      70% {
        transform: translate(35px, -18px) scale(0.96);
      }
    }

    @keyframes aura-drift-3 {

      0%,
      100% {
        transform: translate(-50%, 0) scale(1);
      }

      50% {
        transform: translate(-50%, 40px) scale(1.14);
      }
    }

    .aura-blob {
      position: absolute;
      border-radius: 50%;
      filter: blur(110px);
    }

    /* Bleu royal �?" gauche */
    .aura-blob--1 {
      width: 700px;
      height: 560px;
      background: radial-gradient(circle, rgba(26, 83, 255, 0.48) 0%, rgba(26, 83, 255, 0.12) 50%, transparent 70%);
      top: -180px;
      left: -12%;
      opacity: 1;
      animation: aura-drift-1 16s ease-in-out infinite;
    }

    /* Cyan �?" droite */
    .aura-blob--2 {
      width: 580px;
      height: 480px;
      background: radial-gradient(circle, rgba(0, 195, 255, 0.42) 0%, rgba(0, 195, 255, 0.10) 50%, transparent 70%);
      top: -140px;
      right: -8%;
      opacity: 1;
      animation: aura-drift-2 20s ease-in-out infinite;
    }

    /* Indigo doux �?" centre-haut */
    .aura-blob--3 {
      width: 500px;
      height: 420px;
      background: radial-gradient(circle, rgba(108, 86, 255, 0.30) 0%, rgba(108, 86, 255, 0.06) 50%, transparent 70%);
      top: 20px;
      left: 50%;
      opacity: 1;
      animation: aura-drift-3 26s ease-in-out infinite;
    }

    /* --- Main title --- */
    .hero__title {
      font-family: var(--font-display);
      font-size: clamp(36px, 4.5vw, 64px);
      /* Retour taille précédente */
      font-weight: 700;
      /* Bold style */
      line-height: 1.15;
      color: var(--text-main);
      letter-spacing: -0.035em;
      /* Tighter look comme Yumcall */
      margin: 0 auto 18px;
      max-width: 950px;
      text-align: center;
      white-space: normal;
      opacity: 0;
      transform: translateY(-20px);
    }

    .hero__title span.gradient {
      background: linear-gradient(135deg, #1A53FF, #00D4FF);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      display: inline-block;
    }

    /* --- Subtitle --- */
    .hero__subtitle {
      font-size: 19px;
      color: var(--text-muted);
      font-weight: 500;
      /* Plus épais comme Yumcall */
      line-height: 1.6;
      margin: 0 0 16px 0;
      opacity: 0;
      transform: translateY(-16px);
    }

    /* --- Services List --- */
    .hero__services-list {
      display: flex;
      justify-content: center;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 32px;
      opacity: 0;
      transform: translateY(-12px);
    }

    .service-pill {
      background: rgba(255, 255, 255, 0.90);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border: 1.5px solid rgba(11, 27, 61, 0.14);
      box-shadow: 0 2px 10px rgba(11, 27, 61, 0.10);
      border-radius: 30px;
      padding: 4px 12px 4px 4px;
      font-size: 14px;
      color: var(--text-main);
      font-weight: 600;
      letter-spacing: 0.01em;
      transition: all 0.3s ease;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      text-decoration: none;
    }

    .pill-icon-box {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: rgba(26, 83, 255, 0.10);
      color: #1A53FF;
      transition: all 0.3s ease;
    }

    .pill-icon-box svg {
      width: 12px;
      height: 12px;
    }

    .service-pill:hover {
      background: #FFFFFF;
      border-color: rgba(26, 83, 255, 0.35);
      box-shadow: 0 4px 16px rgba(26, 83, 255, 0.12);
      color: #1A53FF;
    }

    .service-pill:hover .pill-icon-box {
      background: rgba(26, 83, 255, 0.15);
      color: #1A53FF;
    }

    /* --- Buttons --- */
    .hero__buttons {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 14px;
      opacity: 0;
      transform: translateY(-16px);
    }

    .btn {
      display: inline-block;
      text-align: center;
      font-family: var(--font-body);
      border: none;
      cursor: pointer;
    }

    .btn--primary {
      background: #1A53FF;
      color: #FFFFFF;
      padding: 0;
      border-radius: 8px;
      font-size: 15px;
      font-weight: 600;
      transition: all 0.25s ease;
      box-shadow: 0 10px 30px rgba(26, 83, 255, 0.25);
      overflow: hidden;
      position: relative;
    }

    .btn--primary:hover {
      background: #0B1B3D;
      box-shadow: 0 12px 40px rgba(26, 83, 255, 0.35);
      transform: translateY(-2px);
    }

    .btn--primary:hover .cta-flip-inner {
      transform: translateY(-100%);
    }

    /* --- Flip Animation Shared Styles --- */
    .cta-flip-inner {
      display: flex;
      flex-direction: column;
      transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
      width: 100%;
    }

    .cta-text-top,
    .cta-text-bottom {
      display: block;
      padding: 14px 32px;
      white-space: nowrap;
    }

    .cta-text-bottom {
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      text-align: center;
    }

    .btn--secondary {
      background: rgba(255, 255, 255, 0.92);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1.5px solid rgba(11, 27, 61, 0.25);
      color: var(--text-main);
      padding: 14px 32px;
      border-radius: 8px;
      font-size: 15px;
      font-weight: 600;
      box-shadow: 0 2px 12px rgba(11, 27, 61, 0.10);
      transition: all 0.25s ease;
    }

    .btn--secondary:hover {
      background: #FFFFFF;
      border-color: #1A53FF;
      color: #1A53FF;
      box-shadow: 0 4px 20px rgba(26, 83, 255, 0.18);
      /* Ajoute un effet de rayonnement autour */
      transform: translateY(-2px);
    }

    /* --- Hero vertical line --- */
    .hero__divider {
      position: absolute;
      z-index: 3;
      left: 52%;
      top: 10%;
      height: 80%;
      width: 1px;
      background: linear-gradient(to bottom,
          transparent,
          rgba(0, 212, 255, 0.60) 30%,
          rgba(26, 83, 255, 0.80) 50%,
          rgba(0, 212, 255, 0.60) 70%,
          transparent);
      opacity: 0;
      animation: line-pulse 3s cubic-bezier(0.16, 1, 0.3, 1) infinite;
    }

    @keyframes line-pulse {

      0%,
      100% {
        opacity: 0.4;
      }

      50% {
        opacity: 1;
      }
    }



    /* --- Reveal helper --- */
    .reveal {
      transition: opacity 0.5s ease, transform 0.5s ease;
    }

    /* ============================================
       FOOTER
    ============================================= */
    .footer {
      background: var(--navy);
      padding: 100px 0 50px;
      position: relative;
    }

    /* Ligne néon style "scan" au dessus du footer */
    .footer-neon-line {
      width: 100%;
      height: 2px;
      position: absolute;
      top: -1px;
      left: 0;
      background: linear-gradient(to right,
          transparent,
          rgba(0, 212, 255, 0.4) 20%,
          /* Changement vers bleu clair */
          rgba(0, 212, 255, 1) 50%,
          rgba(0, 212, 255, 0.4) 80%,
          transparent);
      box-shadow: 0 0 15px rgba(0, 212, 255, 0.6);
      overflow: hidden;
      z-index: 5;
    }

    .footer-neon-line::after {
      content: "";
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg,
          transparent,
          rgba(255, 255, 255, 0.2),
          rgba(255, 255, 255, 0.8),
          rgba(255, 255, 255, 0.2),
          transparent);
      animation: neon-flow-h 6s infinite ease-in-out;
    }

    @keyframes neon-flow-h {
      0% {
        left: -100%;
      }

      40% {
        left: 100%;
      }

      100% {
        left: 100%;
      }
    }



    .footer__top {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr;
      gap: 80px;
      margin-bottom: 80px;
    }

    /* --- Logo Footer --- */
    .footer-col h4,
    .footer-col-title {
      font-family: var(--font-display);
      font-size: 14px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-bottom: 30px;
      color: var(--white);
    }

    .footer-col-links {
      display: flex;
      flex-direction: column;
      gap: 15px;
      list-style: none;
      padding: 0;
    }

    .footer-col-links a {
      color: rgba(255, 255, 255, 0.45);
      font-size: 16px;
      transition: color 0.3s ease;
      text-decoration: none;
    }

    .footer-col-links a:hover {
      color: var(--electric);
    }

    .footer__brand img {
      max-width: 160px;
      height: auto;
      margin-bottom: 25px;
      filter: brightness(0) invert(1);
    }

    .footer__brand p {
      color: rgba(255, 255, 255, 0.5);
      line-height: 1.7;
      max-width: 320px;
      font-size: 16px;
    }

    .footer-bottom {
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      justify-content: space-between !important;
      padding-top: 24px !important;
      margin-top: 40px !important;
      border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
      width: 100% !important;
    }

    .footer-copyright {
      font-size: 13px !important;
      color: rgba(255, 255, 255, 0.25) !important;
      margin: 0 !important;
      padding: 0 !important;
      white-space: nowrap;
    }

    .footer-legal {
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      gap: 24px !important;
      margin: 0 !important;
      padding: 0 !important;
      list-style: none !important;
      border: none !important;
    }

    .footer-legal a {
      font-size: 13px !important;
      color: rgba(255, 255, 255, 0.25) !important;
      text-decoration: none !important;
      transition: color 0.2s ease !important;
      white-space: nowrap;
      display: inline !important;
    }

    .footer-legal a:hover {
      color: rgba(255, 255, 255, 0.60) !important;
    }

    @media (max-width: 640px) {
      .footer-bottom {
        flex-direction: column !important;
        align-items: center !important;
        gap: 16px !important;
        text-align: center !important;
      }

      .footer-legal {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 10px 16px !important;
      }

      .footer-legal a {
        white-space: normal !important;
      }
    }

    /* --- Footer SEO zones géographiques --- */
    .footer-zones {
      border-top: 1px solid rgba(255, 255, 255, 0.06);
      padding-top: 32px;
      margin-bottom: 32px;
    }

    .footer-zones-title {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: rgba(255, 255, 255, 0.20);
      margin-bottom: 16px;
      font-weight: 500;
    }

    .footer-zones-list {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 16px;
    }

    .footer-zones-list a {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.18);
      text-decoration: none;
      transition: color 0.2s ease;
      white-space: nowrap;
    }

    .footer-zones-list a:hover {
      color: rgba(255, 255, 255, 0.45);
    }


    /* ============================================
       RESPONSIVE
    ============================================= */
    @media (max-width: 900px) {
      .hero .container {
        grid-template-columns: 1fr;
        text-align: center;
      }

      .hero__content {
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      .hero__title {
        text-align: center;
      }
    }

    @media (max-width: 768px) {
      .hero {
        height: auto;
        min-height: 100vh;
        padding-top: 80px;
        padding-bottom: 60px;
      }

      /* Réduire le padding-top interne �?" la section gère déjà l'offset navbar */
      .hero__content {
        padding-top: 12px;
      }

      .hero .container {
        height: auto;
        min-height: calc(100vh - 80px);
        justify-content: flex-start;
      }

      .hero__title {
        font-size: clamp(28px, 7vw, 40px);
      }

      .hero__buttons {
        flex-direction: column;
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
        align-items: stretch;
      }

      .hero__buttons .btn {
        width: 100%;
      }

      /* --- Mobile Navbar --- */
      .navbar__hamburger {
        display: block;
      }

      .navbar__links {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background: var(--white);
        flex-direction: column;
        justify-content: center;
        gap: 24px;
        padding: 80px 20px 30px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        transform: translateY(-100%);
        transition: transform 0.3s ease;
        z-index: 1000;
      }

      .navbar__links.active {
        transform: translateY(0);
      }

      .navbar__links a {
        color: var(--navy);
        font-size: 18px;
      }
    }

    @media (max-width: 600px) {
      .footer__top {
        grid-template-columns: 1fr;
        gap: 30px;
      }

      .btn {
        width: 100%;
        text-align: center;
      }

      .footer__bottom {
        flex-direction: column;
        gap: 16px;
        text-align: center;
      }
    }

    /* ============================================
       SCROLL ANIMATIONS (GLOBAL SYSTEM)
    ============================================= */
    @property --angle {
      syntax: '<angle>';
      initial-value: 0deg;
      inherits: false;
    }

    .gradient-text {
      background: linear-gradient(135deg, #1A53FF, #00D4FF);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      display: inline-block;
    }

    /* �?tat initial - caché */
    .anim-fade-up {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .anim-left {
      opacity: 0;
      transform: translateX(-40px);
      transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .anim-right {
      opacity: 0;
      transform: translateX(40px);
      transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .anim-scale {
      opacity: 0;
      transform: scale(0.5);
      transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .anim-item {
      opacity: 0;
      transform: translateY(16px);
      transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* �?tat final - visible */
    .anim-fade-up.is-visible,
    .anim-left.is-visible,
    .anim-right.is-visible,
    .anim-scale.is-visible,
    .anim-item.is-visible {
      opacity: 1;
      transform: none;
    }

    /* Délais staggered pour les listes */
    .anim-item:nth-child(1) {
      transition-delay: 0.1s;
    }

    .anim-item:nth-child(2) {
      transition-delay: 0.2s;
    }

    .anim-item:nth-child(3) {
      transition-delay: 0.3s;
    }

    .anim-item:nth-child(4) {
      transition-delay: 0.4s;
    }

    .anim-item:nth-child(5) {
      transition-delay: 0.5s;
    }

    .anim-item:nth-child(6) {
      transition-delay: 0.6s;
    }

    /* Délais pour les blocs principaux */
    .anim-left {
      transition-delay: 0.3s;
    }

    .anim-right {
      transition-delay: 0.3s;
    }

    .anim-scale {
      transition-delay: 0.5s;
    }

    /* ============================================
       PROBLEM/SOLUTION SECTION
    ============================================= */
    .comparison {
      padding: 100px 0;
      background: #FAFAF9;
    }

    .comparison .container {
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 48px;
    }

    .comparison__header {
      text-align: center;
      margin-bottom: 64px;
    }

    .comparison__title {
      font-family: var(--font-display);
      font-size: clamp(28px, 3vw, 40px);
      font-weight: 700;
      letter-spacing: -0.02em;
      /* Tighter look */
      color: var(--text-main);
      max-width: 520px;
      margin: 0 auto 16px;
      line-height: 1.2;
    }

    .comparison__subtitle {
      font-size: 18px;
      font-weight: 400;
      color: var(--text-muted);
      max-width: 520px;
      margin: 0 auto;
      line-height: 1.7;
      text-align: center;
    }

    .comparison__grid {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      gap: 0;
      align-items: stretch;
      position: relative;
    }

    /* --- Left Column: Sans Brannity --- */
    .comparison__col--left {
      background: #F3F4F6;
      border: 1px solid rgba(0, 0, 0, 0.09);
      border-radius: 16px 0 0 16px;
      padding: 36px 40px;
    }

    .comparison__col-header {
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      margin-bottom: 32px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .comparison__col--left .comparison__col-header {
      color: #94A3B8;
    }

    .comparison__col--left .comparison__col-header::before {
      content: "";
      width: 8px;
      height: 8px;
      background: #94A3B8;
      display: block;
    }

    /* --- Right Column: Avec Brannity --- */
    .col-right-wrapper {
      position: relative;
      border-radius: 16px;
      padding: 1.5px;
      background: conic-gradient(from var(--angle, 0deg),
          transparent 0deg,
          transparent 75deg,
          rgba(0, 212, 255, 0.5) 90deg,
          rgba(26, 83, 255, 0.7) 105deg,
          rgba(0, 212, 255, 0.5) 120deg,
          transparent 135deg,
          transparent 360deg);
      animation: border-rotate 4s linear infinite;
      display: flex;
      /* Ensure inner column fills the wrapper */
    }

    .comparison__col--right {
      background: #FFFFFF;
      border: none;
      border-radius: 14px;
      padding: 36px 40px;
      box-shadow: 0 8px 48px rgba(26, 83, 255, 0.08);
      z-index: 3;
      position: relative;
      overflow: hidden;
      width: 100%;
      /* Fill wrapper */
    }

    @keyframes border-rotate {
      from {
        --angle: 0deg;
      }

      to {
        --angle: 360deg;
      }
    }

    .comparison__col--right .comparison__col-header {
      color: #1A53FF;
      justify-content: space-between;
    }

    .comparison__col--right .comparison__logo-mini {
      height: 24px;
      opacity: 1;
      animation: logo-float 3s ease-in-out infinite;
      filter: drop-shadow(0 2px 4px rgba(26, 83, 255, 0.15));
    }

    @keyframes logo-float {

      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-5px);
      }
    }

    /* --- Shared Items Styles --- */
    .pi-body {
      display: flex;
      align-items: center;
      /* Aligne le cercle et la colonne d'études verticalement */
      gap: 0;
      max-width: 900px;
      margin: 0 auto;
      position: relative;
    }

    .comparison__item {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 14px 12px;
      margin: 0 -12px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.04);
      border-radius: 8px;
    }

    /* Colonne gauche - décalage vers la gauche */
    .comparison__col--left .comparison__item:hover {
      background: rgba(226, 75, 74, 0.04);
      transform: translateX(-6px);
      cursor: default;
    }

    /* Colonne droite - décalage vers la droite */
    .comparison__col--right .comparison__item:hover {
      background: rgba(26, 83, 255, 0.04);
      transform: translateX(6px);
      cursor: default;
    }

    .comparison__col--right .comparison__item {
      border-bottom: 1px solid rgba(26, 83, 255, 0.06);
    }

    .comparison__item:last-child {
      border-bottom: none;
    }

    .testi-avatar {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 500;
      font-size: 14px;
      color: #FFFFFF;
      flex-shrink: 0;
      overflow: hidden;
      /* Assure que la photo est bien coupée en rond */
    }

    .testi-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .comparison__icon {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 700;
      flex-shrink: 0;
      margin-top: -2px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      transition: all 0.3s ease;
    }

    .comparison__icon svg {
      width: 14px;
      height: 14px;
    }

    .comparison__icon--fail {
      background: linear-gradient(135deg, #FEE2E2, #FECACA);
      color: #DC2626;
      border: 1px solid rgba(220, 38, 38, 0.1);
    }

    .comparison__icon--success {
      background: linear-gradient(135deg, #DCFCE7, #BBF7D0);
      color: #16A34A;
      border: 1px solid rgba(22, 163, 74, 0.1);
    }

    /* Animation au hover de l'item */
    .comparison__item:hover .comparison__icon {
      transform: scale(1.1) rotate(5deg);
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    }

    .comparison__item-content h5 {
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 2px;
    }

    .comparison__col--left .comparison__item-content h5 {
      color: var(--text-muted);
    }

    .comparison__col--right .comparison__item-content h5 {
      color: var(--text-main);
    }

    .comparison__item-content p {
      font-size: 13px;
      font-weight: 400;
      line-height: 1.4;
      color: var(--text-muted);
    }

    .comparison__col--left .comparison__item-content p {
      color: var(--text-muted);
    }

    .comparison__col--right .comparison__item-content p {
      color: var(--text-muted);
    }

    /* --- VS Separator --- */
    .comparison__vs {
      width: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 2;
    }

    .comparison__vs-pill {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: #FFFFFF;
      border: 2px solid #1A53FF;
      box-shadow: 0 4px 16px rgba(26, 83, 255, 0.15);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 500;
      color: #1A53FF;
      position: relative;
      z-index: 3;
    }

    .comparison__vs::before {
      content: "";
      position: absolute;
      width: 1px;
      height: 100%;
      background: linear-gradient(to bottom,
          transparent,
          rgba(26, 83, 255, 0.15) 20%,
          rgba(26, 83, 255, 0.15) 80%,
          transparent);
      left: 50%;
      transform: translateX(-50%);
    }

    /* --- Footer CTA --- */
    .comparison__footer {
      margin-top: 64px;
      text-align: center;
    }

    .comparison__footer p {
      font-size: 18px;
      color: var(--text-muted);
      margin-bottom: 24px;
    }

    @media (max-width: 768px) {
      .comparison__grid {
        grid-template-columns: 1fr;
        gap: 16px;
      }

      .comparison__vs {
        width: 100%;
        height: 40px;
      }

      .comparison__vs::before {
        width: 100%;
        height: 1px;
        top: 50%;
        left: 0;
        transform: none;
        background: linear-gradient(to right,
            transparent,
            rgba(26, 83, 255, 0.15) 20%,
            rgba(26, 83, 255, 0.15) 80%,
            transparent);
      }

      .comparison__col--left {
        border-radius: 16px;
      }

      .col-right-wrapper {
        border-radius: 16px;
      }

      .comparison__col--right {
        border-radius: 14px;
      }

      .comparison__col--left,
      .comparison__col--right {
        padding: 28px 24px;
      }
    }

    /* ============================================
       SERVICES SECTION
    ============================================= */
    .services {
      background: #FFFFFF;
      overflow: clip;
      /* clip au lieu de hidden pour permettre position:sticky */
      padding-bottom: 80px;
    }

    .services-header {
      text-align: center;
      max-width: 600px;
      margin: 0 auto 100px;
      padding-top: 120px;
    }


    .services__title {
      font-family: var(--font-display);
      font-size: clamp(32px, 3.5vw, 48px);
      font-weight: 500;
      color: var(--text-main);
      margin-bottom: 20px;
      text-align: center;
    }

    .services__subtitle {
      font-size: 18px;
      color: var(--text-muted);
      margin: 0 auto;
      max-width: 500px;
      line-height: 1.7;
      text-align: center;
    }

    .service-card {
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 48px;
      position: sticky;
      top: 100px;
      transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* --- Stacking container --- */
    .services-stack {
      position: relative;
      padding-bottom: 80px;
    }

    /* Override position:relative venant de #services .service-card */
    #services .services-stack .service-card {
      position: sticky !important;
    }

    /* Z-index croissant : chaque carte empile sur la précédente
       (spécificité supérieure à #services .service-card { z-index: 1 }) */
    #services .services-stack .service-card:nth-child(1) {
      z-index: 1;
    }

    #services .services-stack .service-card:nth-child(2) {
      z-index: 2;
    }

    #services .services-stack .service-card:nth-child(3) {
      z-index: 3;
    }

    #services .services-stack .service-card:nth-child(4) {
      z-index: 4;
    }

    #services .services-stack .service-card:nth-child(5) {
      z-index: 5;
    }

    /* Espace entre chaque carte pour qu'elles "débordent" légèrement */
    .services-stack .service-card+.service-card {
      margin-top: 20px;
    }

    .service-card-inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: center;
      background: #FFFFFF;
      border-radius: 24px;
      padding: 56px;
      border: 1px solid rgba(11, 27, 61, 0.07);
      box-shadow:
        0 4px 24px rgba(11, 27, 61, 0.05),
        0 1px 4px rgba(11, 27, 61, 0.04);
      position: relative;
      overflow: hidden;
      transition: box-shadow 0.3s ease,
        transform 0.3s ease;
    }

    .service-card-inner:hover {
      box-shadow:
        0 12px 48px rgba(11, 27, 61, 0.10),
        0 2px 8px rgba(11, 27, 61, 0.06);
      transform: translateY(-4px);
    }

    /* Accent coloré en haut à gauche de chaque carte */
    .service-card-inner::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 4px;
      height: 100%;
      background: var(--accent);
      border-radius: 24px 0 0 24px;
    }

    /* Nuance de couleur très subtile en fond de carte */
    .service-card-inner::after {
      content: '';
      position: absolute;
      top: -100px;
      right: -100px;
      width: 300px;
      height: 300px;
      border-radius: 50%;
      background: radial-gradient(circle,
          rgba(var(--accent-rgb), 0.04) 0%,
          transparent 70%);
      pointer-events: none;
    }

    /* Carte inversée */
    .service-card-inner.reverse {
      direction: rtl;
    }

    .service-card-inner.reverse>* {
      direction: ltr;
    }

    /* Accent à droite pour les cartes inversées */
    .service-card-inner.reverse::before {
      left: auto;
      right: 0;
      border-radius: 0 24px 24px 0;
    }

    /* --- Service Text Styles --- */
    .service-category-label {
      font-size: 13px;
      font-weight: 500;
      color: var(--accent);
      letter-spacing: 0.12em;
      text-transform: uppercase;
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .service-logo-wrap {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 16px;
      height: 16px;
      overflow: hidden;
      margin-right: 8px;
      flex-shrink: 0;
    }

    .service-logo-wrap img {
      display: block;
      width: 16px;
      height: 16px;
      object-fit: contain;
      transform: translateX(-100px);
      filter: brightness(0) drop-shadow(100px 0 0 var(--accent));
    }

    .service-title {
      font-family: var(--font-display);
      font-size: clamp(26px, 2.8vw, 36px);
      /* Taille réduite */
      font-weight: 700;
      /* Bold */
      letter-spacing: -0.025em;
      /* Condensé style SaaS */
      color: var(--text-main);
      line-height: 1.15;
      margin-bottom: 16px;
    }

    .service-benefit {
      font-size: 17px;
      color: #1a1a1a !important;
      /* Force anthracite pur sans rgba ni variable */
      line-height: 1.7;
      font-weight: 500;
      /* Légèrement plus épais pour asseoir le contraste */
      margin-bottom: 28px;
      max-width: 420px;
    }

    .service-list {
      margin-bottom: 36px;
      list-style: none;
      padding: 0;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0 20px;
    }

    .service-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 15px;
      color: #1a1a1a !important;
      /* Force anthracite pur */
      font-weight: 500;
      padding: 6px 0;
    }

    .service-bullet {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--accent);
      flex-shrink: 0;
    }

    .service-cta {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      font-weight: 600;
      color: var(--accent);
      border: none;
      background: none;
      cursor: pointer;
      position: relative;
      padding: 0;
      text-decoration: none;
    }

    .service-cta::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 0%;
      height: 1.5px;
      background: var(--accent);
      transition: width 0.3s ease;
    }

    .service-cta:hover::after {
      width: 100%;
    }

    .service-cta span {
      transition: transform 0.3s ease;
      display: inline-block;
    }

    .service-cta:hover span {
      transform: translateX(4px);
    }

    /* --- Service Separator --- */
    .service-separator {
      display: flex;
      align-items: center;
      gap: 20px;
      margin: 80px 0;
      max-width: 1200px;
      margin-left: auto;
      margin-right: auto;
      padding: 0 48px;
    }

    .sep-line {
      flex: 1;
      height: 1px;
      background: linear-gradient(to right, transparent, rgba(11, 27, 61, 0.12), transparent);
      transform: scaleX(0);
      transform-origin: center;
      transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .service-separator.is-visible .sep-line {
      transform: scaleX(1);
    }

    .sep-number {
      font-size: 12px;
      font-weight: 500;
      color: rgba(11, 27, 61, 0.20);
      letter-spacing: 0.15em;
      flex-shrink: 0;
    }

    /* --- Premium Audio Studio --- */
    .audio-studio {
      background: #FFFFFF;
      border: 1px solid rgba(29, 158, 117, 0.15);
      border-radius: 20px;
      box-shadow: 0 20px 60px rgba(29, 158, 117, 0.10);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      height: 400px;
      /* Reduced height as header is gone */
      position: relative;
    }

    .as-tabs {
      display: flex;
      padding: 12px 20px 0;
      gap: 24px;
      overflow-x: auto;
      scrollbar-width: none;
      border-bottom: 1px solid rgba(11, 27, 61, 0.06);
    }

    .as-tabs::-webkit-scrollbar {
      display: none;
    }

    .as-tab {
      padding: 12px 0;
      font-size: 13px;
      font-weight: 700;
      background: transparent;
      color: var(--text-muted);
      border: none;
      cursor: pointer;
      white-space: nowrap;
      position: relative;
      transition: all 0.2s ease;
    }

    .as-tab.active {
      color: #1D9E75;
    }

    .as-tab::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0%;
      height: 2px;
      background: #1D9E75;
      transition: width 0.3s ease;
    }

    .as-tab.active::after {
      width: 100%;
    }

    .as-playlist {
      flex: 1;
      overflow-y: auto;
      padding: 12px 0;
    }

    /* Scrollbar du player aux couleurs émeraudes */
    .as-playlist::-webkit-scrollbar {
      width: 6px;
    }

    .as-playlist::-webkit-scrollbar-track {
      background: transparent;
    }

    .as-playlist::-webkit-scrollbar-thumb {
      background: rgba(29, 158, 117, 0.2);
      border-radius: 10px;
    }

    .as-playlist::-webkit-scrollbar-thumb:hover {
      background: rgba(29, 158, 117, 0.5);
    }

    .as-category {
      display: none;
      flex-direction: column;
    }

    .as-sub-filters {
      display: flex;
      gap: 8px;
      padding: 0 20px 12px;
      margin-top: 8px;
      overflow-x: auto;
      scrollbar-width: none;
    }

    .as-sub-filters::-webkit-scrollbar {
      display: none;
    }

    .as-sub-filter-btn {
      padding: 6px 12px;
      border-radius: 20px;
      background: rgba(11, 27, 61, 0.04);
      color: var(--text-muted);
      border: 1px solid rgba(11, 27, 61, 0.08);
      font-size: 11px;
      font-weight: 600;
      cursor: pointer;
      white-space: nowrap;
      transition: all 0.2s ease;
    }

    .as-sub-filter-btn:hover {
      background: rgba(11, 27, 61, 0.08);
    }

    .as-sub-filter-btn.active {
      background: #1D9E75;
      color: #fff;
      border-color: #1D9E75;
    }

    .as-category.active {
      display: flex;
    }

    /* Folders / Accordions */
    .as-folder {
      border-bottom: 1px solid rgba(11, 27, 61, 0.04);
    }

    .as-folder-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 14px 24px;
      cursor: pointer;
      background: transparent;
      transition: background 0.2s ease;
    }

    .as-folder-header:hover {
      background: rgba(11, 27, 61, 0.02);
    }

    .as-folder-title {
      font-size: 13px;
      font-weight: 700;
      color: var(--text-main);
    }

    .as-folder-icon {
      color: var(--text-muted);
      display: flex;
      align-items: center;
      transition: transform 0.3s ease;
    }

    .as-folder.open .as-folder-icon {
      transform: rotate(180deg);
    }

    .as-folder-content {
      display: none;
      flex-direction: column;
      background: rgba(11, 27, 61, 0.01);
      border-left: 2px solid rgba(29, 158, 117, 0.2);
    }

    .as-folder.open .as-folder-content {
      display: flex;
    }

    /* Sub-folders (Themes inside Client folder) */
    .as-subfolder {
      border-bottom: 1px solid rgba(11, 27, 61, 0.04);
    }

    .as-subfolder:last-child {
      border-bottom: none;
    }

    .as-subfolder-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 11px 24px 11px 32px;
      cursor: pointer;
      background: transparent;
      transition: background 0.2s ease;
    }

    .as-subfolder-header:hover {
      background: rgba(29, 158, 117, 0.03);
    }

    .as-subfolder-title {
      font-size: 12px;
      font-weight: 600;
      color: var(--text-muted);
      letter-spacing: 0.02em;
    }

    .as-subfolder-icon {
      color: var(--text-muted);
      display: flex;
      align-items: center;
      transition: transform 0.3s ease;
      opacity: 0.6;
    }

    .as-subfolder.open .as-subfolder-icon {
      transform: rotate(180deg);
    }

    .as-subfolder-content {
      display: none;
      flex-direction: column;
    }

    .as-subfolder.open .as-subfolder-content {
      display: flex;
    }

    /* Indent tracks inside subfolders */
    .as-subfolder .as-track {
      padding-left: 40px;
    }

    .as-track {
      display: flex;
      align-items: center;
      padding: 12px 24px;
      cursor: pointer;
      transition: background 0.2s ease;
    }

    .as-track:hover {
      background: rgba(29, 158, 117, 0.04);
    }

    .as-track.active {
      background: rgba(29, 158, 117, 0.08);
    }

    .as-track-info {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .as-track-num {
      font-size: 12px;
      font-weight: 500;
      color: rgba(11, 27, 61, 0.25);
      width: 20px;
    }

    .as-track.active .as-track-num {
      color: #1D9E75;
    }

    .as-track-details {
      display: flex;
      flex-direction: column;
    }

    .as-track-name {
      font-size: 13px;
      font-weight: 500;
      color: var(--text-muted);
    }

    .as-track.active .as-track-name {
      color: #1D9E75;
    }

    .as-track-dur {
      font-size: 11px;
      color: rgba(11, 27, 61, 0.30);
    }

    .as-track-play {
      opacity: 0;
      transform: translateX(10px);
      transition: all 0.2s ease;
    }

    .as-track:hover .as-track-play,
    .as-track.active .as-track-play {
      opacity: 1;
      transform: translateX(0);
    }

    .as-play-icon {
      color: #1D9E75;
      font-size: 14px;
    }

    .as-player {
      padding: 16px 24px;
      background: rgba(29, 158, 117, 0.04);
      border-top: 1px solid rgba(29, 158, 117, 0.10);
      display: flex;
      align-items: center;
      gap: 20px;
    }

    .as-player-btn {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: #1D9E75;
      border: none;
      color: white;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 12px rgba(29, 158, 117, 0.3);
      transition: background 0.2s ease;
    }

    .as-player-btn:hover {
      background: #0F6E56;
    }

    .as-player-center {
      flex: 1;
    }

    .as-progress-wrap {
      padding: 10px 0;
      cursor: pointer;
    }

    .as-progress-bar {
      height: 4px;
      background: rgba(11, 27, 61, 0.10);
      border-radius: 2px;
      position: relative;
      transition: height 0.15s ease;
    }

    .as-progress-bar:hover {
      height: 6px;
    }

    .as-progress-fill {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      background: #1D9E75;
      width: 0%;
      border-radius: 2px;
    }

    /* Thumb (Logo B) - suit la progression réelle */
    .as-progress-bar::after {
      content: '';
      position: absolute;
      left: var(--progress-real, 0%);
      top: 50%;
      transform: translate(-50%, -50%);
      width: 22px;
      height: 22px;
      background: url('../images/logob.webp') no-repeat center;
      background-size: contain;
      opacity: 0;
      transition: opacity 0.3s ease, transform 0.2s ease, filter 0.2s ease;
      z-index: 10;
      pointer-events: none;
      filter: hue-rotate(-63deg) saturate(0.8) brightness(0.9) drop-shadow(0 2px 6px rgba(29, 158, 117, 0.5));
    }

    .as-progress-bar.has-track::after {
      opacity: 1;
    }

    .as-progress-bar:hover::after {
      transform: translate(-50%, -50%) scale(1.15);
      filter: drop-shadow(0 3px 10px rgba(29, 158, 117, 0.7));
    }

    .as-player-right {
      font-size: 11px;
      font-weight: 600;
      color: rgba(11, 27, 61, 0.35);
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .as-time-sep {
      opacity: 0.5;
    }

    /* --- Concentric Map (Strategy) --- */
    .concentric-map {
      position: relative;
      width: 100%;
      height: 320px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #FFFBF0, #FFFFFF);
      border-radius: 20px;
      border: 1px solid rgba(186, 117, 23, 0.15);
      overflow: hidden;
    }

    /* Anneaux concentriques */
    .cm-ring {
      position: absolute;
      border-radius: 50%;
      border: 1.5px dashed;
      display: flex;
      align-items: flex-start;
      justify-content: center;
    }

    .cm-ring-1 {
      width: 130px;
      height: 130px;
      border-color: rgba(196, 98, 45, 0.25);
      animation: rotate-slow 20s linear infinite;
    }

    .cm-ring-2 {
      width: 210px;
      height: 210px;
      border-color: rgba(26, 83, 255, 0.20);
      animation: rotate-slow 30s linear infinite reverse;
    }

    .cm-ring-3 {
      width: 290px;
      height: 290px;
      border-color: rgba(186, 117, 23, 0.15);
      animation: rotate-slow 40s linear infinite;
    }

    @keyframes rotate-slow {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg);
      }
    }

    .cm-ring-label {
      font-size: 9px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 4px 10px;
      border-radius: 10px;
      margin-top: -10px;
      white-space: nowrap;
      /* Contre-rotation pour garder le texte lisible */
      animation: counter-rotate 20s linear infinite reverse;
    }

    .cm-ring-1 .cm-ring-label {
      color: rgba(196, 98, 45, 0.60);
      background: rgba(196, 98, 45, 0.06);
      animation-duration: 20s;
    }

    .cm-ring-2 .cm-ring-label {
      color: rgba(26, 83, 255, 0.60);
      background: rgba(26, 83, 255, 0.06);
      animation-duration: 30s;
      animation-direction: normal;
    }

    .cm-ring-3 .cm-ring-label {
      color: rgba(186, 117, 23, 0.60);
      background: rgba(186, 117, 23, 0.06);
      animation-duration: 40s;
      animation-direction: reverse;
    }

    @keyframes counter-rotate {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(-360deg);
      }
    }

    /* Centre */
    .cm-center {
      position: absolute;
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: linear-gradient(135deg, #BA7517, #EF9F27);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 10;
      box-shadow:
        0 8px 32px rgba(186, 117, 23, 0.35),
        0 0 0 8px rgba(186, 117, 23, 0.08);
      animation: center-pulse 3s ease-in-out infinite;
    }

    .cm-center-star {
      font-size: 16px;
      color: white;
      margin-bottom: 3px;
    }

    .cm-center span {
      font-size: 9px;
      font-weight: 500;
      color: white;
      text-align: center;
      line-height: 1.3;
    }

    /* Nodes positionnés sur les anneaux */
    .cm-node {
      position: absolute;
      background: white;
      border-radius: 10px;
      padding: 6px 10px;
      display: flex;
      align-items: center;
      gap: 5px;
      z-index: 5;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      border: 1px solid rgba(11, 27, 61, 0.08);
      white-space: nowrap;
      transition: all 0.3s ease;
    }

    .cm-node:hover {
      transform: scale(1.08);
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    }

    .cm-node-icon {
      font-size: 13px;
    }

    .cm-node-label {
      font-size: 10px;
      font-weight: 600;
      color: var(--text-main);
    }

    /* Positions des nodes */
    .cm-node.ring1.pos-top {
      top: 22%;
      left: 50%;
      transform: translateX(-50%);
    }

    .cm-node.ring1.pos-bottom {
      bottom: 22%;
      left: 50%;
      transform: translateX(-50%);
    }

    .cm-node.ring2.pos-right {
      right: 10%;
      top: 50%;
      transform: translateY(-50%);
    }

    .cm-node.ring2.pos-left {
      left: 10%;
      top: 50%;
      transform: translateY(-50%);
    }

    .cm-node.ring3.pos-top-right {
      top: 8%;
      right: 12%;
    }

    .cm-node {
      opacity: 0;
      transform: scale(0.8);
      transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    }

    .service-card-inner.is-visible .cm-node {
      opacity: 1;
      transform: scale(1);
    }

    .cm-node.ring1.pos-top {
      transition-delay: 0.1s;
      transform-origin: bottom center;
    }

    .cm-node.ring1.pos-bottom {
      transition-delay: 0.2s;
      transform-origin: top center;
    }

    .cm-node.ring2.pos-right {
      transition-delay: 0.3s;
      transform-origin: left center;
    }

    .cm-node.ring2.pos-left {
      transition-delay: 0.4s;
      transform-origin: right center;
    }

    .cm-node.ring3.pos-top-right {
      transition-delay: 0.5s;
      transform-origin: bottom left;
    }

    /* --- Brand Dashboard (Strategy) --- */
    .brand-dashboard {
      background: #FFFFFF;
      border-radius: 20px;
      border: 1px solid rgba(11, 27, 61, 0.08);
      box-shadow: 0 20px 60px rgba(11, 27, 61, 0.08);
      overflow: hidden;
    }

    /* Métriques */
    .bd-metrics {
      padding: 16px 20px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      border-bottom: 1px solid rgba(11, 27, 61, 0.06);
    }

    .bd-metric {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .bd-metric-top {
      display: flex;
      align-items: center;
      gap: 6px;
      width: 130px;
      flex-shrink: 0;
    }

    .bd-metric-icon {
      font-size: 13px;
    }

    .bd-metric-label {
      font-size: 12px;
      color: var(--text-muted);
      font-weight: 500;
      white-space: nowrap;
    }

    .bd-metric-bar {
      flex: 1;
      height: 6px;
      background: rgba(11, 27, 61, 0.06);
      border-radius: 3px;
      overflow: hidden;
    }

    .bd-metric-fill {
      height: 100%;
      width: 0%;
      border-radius: 3px;
      background: var(--accent);
      transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .bd-metric-value {
      font-size: 12px;
      font-weight: 500;
      color: var(--text-muted);
      width: 32px;
      text-align: right;
      flex-shrink: 0;
    }

    /* Result */
    .bd-result {
      margin: 16px 20px;
      padding: 20px;
      background: linear-gradient(135deg, #0B1B3D, #1A53FF);
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      opacity: 0;
      transform: translateY(10px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }

    .check-path {
      transition: stroke-dashoffset 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
    }

    .bd-result.visible .check-path {
      stroke-dashoffset: 0;
    }

    .bd-result.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .bd-result-left {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .bd-result-icon {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.15);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      color: #00D4FF;
      flex-shrink: 0;
    }

    .bd-result-title {
      display: block;
      font-size: 15px;
      font-weight: 500;
      color: #FFFFFF;
    }

    .bd-result-sub {
      display: block;
      font-size: 12px;
      color: rgba(255, 255, 255, 0.55);
      margin-top: 2px;
    }

    .bd-result-right {
      text-align: right;
    }

    .bd-result-score {
      display: flex;
      align-items: baseline;
      gap: 2px;
      justify-content: flex-end;
    }

    #bdScoreLarge {
      font-size: 36px;
      font-weight: 500;
      color: #00D4FF;
      line-height: 1;
      font-variant-numeric: tabular-nums;
    }

    .bd-result-max {
      font-size: 16px;
      color: rgba(255, 255, 255, 0.40);
    }

    .bd-result-label {
      font-size: 11px;
      color: rgba(255, 255, 255, 0.40);
      margin-top: 2px;
    }

    /* --- Service Card Scroll Animation (désactivée - remplacée par stacking effect) --- */
    /* Les cartes sont désormais visibles dès le départ, empilées par scroll sticky */
    .service-card-inner {
      transition: box-shadow 0.3s ease, transform 0.3s ease;
    }

    .service-card-inner.slide-in .service-category-label,
    .service-card-inner.slide-in .service-title,
    .service-card-inner.slide-in .service-benefit,
    .service-card-inner.slide-in .service-list,
    .service-card-inner.slide-in .service-cta {
      animation: fade-up-item 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
      opacity: 0;
    }

    .service-card.reveal {
      opacity: 1 !important;
      transform: none !important;
      transition:
        opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    .service-card-inner.slide-in .service-category-label {
      animation-delay: 0.3s;
    }

    .service-card-inner.slide-in .service-title {
      animation-delay: 0.4s;
    }

    .service-card-inner.slide-in .service-benefit {
      animation-delay: 0.5s;
    }

    .service-card-inner.slide-in .service-list {
      animation-delay: 0.6s;
    }

    .service-card-inner.slide-in .service-cta {
      animation-delay: 0.7s;
    }

    .service-card-inner.slide-in .service-visual {
      animation: fade-up-item 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
      opacity: 0;
    }

    @keyframes fade-up-item {
      from {
        opacity: 0;
        transform: translateY(24px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* --- Visual Mockups CSS --- */

    /* Float Animation */
    @keyframes float {

      0%,
      100% {
        transform: translateY(0px);
      }

      50% {
        transform: translateY(-10px);
      }
    }

    @keyframes wave-dance {

      0%,
      100% {
        transform: scaleY(1);
      }

      50% {
        transform: scaleY(0.7);
      }
    }

    @keyframes shimmer {

      0%,
      100% {
        opacity: 1;
      }

      50% {
        opacity: 0.6;
      }
    }

    /* Real Image Wrappers for Services */
    .service-img-wrapper {
      width: 100%;
      border-radius: 16px;
      overflow: hidden;
      box-shadow:
        0 20px 60px rgba(11, 27, 61, 0.12),
        0 4px 16px rgba(11, 27, 61, 0.06);
      transition: transform 0.4s ease, box-shadow 0.4s ease;
      background: #FFFFFF;
    }

    .service-img-wrapper:hover {
      transform: translateY(-6px) scale(1.01);
      box-shadow:
        0 30px 80px rgba(11, 27, 61, 0.16),
        0 8px 24px rgba(11, 27, 61, 0.08);
    }

    .service-real-img {
      width: 100%;
      height: auto;
      display: block;
      border-radius: 16px;
    }

    /* 1. Browser Mockup */
    .browser-mockup {
      border-radius: 12px;
      border: 1px solid rgba(11, 27, 61, 0.10);
      box-shadow: 0 20px 60px rgba(11, 27, 61, 0.12), 0 4px 16px rgba(11, 27, 61, 0.06);
      overflow: hidden;
      background: #FFFFFF;
      animation: float 6s ease-in-out infinite;
    }

    .browser-bar {
      background: #F3F4F6;
      padding: 10px 16px;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .browser-dots {
      display: flex;
      gap: 6px;
    }

    .browser-dots .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
    }

    .dot.red {
      background: #FF5F56;
    }

    .dot.yellow {
      background: #FFBD2E;
    }

    .dot.green {
      background: #27C93F;
    }

    .browser-url {
      flex: 1;
      background: white;
      border-radius: 4px;
      padding: 4px 12px;
      font-size: 11px;
      color: rgba(11, 27, 61, 0.35);
      text-align: center;
    }

    .browser-content {
      padding: 20px;
      background: linear-gradient(135deg, #F8FAFF, #FFFFFF);
    }

    .mock-hero {
      background: linear-gradient(135deg, #0B1B3D, #1A53FF);
      border-radius: 8px;
      padding: 20px;
      margin-bottom: 16px;
    }

    .mock-nav {
      height: 6px;
      width: 60%;
      background: rgba(255, 255, 255, 0.3);
      border-radius: 3px;
      margin-bottom: 16px;
    }

    .mock-title {
      height: 14px;
      width: 80%;
      background: rgba(255, 255, 255, 0.9);
      border-radius: 3px;
      margin-bottom: 8px;
      animation: shimmer 2s ease-in-out infinite;
    }

    .mock-subtitle {
      height: 8px;
      width: 60%;
      background: rgba(255, 255, 255, 0.5);
      border-radius: 3px;
      margin-bottom: 16px;
    }

    .mock-cta {
      height: 28px;
      width: 140px;
      background: #00D4FF;
      border-radius: 6px;
    }

    .mock-cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }

    .mock-card {
      height: 60px;
      background: white;
      border-radius: 6px;
      border: 1px solid rgba(11, 27, 61, 0.08);
      animation: shimmer 2s ease-in-out infinite;
    }

    /* 2. Brand Board */
    .brand-board {
      background: #FAFAFA;
      border-radius: 16px;
      border: 1px solid rgba(0, 0, 0, 0.06);
      padding: 28px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto auto;
      gap: 16px;
      box-shadow: 0 20px 60px rgba(196, 98, 45, 0.08);
      animation: float 6s ease-in-out infinite 1s;
    }

    .bb-logo {
      grid-column: 1/-1;
      display: flex;
      align-items: center;
      gap: 12px;
      padding-bottom: 16px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }

    .bb-logo-icon {
      width: 44px;
      height: 44px;
      background: linear-gradient(135deg, #C4622D, #E8DDD0);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      font-weight: 500;
      color: white;
    }

    .bb-colors {
      display: flex;
      gap: 8px;
      align-items: center;
    }

    .bb-color {
      width: 28px;
      height: 28px;
      border-radius: 50%;
    }

    .bb-color.c1 {
      background: #0B1B3D;
    }

    .bb-color.c2 {
      background: #C4622D;
    }

    .bb-color.c3 {
      background: #E8DDD0;
    }

    .bb-color.c4 {
      background: #1A53FF;
    }

    .bb-typo {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .bb-font-big {
      font-size: 36px;
      font-weight: 500;
      color: var(--text-main);
      line-height: 1;
    }

    .bb-font-lines {
      flex: 1;
    }

    .bb-font-lines div {
      height: 4px;
      background: #E5E7EB;
      border-radius: 2px;
      margin-bottom: 6px;
    }

    .bb-cards {
      grid-column: 1/-1;
      position: relative;
      height: 80px;
    }

    .bb-card {
      position: absolute;
      width: 140px;
      height: 80px;
      border-radius: 8px;
    }

    .bb-card.back {
      background: #C4622D;
      top: 8px;
      left: 8px;
      opacity: 0.3;
    }

    .bb-card.front {
      background: white;
      border: 1px solid rgba(0, 0, 0, 0.08);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
      top: 0;
      left: 0;
      padding: 12px 16px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .bbc-logo {
      font-weight: 500;
      color: #C4622D;
    }

    .bbc-lines div {
      height: 3px;
      width: 40px;
      background: #E5E7EB;
      margin-bottom: 4px;
    }

    /* 3. Audio Visualizer */
    .audio-visual {
      background: linear-gradient(135deg, #F0FDF9, #FFFFFF);
      border-radius: 20px;
      border: 1px solid rgba(29, 158, 117, 0.15);
      padding: 32px;
      box-shadow: 0 20px 60px rgba(29, 158, 117, 0.10);
    }

    .waveform {
      display: flex;
      align-items: center;
      gap: 3px;
      height: 80px;
      margin-bottom: 24px;
      justify-content: center;
    }

    .wave-bar {
      width: 3px;
      border-radius: 2px;
      background: linear-gradient(to top, rgba(29, 158, 117, 0.3), #1D9E75);
      animation: wave-dance ease-in-out infinite;
    }

    @keyframes wave-dance {

      0%,
      100% {
        height: var(--min-h);
        opacity: 0.4;
      }

      50% {
        height: var(--max-h);
        opacity: 1;
      }
    }

    .audio-player-premium {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .apr-play {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: #1D9E75;
      border: none;
      color: white;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
    }

    .apr-play:hover {
      background: #0F6E56;
      transform: scale(1.05);
    }

    .apr-play svg {
      width: 18px;
      height: 18px;
    }

    .apr-center {
      flex: 1;
    }

    .apr-title {
      font-size: 13px;
      color: var(--text-muted);
      margin-bottom: 8px;
    }

    .apr-track {
      height: 3px;
      background: rgba(29, 158, 117, 0.15);
      border-radius: 2px;
      overflow: hidden;
      cursor: pointer;
    }

    .apr-progress {
      height: 100%;
      width: 0%;
      background: #1D9E75;
      border-radius: 2px;
      transition: width 0.1s linear;
    }

    .apr-right span {
      font-size: 12px;
      color: var(--text-muted);
      font-weight: 500;
    }

    /* 4. App Mockup */
    .app-mockup {
      display: flex;
      border-radius: 16px;
      border: 1px solid rgba(83, 74, 183, 0.15);
      box-shadow: 0 20px 60px rgba(83, 74, 183, 0.12);
      overflow: hidden;
      background: white;
      animation: float 6s ease-in-out infinite 2s;
    }

    .app-sidebar {
      width: 56px;
      background: #0B1B3D;
      padding: 16px 12px;
      display: flex;
      flex-direction: column;
      gap: 20px;
      align-items: center;
    }

    .app-logo-sm {
      width: 28px;
      height: 28px;
      border-radius: 6px;
      background: #FFFFFF;
      padding: 4px;
      object-fit: contain;
      display: block;
    }

    .app-mockup-wrap {
      width: 100%;
    }

    .app-nav-item {
      width: 28px;
      height: 5px;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 3px;
    }

    .app-nav-item.active {
      background: rgba(255, 255, 255, 0.8);
    }

    .app-main {
      flex: 1;
      padding: 16px;
    }

    .app-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
    }

    .app-title-bar {
      width: 120px;
      height: 8px;
      background: #E5E7EB;
      border-radius: 4px;
    }

    .app-title-text {
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.04em;
      color: var(--text-main);
      opacity: 0.85;
    }

    .app-btn.primary {
      width: 60px;
      height: 22px;
      background: #534AB7;
      border-radius: 5px;
    }

    .app-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin-bottom: 12px;
    }

    .app-stat-card {
      height: 40px;
      border-radius: 6px;
      background: #F8F9FF;
      border: 1px solid rgba(83, 74, 183, 0.10);
      animation: shimmer 2s infinite;
    }

    .chart-bars {
      display: flex;
      align-items: flex-end;
      gap: 6px;
      height: 60px;
    }

    .chart-bar {
      background: linear-gradient(to top, #534AB7, #7F77DD);
      border-radius: 3px 3px 0 0;
      width: 100%;
      transform-origin: bottom;
      transform: scaleY(0);
    }

    .service-block.is-visible .chart-bar {
      animation: bar-grow 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    @keyframes bar-grow {
      from {
        transform: scaleY(0);
      }

      to {
        transform: scaleY(1);
      }
    }

    /* --- Logic Visuals (Connectors) --- */
    .se-connections path {
      fill: none;
      stroke: rgba(26, 83, 255, 0.1);
      stroke-width: 2;
      stroke-dasharray: 6 6;
      animation: dash-flow 20s linear infinite;
    }

    @keyframes dash-flow {
      from {
        stroke-dashoffset: 200;
      }

      to {
        stroke-dashoffset: 0;
      }
    }

    /* Final CTA */
    .services__footer {
      margin-top: 100px;
      text-align: center;
      padding-bottom: 120px;
    }

    .services__footer h3 {
      font-size: 20px;
      color: var(--text-muted);
      margin-bottom: 32px;
      font-weight: 500;
    }

    .services__footer .separator-text {
      font-size: 13px;
      color: rgba(11, 27, 61, 0.30);
      margin: 12px 0;
      display: block;
    }

    .services__footer .secondary-link {
      color: #1A53FF;
      font-size: 14px;
      font-weight: 600;
      text-decoration: none;
      position: relative;
    }

    .services__footer .secondary-link::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 0%;
      height: 1.5px;
      background: #1A53FF;
      transition: width 0.3s ease;
    }

    .services__footer .secondary-link:hover::after {
      width: 100%;
    }

    /* --- Responsive --- */
    @media (max-width: 768px) {
      .service-block {
        grid-template-columns: 1fr;
        gap: 40px;
        direction: ltr !important;
      }

      .service-block.reverse>* {
        direction: ltr !important;
      }

      .services .container {
        padding: 0 24px;
      }

      .service-list {
        grid-template-columns: 1fr;
      }

      .service-visual {
        order: 2;
        margin-top: 20px;
      }

      .service-text {
        order: 1;
      }
    }

    /* �"?�"? Processus Section �"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"? */
    section.process-section,
    .process-section {
      margin-top: 0 !important;
    }

    section.services-section,
    #services,
    .services-section {
      margin-bottom: 0 !important;
      padding-bottom: 0 !important;
    }

    /* �"?�"? Processus Infographic �"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"? */
    .process {
      background: #F8F9FF;
      padding: 100px 0 120px;
    }

    .process h2 {
      color: #0B1B3D !important;
    }

    .pi-header {
      text-align: center;
      max-width: 680px;
      margin: 0 auto 64px;
      padding: 0 20px;
    }

    .pi-header .section-title {
      margin-top: 8px;
      margin-bottom: 0;
    }

    /* �"?�"? Layout �"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"? */
    .pi-body {
      display: flex;
      align-items: center;
      max-width: 960px;
      margin: 0 auto;
      padding: 0 40px;
    }

    /* �"?�"? Keyframes cercle �"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"? */
    @keyframes pi-ripple {
      0% {
        transform: scale(1);
        opacity: 0.7;
      }

      100% {
        transform: scale(1.65);
        opacity: 0;
      }
    }

    @keyframes pi-glow {

      0%,
      100% {
        box-shadow:
          0 0 0 10px rgba(26, 83, 255, 0.06),
          0 0 0 22px rgba(26, 83, 255, 0.03),
          0 20px 52px rgba(11, 27, 61, 0.14);
      }

      50% {
        box-shadow:
          0 0 0 16px rgba(26, 83, 255, 0.10),
          0 0 0 34px rgba(26, 83, 255, 0.05),
          0 20px 52px rgba(11, 27, 61, 0.18);
      }
    }

    /* �"?�"? Circle �"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"? */
    .pi-circle-col {
      flex-shrink: 0;
      width: 240px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      /* On laisse le centrage via le parent flex .pi-body */
      position: relative;
    }

    /* Circle column alignment */
    .pi-circle-col {
      flex-shrink: 0;
      width: 240px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      position: relative;
    }

    /* Le trait horizontal est maintenant géré par le ::before de la 3ème .pi-step-row */
    /* grâce au align-items: center sur le parent .pi-body */

    .pi-circle {
      width: 188px;
      height: 188px;
      border-radius: 50%;
      background: #FFFFFF;
      box-shadow:
        0 0 0 10px rgba(26, 83, 255, 0.06),
        0 0 0 22px rgba(26, 83, 255, 0.03),
        0 20px 52px rgba(11, 27, 61, 0.14);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 2;
      flex-shrink: 0;
      overflow: visible;
      animation: pi-glow 3.5s ease-in-out infinite;
    }

    /* Ondulations rayonnantes */
    .pi-circle::before,
    .pi-circle::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 50%;
      border: 1.5px solid rgba(26, 83, 255, 0.42);
      animation: pi-ripple 3s cubic-bezier(0.25, 0.8, 0.4, 1) infinite;
      pointer-events: none;
      z-index: -1;
    }

    .pi-circle::after {
      border-color: rgba(26, 83, 255, 0.22);
      animation-delay: 1.5s;
    }

    .pi-circle-logo {
      width: 100px;
      height: auto;
      object-fit: contain;
    }



    /* �"?�"? Steps column �"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"? */
    .pi-steps-col {
      flex: 1;
      position: relative;
      padding-left: 48px;
      display: flex;
      flex-direction: column;
      gap: 13px;
    }

    /* Vertical spine */
    .pi-steps-col::before {
      content: '';
      position: absolute;
      left: 13px;
      top: 52px;
      /* Start at center of 1st dot (Step 01) */
      bottom: 58px;
      /* End at center of last dot (Step 05) */
      width: 2px;
      background: linear-gradient(to bottom, #1A53FF 0%, #00C8FF 100%);
      border-radius: 2px;
    }

    /* �"?�"? Step row �"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"? */
    .pi-step-row {
      position: relative;
      display: flex;
      align-items: center;
      opacity: 0;
      transform: translateX(18px);
      transition:
        opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
      transition-delay: calc(var(--i, 0) * 0.09s);
    }

    .pi-step-row.is-visible {
      opacity: 1;
      transform: translateX(0);
    }

    /* Horizontal connector: spine �?' arrow */
    .pi-step-row::before {
      content: '';
      position: absolute;
      left: -34px;
      width: 34px;
      height: 2px;
      background: linear-gradient(to right, rgba(26, 83, 255, 0.55), rgba(26, 83, 255, 0.15));
      top: 50%;
      transform: translateY(-50%);
    }

    /* Long bridge for Step 03 (Middle) to touch the circle */
    .pi-step-row:nth-child(3)::before {
      left: -84px;
      width: 84px;
      background: linear-gradient(to right, rgba(26, 83, 255, 0.20), #1A53FF);
    }

    /* Dot on spine */
    .pi-step-row::after {
      content: '';
      position: absolute;
      left: -40px;
      top: 50%;
      transform: translateY(-50%);
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: white;
      border: 2.5px solid #1A53FF;
      box-shadow: 0 0 0 4px rgba(26, 83, 255, 0.10);
      z-index: 2;
    }

    /* �"?�"? Arrow card �"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"? */
    .pi-arrow {
      flex: 1;
      background: linear-gradient(112deg, #152464 0%, #0B1B3D 52%);
      clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 50%, calc(100% - 28px) 100%, 0 100%);
      padding: 17px 62px 17px 22px;
      display: flex;
      align-items: center;
      gap: 15px;
      min-height: 84px;
      position: relative;
      transition: background 0.25s ease;
    }

    .pi-arrow:hover {
      background: linear-gradient(112deg, #1d2e82 0%, #142254 52%);
    }

    /* Barre d'accent gauche */
    .pi-arrow::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 4px;
      background: linear-gradient(to bottom, #1A53FF, #00C8FF);
    }

    /* Grand numéro watermark */
    .pi-arrow-num {
      position: absolute;
      bottom: 2px;
      right: 34px;
      font-family: var(--font-display), sans-serif;
      font-size: 64px;
      font-weight: 500;
      letter-spacing: -0.07em;
      color: rgba(255, 255, 255, 0.055);
      line-height: 1;
      user-select: none;
      pointer-events: none;
    }


    .pi-arrow-icon {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: rgba(26, 83, 255, 0.22);
      border: 1px solid rgba(26, 83, 255, 0.50);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      color: #7AAAFF;
      box-shadow: 0 0 18px rgba(26, 83, 255, 0.22);
      transition: box-shadow 0.25s ease;
    }

    .pi-arrow:hover .pi-arrow-icon {
      box-shadow: 0 0 26px rgba(26, 83, 255, 0.40);
    }

    .pi-arrow-title {
      font-family: var(--font-display), sans-serif;
      font-size: 19px;
      font-weight: 500;
      color: #FFFFFF;
      letter-spacing: -0.01em;
      margin-bottom: 4px;
      line-height: 1.2;
    }

    .pi-arrow-tagline {
      display: block;
      font-size: 13.5px;
      font-weight: 600;
      background: linear-gradient(90deg, #7AAAFF, #00D4FF);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      margin-bottom: 6px;
    }

    .pi-arrow-desc {
      font-size: 14.5px;
      color: rgba(255, 255, 255, 0.75);
      line-height: 1.5;
      margin: 0;
    }

    /* �"?�"? Mobile �"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"?�"? */
    @media (max-width: 780px) {
      .process {
        padding: 72px 0 90px;
      }

      .pi-body {
        flex-direction: column;
        align-items: stretch;
        gap: 36px;
        padding: 0 20px;
      }

      .pi-circle-col {
        width: auto;
        justify-content: center;
      }

      .pi-circle-col::after {
        display: none;
      }

      .pi-circle {
        width: 150px;
        height: 150px;
      }

      .pi-circle-logo {
        width: 66px;
      }

      .pi-steps-col {
        padding-left: 38px;
      }

      .pi-steps-col::before {
        left: 11px;
        top: 32px;
        bottom: 32px;
      }

      .pi-step-row::before {
        left: -26px;
        width: 26px;
      }

      .pi-step-row::after {
        left: -32px;
        width: 10px;
        height: 10px;
      }

      .pi-arrow {
        min-height: 70px;
        padding: 14px 50px 14px 18px;
        gap: 12px;
      }

      .pi-arrow-num {
        font-size: 48px;
        right: 26px;
      }

      .pi-arrow-icon {
        width: 36px;
        height: 36px;
      }

      .pi-arrow-title {
        font-size: 17px;
      }

      .pi-arrow-tagline {
        font-size: 12.5px;
      }

      .pi-arrow-desc {
        font-size: 13.5px;
      }
    }

    #faq {
      background: #FFFFFF;
      padding: 100px 0 120px;
    }

    #faq .faq-container {
      max-width: 1000px;
      margin: 0 auto;
      padding: 0 48px;
    }

    #faq .faq-header {
      text-align: center;
      margin-bottom: 56px;
    }

    #faq .faq-header h2 {
      font-size: clamp(28px, 3.5vw, 44px);
      /* Aligné sur .section-title */
      font-weight: 700;
      /* Bold */
      letter-spacing: -0.025em;
      /* Condensé style SaaS */
      color: var(--text-main);
      margin-bottom: 12px;
    }

    #faq .faq-header p {
      font-size: 17px;
      color: var(--text-muted);
    }

    /* Grille 2 colonnes */
    #faq .faq-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      align-items: start;
    }

    /* Carte FAQ */
    #faq .faq-card {
      background: #FFFFFF;
      border: 1px solid rgba(11, 27, 61, 0.08);
      border-radius: 16px;
      padding: 20px 24px;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      opacity: 0;
      transform: translateY(20px);
    }

    #faq .faq-card.faq-visible {
      opacity: 1;
      transform: translateY(0);
    }

    #faq .faq-card:nth-child(1) {
      transition-delay: 0.05s;
    }

    #faq .faq-card:nth-child(2) {
      transition-delay: 0.10s;
    }

    #faq .faq-card:nth-child(3) {
      transition-delay: 0.15s;
    }

    #faq .faq-card:nth-child(4) {
      transition-delay: 0.20s;
    }

    #faq .faq-card:nth-child(5) {
      transition-delay: 0.25s;
    }

    #faq .faq-card:nth-child(6) {
      transition-delay: 0.30s;
    }

    #faq .faq-card:nth-child(7) {
      transition-delay: 0.35s;
    }

    #faq .faq-card:nth-child(8) {
      transition-delay: 0.40s;
    }

    /* Hover état fermé */
    #faq .faq-card:not(.open):hover {
      border-color: rgba(26, 83, 255, 0.20);
      box-shadow: 0 4px 20px rgba(26, 83, 255, 0.06);
      transform: translateY(-2px);
    }

    /* Carte ouverte */
    #faq .faq-card.open {
      border-color: #1A53FF;
      border-width: 1.5px;
      box-shadow: 0 8px 32px rgba(26, 83, 255, 0.10);
      background: #FAFCFF;
    }

    /* Header de la carte */
    #faq .faq-card-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
    }

    #faq .faq-card-q {
      font-size: 15px;
      font-weight: 600;
      color: var(--text-main);
      line-height: 1.45;
      flex: 1;
      transition: color 0.2s ease;
    }

    #faq .faq-card.open .faq-card-q {
      color: #1A53FF;
    }

    /* Bouton +/�- */
    #faq .faq-card-btn {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      border: 1.5px solid rgba(11, 27, 61, 0.15);
      background: transparent;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: all 0.3s ease;
      margin-top: 2px;
    }

    #faq .faq-card.open .faq-card-btn {
      background: #1A53FF;
      border-color: #1A53FF;
      transform: rotate(45deg);
    }

    #faq .faq-btn-icon {
      font-size: 16px;
      font-weight: 300;
      color: var(--text-muted);
      line-height: 1;
      transition: color 0.3s ease;
    }

    #faq .faq-card.open .faq-btn-icon {
      color: #FFFFFF;
    }

    /* Réponse */
    #faq .faq-card-answer {
      max-height: 0;
      overflow: hidden;
      font-size: 14px;
      color: var(--text-muted);
      line-height: 1.75;
      transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, margin-top 0.3s ease;
      opacity: 0;
      margin-top: 0;
    }

    #faq .faq-card.open .faq-card-answer {
      max-height: 200px;
      opacity: 1;
      margin-top: 14px;
    }

    #faq .faq-card-answer strong {
      color: var(--text-main);
      font-weight: 600;
    }

    /* CTA */
    #faq .faq-cta {
      text-align: center;
      margin-top: 56px;
    }

    #faq .faq-cta p {
      font-size: 17px;
      color: var(--text-muted);
      margin-bottom: 20px;
    }

    /* Responsive */
    @media (max-width: 768px) {
      #faq .faq-grid {
        grid-template-columns: 1fr;
      }
    }

    /* --- Témoignages responsive --- */
    @media (max-width: 768px) {
      .testi-columns {
        grid-template-columns: 1fr !important;
        height: 520px !important;
        padding: 0 16px !important;
        max-width: 100% !important;
      }

      /* Cacher colonnes 2 et 3 sur mobile */
      .testi-col:nth-child(2),
      .testi-col:nth-child(3) {
        display: none;
      }

      /* Forcer la colonne visible à prendre toute la largeur */
      .testi-col:first-child {
        width: 100%;
        align-self: stretch;
      }

      .testi-col:first-child .testi-col-inner {
        width: 100%;
      }

      /* Cartes pleine largeur + contenu centré */
      .testi-col:first-child .testi-card {
        width: 100%;
        box-sizing: border-box;
        text-align: center;
      }

      .testi-col:first-child .testi-author {
        justify-content: center;
      }
    }

    /* --- Système de Titres Global --- */
    .section-label-wrap {
      display: flex;
      justify-content: center;
      margin-bottom: 16px;
      position: relative;
    }

    .section-label {
      display: inline-flex;
      align-items: center;
      background: transparent;
      border: 1.5px solid rgba(11, 27, 61, 0.15);
      border-radius: 20px;
      padding: 6px 18px;
      font-size: 13px;
      font-weight: 600;
      color: var(--text-muted);
      letter-spacing: 0.04em;
    }

    /* Sur fond sombre */
    #tarifs .section-label {
      border-color: rgba(255, 255, 255, 0.20);
      color: rgba(255, 255, 255, 0.50);
      background: transparent;
    }

    .section-title {
      font-size: clamp(28px, 3.5vw, 44px);
      font-weight: 700;
      color: var(--text-main);
      line-height: 1.25;
      letter-spacing: -0.025em;
      /* Tighter look */
      max-width: 680px;
      margin: 0 auto 16px;
      text-align: center;
    }

    #tarifs .section-title {
      color: #FFFFFF;
    }

    .section-subtitle {
      font-size: 17px;
      color: var(--text-muted);
      text-align: center;
      max-width: 520px;
      margin: 0 auto 64px;
      line-height: 1.7;
    }

    #tarifs .section-subtitle {
      color: rgba(255, 255, 255, 0.45);
    }

    /* --- Témoignages Corrections --- */
    #temoignages {
      background: #F8FAFF;
      padding: 100px 0 120px;
      overflow: hidden;
    }

    .testi-columns {
      position: relative;
      height: 600px;
      overflow: hidden;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      max-width: 1100px;
      margin: 0 auto;
    }

    .testi-columns::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 140px;
      background: linear-gradient(to bottom, #F8FAFF 0%, #F8FAFF 30%, transparent 100%);
      z-index: 10;
      pointer-events: none;
    }

    .testi-columns::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 140px;
      background: linear-gradient(to top, #F8FAFF 0%, #F8FAFF 30%, transparent 100%);
      z-index: 10;
      pointer-events: none;
    }

    .testi-col-inner {
      display: flex;
      flex-direction: column;
      gap: 16px;
      padding: 0 6px;
      will-change: transform;
    }

    .testi-card {
      background: #FFFFFF;
      border-radius: 16px;
      padding: 24px;
      border: 1px solid rgba(11, 27, 61, 0.07);
      box-shadow: 0 2px 12px rgba(11, 27, 61, 0.05);
      transition: box-shadow 0.3s ease, border-color 0.3s ease;
      cursor: default;
      flex-shrink: 0;
    }

    .testi-card:hover {
      box-shadow: 0 8px 32px rgba(11, 27, 61, 0.12);
      border-color: rgba(26, 83, 255, 0.20);
    }

    .testi-card p {
      font-size: 14px;
      font-weight: 400;
      color: var(--text-muted);
      line-height: 1.7;
      font-style: italic;
      margin: 0;
    }

    .testi-author {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 16px;
      padding-top: 16px;
      border-top: 1px solid rgba(11, 27, 61, 0.06);
    }

    .testi-avatar {
      width: 40px !important;
      height: 40px !important;
      min-width: 40px;
      min-height: 40px;
      border-radius: 50% !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      font-size: 12px !important;
      font-weight: 500 !important;
      color: white !important;
      flex-shrink: 0 !important;
      overflow: hidden;
    }

    .testi-author>div:last-child {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .testi-name {
      display: block;
      font-size: 13px;
      font-weight: 500;
      color: var(--text-main);
      white-space: nowrap;
    }

    .testi-role {
      display: block;
      font-size: 11px;
      color: var(--text-muted);
      white-space: nowrap;
    }

    .testi-card {
      background: #FFFFFF;
      border-radius: 16px;
      padding: 24px;
      border: 1px solid rgba(11, 27, 61, 0.07);
      box-shadow: 0 2px 12px rgba(11, 27, 61, 0.05);
      flex-shrink: 0;
    }

    /* --- Tarifs Interactif --- */
    /* --- Tarifs Interactif --- */
    #tarifs {
      background: #F8FAFF;
      padding: 100px 0 160px;
      position: relative;
      overflow: clip;
      color: var(--text-main);
    }

    #tarifs::before {
      content: '';
      position: absolute;
      top: -200px;
      left: 50%;
      transform: translateX(-50%);
      width: 900px;
      height: 900px;
      border-radius: 50%;
      background: radial-gradient(circle,
          rgba(19, 127, 236, 0.08) 0%,
          transparent 70%);
      pointer-events: none;
    }

    .tarifs-wrapper {
      max-width: 1000px;
      margin: 0 auto;
      padding: 0 48px;
      position: relative;
      z-index: 1;
    }

    /* --- Navigation onglets --- */
    .tarifs-nav {
      display: flex;
      gap: 12px;
      margin-bottom: 56px;
      flex-wrap: wrap;
      justify-content: center;
      scroll-margin-top: 100px;
      /* �?vite que le menu soit caché par la navbar fixe */
    }

    .tarif-tab {
      padding: 12px 24px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 600;
      letter-spacing: 0.01em;
      cursor: pointer;
      border: 1px solid transparent;
      background: #FFFFFF;
      color: var(--text-muted);
      font-family: 'Inter', sans-serif;
      box-shadow: 0 2px 8px rgba(11, 27, 61, 0.04);
      transition: all 0.2s ease;
    }

    .tarif-tab:hover {
      background: #FFFFFF;
      color: var(--text-main);
      box-shadow: 0 4px 12px rgba(11, 27, 61, 0.08);
      border-color: rgba(19, 127, 236, 0.2);
    }

    .tarif-tab.active {
      background: #137FEC;
      color: #FFFFFF;
      border-color: #137FEC;
      box-shadow: 0 4px 16px rgba(19, 127, 236, 0.25);
    }

    .tarif-tab__badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #1A53FF;
      font-size: 10px;
      font-weight: 500;
      color: #FFFFFF;
      margin-left: 7px;
      vertical-align: middle;
    }

    /* --- Panels --- */
    .tarifs-panel {
      display: none;
    }

    .tarifs-panel.active {
      display: block;
      animation: fadeInPanel 0.28s ease;
    }

    @keyframes fadeInPanel {
      from {
        opacity: 0;
        transform: translateY(10px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* --- Grille produits --- */
    .products-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }

    /* --- Carte produit --- */
    .product-card {
      background: #FFFFFF;
      border: 1px solid rgba(11, 27, 61, 0.08);
      border-radius: 12px;
      padding: 28px;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      flex-direction: column;
      user-select: none;
      box-shadow: 0 4px 16px rgba(11, 27, 61, 0.03);
    }

    .product-card:hover {
      border-color: rgba(19, 127, 236, 0.3);
      box-shadow: 0 8px 24px rgba(19, 127, 236, 0.08);
      transform: translateY(-4px);
    }

    .product-card.selected {
      background: #F4F9FF;
      border-color: #137FEC;
      box-shadow: 0 0 0 1px #137FEC, 0 8px 24px rgba(19, 127, 236, 0.12);
    }

    .product-card__top {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 20px;
    }

    .product-card__tag {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 24px;
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      padding: 0 12px;
      border-radius: 20px;
      background: rgba(11, 27, 61, 0.05);
      color: var(--text-main);
      /* Bleu foncé pour une meilleure lisibilité */
    }

    .product-card.selected .product-card__tag {
      background: rgba(19, 127, 236, 0.1);
      color: #137FEC;
      /* Garde le bleu vif en état sélectionné */
    }

    .product-card__check {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      border: 1.5px solid rgba(11, 27, 61, 0.15);
      background: #FFFFFF;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: all 0.25s ease;
    }

    .product-card__check svg {
      opacity: 0;
      transform: scale(0.4);
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
      stroke: #FFFFFF;
    }

    .product-card.selected .product-card__check {
      background: #137FEC;
      border-color: #137FEC;
      box-shadow: 0 0 10px rgba(19, 127, 236, 0.3);
    }

    .product-card.selected .product-card__check svg {
      opacity: 1;
      transform: scale(1);
    }

    .product-card__name {
      font-size: 18px;
      font-weight: 500;
      color: var(--text-main);
      margin-bottom: 8px;
      line-height: 1.3;
      font-family: var(--font-body), sans-serif;
    }

    .product-card__desc {
      font-size: 14px;
      color: var(--text-muted);
      line-height: 1.6;
      min-height: 120px;
      /* Augmenté pour donner plus de corps à la description */
      margin-bottom: 0;
    }

    .product-card__pricing-area {
      min-height: 90px;
      /* Aligne le début des listes d'options */
      margin-top: 16px;
      padding-top: 16px;
      border-top: 1px solid rgba(11, 27, 61, 0.08);
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin-bottom: 0;
    }

    .product-card.selected .product-card__pricing-area {
      border-top-color: rgba(19, 127, 236, 0.15);
    }

    .product-card__price {
      display: flex;
      align-items: baseline;
      gap: 4px;
    }

    .product-card__amount {
      font-size: 24px;
      font-weight: 500;
      color: var(--text-main);
      font-family: var(--font-display), sans-serif;
    }

    .product-card.selected .product-card__amount {
      color: #137FEC;
    }

    .product-card__period {
      font-size: 13px;
      color: var(--text-muted);
    }

    .product-card__ht {
      font-size: 11px;
      color: var(--text-muted);
      margin-left: 2px;
    }

    .product-card__frais {
      font-size: 13px;
      color: var(--text-muted);
      margin-top: 4px;
      font-weight: 500;
    }

    .product-card__engagement {
      font-size: 12px;
      color: var(--text-muted);
      margin-top: 2px;
      font-style: italic;
    }

    .product-features {
      margin-top: 16px;
      /* Réduit de 20px */
      padding-top: 16px;
      /* Réduit de 20px */
      border-top: 1px dashed rgba(11, 27, 61, 0.1);
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .product-feature {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 13px;
      color: var(--text-muted);
    }

    .product-feature svg {
      flex-shrink: 0;
      color: #137FEC;
    }

    .product-card.selected .product-feature {
      color: var(--text-main);
    }

    .product-card--devis .product-card__amount {
      font-size: 16px;
      font-weight: 600;
      color: var(--text-muted);
    }

    /* Mention comédiens voix */
    .audio-voice-mention {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-top: 20px;
      padding: 12px 24px;
      border-radius: 10px;
      background: linear-gradient(135deg, rgba(0, 85, 164, 0.05) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(239, 65, 53, 0.05) 100%);
      border: 1px solid rgba(11, 27, 61, 0.07);
      font-size: 13px;
      color: var(--text-muted);
    }

    .audio-voice-mention svg {
      flex-shrink: 0;
      color: var(--royal);
      opacity: 0.65;
    }

    .audio-voice-mention__flag {
      display: flex;
      border-radius: 3px;
      overflow: hidden;
      flex-shrink: 0;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    }

    .audio-voice-mention__flag span {
      display: block;
      width: 8px;
      height: 14px;
    }

    .audio-voice-mention__flag span:nth-child(1) {
      background: #002395;
    }

    .audio-voice-mention__flag span:nth-child(2) {
      background: #FFFFFF;
    }

    .audio-voice-mention__flag span:nth-child(3) {
      background: #ED2939;
    }

    .audio-voice-mention strong {
      color: var(--text-main);
      font-weight: 500;
    }

    /* Layout groupé par catégorie (panel audio) */
    .audio-groups {
      display: flex;
      flex-direction: column;
      gap: 28px;
    }

    .audio-group {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .audio-group__header {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 4px;
    }

    .audio-group__line {
      flex: 1;
      height: 1px;
      background: rgba(26, 83, 255, 0.12);
    }

    .audio-group__title {
      font-size: 11px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: rgba(11, 27, 61, 0.35);
      white-space: nowrap;
    }

    /* Ligne produit horizontale */
    .product-row {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 14px 20px;
      border-radius: 10px;
      border: 1px solid rgba(11, 27, 61, 0.07);
      background: #FFFFFF;
      cursor: pointer;
      transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
      user-select: none;
    }

    .product-row:hover {
      border-color: rgba(19, 127, 236, 0.3);
      box-shadow: 0 4px 16px rgba(19, 127, 236, 0.07);
    }

    .product-row.selected {
      background: #F4F9FF;
      border-color: #137FEC;
      box-shadow: 0 0 0 1px #137FEC, 0 4px 16px rgba(19, 127, 236, 0.1);
    }

    .product-row__check {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      border: 1.5px solid rgba(11, 27, 61, 0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: background 0.2s, border-color 0.2s;
    }

    .product-row.selected .product-row__check {
      background: #137FEC;
      border-color: #137FEC;
    }

    .product-row.selected .product-row__check svg path {
      stroke: white;
    }

    .product-row__check svg path {
      stroke: transparent;
    }

    .product-row__info {
      flex: 1;
      min-width: 0;
    }

    .product-row__name {
      display: block;
      font-size: 14px;
      font-weight: 600;
      color: var(--text-main);
      line-height: 1.2;
    }

    .product-row.selected .product-row__name {
      color: #137FEC;
    }

    .product-row__desc {
      display: block;
      font-size: 12px;
      color: var(--text-muted);
      margin-top: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .product-row__price {
      font-size: 16px;
      font-weight: 500;
      color: var(--text-main);
      white-space: nowrap;
      font-family: var(--font-display), sans-serif;
      flex-shrink: 0;
    }

    .product-row.selected .product-row__price {
      color: #137FEC;
    }

    .product-row__price-ht {
      font-size: 11px;
      font-weight: 400;
      color: var(--text-muted);
      margin-left: 2px;
    }

    .product-row__price--devis {
      font-size: 13px;
      font-weight: 600;
      color: var(--text-muted);
    }

    /* Bandeau demande sur devis */
    .devis-banner {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 16px 20px;
      border-radius: 12px;
      border: 1.5px dashed rgba(19, 127, 236, 0.30);
      background: rgba(19, 127, 236, 0.03);
      cursor: pointer;
      transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
      user-select: none;
      margin-top: 8px;
    }

    .devis-banner:hover {
      border-color: rgba(19, 127, 236, 0.55);
      background: rgba(19, 127, 236, 0.06);
    }

    .devis-banner.selected {
      border-color: #137FEC;
      background: rgba(19, 127, 236, 0.08);
      box-shadow: 0 0 0 1px rgba(19, 127, 236, 0.25);
    }

    .devis-banner__check {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      border: 1.5px solid rgba(19, 127, 236, 0.30);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: background 0.2s, border-color 0.2s;
    }

    .devis-banner.selected .devis-banner__check {
      background: #137FEC;
      border-color: #137FEC;
    }

    .devis-banner.selected .devis-banner__check svg path {
      stroke: white;
    }

    .devis-banner__check svg path {
      stroke: transparent;
    }

    .devis-banner__icon {
      flex-shrink: 0;
      opacity: 0.45;
      display: flex;
      align-items: center;
      color: var(--text-main);
    }

    .devis-banner.selected .devis-banner__icon {
      opacity: 1;
      color: #137FEC;
    }

    .devis-banner__info {
      flex: 1;
    }

    .devis-banner__title {
      display: block;
      font-size: 14px;
      font-weight: 600;
      color: var(--text-main);
    }

    .devis-banner.selected .devis-banner__title {
      color: #137FEC;
    }

    .devis-banner__desc {
      display: block;
      font-size: 12px;
      color: var(--text-muted);
      margin-top: 2px;
    }

    .devis-banner__price {
      font-size: 13px;
      font-weight: 600;
      color: var(--text-muted);
      white-space: nowrap;
      flex-shrink: 0;
    }

    .devis-banner.selected .devis-banner__price {
      color: #137FEC;
    }

    /* Flèches de navigation latérales */
    .tarifs-panels-outer {
      display: flex;
      align-items: flex-start;
    }

    /* Ancres à largeur zéro : ne consomment aucun espace flex */
    .tarifs-arrow-anchor {
      width: 0;
      flex-shrink: 0;
      overflow: visible;
      position: sticky;
      top: calc(50vh - 22px);
      align-self: flex-start;
      z-index: 10;
    }

    .tarifs-panels {
      flex: 1;
      min-width: 0;
    }

    .tarifs-arrow {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: #FFFFFF;
      border: 1.5px solid rgba(11, 27, 61, 0.12);
      box-shadow: 0 4px 16px rgba(11, 27, 61, 0.10);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: border-color 0.18s, box-shadow 0.18s, opacity 0.18s;
      color: var(--text-muted);
    }

    .tarifs-arrow--left {
      transform: translateX(calc(-100% - 32px));
    }

    .tarifs-arrow--right {
      transform: translateX(32px);
    }

    .tarifs-arrow:hover {
      border-color: var(--royal);
      color: var(--royal);
      box-shadow: 0 6px 20px rgba(26, 83, 255, 0.16);
    }

    .tarifs-arrow.is-hidden {
      opacity: 0;
      pointer-events: none;
    }

    @media (max-width: 480px) {
      .tarifs-arrow-anchor {
        display: none;
      }
    }

    /* Bandeau hébergement France */
    .hosting-france-banner {
      margin-top: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 12px 24px;
      border-radius: 10px;
      background: linear-gradient(135deg, rgba(0, 85, 164, 0.05) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(239, 65, 53, 0.05) 100%);
      border: 1px solid rgba(11, 27, 61, 0.07);
    }

    .hosting-france-flag {
      display: flex;
      gap: 0;
      border-radius: 3px;
      overflow: hidden;
      flex-shrink: 0;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    }

    .hosting-france-flag span {
      display: block;
      width: 8px;
      height: 14px;
    }

    .hosting-france-flag span:nth-child(1) {
      background: #002395;
    }

    .hosting-france-flag span:nth-child(2) {
      background: #FFFFFF;
    }

    .hosting-france-flag span:nth-child(3) {
      background: #ED2939;
    }

    .hosting-france-text {
      font-size: 12px;
      font-weight: 600;
      color: var(--text-muted);
      letter-spacing: 0.02em;
    }

    .hosting-france-text strong {
      color: var(--text-main);
      font-weight: 500;
    }

    /* Logo packs - exclusif */
    .logo-packs-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-bottom: 36px;
    }

    .product-features.is-collapsed li:nth-child(n+3) {
      display: none;
    }

    .features-toggle-btn {
      display: flex;
      align-items: center;
      gap: 5px;
      margin-top: 15px;
      background: none;
      border: none;
      padding: 0;
      font-size: 11px;
      font-weight: 500;
      color: var(--royal);
      text-transform: uppercase;
      letter-spacing: 0.04em;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .features-toggle-btn svg {
      transition: transform 0.3s ease;
    }

    .features-toggle-btn.is-active svg {
      transform: rotate(180deg);
    }

    .features-toggle-btn:hover {
      opacity: 0.7;
    }

    /* Options section */
    .options-section {
      padding-top: 28px;
    }

    .options-section__header {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 18px;
    }

    .options-section__title {
      font-size: 11px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: rgba(11, 27, 61, 0.35);
      white-space: nowrap;
    }

    .options-section__line {
      flex: 1;
      height: 1px;
      background: rgba(26, 83, 255, 0.12);
    }

    .options-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .option-chip {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 10px 16px;
      border-radius: 100px;
      border: 1.5px solid rgba(26, 83, 255, 0.2);
      background: rgba(26, 83, 255, 0.03);
      cursor: pointer;
      transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
      user-select: none;
    }

    .option-chip:hover {
      border-color: rgba(26, 83, 255, 0.4);
      background: rgba(26, 83, 255, 0.06);
    }

    .option-chip.selected {
      border-color: var(--royal);
      background: rgba(26, 83, 255, 0.08);
      box-shadow: 0 0 0 3px rgba(26, 83, 255, 0.1);
    }

    .option-chip__check {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: 1.5px solid rgba(26, 83, 255, 0.3);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: background 0.15s, border-color 0.15s;
    }

    .option-chip.selected .option-chip__check {
      background: var(--royal);
      border-color: var(--royal);
    }

    .option-chip.selected .option-chip__check svg path {
      stroke: white;
    }

    .option-chip__check svg path {
      stroke: transparent;
    }

    .option-chip__name {
      font-size: 14px;
      font-weight: 500;
      color: var(--text-main);
    }

    .option-chip__price {
      font-size: 13px;
      font-weight: 600;
      color: var(--royal);
    }

    .option-chip--devis .option-chip__price {
      color: var(--text-muted);
      font-weight: 500;
    }

    @media (max-width: 768px) {
      .logo-packs-grid {
        grid-template-columns: 1fr;
      }
    }

    /* Barre sticky */
    .tarifs-sticky-bar {
      position: fixed !important;
      bottom: -250px;
      left: 50%;
      transform: translateX(-50%);
      width: calc(100% - 48px);
      max-width: 900px;
      z-index: 2147483647;
      transition: bottom 0.5s cubic-bezier(0.16, 1, 0.3, 1);
      /* Forcer nouveau contexte de stacking au niveau body */
      isolation: isolate;
    }

    .tarifs-sticky-bar.visible {
      bottom: 24px;
    }

    .tsb-inner {
      background: rgba(255, 255, 255, 0.96);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      border: 1px solid rgba(11, 27, 61, 0.08);
      border-radius: 20px;
      padding: 20px 28px;
      display: flex;
      align-items: center;
      gap: 24px;
      box-shadow: 0 24px 64px rgba(11, 27, 61, 0.15),
        0 0 0 1px rgba(255, 255, 255, 0.5);
    }

    .tsb-brand {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-shrink: 0;
      padding-right: 24px;
      border-right: 1px solid rgba(11, 27, 61, 0.08);
    }

    .tsb-brand-logo {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      background: #FFFFFF;
      padding: 6px;
      flex-shrink: 0;
      object-fit: contain;
      box-shadow: 0 2px 8px rgba(11, 27, 61, 0.12);
    }

    .tsb-brand-text {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .tsb-brand-name {
      font-size: 14px;
      font-weight: 500;
      color: var(--text-main);
      line-height: 1;
      font-family: var(--font-display), sans-serif;
    }

    .tsb-brand-sub {
      font-size: 10px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--royal);
    }

    .tsb-info-wrap {
      position: relative;
      display: flex;
      align-items: center;
    }

    .tsb-info-icon {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      border: 1.5px solid rgba(11, 27, 61, 0.20);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 500;
      color: var(--text-muted);
      cursor: help;
      font-style: italic;
      transition: all 0.2s ease;
    }

    .tsb-info-icon:hover {
      border-color: #137FEC;
      color: #137FEC;
    }

    .tsb-info-tooltip {
      position: absolute;
      bottom: calc(100% + 10px);
      left: 50%;
      transform: translateX(-50%);
      width: 240px;
      background: rgba(255, 255, 255, 0.98);
      border: 1px solid rgba(11, 27, 61, 0.08);
      border-radius: 10px;
      padding: 12px 14px;
      font-size: 12px;
      color: var(--text-muted);
      line-height: 1.6;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.2s ease;
      white-space: normal;
      z-index: 200;
      box-shadow: 0 8px 32px rgba(11, 27, 61, 0.10);
    }

    /* Flèche du tooltip */
    .tsb-info-tooltip::after {
      content: '';
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      border: 6px solid transparent;
      border-top-color: rgba(255, 255, 255, 0.98);
    }

    .tsb-info-wrap:hover .tsb-info-tooltip {
      opacity: 1;
    }

    /* Tooltip dans les rows audio */
    .product-row__info {
      position: relative;
    }

    .product-row__info .tsb-info-wrap {
      display: inline-flex;
      vertical-align: middle;
      margin-left: 6px;
    }

    .product-row__info .tsb-info-tooltip {
      bottom: calc(100% + 8px);
      left: 0;
      transform: none;
      width: 270px;
    }

    .product-row__info .tsb-info-tooltip::after {
      left: 16px;
      transform: none;
    }

    .tsb-summary {
      display: flex;
      align-items: center;
      gap: 16px;
      flex: 1;
    }

    .tsb-item {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .tsb-label {
      font-size: 10px;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .tsb-value {
      font-size: 20px;
      font-weight: 500;
      color: var(--text-main);
      font-family: var(--font-display), sans-serif;
    }

    .tsb-divider {
      width: 1px;
      height: 32px;
      background: rgba(11, 27, 61, 0.10);
    }

    .tsb-devis-icon {
      font-size: 24px;
      flex-shrink: 0;
    }

    .tsb-devis-main {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .tsb-devis-title {
      display: block;
      font-size: 14px;
      font-weight: 500;
      color: var(--text-main);
    }

    .tsb-devis-desc {
      display: block;
      font-size: 12px;
      color: var(--text-muted);
      line-height: 1.4;
      text-transform: lowercase;
    }

    /* Styles pour la flèche du bouton */
    .tsb-btn-arrow {
      display: inline-block;
      transition: transform 0.2s ease;
    }

    .tsb-ctas {
      display: flex;
      gap: 10px;
      flex-shrink: 0;
    }

    .tsb-btn {
      padding: 12px 20px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      white-space: nowrap;
      transition: all 0.2s ease;
    }

    .tsb-btn.ghost {
      display: flex;
      align-items: center;
      padding: 12px 18px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 500;
      background: transparent;
      border: 1px solid rgba(11, 27, 61, 0.15);
      color: var(--text-main);
      order: 1;
    }

    .tsb-btn.ghost:hover {
      border-color: #137FEC;
      color: #137FEC;
      background: rgba(19, 127, 236, 0.05);
    }

    .tsb-btn.solid {
      background: #137FEC;
      border: none;
      color: #FFFFFF;
      padding: 12px 22px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 500;
      order: 2;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .tsb-btn.solid:hover {
      background: #0B1B3D;
      color: #FFFFFF;
    }

    .tsb-btn.solid:hover .tsb-btn-arrow {
      transform: translateX(4px);
    }

    /* Responsive Tarifs */
    @media (max-width: 900px) {
      .products-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 600px) {
      .products-grid {
        grid-template-columns: 1fr;
      }

      .tarifs-nav {
        gap: 6px;
      }

      .tarif-tab {
        font-size: 12px;
        padding: 9px 14px;
      }

      .tsb-inner {
        flex-wrap: wrap;
        gap: 16px;
      }

      .tsb-tagline {
        display: none;
      }
    }

    /* ============================================
       BACKGROUND ANIMATIONS
    ============================================= */
    #services,
    #faq,
    .comparison {
      position: relative;
    }

    #services::before,
    #faq::before,
    .comparison::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: radial-gradient(rgba(11, 27, 61, 0.06) 1px, transparent 1px);
      background-size: 32px 32px;
      pointer-events: none;
      z-index: 0;
    }

    #services .services-container,
    #services .services-header,
    #services .service-card,
    #services .container,
    #faq .faq-container,
    .comparison .container {
      position: relative;
      z-index: 1;
    }

    /* Particules Flottantes */
    .floating-orbs {
      position: absolute;
      inset: 0;
      pointer-events: none;
      overflow: hidden;
      z-index: 0;
    }

    .forb {
      position: absolute;
      border-radius: 50%;
      filter: blur(60px);
      animation: orb-drift linear infinite;
    }

    .forb-1 {
      width: 400px;
      height: 400px;
      background: rgba(26, 83, 255, 0.04);
      top: -100px;
      left: -100px;
      animation-duration: 20s;
      animation-delay: 0s;
    }

    .forb-2 {
      width: 300px;
      height: 300px;
      background: rgba(0, 212, 255, 0.03);
      top: 30%;
      right: -80px;
      animation-duration: 25s;
      animation-delay: -8s;
    }

    .forb-3 {
      width: 250px;
      height: 250px;
      background: rgba(26, 83, 255, 0.03);
      bottom: 10%;
      left: 20%;
      animation-duration: 18s;
      animation-delay: -5s;
    }

    .forb-4 {
      width: 200px;
      height: 200px;
      background: rgba(0, 212, 255, 0.025);
      top: 60%;
      right: 25%;
      animation-duration: 22s;
      animation-delay: -12s;
    }

    @keyframes orb-drift {
      0% {
        transform: translateY(0px) translateX(0px) scale(1);
      }

      25% {
        transform: translateY(-30px) translateX(20px) scale(1.05);
      }

      50% {
        transform: translateY(-15px) translateX(-15px) scale(0.97);
      }

      75% {
        transform: translateY(20px) translateX(10px) scale(1.03);
      }

      100% {
        transform: translateY(0px) translateX(0px) scale(1);
      }
    }

    /* Aurora Borealis */
    #tarifs {
      position: relative;
      overflow: clip;
    }

    .tarifs-aurora,


    .tarifs-aurora {
      overflow: hidden;
      z-index: 0;
    }

    .aurora {
      position: absolute;
      border-radius: 50%;
      filter: blur(80px);
      animation: aurora-move ease-in-out infinite alternate;
    }

    .aurora-1 {
      width: 600px;
      height: 300px;
      background: rgba(19, 127, 236, 0.06);
      top: -50px;
      left: -100px;
      animation-duration: 12s;
      animation-delay: 0s;
    }

    .aurora-2 {
      width: 500px;
      height: 250px;
      background: rgba(0, 212, 255, 0.04);
      top: 20%;
      right: -80px;
      animation-duration: 16s;
      animation-delay: -4s;
    }

    .aurora-3 {
      width: 700px;
      height: 200px;
      background: rgba(19, 127, 236, 0.03);
      bottom: 0;
      left: 20%;
      animation-duration: 14s;
      animation-delay: -7s;
    }


    @keyframes aurora-move {
      0% {
        transform: translateX(0px) translateY(0px) scaleX(1);
        opacity: 0.6;
      }

      50% {
        transform: translateX(40px) translateY(-20px) scaleX(1.1);
        opacity: 1;
      }

      100% {
        transform: translateX(-20px) translateY(10px) scaleX(0.95);
        opacity: 0.7;
      }
    }

    #temoignages,
    #processus {
      position: relative;
    }

    #temoignages::before,
    #processus::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: repeating-linear-gradient(-45deg,
          transparent,
          transparent 40px,
          rgba(26, 83, 255, 0.018) 40px,
          rgba(26, 83, 255, 0.018) 41px);
      pointer-events: none;
      z-index: 0;
    }

    #temoignages .testi-container,
    #processus .container,
    #processus .process-timeline,
    #processus>* {
      position: relative;
      z-index: 1;
    }



    .tarifs-wrapper {
      position: relative;
      z-index: 1;
    }

    @media (max-width: 768px) {
      .process-timeline {
        padding: 0 20px;
      }

      .pt-vline {
        left: calc(20px + 26px);
      }

      .pt-step-card {
        flex-direction: column;
        gap: 14px;
        padding: 20px;
      }

      .pt-step-title {
        font-size: 17px;
      }
    }

    /* ============================================
       END BACKGROUND ANIMATIONS
    ============================================= */
    /* ============================================
       COOKIE BANNER STYLES
    ============================================= */
    .cookie-banner {
      position: fixed;
      bottom: 24px;
      left: 24px;
      right: 24px;
      max-width: 420px;
      background: #FFFFFF;
      border-radius: 20px;
      box-shadow:
        0 16px 56px rgba(11, 27, 61, 0.16),
        0 2px 8px rgba(11, 27, 61, 0.06),
        0 0 0 1px rgba(11, 27, 61, 0.06);
      padding: 22px 24px 20px;
      z-index: 9999;
      transform: translateY(150%);
      opacity: 0;
      pointer-events: none;
      transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease;
      font-family: 'Inter', sans-serif;
    }

    .cookie-banner.is-visible {
      transform: translateY(0);
      opacity: 1;
      pointer-events: auto;
    }

    .cookie-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
    }

    .cookie-icon {
      font-size: 22px;
      line-height: 1;
    }

    .cookie-title {
      font-weight: 500;
      font-size: 15px;
      color: var(--navy);
      margin: 0;
      letter-spacing: -0.01em;
    }

    .cookie-text {
      font-size: 13px;
      color: var(--text-muted);
      line-height: 1.6;
      margin-bottom: 14px;
    }

    .cookie-text a {
      color: var(--royal);
      text-decoration: underline;
      transition: color 0.2s;
    }

    .cookie-text a:hover {
      color: var(--navy);
    }

    /* Panneau préférences */
    .cookie-prefs {
      display: none;
      flex-direction: column;
      margin-bottom: 14px;
      border: 1px solid rgba(11, 27, 61, 0.08);
      border-radius: 12px;
      overflow: hidden;
    }

    .cookie-prefs.is-open {
      display: flex;
    }

    .cookie-category {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      padding: 11px 14px;
      background: rgba(11, 27, 61, 0.02);
    }

    .cookie-category+.cookie-category {
      border-top: 1px solid rgba(11, 27, 61, 0.06);
      background: #fff;
    }

    .cookie-category-name {
      font-size: 12px;
      font-weight: 600;
      color: var(--navy);
      display: block;
    }

    .cookie-category-desc {
      font-size: 11px;
      color: var(--text-muted);
      margin-top: 2px;
      line-height: 1.4;
    }

    .cookie-required-label {
      font-size: 10px;
      font-weight: 600;
      color: rgba(11, 27, 61, 0.35);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      white-space: nowrap;
    }

    /* Toggle switch */
    .cookie-toggle {
      position: relative;
      width: 36px;
      height: 20px;
      flex-shrink: 0;
    }

    .cookie-toggle input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .cookie-toggle-slider {
      position: absolute;
      inset: 0;
      background: #D1D5DB;
      border-radius: 20px;
      cursor: pointer;
      transition: background 0.2s;
    }

    .cookie-toggle-slider::after {
      content: '';
      position: absolute;
      width: 14px;
      height: 14px;
      left: 3px;
      top: 3px;
      background: white;
      border-radius: 50%;
      transition: transform 0.2s;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    }

    .cookie-toggle input:checked+.cookie-toggle-slider {
      background: var(--royal);
    }

    .cookie-toggle input:checked+.cookie-toggle-slider::after {
      transform: translateX(16px);
    }

    .cookie-toggle input:disabled+.cookie-toggle-slider {
      background: var(--royal);
      opacity: 0.40;
      cursor: not-allowed;
    }

    /* Actions */
    .cookie-actions {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .cookie-actions-row {
      display: flex;
      gap: 8px;
    }

    .cookie-btn {
      flex: 1;
      padding: 10px 14px;
      border-radius: 10px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
      text-align: center;
      border: 1px solid transparent;
      font-family: 'Inter', sans-serif;
      line-height: 1.2;
    }

    .cookie-btn-accept {
      background: var(--navy);
      color: #FFFFFF;
      border-color: var(--navy);
    }

    .cookie-btn-accept:hover {
      background: var(--royal);
      border-color: var(--royal);
    }

    .cookie-btn-deny {
      background: transparent;
      color: var(--navy);
      border-color: rgba(11, 27, 61, 0.18);
    }

    .cookie-btn-deny:hover {
      background: rgba(11, 27, 61, 0.05);
    }

    .cookie-btn-save {
      display: none;
      background: var(--royal);
      color: #FFFFFF;
      border-color: var(--royal);
      width: 100%;
    }

    .cookie-btn-save:hover {
      background: var(--navy);
      border-color: var(--navy);
    }

    .cookie-customize-link {
      background: none;
      border: none;
      font-size: 12px;
      color: var(--text-muted);
      cursor: pointer;
      padding: 2px 0;
      text-decoration: underline;
      font-family: 'Inter', sans-serif;
      text-align: center;
      transition: color 0.2s;
      align-self: center;
    }

    .cookie-customize-link:hover {
      color: var(--royal);
    }

    @media (max-width: 600px) {
      .cookie-banner {
        bottom: 16px;
        left: 16px;
        right: 16px;
        max-width: none;
      }
    }

    /* ============================================
       RESPONSIVE FIXES GLOBAUX
    ============================================= */
    @media (max-width: 768px) {
      :root {
        --container-padding: 20px;
      }

      /* Cacher le bouton CTA navbar sur mobile */
      .navbar__cta {
        display: none !important;
      }

      /* Hardcoded paddings 48px �?' 20px */
      .comparison .container,
      .service-card,
      .service-separator,
      #faq .faq-container,
      .tarifs-wrapper {
        padding-left: 20px;
        padding-right: 20px;
      }

      /* Service card inner : 2 colonnes �?' 1 colonne + padding réduit */
      .service-card-inner {
        grid-template-columns: 1fr;
        padding: 28px 24px;
        gap: 32px;
      }

      /* Audio studio : hauteur fixe �?' auto */
      .audio-studio {
        height: auto;
        min-height: 280px;
      }

    }

    @media (max-width: 480px) {
      :root {
        --container-padding: 16px;
      }

      .comparison .container,
      .service-card,
      .service-separator,
      #faq .faq-container,
      .tarifs-wrapper {
        padding-left: 16px;
        padding-right: 16px;
      }

      .service-card-inner {
        padding: 20px 16px;
      }
    }

    /* ============================================
       LOGOS BANNER �?" Bandeau clients
    ============================================= */
    .logos-banner {
      padding: 48px 0 56px;
      position: relative;
      overflow: hidden;
    }

    .logos-banner__track-wrap {
      position: relative;
      width: 100%;
      overflow: hidden;
    }

    .logos-banner__track {
      display: flex;
      align-items: center;
      width: max-content;
      animation: logos-scroll 44s linear infinite;
    }

    .logos-banner__track:hover {
      animation-play-state: paused;
    }

    @keyframes logos-scroll {
      0% {
        transform: translateX(0);
      }

      100% {
        transform: translateX(-50%);
      }
    }

    .logos-banner__item {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      padding: 0 40px;
    }

    .logos-banner__item img {
      height: 40px;
      width: auto;
      max-width: 150px;
      object-fit: contain;
      filter: brightness(0) saturate(100%) invert(25%) sepia(95%) saturate(2500%) hue-rotate(218deg) brightness(103%);
      opacity: 0.65;
      transition: opacity 0.3s ease;
      user-select: none;
      pointer-events: none;
      display: block;
    }

    .logos-banner__item:hover img {
      opacity: 1;
    }

    .logos-banner__fade {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 160px;
      z-index: 2;
      pointer-events: none;
    }

    .logos-banner__fade--l {
      left: 0;
      background: linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);
    }

    .logos-banner__fade--r {
      right: 0;
      background: linear-gradient(to left, #fff 0%, rgba(255, 255, 255, 0) 100%);
    }

    @media (max-width: 768px) {
      .logos-banner {
        padding: 32px 0 24px;
      }

      .logos-banner__item {
        padding: 0 24px;
      }

      .logos-banner__item img {
        height: 28px;
        max-width: 110px;
      }

      .logos-banner__fade {
        width: 70px;
      }
    }
        .faq-cta-wrapper {
          margin-top: 60px;
          width: 100%;
        }

        .final-cta__card {
          position: relative;
          max-width: 1100px;
          margin: 0 auto;
          background: var(--navy);
          border-radius: 32px;
          padding: 70px 80px;
          color: var(--white);
          overflow: hidden;
          box-shadow: 0 20px 50px rgba(11, 27, 61, 0.15);
          display: flex;
          align-items: center;
          justify-content: space-between;
          text-align: left;
        }

        @media (max-width: 992px) {
          .faq-cta-wrapper {
            margin-top: 40px;
          }

          .final-cta__card {
            flex-direction: column;
            text-align: center;
            padding: 50px 30px;
          }
        }

        /* Conteneur du watermark à droite */
        .final-cta__watermark-wrapper {
          position: absolute;
          right: -5%;
          top: 50%;
          transform: translateY(-50%);
          height: 140%;
          z-index: 1;
          pointer-events: none;
          display: flex;
          align-items: center;
          opacity: 0.15;
          filter: drop-shadow(0 0 30px rgba(0, 212, 255, 0.3));
          -webkit-mask-image: linear-gradient(to right, transparent 0%, black 30%);
          mask-image: linear-gradient(to right, transparent 0%, black 30%);
        }

        .final-cta__watermark {
          height: 100%;
          width: auto;
          object-fit: contain;
        }

        .final-cta__watermark-glow {
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 600px;
          height: 600px;
          background: radial-gradient(circle, rgba(26, 83, 255, 0.2) 0%, rgba(0, 212, 255, 0.05) 40%, transparent 70%);
          z-index: 0;
          pointer-events: none;
        }

        /* Contenu textuel à gauche */
        .final-cta__content {
          position: relative;
          z-index: 2;
          max-width: 580px;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
        }

        @media (max-width: 992px) {
          .final-cta__content {
            align-items: center;
          }
        }

        /* Sur-titre élégant */
        .final-cta__overline {
          display: flex;
          align-items: center;
          gap: 12px;
          font-size: 12px;
          font-weight: 600;
          text-transform: uppercase;
          letter-spacing: 2px;
          color: rgba(255, 255, 255, 0.6);
          margin-bottom: 20px;
        }

        .final-cta__logo-wrap {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          position: relative;
          width: 26px;
          height: 26px;
        }

        .final-cta__logo-wrap::after {
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 44px;
          height: 44px;
          background: rgba(26, 83, 255, 0.15);
          filter: blur(14px);
          z-index: -1;
        }

        .final-cta__logo {
          width: 20px;
          height: auto;
          filter: brightness(0) invert(1);
          z-index: 1;
        }

        .final-cta__title {
          font-family: var(--font-display);
          font-size: clamp(32px, 4vw, 42px);
          font-weight: 700;
          margin-bottom: 20px;
          line-height: 1.15;
          letter-spacing: -0.01em;
        }

        .final-cta__desc {
          font-size: clamp(16px, 2vw, 18px);
          color: rgba(255, 255, 255, 0.75);
          line-height: 1.6;
          margin-bottom: 40px;
        }

        .final-cta__actions {
          display: flex;
          align-items: center;
          gap: 24px;
          flex-wrap: wrap;
        }

        .final-cta__microcopy {
          font-size: 13px;
          color: rgba(255, 255, 255, 0.75);
          display: flex;
          align-items: center;
          gap: 8px;
        }

        .final-cta__microcopy svg {
          fill: none;
          stroke: #00D4FF;
          stroke-width: 2.5;
          stroke-linecap: round;
          stroke-linejoin: round;
        }

        @media (max-width: 992px) {
          .final-cta__overline {
            justify-content: center;
          }

          .final-cta__actions {
            justify-content: center;
            flex-direction: column;
            gap: 16px;
          }
        }