/* ============================================ */
  /* === TOKENS Apple Graphite (HARMONISÉS)   === */
  /* ============================================ */
  :root {
    --bpInk: #1D1D1F;           /* texte principal — INCHANGÉ */
    --bpInk-2: #2D2D30;
    --bpForest: #141914;        /* vert sapin — fonds qui étaient noirs */
    --bpForestDeep: #0d100d;    /* vert sapin foncé */
    --bpAccent: #141914;        /* accent = vert sapin */
    --bpAccentBg: #E5E5EA;
    --bpAccentDeep: #0d100d;
    --bpOnAccent: #FFFFFF;
    --bpBlue: #8FD46E;          /* vert pomme — CTA principaux (anciennement bleu) */
    --bpBlueDeep: #7BC256;      /* vert pomme hover */
    --bpAppleGreen: #8FD46E;    /* alias vert pomme */

    --bpBg: #FFFFFF;
    --bpCard: #FFFFFF;
    --bpCardSoft: #FAFAFA;
    --bpCardSoft-2: #E8E8EB;

    --bpLine: rgba(29,29,31,.08);
    --bpLineStrong: rgba(29,29,31,.18);
    --bpLine-2: #E5E5EA;

    --bpSoft: #6E6E73;
    --bpMuted: #86868B;
    --bpMuted-2: #AEAEB2;

    --bpAmber: #b7791f;
    --bpAmberSoft: rgba(183, 121, 31, 0.10);
    --bpRed: #d64545;
    --bpRedSoft: rgba(214, 69, 69, 0.08);

    --visual-grad-1: #86868B;
    --visual-grad-2: #48484A;
    --visual-grad-3: #1D1D1F;

    --font-display: 'Bricolage Grotesque', -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;

    --radius: 16px;
    --radius-md: 22px;
    --radius-lg: 28px;
  }

  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; padding: 0; }
  html {
    scroll-behavior: smooth;
    overflow-x: hidden;
  }
  body {
    font-family: var(--font-sans);
    background: var(--bpBg);
    color: var(--bpInk);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.01em;
    overflow-x: hidden;     /* empêche tout débordement horizontal mobile */
    width: 100%;
    position: relative;
  }
  /* Sécurité supplémentaire : aucune section ne doit causer de scroll horizontal */
  main, section, footer, nav { max-width: 100vw; }
  a { color: inherit; text-decoration: none; }
  button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }

  /* ============================================ */
  /* === LAYOUT WRAP                          === */
  /* ============================================ */
  .csWrap {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
  }
  @media (min-width: 980px) {
    .csWrap { padding: 0 32px; }
  }

  /* ============================================ */
  /* === EYEBROW                              === */
  /* ============================================ */
  .csEyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-sans);
    font-size: 11px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--bpSoft);
  }
  .csEyebrow .dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--bpInk);
  }

  /* ============================================ */
  /* === HEADERS WRAPPERS                     === */
  /* ============================================ */
  .header-desktop-only { display: block; }
  .header-mobile-only { display: none; }
  @media (max-width: 767.98px) {
    .header-desktop-only { display: none; }
    .header-mobile-only { display: block; }
  }

  /* ============================================ */
  /* === BUTTONS                              === */
  /* ============================================ */
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 14.5px;
    font-weight: 500;
    letter-spacing: -0.01em;
    transition: all .2s ease;
    white-space: nowrap;
    border: 1px solid transparent;
    line-height: 1.4;
    cursor: pointer;
  }
  /* CTA principal → bleu électrique plein */
  .btn-primary {
    background: var(--bpBlue);
    color: #fff;
    border-color: var(--bpBlue);
  }
  .btn-primary:hover {
    background: var(--bpBlueDeep);
    border-color: var(--bpBlueDeep);
    transform: translateY(-1px);
  }
  /* Secondaire → contour noir */
  .btn-secondary {
    background: transparent;
    color: var(--bpInk);
    border: 1px solid var(--bpLineStrong);
  }
  .btn-secondary:hover {
    background: var(--bpCardSoft);
    border-color: var(--bpInk);
  }
  /* Accent → contour bleu électrique */
  .btn-accent {
    background: transparent;
    color: var(--bpBlue);
    border: 1px solid var(--bpBlue);
    padding: 12px 22px;
    font-size: 14px;
    font-weight: 500;
  }
  .btn-accent:hover {
    background: rgba(7,107,255,.06);
    border-color: var(--bpBlueDeep);
    color: var(--bpBlueDeep);
  }
  .btn-light {
    background: var(--bpOnAccent);
    color: var(--bpInk);
  }
  .btn-light:hover {
    transform: translateY(-1px);
  }

  /* ============================================ */
  /* === HERO ÉDITORIAL                       === */
  /* ============================================ */
  .csHero {
    width: 100%;
    background: var(--bpBg);
    color: var(--bpInk);
    padding: 96px 0 56px;
  }
  @media (min-width: 720px) {
    .csHero { padding: 144px 0 80px; }
  }

  .csHeroGrid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: end;
  }
  @media (min-width: 980px) {
    .csHeroGrid {
      grid-template-columns: 1.4fr 1fr;
      gap: 64px;
    }
  }

  .csHeroH1 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(44px, 8vw, 96px);
    line-height: 1;
    letter-spacing: -0.035em;
    margin: 20px 0 0;
    color: var(--bpInk);
    text-wrap: balance;
  }
  .csHeroH1 .accent {
    color: var(--bpSoft);
    font-style: normal;
    font-weight: 600;
  }

  .csHeroMeta {
    border-top: 1px solid var(--bpInk);
    padding-top: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--bpSoft);
    font-weight: 400;
    line-height: 1.45;
  }
  .csHeroMeta b {
    color: var(--bpInk);
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
    font-size: 13.5px;
    letter-spacing: -0.005em;
  }

  .csHeroActions {
    margin-top: 40px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
  }
  @media (min-width: 720px) {
    .csHeroActions { margin-top: 56px; }
  }

  /* ============================================ */
  /* === HERO VIDÉO PLEINE LARGEUR            === */
  /* ============================================ */
  .csVideoHero {
    position: relative;
    width: 100%;
    min-height: 100svh;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    background: #0c0c0c;
  }
  /* Mobile : hauteur fixe en px (évite le décalage dû à la barre d'adresse) */
  @media (max-width: 768px) {
    .csVideoHero { min-height: 0; height: 820px; }
  }
  .csVideoHero-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
  }
  /* <img> à l'intérieur du <picture> : remplit le cadre */
  picture.csVideoHero-media img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* Voile dégradé bas → texte lisible */
  .csVideoHero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,0) 35%,
      rgba(0,0,0,0.15) 60%,
      rgba(0,0,0,0.55) 100%
    );
  }
  .csVideoHero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
    padding: 0 24px 64px;
    max-width: 1100px;
  }
  @media (min-width: 720px) {
    .csVideoHero-content { padding-bottom: 80px; }
  }
  .csVideoHero-eyebrow {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.78);
    margin-bottom: 18px;
  }
  .csVideoHero-h1 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(40px, 7vw, 88px);
    line-height: 1.02;
    letter-spacing: -0.035em;
    margin: 0;
    color: #fff;
    text-wrap: balance;
  }
  .csVideoHero-actions {
    margin-top: 36px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
  }
  /* Bouton blanc — Essayer gratuitement */
  .csVideoHero-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 26px;
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;
    border: 1px solid transparent;
    transition: transform .15s ease, background .15s ease;
  }
  .csVideoHero-btn--primary{
    background: #fff;
    color: #1D1D1F;
    border-color: #fff;
  }
  .csVideoHero-btn--primary:hover{
    background: #f0f0f0;
    border-color: #f0f0f0;
    transform: translateY(-1px);
  }
  .csVideoHero-note {
    margin: 20px 0 0;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 400;
    color: rgba(255,255,255,0.72);
  }

  /* ============================================ */
  /* === TICKER LOGOS                         === */
  /* ============================================ */
  .csTicker {
    margin-top: 0;
    border-top: 0;
    border-bottom: 0;
    overflow: hidden;
    padding: 20px 0;
    display: flex;
    gap: 48px;
    white-space: nowrap;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }
  .csTicker-track {
    display: flex;
    gap: 48px;
    animation: csTickerRoll 60s linear infinite;
  }
  .csTicker-item {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 22px;
    color: var(--bpMuted);
    letter-spacing: -0.02em;
    flex-shrink: 0;
  }
  .csTicker-item em {
    font-style: normal;
    color: var(--bpInk);
    font-weight: 600;
    margin: 0 6px;
  }
  @keyframes csTickerRoll {
    to { transform: translateX(-50%); }
  }

  /* ============================================ */
  /* === VIDEO BLOCK — 2 bannières (desk+mob) === */
  /* === Masqué sur desktop                    === */
  /* ============================================ */
  .video-block {
    padding: 56px 0;
  }
  @media (min-width: 720px) {
    .video-block { display: none; }
  }

  .video-banner {
    position: relative;
    width: 100%;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bpCardSoft);
    border: 1px solid var(--bpLine);
    cursor: pointer;
    isolation: isolate;
  }

  /* Show desktop banner by default, hide mobile */
  .video-banner__img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
  }
  .video-banner__img--desktop { display: block; }
  .video-banner__img--mobile { display: none; }

  /* Mobile: swap images */
  @media (max-width: 720px) {
    .video-banner__img--desktop { display: none; }
    .video-banner__img--mobile { display: block; }
  }

  /* Subtle overlay for play button readability */
  .video-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      rgba(29,29,31,0) 0%,
      rgba(29,29,31,0) 40%,
      rgba(29,29,31,0.18) 100%
    );
    pointer-events: none;
    z-index: 1;
  }

  /* Label top-center */
  .video-label {
    position: absolute;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--bpOnAccent);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    z-index: 3;
    text-align: center;
    width: 90%;
    line-height: 1.4;
    letter-spacing: -0.005em;
    text-shadow: 0 1px 6px rgba(29,29,31,.35);
  }

  /* Duration pill */
  .video-duration {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--bpInk);
    font-weight: 500;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 999px;
    font-feature-settings: "tnum";
  }
  .video-duration::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--bpRed);
  }

  /* Play button — 999px arrondi */
  .video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    background: var(--bpCard);
    border-radius: 999px;
    display: grid;
    place-items: center;
    z-index: 3;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
    box-shadow: 0 8px 28px rgba(29,29,31,.24);
  }
  .video-banner:hover .video-play {
    transform: translate(-50%, -50%) scale(1.06);
    box-shadow: 0 12px 36px rgba(29,29,31,.32);
  }
  .video-play svg {
    width: 22px;
    height: 22px;
    fill: var(--bpInk);
    margin-left: 3px;
  }

  /* ============================================ */
  /* === SECTION                              === */
  /* ============================================ */
  .csSection {
    padding: 96px 0;
    border-top: 0;
    background: var(--bpBg);
  }
  @media (min-width: 720px) {
    .csSection { padding: 120px 0; }
  }
  .csSection.alt {
    background: var(--bpCardSoft);
  }

  .csSectionHead {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: end;
    margin-bottom: 48px;
  }
  @media (min-width: 768px) {
    .csSectionHead {
      grid-template-columns: 1fr 1fr;
      gap: 32px;
      margin-bottom: 64px;
    }
  }

  .csSectionH2 {
    font-family: var(--font-display);
    font-weight: 600;
    /* Tailles harmonisées sur l'ensemble du site : 28px mobile, 40px desktop */
    font-size: 28px;
    line-height: 1.1;
    letter-spacing: -0.025em;
    margin: 14px 0 0;
    color: var(--bpInk);
    text-wrap: balance;
  }
  @media (min-width: 720px) {
    .csSectionH2 { font-size: 40px; }
  }
  .csSectionH2 .accent {
    color: var(--bpSoft);
    font-weight: 600;
    font-style: normal;
  }

  .csSectionLead {
    color: var(--bpSoft);
    max-width: 42ch;
    margin: 0;
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.55;
    font-weight: 400;
  }

  .csSectionActions {
    margin-top: 24px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
  }

  /* ============================================ */
  /* === CLIENTS GRID                         === */
  /* ============================================ */
  .clientsGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--bpLine-2);
    border: 1px solid var(--bpLine-2);
    border-radius: 18px;
    overflow: hidden;
  }
  @media (min-width: 720px) {
    .clientsGrid { grid-template-columns: repeat(4, 1fr); }
  }

  .clientCard {
    background: var(--bpCard);
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 160px;
    text-decoration: none;
    color: var(--bpInk);
    transition: background .2s ease, color .2s ease;
    position: relative;
    overflow: hidden;
  }
  .clientCard:hover {
    background: var(--bpForest);
    color: var(--bpOnAccent);
  }
  .clientCard:hover .clientCard-pill {
    background: rgba(255,255,255,.12);
    color: var(--bpOnAccent);
    border-color: rgba(255,255,255,.2);
  }
  .clientCard-name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 22px;
    letter-spacing: -0.025em;
    line-height: 1.1;
    color: inherit;
  }
  .clientCard-name.upper {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .clientCard-pill {
    align-self: flex-start;
    background: var(--bpCardSoft);
    color: var(--bpSoft);
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--bpLine-2);
    font-family: var(--font-sans);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-top: 16px;
    transition: all .2s ease;
  }

  /* ============================================ */
  /* === FEATURE BLOCK                        === */
  /* ============================================ */
  .feature-block {
    margin-bottom: 96px;
  }
  .feature-block:last-child { margin-bottom: 0; }

  /* ============================================ */
  /* === MOCKUP WRAPPER                       === */
  /* ============================================ */
  .feat-mockup-wrap {
    margin-top: 28px;
    background: var(--bpCardSoft);
    border-radius: var(--radius-lg);
    padding: 28px 14px 0;
    overflow: hidden;
    position: relative;
    border: 1px solid var(--bpLine);
  }
  @media (min-width: 720px) {
    .feat-mockup-wrap { padding: 64px 32px 0; }
  }

  .doc-mockup {
    background: var(--bpCard);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    padding: 24px 22px 0;
    max-width: 720px;
    margin: 0 auto;
    box-shadow: 0 8px 24px -8px rgba(29,29,31,0.06);
    position: relative;
    border: 1px solid var(--bpLine-2);
    border-bottom: none;
  }
  @media (min-width: 720px) {
    .doc-mockup { padding: 36px 36px 0; }
  }

  .doc-title {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 18px;
    letter-spacing: -0.025em;
    border-bottom: 1.5px dashed var(--bpMuted-2);
    padding-bottom: 14px;
    width: fit-content;
    color: var(--bpInk);
  }
  @media (min-width: 720px) {
    .doc-title { font-size: 30px; margin-bottom: 24px; padding-bottom: 18px; }
  }

  .doc-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 18px;
    flex-wrap: wrap;
  }
  @media (min-width: 720px) { .doc-tabs { gap: 8px; margin-bottom: 24px; } }

  .doc-tab {
    padding: 8px 14px;
    background: var(--bpCardSoft);
    color: var(--bpSoft);
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid var(--bpLine-2);
    letter-spacing: -0.005em;
  }
  @media (min-width: 720px) { .doc-tab { padding: 9px 18px; font-size: 13px; } }
  .doc-tab.active {
    background: var(--bpForest);
    color: var(--bpOnAccent);
    border-color: var(--bpInk);
  }

  .doc-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 14px 0;
    border-top: 1px solid var(--bpLine-2);
    font-family: var(--font-sans);
    font-size: 13px;
  }
  @media (min-width: 720px) {
    .doc-row {
      grid-template-columns: 160px 1fr;
      gap: 24px;
      align-items: start;
      font-size: 14px;
    }
  }
  .doc-row:first-of-type { border-top: none; }
  .doc-row strong { font-weight: 600; color: var(--bpInk); }
  .doc-row > div { color: var(--bpInk); line-height: 1.55; }
  .doc-row .strike {
    text-decoration: line-through;
    text-decoration-color: var(--bpRed);
    color: var(--bpRed);
  }
  .doc-row .highlight {
    background: var(--bpAccentBg);
    padding: 1px 4px;
    border-radius: 4px;
    color: var(--bpInk);
    font-weight: 600;
  }
  .doc-row .highlight-grey {
    background: var(--bpCardSoft);
    padding: 1px 4px;
    border-radius: 4px;
    font-weight: 500;
  }

  /* ============================================ */
  /* === PILLS — 999px partout               === */
  /* ============================================ */
  .pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
  }
  .pill::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 999px;
  }
  .pill-green { background: var(--bpAccentBg); color: var(--bpInk); }
  .pill-green::before { background: var(--bpInk); }
  .pill-amber { background: var(--bpAmberSoft); color: var(--bpAmber); }
  .pill-amber::before { background: var(--bpAmber); }
  .pill-red { background: var(--bpRedSoft); color: var(--bpRed); }
  .pill-red::before { background: var(--bpRed); }
  .pill-grey { background: var(--bpCardSoft); color: var(--bpSoft); }
  .pill-grey::before { background: var(--bpSoft); }

  /* Avatar — 999px, plat sans gradient */
  .dash-list-avatar {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    color: var(--bpInk);
    flex-shrink: 0;
    letter-spacing: -0.02em;
    background: var(--bpCardSoft);
    border: 1px solid var(--bpLine-2);
  }
  /* Variante "active" : avatar vert sapin */
  .dash-list-avatar.av-dark {
    background: var(--bpForest);
    color: var(--bpOnAccent);
    border-color: var(--bpInk);
  }
  /* Anciennes classes -1 à -5 : neutralisées vers le style flat */
  .dash-list-avatar.av-1,
  .dash-list-avatar.av-2,
  .dash-list-avatar.av-3,
  .dash-list-avatar.av-4,
  .dash-list-avatar.av-5 {
    background: var(--bpCardSoft);
    color: var(--bpInk);
    border: 1px solid var(--bpLine-2);
  }

  /* ============================================ */
  /* === MINI MOCKS — TRÈS ÉPURÉS            === */
  /* ============================================ */

  /* AGENDA — divider only, dot couleur, pas de fond */
  .mini-agenda { display: flex; flex-direction: column; }
  .mini-agenda-row {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 16px;
    align-items: flex-start;
    padding: 14px 0;
    border-top: 1px solid var(--bpLine-2);
  }
  .mini-agenda-row:first-child { border-top: none; padding-top: 4px; }
  .mini-agenda-time {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    color: var(--bpSoft);
    font-feature-settings: "tnum";
    padding-top: 2px;
    letter-spacing: -0.005em;
  }
  .mini-agenda-event {
    display: flex;
    align-items: flex-start;
    gap: 10px;
  }
  .mini-agenda-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--bpInk);
    margin-top: 6px;
    flex-shrink: 0;
  }
  .mini-agenda-dot.amber { background: var(--bpAmber); }
  .mini-agenda-dot.grey { background: var(--bpMuted-2); }
  .mini-agenda-event-name {
    font-family: var(--font-sans);
    font-weight: 600;
    color: var(--bpInk);
    margin-bottom: 2px;
    font-size: 13.5px;
    letter-spacing: -0.01em;
  }
  .mini-agenda-event-meta {
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--bpSoft);
  }

  /* PAY HERO */
  .mini-pay-hero { text-align: left; margin-bottom: 18px; }
  .mini-pay-label {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    color: var(--bpSoft);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 8px;
  }
  .mini-pay-amount {
    font-family: var(--font-display);
    font-size: 38px;
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--bpInk);
    margin-bottom: 8px;
    font-feature-settings: "tnum";
  }
  .mini-pay-trend {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    color: var(--bpSoft);
  }
  .mini-pay-trend strong { color: var(--bpInk); font-weight: 600; }

  .mini-pay-list {
    display: flex;
    flex-direction: column;
    padding-top: 14px;
    border-top: 1px solid var(--bpLine-2);
  }
  .mini-pay-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--bpLine-2);
  }
  .mini-pay-item:first-child { border-top: none; }
  .mini-pay-item-name {
    font-family: var(--font-sans);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--bpInk);
    letter-spacing: -0.01em;
  }
  .mini-pay-item-meta {
    font-family: var(--font-sans);
    font-size: 11.5px;
    color: var(--bpSoft);
    margin-top: 2px;
  }
  .mini-pay-item-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
  }
  .mini-pay-item-amount {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    font-feature-settings: "tnum";
    letter-spacing: -0.015em;
    color: var(--bpInk);
  }

  /* RANK — dividers only, "you" en card noire */
  .mini-rank-list { display: flex; flex-direction: column; }
  .mini-rank {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-top: 1px solid var(--bpLine-2);
  }
  .mini-rank:first-child { border-top: none; padding-top: 4px; }
  .mini-rank.you {
    background: var(--bpForest);
    color: var(--bpOnAccent);
    border-radius: 12px;
    padding: 14px 16px;
    margin: 4px 0;
    border-top: none;
  }
  .mini-rank.you + .mini-rank { border-top: none; padding-top: 14px; }
  .mini-rank-num {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    color: var(--bpMuted);
    width: 24px;
    text-align: center;
    font-feature-settings: "tnum";
    flex-shrink: 0;
    letter-spacing: -0.02em;
  }
  .mini-rank.you .mini-rank-num { color: var(--bpOnAccent); }
  .mini-rank-content { flex: 1; min-width: 0; }
  .mini-rank-name {
    font-family: var(--font-sans);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--bpInk);
    line-height: 1.3;
    letter-spacing: -0.01em;
  }
  .mini-rank.you .mini-rank-name { color: var(--bpOnAccent); }
  .mini-rank-meta {
    font-family: var(--font-sans);
    font-size: 11.5px;
    color: var(--bpSoft);
    margin-top: 3px;
  }
  .mini-rank.you .mini-rank-meta { color: rgba(255,255,255,.65); }

  /* CLIENT LIST — épuré */
  .mini-client-list { display: flex; flex-direction: column; }
  .mini-client {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    gap: 12px;
    padding: 14px 0;
    border-top: 1px solid var(--bpLine-2);
    align-items: center;
  }
  .mini-client:first-child { border-top: none; padding-top: 4px; }
  .mini-client-name {
    font-family: var(--font-sans);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--bpInk);
    line-height: 1.3;
    margin-bottom: 2px;
    letter-spacing: -0.01em;
  }
  .mini-client-meta {
    font-family: var(--font-sans);
    font-size: 11.5px;
    color: var(--bpSoft);
  }

  /* Statut sobre : dot + texte muté, pas de fond coloré */
  .mini-client-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 500;
    color: var(--bpSoft);
    letter-spacing: -0.005em;
    white-space: nowrap;
  }
  .mini-client-status::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--bpInk);
    flex-shrink: 0;
  }
  .mini-client-status.is-pending::before { background: var(--bpMuted-2); }
  .mini-client-status.is-warning::before { background: var(--bpAmber); }

  /* CRM — stats en ligne sobre, pas de cards colorées */
  .mini-crm-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--bpLine-2);
  }
  .mini-crm-card {
    padding: 0 14px 0 0;
    border-right: 1px solid var(--bpLine-2);
  }
  .mini-crm-card:last-child {
    padding: 0 0 0 14px;
    border-right: none;
  }
  .mini-crm-label {
    font-family: var(--font-sans);
    font-size: 10.5px;
    font-weight: 600;
    color: var(--bpSoft);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 8px;
  }
  .mini-crm-value {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 4px;
    color: var(--bpInk);
    font-feature-settings: "tnum";
  }
  .mini-crm-meta {
    font-family: var(--font-sans);
    font-size: 11px;
    color: var(--bpSoft);
  }
  .mini-crm-meta strong {
    color: var(--bpInk);
    font-weight: 600;
  }

  /* ANALYTICS */
  .mini-analytics-hero { margin-bottom: 18px; }
  .mini-analytics-label {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    color: var(--bpSoft);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 8px;
  }
  .mini-analytics-value {
    font-family: var(--font-display);
    font-size: 38px;
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--bpInk);
    margin-bottom: 6px;
    font-feature-settings: "tnum";
  }
  .mini-analytics-trend {
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--bpSoft);
  }
  .mini-analytics-trend strong { color: var(--bpInk); font-weight: 600; }

  .mini-chart {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 100px;
    padding-top: 12px;
    border-top: 1px solid var(--bpLine-2);
  }
  .mini-chart-bar {
    flex: 1;
    background: var(--bpCardSoft-2);
    border-radius: 4px 4px 0 0;
    min-height: 6px;
  }
  .mini-chart-bar.dark { background: var(--bpInk); }

  /* SEARCH input — 999px */
  .dash-search-input {
    background: var(--bpCardSoft);
    border-radius: 999px;
    padding: 10px 16px;
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--bpSoft);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--bpLine-2);
  }
  .dash-search-input::before {
    content: '';
    width: 12px;
    height: 12px;
    border: 1.5px solid var(--bpSoft);
    border-radius: 999px;
    flex-shrink: 0;
  }

  /* BOOKING — éditorial épuré, hero + pills */
  .dash-booking-h {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.025em;
    margin-bottom: 4px;
    color: var(--bpInk);
  }
  .dash-booking-meta {
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--bpSoft);
    margin-bottom: 14px;
  }

  /* === Hero créneau (la pièce maîtresse) === */
  .bookHero {
    background: var(--bpForest);
    color: var(--bpOnAccent);
    border-radius: 16px;
    padding: 18px 18px 20px;
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .bookHero-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,.55);
  }
  .bookHero-tag::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: var(--bpOnAccent);
  }

  .bookHero-main {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
  }
  .bookHero-date {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: rgba(255,255,255,.65);
  }
  .bookHero-time {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.035em;
    line-height: 1;
    color: var(--bpOnAccent);
    font-feature-settings: "tnum";
  }
  .bookHero-dur {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 500;
    color: rgba(255,255,255,.55);
    margin-left: auto;
  }

  /* Liste micro-meta (lieu, prix) */
  .bookHero-meta {
    display: flex;
    gap: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.12);
  }
  .bookHero-meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
  }
  .bookHero-meta-label {
    font-family: var(--font-sans);
    font-size: 9.5px;
    font-weight: 600;
    color: rgba(255,255,255,.45);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .bookHero-meta-val {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    color: var(--bpOnAccent);
    letter-spacing: -0.005em;
  }

  /* Autres créneaux (compacts) */
  .bookOthers-h {
    font-family: var(--font-sans);
    font-size: 10.5px;
    font-weight: 600;
    color: var(--bpSoft);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 10px;
  }

  .bookOthers {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
  }
  .bookOthers-slot {
    padding: 7px 12px;
    background: transparent;
    border: 1px solid var(--bpLine-2);
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    font-feature-settings: "tnum";
    color: var(--bpInk);
    letter-spacing: -0.005em;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
  }
  .bookOthers-slot:hover {
    border-color: var(--bpInk);
    background: var(--bpCardSoft);
  }
  .bookOthers-slot.is-muted {
    color: var(--bpMuted-2);
    text-decoration: line-through;
    border-color: var(--bpLine);
    cursor: not-allowed;
  }

  .dash-confirm {
    width: 100%;
    background: var(--bpForest);
    color: var(--bpOnAccent);
    padding: 12px;
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    letter-spacing: -0.005em;
  }

  /* EMAIL — épuré, sans encadré */
  .dash-email-preview { margin-top: 0; }
  .dash-email-from {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
  }
  .dash-email-avatar {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: var(--bpInk);
    color: var(--bpOnAccent);
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 700;
    font-family: var(--font-display);
  }
  .dash-email-from-name {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--bpInk);
  }
  .dash-email-from-meta {
    font-family: var(--font-sans);
    font-size: 11.5px;
    color: var(--bpSoft);
  }
  .dash-email-subject {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.025em;
    margin-bottom: 8px;
    color: var(--bpInk);
    line-height: 1.25;
  }
  .dash-email-body {
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--bpInk);
    line-height: 1.55;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--bpLine-2);
  }
  .dash-email-body .highlight {
    background: var(--bpAccentBg);
    color: var(--bpInk);
    padding: 1px 4px;
    border-radius: 4px;
    font-weight: 600;
  }

  /* NOTIFICATIONS — icônes 999px */
  .dash-notifs { display: flex; flex-direction: column; }
  .dash-notif {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    gap: 14px;
    padding: 14px 0;
    border-top: 1px solid var(--bpLine-2);
    align-items: flex-start;
  }
  .dash-notif:first-child { border-top: none; padding-top: 4px; }
  .dash-notif-icon {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
  }
  .dash-notif-icon.green { background: var(--bpAccentBg); color: var(--bpInk); }
  .dash-notif-icon.amber { background: var(--bpAmberSoft); color: var(--bpAmber); }
  .dash-notif-icon.grey { background: var(--bpCardSoft); color: var(--bpSoft); }
  .dash-notif-icon svg { width: 14px; height: 14px; }
  .dash-notif-content { min-width: 0; }
  .dash-notif-title {
    font-family: var(--font-sans);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--bpInk);
    margin-bottom: 2px;
    line-height: 1.35;
    letter-spacing: -0.01em;
  }
  .dash-notif-text {
    font-family: var(--font-sans);
    font-size: 12.5px;
    color: var(--bpSoft);
    line-height: 1.45;
  }
  .dash-notif-time {
    font-family: var(--font-sans);
    font-size: 11px;
    color: var(--bpMuted-2);
    font-feature-settings: "tnum";
    flex-shrink: 0;
    padding-top: 2px;
  }

  /* ============================================ */
  /* === CAROUSEL FEATURE — pleine largeur     === */
  /* ============================================ */
  /* ===== Parallaxe : vidéo fixe + section vert sapin qui scrolle par-dessus ===== */
  .feat-parallax {
    position: relative;
    background: #141914;
  }
  .feat-parallax-media {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    height: 100svh;
    object-fit: cover;
    display: block;
    z-index: 0;
  }

  .feat-carousel-section {
    position: relative;
    z-index: 1;
    background: #141914;
    color: #fff;
    padding: 120px 0 96px;
  }
  @media (min-width: 720px) {
    .feat-carousel-section { padding: 160px 0 120px; }
  }
  /* Bande dégradée au-dessus de la section noire → fond vidéo, transition douce */
  .feat-carousel-section::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -240px;
    height: 240px;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 55%, #000000 100%);
    pointer-events: none;
  }

  /* ===== Inversion couleurs (texte clair sur fond noir) ===== */
  .feat-carousel-section .csEyebrow { color: rgba(255,255,255,0.7); }
  .feat-carousel-section .csEyebrow .dot { background: rgba(255,255,255,0.7); }
  .feat-carousel-section .csSectionH2 { color: #fff; }
  .feat-carousel-section .csSectionH2 .accent { color: rgba(255,255,255,0.5); }
  .feat-carousel-section .feat-slide-caption h4 { color: #fff; }
  .feat-carousel-section .feat-slide-caption p { color: rgba(255,255,255,0.6); }
  .feat-carousel-section .feat-carousel-btn {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.25);
    color: #fff;
  }
  .feat-carousel-section .feat-carousel-btn:hover {
    background: rgba(255,255,255,0.16);
    border-color: rgba(255,255,255,0.5);
  }
  .feat-carousel-section .feat-carousel-dot { background: rgba(255,255,255,0.25); }
  .feat-carousel-section .feat-carousel-dot.active { background: #fff; }

  .feat-carousel-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 48px;
  }
  @media (min-width: 720px) { .feat-carousel-header { margin-bottom: 64px; } }

  .feat-carousel-nav {
    display: none;
    gap: 8px;
    flex-shrink: 0;
  }
  @media (min-width: 720px) { .feat-carousel-nav { display: flex; } }

  .feat-carousel-btn {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: var(--bpCard);
    border: 1px solid var(--bpLine-2);
    color: var(--bpInk);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background .2s, border-color .2s, opacity .2s;
  }
  .feat-carousel-btn:hover {
    background: var(--bpCardSoft);
    border-color: var(--bpInk);
  }
  .feat-carousel-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
  .feat-carousel-btn svg { width: 16px; height: 16px; }

  /* Wrapper du track : reste dans le csWrap (pas de full-bleed) */
  .feat-carousel-bleed {
    width: 100%;
    position: relative;
  }

  /* Alignement du début du carousel avec .csWrap */
  .feat-carousel-track {
    --carousel-start: 24px;

    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;

    padding-top: 4px;
    padding-bottom: 24px;
    padding-left: var(--carousel-start);
    padding-right: var(--carousel-start);

    scroll-padding-left: var(--carousel-start);
  }

  @media (min-width: 980px) {
    .feat-carousel-track {
      --carousel-start: max(32px, calc((100vw - 1240px) / 2 + 32px));
      gap: 20px;
      padding-bottom: 32px;
    }
  }

  .feat-carousel-track::-webkit-scrollbar {
    display: none;
  }

  .feat-slide {
    flex: 0 0 86%;
    max-width: 540px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
  }
  @media (min-width: 720px) {
    .feat-slide {
      flex: 0 0 360px;
      max-width: 360px;
    }
  }
  @media (min-width: 1100px) {
    .feat-slide {
      flex: 0 0 400px;
      max-width: 400px;
    }
  }

  .feat-slide .feat-mockup-wrap {
    margin-top: 0;
    padding: 24px 16px 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 380px;
  }
  @media (min-width: 720px) {
    .feat-slide .feat-mockup-wrap { padding: 32px 20px 0; min-height: 420px; }
  }
  .feat-slide .doc-mockup {
    flex: 1;
    padding: 22px 20px 0;
    max-width: none;
  }
  @media (min-width: 720px) {
    .feat-slide .doc-mockup { padding: 26px 24px 0; }
  }
  .feat-slide .doc-title {
    font-size: 20px;
    margin-bottom: 18px;
    padding-bottom: 14px;
  }

  .feat-slide-caption {
    padding: 22px 4px 4px;
  }
  .feat-slide-caption h4 {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--bpInk);
    margin-bottom: 8px;
  }
  .feat-slide-caption p {
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--bpSoft);
    line-height: 1.5;
  }

  .feat-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
  }
  @media (min-width: 720px) { .feat-carousel-dots { display: none; } }
  .feat-carousel-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--bpLine-2);
    transition: background .2s, width .2s;
  }
  .feat-carousel-dot.active {
    background: var(--bpInk);
    width: 18px;
  }

  /* ============================================ */
  /* === TEAM SECTION                        === */
  /* ============================================ */
  .team-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  @media (min-width: 720px) {
    .team-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  }

  .team-member { display: flex; flex-direction: column; }
  .team-photo {
    aspect-ratio: 1/1;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 14px;
    position: relative;
    background: var(--bpCardSoft);
  }
  @media (min-width: 720px) {
    .team-photo { aspect-ratio: 1.05/1; border-radius: 18px; margin-bottom: 16px; }
  }
  .team-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
  }
  .team-member:hover .team-photo img {
    transform: scale(1.03);
  }
  .team-member h4 {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 4px;
    letter-spacing: -0.025em;
    color: var(--bpInk);
  }
  .team-member p {
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--bpSoft);
    line-height: 1.4;
  }
  @media (min-width: 720px) {
    .team-member h4 { font-size: 18px; }
    .team-member p { font-size: 14px; }
  }

  /* ============================================ */
  /* === DATA & SECURITY                     === */
  /* ============================================ */
  /* ============================================ */
  /* === SECURITY MOCK — bouclier animé        === */
  /* ============================================ */
  .data-image {
    border-radius: var(--radius-md);
    aspect-ratio: 1/1;
    position: relative;
    overflow: hidden;
    background: var(--bpCardSoft);
    border: 1px solid var(--bpLine);
    margin: 28px 0;
  }
  @media (min-width: 720px) { .data-image { aspect-ratio: 4/3; margin: 0; } }

  .secMock {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
  }

  /* Halo radial discret */
  .secMock::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
    background: radial-gradient(ellipse at center, rgba(29,29,31,.04) 0%, transparent 60%);
    pointer-events: none;
  }

  /* Grille de fond très fine */
  .secMock::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(29,29,31,.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(29,29,31,.04) 1px, transparent 1px);
    background-size: 32px 32px;
    background-position: center center;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 10%, transparent 70%);
            mask-image: radial-gradient(ellipse at center, #000 10%, transparent 70%);
    pointer-events: none;
  }

  .secMock-stage {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 2;
  }

  /* Bouclier central */
  .secMock-shield {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 96px;
    height: 96px;
    background: var(--bpInk);
    color: var(--bpOnAccent);
    border-radius: 999px;
    display: grid;
    place-items: center;
    z-index: 3;
    box-shadow: 0 12px 32px rgba(29,29,31,.18);
    animation: secPulse 3.5s ease-in-out infinite;
  }
  @media (min-width: 720px) {
    .secMock-shield { width: 112px; height: 112px; }
  }
  .secMock-shield svg {
    width: 38px;
    height: 38px;
  }
  @media (min-width: 720px) {
    .secMock-shield svg { width: 44px; height: 44px; }
  }

  /* Anneaux qui pulsent autour du bouclier */
  .secMock-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    border: 1px solid var(--bpLineStrong);
    pointer-events: none;
    z-index: 1;
  }
  .secMock-ring--1 {
    width: 160px;
    height: 160px;
    animation: secRing 3.5s ease-out infinite;
  }
  .secMock-ring--2 {
    width: 160px;
    height: 160px;
    animation: secRing 3.5s ease-out infinite;
    animation-delay: 1.2s;
  }
  .secMock-ring--3 {
    width: 160px;
    height: 160px;
    animation: secRing 3.5s ease-out infinite;
    animation-delay: 2.4s;
  }

  @keyframes secPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 12px 32px rgba(29,29,31,.18); }
    50% { transform: translate(-50%, -50%) scale(1.04); box-shadow: 0 16px 40px rgba(29,29,31,.24); }
  }

  @keyframes secRing {
    0% { transform: translate(-50%, -50%) scale(0.6); opacity: 0; border-color: var(--bpLineStrong); }
    20% { opacity: 0.7; }
    100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; border-color: var(--bpLine); }
  }

  @media (min-width: 980px) {
    .data-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: start;
      margin-bottom: 64px;
    }
  }

  .data-points { display: flex; flex-direction: column; gap: 28px; }
  @media (min-width: 720px) { .data-points { gap: 32px; } }

  .data-point {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 12px;
    align-items: start;
  }
  @media (min-width: 720px) {
    .data-point { grid-template-columns: 28px 1fr; gap: 16px; }
  }
  .data-point-icon {
    width: 22px;
    height: 22px;
    color: var(--bpInk);
    margin-top: 2px;
  }
  .data-point h4 {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 6px;
    letter-spacing: -0.02em;
    color: var(--bpInk);
  }
  .data-point p {
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--bpSoft);
    line-height: 1.55;
  }

  .certifications {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--bpLine-2);
    border: 1px solid var(--bpLine-2);
    border-radius: 18px;
    overflow: hidden;
    margin-top: 48px;
  }
  /* Masquer la grille des 8 certifications sur mobile (trop dense) */
  @media (max-width: 719px) {
    .certifications { display: none; }
  }
  @media (min-width: 720px) {
    .certifications { grid-template-columns: repeat(4, 1fr); margin-top: 64px; }
  }

  .cert {
    background: var(--bpCard);
    padding: 24px;
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 14px;
    align-items: center;
    transition: background .2s ease;
  }
  .cert:hover {
    background: var(--bpCardSoft);
  }
  .cert-icon {
    width: 48px;
    height: 48px;
    background: var(--bpCardSoft);
    border: 1px solid var(--bpLine-2);
    border-radius: 12px;
    display: grid;
    place-items: center;
  }
  .cert-icon svg { width: 20px; height: 20px; color: var(--bpInk); }
  .cert h5 {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 3px;
    letter-spacing: -0.02em;
    color: var(--bpInk);
  }
  .cert p {
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--bpSoft);
    line-height: 1.4;
  }

  /* ============================================ */
  /* === TESTIMONIAL                         === */
  /* ============================================ */
  .testimonial-card {
    background: var(--bpCard);
    border-radius: var(--radius-md);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    margin: 0;
    border: 1px solid var(--bpLine-2);
  }
  @media (min-width: 720px) {
    .testimonial-card {
      padding: 32px;
      display: grid;
      grid-template-columns: 320px 1fr;
      gap: 48px;
      align-items: center;
    }
  }

  .testimonial-photo {
    aspect-ratio: 1/1.05;
    border-radius: 14px;
    background: var(--bpCardSoft);
    position: relative;
    overflow: hidden;
  }
  @media (min-width: 720px) { .testimonial-photo { aspect-ratio: 1/1; } }
  .testimonial-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .testimonial-content { padding: 8px 0; }
  @media (min-width: 720px) { .testimonial-content { padding: 16px; } }

  .testimonial-quote {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.025em;
    color: var(--bpInk);
    margin-bottom: 24px;
    text-wrap: balance;
  }
  @media (min-width: 720px) { .testimonial-quote { font-size: 40px; line-height: 1.1; } }

  .testimonial-author-name {
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    color: var(--bpInk);
    margin-bottom: 4px;
  }
  .testimonial-author-role {
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--bpSoft);
    margin-bottom: 24px;
  }

  /* ============================================ */
  /* === TRANSFER                            === */
  /* ============================================ */
  @media (min-width: 980px) {
    .transfer-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 64px;
      align-items: stretch;
    }
  }
  .transfer-points { display: flex; flex-direction: column; gap: 28px; margin-top: 32px; }

  /* ============================================ */
  /* === MAILFLOW MOCK — minimaliste            === */
  /* ============================================ */
  .transfer-visual {
    margin: 28px 0 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    aspect-ratio: 4/5;
    background: var(--bpCardSoft);
    border: 1px solid var(--bpLine);
  }
  @media (min-width: 980px) {
    .transfer-visual {
      margin: 0;
      aspect-ratio: auto;
      min-height: 520px;
      align-self: stretch;
      height: 100%;
    }
  }

  .transfer-visual::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, rgba(29,29,31,.04) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
  }

  .mailflow {
    position: absolute;
    inset: 0;
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    z-index: 2;
  }
  @media (min-width: 980px) {
    .mailflow { padding: 48px 40px; gap: 18px; }
  }

  .mailflow-item {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    gap: 14px;
    align-items: center;
    background: var(--bpCard);
    border: 1px solid var(--bpLine-2);
    border-radius: 16px;
    padding: 14px 16px;
    box-shadow: 0 1px 2px rgba(29,29,31,.03);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
  }

  .mailflow.is-in .mailflow-item:nth-child(1) { transition-delay: 0s; }
  .mailflow.is-in .mailflow-item:nth-child(2) { transition-delay: .35s; }
  .mailflow.is-in .mailflow-item:nth-child(3) { transition-delay: .7s; }

  .mailflow.is-in .mailflow-item {
    opacity: 1;
    transform: translateY(0);
  }

  .mailflow-icon {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: var(--bpCardSoft);
    display: grid;
    place-items: center;
    color: var(--bpInk);
    flex-shrink: 0;
  }
  .mailflow-icon svg {
    width: 16px;
    height: 16px;
  }

  .mailflow-text {
    min-width: 0;
  }
  .mailflow-subject {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    color: var(--bpInk);
    letter-spacing: -0.02em;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  @media (min-width: 980px) {
    .mailflow-subject { font-size: 15px; }
  }
  .mailflow-tag {
    font-family: var(--font-sans);
    font-size: 11px;
    color: var(--bpSoft);
    margin-top: 3px;
    letter-spacing: -0.005em;
  }

  .mailflow-time {
    font-family: var(--font-sans);
    font-size: 11px;
    color: var(--bpMuted);
    font-feature-settings: "tnum";
    flex-shrink: 0;
    letter-spacing: 0.01em;
  }

  /* ============================================ */
  /* === FAQ — style éditorial avec accordion === */
  /* ============================================ */
  .faqList {
    border-top: 0;
    width: 100%;
    margin: 0;
  }

  .faqItem {
    border-bottom: 1px solid var(--bpLine);
    padding: 24px 0;
    cursor: pointer;
  }

  .faqQ {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: -0.025em;
    color: var(--bpInk);
  }

  @media (min-width: 720px) {
    .faqQ { font-size: 24px; }
  }

  .faqQ-plus {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid var(--bpLine-2);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
    background: var(--bpCard);
    color: var(--bpInk);
  }

  .faqItem.open .faqQ-plus {
    background: var(--bpInk);
    color: var(--bpOnAccent);
    border-color: var(--bpInk);
    transform: rotate(45deg);
  }

  .faqA {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease, padding .35s ease;
    color: var(--bpSoft);
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.65;
    max-width: 70ch;
    font-weight: 400;
  }

  .faqItem.open .faqA {
    max-height: 320px;
    padding-top: 16px;
  }

  .faqA a {
    color: var(--bpInk);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  /* ============================================ */
  /* === BECOME / CTA SECTION                === */
  /* ============================================ */
  .csBecome {
    background: var(--bpForest);
    color: var(--bpOnAccent);
    border-radius: 24px;
    padding: 48px 28px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: end;
    position: relative;
    overflow: hidden;
  }
  @media (min-width: 820px) {
    .csBecome {
      grid-template-columns: 1.2fr 1fr;
      padding: 80px 56px;
      gap: 56px;
    }
  }

  .csBecome .csEyebrow {
    color: rgba(255,255,255,.55);
  }
  .csBecome .csEyebrow .dot {
    background: rgba(255,255,255,.85);
  }

  .csBecome h2 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 32px;
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin: 14px 0 0;
    color: var(--bpOnAccent);
    text-wrap: balance;
  }
  @media (min-width: 720px) {
    .csBecome h2 { font-size: 48px; }
  }
  .csBecome h2 .accent {
    color: rgba(255,255,255,.55);
    font-weight: 600;
  }

  .csBecome p {
    color: rgba(255,255,255,.65);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.55;
    margin-top: 20px;
    max-width: 42ch;
  }

  .csBecome-actions {
    margin-top: 32px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
  }

  /* ============================================ */
  /* === GIANT WORDMARK                      === */
  /* ============================================ */
  .csGiant {
    width: 100%;
    border-top: 1px solid var(--bpLine);
    background: var(--bpBg);
    overflow: hidden;
    padding: 80px 0 0;
  }
  .csGiantWord {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(110px, 22vw, 320px);
    line-height: .85;
    letter-spacing: -0.06em;
    color: var(--bpInk);
    user-select: none;
    text-align: center;
    margin: 0;
  }
  .csGiantWord .dot {
    color: var(--bpSoft);
    font-weight: 600;
  }

  /* ============================================ */
  /* === REVEAL ANIMATION                    === */
  /* ============================================ */
  .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .7s ease, transform .7s ease;
  }
  .reveal.in {
    opacity: 1;
    transform: translateY(0);
  }

  @media (prefers-reduced-motion: reduce) {
    .reveal,
    .csTicker-track,
    .feat-carousel-btn,
    .clientCard,
    .cert,
    .doc-tab,
    .btn,
    .video-play,
    .faqQ-plus,
    .faqA,
    .secMock-shield,
    .secMock-ring--1,
    .secMock-ring--2,
    .secMock-ring--3,
    .mailflow-item {
      transition: none !important;
      animation: none !important;
    }
    .mailflow-item {
      opacity: 1 !important;
      transform: none !important;
    }
  }

/* ====== Section style block lines 2384,2489 ====== */
  .ktNav{
    position:fixed;
    top:0; left:0; right:0;
    z-index:50;
    height:64px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 24px;
    background:rgba(255,255,255,.78);
    backdrop-filter:saturate(180%) blur(20px);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
    border-bottom:1px solid rgba(29,29,31,.06);
    font-family:'Inter', -apple-system, sans-serif;
  }
  .ktNav__wrap{
    width:100%;
    max-width:1240px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
  }
  .ktNav__brand{
    display:inline-flex;
    align-items:center;
    font-family:'Bricolage Grotesque', 'Inter', sans-serif;
    font-size:18px;
    font-weight:700;
    letter-spacing:-.025em;
    color:#1D1D1F;
    text-decoration:none;
  }
  .ktNav__links{
    display:none;
    gap:28px;
    align-items:center;
  }
  @media (min-width:820px){
    .ktNav__links{ display:flex; }
  }
  .ktNav__link{
    font-size:13.5px;
    font-weight:500;
    color:#1D1D1F;
    letter-spacing:-.005em;
    text-decoration:none;
    transition:color .15s ease;
  }
  .ktNav__link:hover{ color:#6E6E73; }
  .ktNav__cta{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:36px;
    padding:0 18px;
    background:#141914;
    color:#fff;
    text-decoration:none;
    border-radius:999px;
    font-family:'Inter', sans-serif;
    font-size:13.5px;
    font-weight:500;
    letter-spacing:-.005em;
    transition:background .15s ease;
    white-space:nowrap;
  }
  .ktNav__cta:hover{ background:#0d100d; }
  .ktNav__burger{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    border-radius:999px;
    border:0;
    background:transparent;
    color:#1D1D1F;
    cursor:pointer;
  }
  @media (min-width:820px){
    .ktNav__burger{ display:none; }
  }
  .ktNav__burger svg{ width:20px; height:20px; }
  /* Anciennes règles .ktNavMobile retirées : remplacées par la version finale
     définie plus bas (ligne ~4683) avec animation, sous-menus et pleine hauteur. */

/* ====== Section style block lines 2524,2681 ====== */
  /* Hero : reprend EXACTEMENT la mise en page de la section .ktExp
     (image téléphone à gauche, collée au bas ; texte + CTA à droite,
     centrés verticalement sur desktop). Fond blanc. */
  .ktHero{
    background:#F9F9F9;
    color:#1D1D1F;
    width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    /* padding-top inclut topbar 36 + navbar 64 + respiration */
    padding:148px 24px 0;
    position:relative;
    z-index:2;
    font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    overflow:hidden;
  }
  @media (min-width:980px){
    .ktHero{
      padding:176px 32px 0;
      min-height:100vh;
      display:flex;
      align-items:flex-end;
    }
    .ktHero__wrap{ width:100%; }
  }

  .ktHero__wrap{ max-width:1240px; margin:0 auto; }

  .ktHero__grid{
    display:grid;
    grid-template-columns:1fr;
    gap:40px;
    align-items:end;
  }
  /* Mobile : texte au-dessus, image en-dessous */
  .ktHero__visual{ order:2; }
  .ktHero__head{ order:1; }
  @media (min-width:980px){
    .ktHero__grid{
      grid-template-columns:1fr 1fr;
      gap:80px;
      align-items:end;
    }
    /* Desktop : image à gauche, texte à droite (ordre HTML) */
    .ktHero__visual{ order:initial; }
    .ktHero__head{ order:initial; }
  }

  /* Colonne image — collée au bas, agrandie (idem .ktExp__visual) */
  .ktHero__visual{
    width:100%;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    margin-bottom:0;
    position:relative;
  }
  .ktHero__visual img{
    display:block;
    width:100%;
    max-width:none;
    height:auto;
    object-fit:contain;
    margin-bottom:0;
  }
  @media (min-width:980px){
    .ktHero__visual img{
      width:140%;
      margin-left:-20%;
    }
  }

  /* Colonne texte — mobile : centrée horizontalement */
  .ktHero__head{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    max-width:520px;
    margin:0 auto;
  }
  /* Desktop : texte aligné à gauche + centré verticalement, image collée au bas */
  @media (min-width:980px){
    .ktHero__head{
      align-items:flex-start;
      text-align:left;
      margin:0;
      padding-right:24px;
      align-self:center;
      padding-bottom:0;
    }
  }

  .ktHero__eyebrow{
    font-family:'Inter', sans-serif;
    font-size:11px;
    font-weight:600;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:#6E6E73;
    margin:0 0 22px;
  }

  .ktHero__title{
    font-family:'Bricolage Grotesque', 'Inter', sans-serif;
    font-size:32px;
    font-weight:600;
    letter-spacing:-.025em;
    line-height:1.1;
    margin:0 0 22px;
    color:#1D1D1F;
    text-wrap:balance;
  }
  @media (min-width:720px){ .ktHero__title{ font-size:48px; margin:0 0 28px; } }
  @media (min-width:1200px){ .ktHero__title{ font-size:56px; } }

  .ktHero__lead{
    font-family:'Inter', sans-serif;
    font-size:15.5px;
    line-height:1.6;
    color:#1D1D1F;
    margin:0 0 18px;
    max-width:46ch;
    font-weight:400;
    letter-spacing:-.005em;
  }
  @media (min-width:720px){ .ktHero__lead{ font-size:16px; } }

  /* CTA pill vert sapin — même dimensions que le bouton "Démarrer" du header desktop */
  .ktHero__cta{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:36px;
    padding:0 18px;
    background:#141914;
    color:#fff;
    text-decoration:none;
    border-radius:999px;
    margin-top:14px;
    font-family:'Inter', sans-serif;
    font-size:14px;
    font-weight:500;
    letter-spacing:-.01em;
    border:0;
    transition:background .16s ease, transform .16s ease;
    white-space:nowrap;
  }
  .ktHero__cta:hover{
    background:#0d100d;
    transform:translateY(-0.5px);
  }
  @media (prefers-reduced-motion: reduce){
    .ktHero__cta{ transition:none !important; }
  }

/* ====== Section style block lines 2709,2876 ====== */
  .ktBenefits{
    background:#FFFFFF;
    color:#1D1D1F;
    width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    padding:88px 24px 96px;
    font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  }
  @media (min-width:720px){ .ktBenefits{ padding:140px 32px 160px; } }

  .ktBenefits__wrap{
    /* Aligné sur .csWrap : 1240px max, comme le reste de la page */
    max-width:1240px;
    margin:0 auto;
  }

  .ktBenefits__head{
    text-align:center;
    margin:0 0 64px;
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  @media (min-width:720px){ .ktBenefits__head{ margin:0 0 96px; } }

  .ktBenefits__eyebrow{
    font-family:'Inter', sans-serif;
    font-size:11px;
    font-weight:600;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:#1D1D1F;
    margin:0 0 18px;
  }

  .ktBenefits__title{
    /* Aligné sur .csSectionH2 : 28px mobile, 40px desktop */
    font-family:'Bricolage Grotesque', 'Inter', sans-serif;
    font-size:28px;
    font-weight:600;
    letter-spacing:-.025em;
    line-height:1.1;
    margin:0 0 22px;
    color:#1D1D1F;
    text-wrap:balance;
  }
  @media (min-width:720px){
    .ktBenefits__title{ font-size:40px; }
  }

  .ktBenefits__lead{
    font-size:clamp(16px, 1.6vw, 18px);
    line-height:1.55;
    color:#1D1D1F;
    margin:0 auto 28px;
    max-width:560px;
    font-weight:400;
    letter-spacing:-.005em;
  }

  /* CTA pill outline vert sapin — bouton contour */
  .ktBenefits__cta{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:36px;
    padding:0 18px;
    background:transparent;
    color:#141914;
    text-decoration:none;
    border-radius:999px;
    border:1px solid #141914;
    font-family:'Inter', sans-serif;
    font-size:14px;
    font-weight:500;
    letter-spacing:-.01em;
    transition:background .16s ease, color .16s ease, transform .16s ease;
    white-space:nowrap;
    -webkit-tap-highlight-color:transparent;
  }
  .ktBenefits__cta:hover{
    background:#141914;
    color:#fff;
    transform:translateY(-0.5px);
  }
  @media (prefers-reduced-motion: reduce){
    .ktBenefits__cta{ transition:none !important; }
  }

  .ktBenefits__grid{
    display:grid;
    /* Mobile : 2 colonnes (2×2) */
    grid-template-columns:repeat(2, 1fr);
    gap:36px 14px;
    max-width:760px;
    margin:0 auto;
  }
  @media (min-width:900px){
    /* Desktop : 4 colonnes sur une ligne, alignées sur la largeur csWrap (1240 max).
       Pas de padding ici — le padding latéral de la section .ktBenefits suffit. */
    .ktBenefits__grid{
      grid-template-columns:repeat(4, 1fr);
      gap:0 32px;
      max-width:none;
    }
  }

  .ktBenefit{
    text-align:center;
    padding:0 2px;
  }
  @media (min-width:900px){
    .ktBenefit{ padding:0 8px; }
  }

  .ktBenefit__icon{
    /* Mobile : icône plus petite et serrée au texte */
    width:24px;
    height:24px;
    margin:0 auto 12px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#1D1D1F;
  }
  .ktBenefit__icon svg{
    width:22px;
    height:22px;
    stroke:#1D1D1F;
    stroke-width:1.6;
    fill:none;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  @media (min-width:900px){
    .ktBenefit__icon{ width:34px; height:34px; margin:0 auto 18px; }
    .ktBenefit__icon svg{ width:30px; height:30px; }
  }

  .ktBenefit__title{
    font-family:'Bricolage Grotesque', 'Inter', sans-serif;
    /* Mobile : titre plus compact */
    font-size:15px;
    font-weight:700;
    letter-spacing:-.015em;
    margin:0 0 6px;
    color:#1D1D1F;
    line-height:1.2;
  }
  .ktBenefit__title strong{ font-weight:700; }
  @media (min-width:900px){
    .ktBenefit__title{ font-size:20px; margin:0 0 10px; }
  }

  .ktBenefit__text{
    /* Mobile : texte plus petit */
    font-size:12.5px;
    line-height:1.45;
    color:#1D1D1F;
    margin:0 auto;
    font-weight:400;
    max-width:300px;
    letter-spacing:-.005em;
  }
  @media (min-width:900px){
    .ktBenefit__text{ font-size:15px; line-height:1.55; }
  }

/* ====== Section style block lines 2963,3347 ====== */
  .ktQuote{
    background:#F9F9F9;
    color:#1D1D1F;
    width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    /* Padding bas = 0 : le mockup vient toucher le bord inférieur de la section */
    padding:88px 24px 0;
    font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    overflow:hidden;
  }
  /* Section Stripe : visible uniquement sur mobile / tablette portrait.
     Désactivée sur desktop pour ne pas alourdir la page large. */
  @media (min-width:980px){
    .ktQuote{ display:none; }
  }

  .ktQuote__wrap{
    max-width:1240px;
    margin:0 auto;
  }

  /* En-tête "section habituelle" — eyebrow + H2 + lead, alignés à gauche */
  .ktQuote__head{
    margin:0 0 48px;
  }
  @media (min-width:720px){ .ktQuote__head{ margin:0 0 64px; } }

  .ktQuote__eyebrow{
    display:inline-flex;
    align-items:center;
    font-family:'Inter', sans-serif;
    font-size:11px;
    line-height:1;
    font-weight:600;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:#1D1D1F;
    margin:0 0 14px;
  }

  .ktQuote__title{
    font-family:'Bricolage Grotesque', 'Inter', sans-serif;
    /* Aligné sur .csSectionH2 : 28px mobile, 40px desktop */
    font-size:28px;
    font-weight:600;
    letter-spacing:-.025em;
    line-height:1.1;
    margin:0 0 18px;
    color:#1D1D1F;
    text-wrap:balance;
  }
  @media (min-width:720px){ .ktQuote__title{ font-size:40px; margin:0 0 22px; } }

  .ktQuote__lead{
    font-family:'Inter', sans-serif;
    font-size:15px;
    line-height:1.55;
    color:#6E6E73;
    margin:0;
    max-width:42ch;
    font-weight:400;
    letter-spacing:-.005em;
  }
  @media (min-width:720px){ .ktQuote__lead{ font-size:15.5px; } }

  /* ===== Mockup réservation/paiement animé =====
     Largeur habituelle (alignée sur le reste des contenus de la page),
     sans encadrement gris extérieur. La carte blanche est collée au bas
     de la section. */
  .ktQuote__mockup{
    width:100%;
    max-width:880px;
    margin:0 auto;
    background:transparent;
    border:0;
    padding:0;
    overflow:visible;
    position:relative;
  }

  /* La "carte" blanche du mock — bordure légère + arrondis haut */
  .ktMockCard{
    background:#FFFFFF;
    border:1px solid #E5E5EA;
    border-bottom:none;
    border-radius:18px 18px 0 0;
    padding:24px 20px 0;
    box-shadow:0 8px 24px -8px rgba(29,29,31,.06);
    position:relative;
    aspect-ratio:5/4;
    overflow:hidden;
  }
  @media (min-width:720px){
    .ktMockCard{ padding:30px 28px 0; aspect-ratio:4/3; }
  }

  .ktMock{
    position:absolute;
    inset:0;
    padding:24px 22px 22px;
    display:flex;
    flex-direction:column;
  }
  @media (min-width:720px){
    .ktMock{ padding:30px 28px 28px; }
  }

  .ktMock__head{
    margin-bottom:18px;
  }
  .ktMock__title{
    font-family:'Bricolage Grotesque', sans-serif;
    font-size:18px;
    font-weight:600;
    color:#1D1D1F;
    letter-spacing:-.02em;
  }

  .ktMock__sub{
    font-size:12px;
    color:#6E6E73;
    margin:0 0 12px;
    letter-spacing:-.005em;
  }

  /* Recap créneau (style sobre, encadré gris très doux) */
  .ktMock__recap{
    display:flex;
    align-items:center;
    gap:10px;
    padding:11px 13px;
    border-radius:12px;
    background:#FAFAFA;
    border:1px solid #E5E5EA;
    margin-bottom:16px;
    font-size:12px;
    color:#1D1D1F;
    font-weight:500;
    letter-spacing:-.005em;
  }
  .ktMock__recap svg{ width:14px; height:14px; flex:0 0 auto; color:#1D1D1F; stroke:currentColor; fill:none; stroke-width:1.8; }

  /* Choix mode de paiement (CB / Sur place) */
  .ktMock__payChoice{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-bottom:16px;
  }
  .ktMock__payCard{
    padding:12px 14px;
    border-radius:12px;
    border:1px solid #E5E5EA;
    background:#fff;
    display:flex;
    flex-direction:column;
    gap:4px;
    position:relative;
  }
  .ktMock__payCard.is-on{
    border-color:#141914;
    box-shadow:0 0 0 1px #141914 inset;
  }
  .ktMock__payCard.is-on::after{
    content:"";
    position:absolute;
    top:10px;
    right:10px;
    width:16px;
    height:16px;
    border-radius:50%;
    background:#141914;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-11'/%3E%3C/svg%3E");
    background-size:11px 11px;
    background-position:center;
    background-repeat:no-repeat;
  }
  .ktMock__payCardLabel{
    font-size:12px;
    font-weight:600;
    color:#1D1D1F;
    letter-spacing:-.005em;
  }
  .ktMock__payCardSub{
    font-size:11px;
    color:#6E6E73;
    letter-spacing:-.005em;
  }

  /* Ligne CB : numéro + expiration + CVC dans une seule "vraie" UI Stripe */
  .ktMock__cbBox{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-bottom:14px;
  }
  .ktMock__cbField{
    padding:11px 13px;
    border-radius:10px;
    border:1px solid #E5E5EA;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    font-family:'Inter', sans-serif;
    font-size:13px;
    color:#1D1D1F;
    font-feature-settings:"tnum";
    letter-spacing:-.005em;
  }
  .ktMock__cbField--num{
    letter-spacing:.08em;
  }
  .ktMock__cbBrands{
    display:inline-flex;
    align-items:center;
    gap:4px;
    flex:0 0 auto;
  }
  .ktMock__cbBrand{
    height:16px;
    padding:0 6px;
    border-radius:3px;
    background:#F4F4F5;
    color:#1D1D1F;
    font-size:9px;
    font-weight:700;
    letter-spacing:.04em;
    display:inline-flex;
    align-items:center;
  }
  .ktMock__cbBrand--visa{ background:#1A1F71; color:#fff; }
  .ktMock__cbBrand--mc{ background:#fff; border:1px solid #E5E5EA; color:#6E6E73; }
  .ktMock__cbRow{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }
  .ktMock__cbLabel{
    font-size:10.5px;
    font-weight:600;
    color:#6E6E73;
    letter-spacing:.04em;
    text-transform:uppercase;
  }

  /* Bouton "Payer" — pill bleu */
  .ktMock__pay{
    margin-top:auto;
    height:42px;
    border-radius:999px;
    background:#8FD46E;
    color:#141914;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    font-family:'Inter', sans-serif;
    font-size:13.5px;
    font-weight:600;
    letter-spacing:-.005em;
    position:relative;
    overflow:hidden;
    border:1px solid #8FD46E;
  }
  .ktMock__pay svg{ width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
  .ktMock__pay.is-loading{
    background:#8FD46E;
  }
  .ktMock__pay.is-loading::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
    transform:translateX(-100%);
    animation:ktShimmer 1.6s ease-in-out 0.6s infinite;
  }
  @keyframes ktShimmer{
    0%   { transform:translateX(-100%); }
    100% { transform:translateX(100%); }
  }

  /* Succès (étape 2) — apparaît au scroll avec un fade-up.
     Style Apple : fond très doux, typo posée, pastille check fine. */
  .ktMock__success{
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:0;
    padding:14px 16px;
    border-radius:14px;
    background:#F5F5F7;
    border:1px solid #E5E5EA;
    color:#1D1D1F;
    font-size:13.5px;
    font-weight:500;
    letter-spacing:-.01em;
    opacity:0;
    transform:translateY(12px);
    transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
  }
  .ktMock__successText{
    display:flex;
    flex-direction:column;
    gap:1px;
    min-width:0;
  }
  .ktMock__successLabel{
    font-size:11px;
    font-weight:500;
    color:#6E6E73;
    letter-spacing:-.005em;
    line-height:1.2;
  }
  .ktMock__successAmount{
    font-family:'Bricolage Grotesque', sans-serif;
    font-size:15px;
    font-weight:600;
    color:#1D1D1F;
    letter-spacing:-.02em;
    line-height:1.2;
    font-feature-settings:"tnum";
  }
  .ktQuote__mockup.in .ktMock__success{
    opacity:1;
    transform:translateY(0);
    transition-delay:.25s;
  }
  .ktMock__successIcon{
    width:22px;
    height:22px;
    border-radius:50%;
    background:#30D158;
    color:#fff;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    transform:scale(0.4);
    opacity:0;
    transition:transform .5s cubic-bezier(.34, 1.56, .64, 1), opacity .3s ease;
  }
  .ktQuote__mockup.in .ktMock__successIcon{
    transform:scale(1);
    opacity:1;
    transition-delay:.55s;
  }
  .ktMock__successIcon svg{ width:11px; height:11px; stroke:currentColor; fill:none; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }

  /* Bande de confirmation email (avec icône Stripe à gauche) */
  .ktMock__confirm{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:14px;
    font-size:12.5px;
    color:#6E6E73;
    letter-spacing:-.005em;
    line-height:1.4;
  }
  .ktMock__confirmStripe{
    width:28px;
    height:28px;
    border-radius:50%;
    background:#635BFF;
    color:#fff;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-family:'Bricolage Grotesque', sans-serif;
    font-weight:700;
    font-size:14px;
    letter-spacing:-.02em;
    flex:0 0 auto;
  }
  @media (prefers-reduced-motion: reduce){
    .ktMock__success,
    .ktMock__successIcon{
      opacity:1 !important;
      transform:none !important;
      transition:none !important;
    }
  }

/* ====== Section style block lines 3477,3753 ====== */
  /* Section "Des automatisations utiles au quotidien" — fond noir pur #000.
     Le mock central reprend EXACTEMENT le style mailflow (3 items qui
     apparaissent en séquence au scroll), version noire. */
  .csSection--dark{
    background:#141914 !important;
    color:#fff;
    width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    padding-bottom:96px;
  }
  @media (min-width:720px){
    .csSection--dark{ padding-bottom:120px; }
  }
  /* Mobile uniquement : on cache le débordement du carousel intérieur (sinon scroll horizontal global).
     Sur desktop, on retire cet overflow pour permettre position:sticky de fonctionner. */
  @media (max-width:979px){
    .csSection--dark{ overflow:hidden; }
  }
  /* === STICKY DESKTOP UNIQUEMENT ===
     Sur mobile, la section noire est plus haute que le viewport et le
     sticky cache le bas de son contenu avant qu'on puisse le scroller.
     On garde donc l'effet "sticky + sections claires qui passent
     par-dessus" uniquement sur grand écran où la section tient dans
     le viewport. */
  @media (min-width:980px){
    .csSection--dark{
      position:sticky;
      top:0;
      z-index:1;
    }
  }
  .csSection--dark .csWrap{ max-width:1240px; margin:0 auto; padding:0 24px; }
  @media (min-width:980px){ .csSection--dark .csWrap{ padding:0 32px; } }

  /* Titres + lead inversés */
  .csSection--dark .csSectionH2{ color:#fff; }
  .csSection--dark .csSectionH2 .accent{ color:rgba(255,255,255,.5); }
  .csSection--dark .csSectionLead{ color:rgba(255,255,255,.65); }

  .csSection--dark__eyebrow{
    font-family:'Inter', sans-serif;
    font-size:11px;
    font-weight:600;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:rgba(255,255,255,.55);
    margin:0 0 14px;
  }

  /* Conteneur du mock : fond noir uni, bordure blanche translucide.
     On neutralise tout l'ancien mock bouclier (anneaux, halo, grille).
     Masqué sur mobile pour gagner de la hauteur. */
  .csSection--dark .data-image{
    background:#0d100d;
    border:1px solid rgba(255,255,255,.12);
    overflow:hidden;
    position:relative;
    display:none;
  }
  @media (min-width:980px){
    .csSection--dark .data-image{ display:block; }
  }
  .csSection--dark .data-image::before,
  .csSection--dark .data-image::after,
  .csSection--dark .secMock,
  .csSection--dark .secMock-stage,
  .csSection--dark .secMock-shield,
  .csSection--dark .secMock-ring{
    display:none !important;
  }

  /* === Mock CRM noir — liste de clients style dashboard === */
  .csSection--dark .ktCrm{
    position:absolute;
    inset:0;
    padding:24px 22px;
    display:flex;
    flex-direction:column;
    z-index:2;
  }
  @media (min-width:980px){
    .csSection--dark .ktCrm{ padding:32px 28px; }
  }

  .ktCrm__head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:16px;
  }
  @media (min-width:980px){ .ktCrm__head{ margin-bottom:20px; } }

  .ktCrm__tabs{
    display:flex;
    gap:6px;
    flex-wrap:wrap;
  }
  .ktCrm__tab{
    font-family:'Inter', sans-serif;
    font-size:11px;
    font-weight:500;
    padding:5px 10px;
    border-radius:999px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    color:rgba(255,255,255,.55);
    letter-spacing:-.005em;
    white-space:nowrap;
  }
  .ktCrm__tab.is-on{
    background:#fff;
    color:#1D1D1F;
    border-color:#fff;
    font-weight:600;
  }

  .ktCrm__count{
    font-family:'Inter', sans-serif;
    font-size:11px;
    font-weight:500;
    color:rgba(255,255,255,.45);
    letter-spacing:-.005em;
    font-feature-settings:"tnum";
    white-space:nowrap;
  }

  .ktCrm__list{
    display:flex;
    flex-direction:column;
    gap:8px;
    flex:1;
  }
  @media (min-width:980px){ .ktCrm__list{ gap:10px; } }

  .ktCrm__row{
    display:grid;
    grid-template-columns:36px 1fr auto;
    gap:12px;
    align-items:center;
    background:#0d100d;
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;
    padding:12px 14px;
    opacity:0;
    transform:translateY(10px);
    transition:opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1);
  }
  @media (min-width:980px){
    .ktCrm__row{ grid-template-columns:40px 1fr auto; gap:14px; padding:14px 16px; }
  }
  .ktCrm.is-in .ktCrm__row{
    opacity:1;
    transform:translateY(0);
  }
  .ktCrm.is-in .ktCrm__row:nth-child(1){ transition-delay:0s; }
  .ktCrm.is-in .ktCrm__row:nth-child(2){ transition-delay:.12s; }
  .ktCrm.is-in .ktCrm__row:nth-child(3){ transition-delay:.24s; }
  .ktCrm.is-in .ktCrm__row:nth-child(4){ transition-delay:.36s; }

  .ktCrm__avatar{
    width:36px;
    height:36px;
    border-radius:999px;
    background:rgba(255,255,255,.10);
    color:#fff;
    display:grid;
    place-items:center;
    font-family:'Bricolage Grotesque', sans-serif;
    font-weight:600;
    font-size:12px;
    letter-spacing:-.02em;
    flex-shrink:0;
  }
  @media (min-width:980px){ .ktCrm__avatar{ width:40px; height:40px; font-size:13px; } }

  .ktCrm__info{ min-width:0; }
  .ktCrm__name{
    font-family:'Bricolage Grotesque', 'Inter', sans-serif;
    font-size:13.5px;
    font-weight:600;
    color:#fff;
    letter-spacing:-.015em;
    line-height:1.25;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  @media (min-width:980px){ .ktCrm__name{ font-size:14.5px; } }
  .ktCrm__meta{
    font-family:'Inter', sans-serif;
    font-size:11px;
    color:rgba(255,255,255,.5);
    margin-top:2px;
    letter-spacing:-.005em;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  @media (min-width:980px){ .ktCrm__meta{ font-size:11.5px; } }

  .ktCrm__tag{
    font-family:'Inter', sans-serif;
    font-size:10px;
    font-weight:600;
    padding:4px 9px;
    border-radius:999px;
    letter-spacing:.02em;
    text-transform:uppercase;
    flex-shrink:0;
    white-space:nowrap;
  }
  .ktCrm__tag--active{
    background:rgba(126, 217, 87, .15);
    color:#A7E3B6;
  }
  .ktCrm__tag--new{
    background:rgba(255,255,255,.10);
    color:#fff;
  }

  @media (prefers-reduced-motion: reduce){
    .csSection--dark .ktCrm__row{
      opacity:1 !important;
      transform:none !important;
      transition:none !important;
    }
  }

  /* Data points (RGPD, Hébergement, etc.) */
  .csSection--dark .data-point-icon{ color:#fff; }
  .csSection--dark .data-point h4{ color:#fff; }
  .csSection--dark .data-point p{ color:rgba(255,255,255,.65); }

  /* Grille certifications */
  .csSection--dark .certifications{
    background:rgba(255,255,255,.08);
    border-color:rgba(255,255,255,.08);
  }
  .csSection--dark .cert{
    background:#0d100d;
  }
  .csSection--dark .cert:hover{
    background:rgba(255,255,255,.04);
  }
  .csSection--dark .cert-icon{
    background:rgba(255,255,255,.06);
    border-color:rgba(255,255,255,.10);
  }
  .csSection--dark .cert-icon svg{ color:#fff; }
  .csSection--dark .cert h5{ color:#fff; }
  .csSection--dark .cert p{ color:rgba(255,255,255,.55); }

  /* Paragraphe sous le mock : remplace l'ancienne grille des 8 capacités.
     Masqué sur mobile, aligné à gauche sur desktop. */
  .csSection--dark__para{
    display:none;
  }
  @media (min-width:720px){
    .csSection--dark__para{
      display:block;
      margin:64px 0 0;
      max-width:none;
      font-family:'Inter', sans-serif;
      font-size:17px;
      line-height:1.75;
      color:rgba(255,255,255,.72);
      font-weight:400;
      letter-spacing:-.005em;
      text-align:left;
    }
  }

  /* === Toutes les sections qui suivent la noire sticky doivent
        passer PAR-DESSUS, sinon la sticky les masque. === */
  .kt-follow-bar,
  .bpFooter{
    position:relative;
    z-index:2;
  }

/* ====== Section style block lines 3757,3932 ====== */
  /* Refonte CRM façon Shopify : titre top-left + grille 3 cartes
     (image + légende) + CTA centré + ticker logos en bas.
     Padding latéral = 0 ici : c'est le .csWrap parent qui fournit déjà
     24px (mobile) / 32px (desktop) — IDENTIQUE aux autres sections. */
  .ktCrmCards{
    padding:96px 0 56px;
  }
  @media (min-width:720px){
    .ktCrmCards{ padding:128px 0 80px; }
  }

  .ktCrmCards__title{
    font-family:'Bricolage Grotesque', 'Inter', sans-serif;
    font-size:32px;
    font-weight:600;
    letter-spacing:-.025em;
    line-height:1.1;
    color:#fff;
    margin:0 0 56px;
    max-width:18ch;
    text-wrap:balance;
  }
  @media (min-width:720px){
    .ktCrmCards__title{ font-size:48px; margin:0 0 80px; }
  }

  /* Mobile : carousel scroll-snap horizontal pleine largeur.
     Desktop : grille 3 colonnes statique. */
  .ktCrmCards__grid{
    display:flex;
    gap:16px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    margin:0 -24px 56px;
    padding:4px 24px 16px;
    scroll-padding-left:24px;
  }
  .ktCrmCards__grid::-webkit-scrollbar{ display:none; }
  .ktCrmCards__grid > .ktCrmCard{
    flex:0 0 82%;
    max-width:340px;
    scroll-snap-align:start;
  }
  @media (min-width:720px){
    .ktCrmCards__grid{
      display:grid;
      grid-template-columns:repeat(3, 1fr);
      gap:24px;
      margin:0 0 72px;
      padding:0;
      overflow:visible;
    }
    .ktCrmCards__grid > .ktCrmCard{
      flex:initial;
      max-width:none;
    }
  }

  .ktCrmCard{
    display:flex;
    flex-direction:column;
    gap:18px;
  }
  .ktCrmCard__media{
    aspect-ratio:16/10;
    border-radius:18px;
    overflow:hidden;
    background:#0d100d;
    position:relative;
  }
  .ktCrmCard__media img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  .ktCrmCard__title{
    font-family:'Inter', sans-serif;
    font-size:15.5px;
    font-weight:600;
    color:#fff;
    letter-spacing:-.005em;
    line-height:1.35;
    margin:0;
  }
  @media (min-width:720px){
    .ktCrmCard__title{ font-size:17px; }
  }
  .ktCrmCard__text{
    font-family:'Inter', sans-serif;
    font-size:14px;
    line-height:1.55;
    color:rgba(255,255,255,.55);
    margin:0;
    letter-spacing:-.005em;
  }
  @media (min-width:720px){
    .ktCrmCard__text{ font-size:15px; }
  }
  .ktCrmCard__text strong{ color:#fff; font-weight:600; }

  /* CTA pill outline centré */
  .ktCrmCards__ctaWrap{
    display:flex;
    justify-content:center;
    margin:0 0 56px;
  }
  @media (min-width:720px){ .ktCrmCards__ctaWrap{ margin:0 0 80px; } }

  .ktCrmCards__cta{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:14px 28px;
    border-radius:999px;
    background:transparent;
    color:#fff;
    border:1px solid rgba(255,255,255,.7);
    font-family:'Inter', sans-serif;
    font-size:14.5px;
    font-weight:600;
    letter-spacing:-.005em;
    transition:background .2s ease, border-color .2s ease;
  }
  @media (min-width:720px){
    .ktCrmCards__cta{ padding:16px 32px; font-size:15.5px; }
  }
  .ktCrmCards__cta:hover{
    background:rgba(255,255,255,.08);
    border-color:#fff;
  }

  /* Ticker logos restaurants (bas de section) */
  .ktCrmTicker{
    position:relative;
    overflow:hidden;
    padding:0;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }
  .ktCrmTicker__track{
    display:flex;
    align-items:center;
    gap:64px;
    white-space:nowrap;
    animation:ktCrmTicker 50s linear infinite;
    width:max-content;
  }
  @media (min-width:720px){ .ktCrmTicker__track{ gap:80px; } }

  .ktCrmTicker__item{
    font-family:'Bricolage Grotesque', 'Inter', sans-serif;
    font-size:22px;
    font-weight:600;
    letter-spacing:-.025em;
    color:rgba(255,255,255,.55);
    flex-shrink:0;
    text-transform:none;
  }
  @media (min-width:720px){ .ktCrmTicker__item{ font-size:28px; } }
  .ktCrmTicker__item em{
    font-style:normal;
    color:#fff;
    font-weight:700;
    margin:0 6px;
  }

  @keyframes ktCrmTicker{
    0%   { transform:translateX(0); }
    100% { transform:translateX(-50%); }
  }
  @media (prefers-reduced-motion: reduce){
    .ktCrmTicker__track{ animation:none !important; }
  }

/* ====== Section style block lines 4009,4242 ====== */
  .ktStats{
    position:relative;
    background:#F9F9F9;
    color:#1D1D1F;
    width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    /* La noire au-dessus est en position:sticky → celle-ci passe
       par-dessus avec un z-index plus haut. Les coins arrondis hauts
       créent l'effet "tiroir" qui sort du noir. */
    border-top-left-radius:48px;
    border-top-right-radius:48px;
    padding:72px 24px 96px;
    z-index:2;
    font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  }
  @media (min-width:720px){
    .ktStats{
      border-top-left-radius:72px;
      border-top-right-radius:72px;
      padding:112px 32px 140px;
    }
  }

  .ktStats__wrap{
    max-width:1240px;
    margin:0 auto;
  }

  .ktStats__head{
    text-align:center;
    margin:0 0 48px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:14px;
  }
  @media (min-width:720px){ .ktStats__head{ margin:0 0 64px; gap:18px; } }

  .ktStats__eyebrowIcon{
    width:28px;
    height:28px;
    color:#1D1D1F;
  }
  .ktStats__eyebrowIcon svg{ width:100%; height:100%; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

  .ktStats__eyebrow{
    font-family:'Inter', sans-serif;
    font-size:11px;
    font-weight:600;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:#1D1D1F;
  }

  .ktStats__title{
    font-family:'Bricolage Grotesque', 'Inter', sans-serif;
    /* Aligné sur .csSectionH2 : 28px mobile, 40px desktop */
    font-size:28px;
    font-weight:600;
    letter-spacing:-.025em;
    line-height:1.1;
    margin:0;
    color:#1D1D1F;
    text-wrap:balance;
  }
  @media (min-width:720px){ .ktStats__title{ font-size:40px; } }

  .ktStats__lead{
    font-size:14.5px;
    line-height:1.55;
    color:#6E6E73;
    margin:0;
    max-width:520px;
    font-weight:400;
    letter-spacing:-.005em;
  }
  @media (min-width:720px){ .ktStats__lead{ font-size:15.5px; } }

  /* === Cartes KPI (4 colonnes desktop, 2×2 mobile) === */
  .ktStats__kpis{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:10px;
    margin:0 0 14px;
  }
  @media (min-width:900px){
    .ktStats__kpis{ grid-template-columns:repeat(4, 1fr); gap:14px; margin:0 0 18px; }
  }

  .ktStat{
    background:#FFFFFF;
    border:1px solid #E8E8E3;
    border-radius:18px;
    padding:18px 16px;
    display:flex;
    flex-direction:column;
    gap:6px;
    min-height:140px;
    position:relative;
    cursor:pointer;
    transition:border-color .2s ease, box-shadow .2s ease, transform .15s ease;
    -webkit-tap-highlight-color:transparent;
    /* Reset bouton */
    width:100%;
    text-align:left;
    font:inherit;
    color:inherit;
    appearance:none;
    -webkit-appearance:none;
  }
  @media (min-width:720px){
    .ktStat{ padding:22px 20px; min-height:170px; }
  }
  .ktStat:hover{
    border-color:#AEAEB2;
  }
  .ktStat.is-active{
    border-color:#141914;
    box-shadow:0 0 0 1px #141914 inset;
  }
  .ktStat:focus-visible{
    outline:2px solid #141914;
    outline-offset:3px;
  }

  .ktStat__label{
    font-family:'Inter', sans-serif;
    font-size:12.5px;
    font-weight:500;
    color:#1D1D1F;
    letter-spacing:-.005em;
  }
  .ktStat__value{
    font-family:'Bricolage Grotesque', 'Inter', sans-serif;
    font-size:24px;
    font-weight:600;
    color:#1D1D1F;
    letter-spacing:-.025em;
    line-height:1.05;
    font-feature-settings:"tnum";
  }
  @media (min-width:720px){ .ktStat__value{ font-size:30px; } }
  .ktStat__meta{
    font-family:'Inter', sans-serif;
    font-size:11.5px;
    color:#6E6E73;
    font-weight:400;
    letter-spacing:-.005em;
    margin-top:auto;
    line-height:1.4;
  }

  /* === Carte graphique principale === */
  .ktStats__chart{
    background:#FFFFFF;
    border:1px solid #E8E8E3;
    border-radius:22px;
    padding:22px 20px 18px;
  }
  @media (min-width:720px){
    .ktStats__chart{ padding:30px 28px 26px; border-radius:24px; }
  }

  .ktStats__chartHead{
    margin-bottom:18px;
  }
  .ktStats__chartTitle{
    font-family:'Bricolage Grotesque', 'Inter', sans-serif;
    font-size:18px;
    font-weight:600;
    color:#1D1D1F;
    letter-spacing:-.02em;
    line-height:1.2;
    margin:0 0 4px;
  }
  @media (min-width:720px){ .ktStats__chartTitle{ font-size:20px; } }
  .ktStats__chartSub{
    font-family:'Inter', sans-serif;
    font-size:12.5px;
    color:#6E6E73;
    margin:0;
    letter-spacing:-.005em;
  }

  .ktBars{
    display:grid;
    grid-template-columns:repeat(10, 1fr);
    align-items:end;
    gap:6px;
    height:160px;
    padding:24px 0 0;
  }
  @media (min-width:720px){
    .ktBars{ height:220px; gap:10px; padding:32px 0 0; }
  }
  .ktBar{
    background:#A7E3B6;
    border-radius:6px 6px 0 0;
    position:relative;
    width:100%;
    transform-origin:bottom;
    transform:scaleY(0);
    transition:transform .9s cubic-bezier(.16,1,.3,1);
  }
  .ktBars.is-in .ktBar{ transform:scaleY(1); }
  .ktBars.is-in .ktBar:nth-child(1){  transition-delay:.05s; }
  .ktBars.is-in .ktBar:nth-child(2){  transition-delay:.10s; }
  .ktBars.is-in .ktBar:nth-child(3){  transition-delay:.15s; }
  .ktBars.is-in .ktBar:nth-child(4){  transition-delay:.20s; }
  .ktBars.is-in .ktBar:nth-child(5){  transition-delay:.25s; }
  .ktBars.is-in .ktBar:nth-child(6){  transition-delay:.30s; }
  .ktBars.is-in .ktBar:nth-child(7){  transition-delay:.35s; }
  .ktBars.is-in .ktBar:nth-child(8){  transition-delay:.40s; }
  .ktBars.is-in .ktBar:nth-child(9){  transition-delay:.45s; }
  .ktBars.is-in .ktBar:nth-child(10){ transition-delay:.50s; }

  .ktBar__num{
    position:absolute;
    top:-22px;
    left:50%;
    transform:translateX(-50%);
    font-family:'Bricolage Grotesque', 'Inter', sans-serif;
    font-size:12px;
    font-weight:600;
    color:#1D1D1F;
    font-feature-settings:"tnum";
    letter-spacing:-.01em;
  }
  @media (min-width:720px){ .ktBar__num{ font-size:13px; top:-24px; } }

  @media (prefers-reduced-motion: reduce){
    .ktBar{ transform:scaleY(1) !important; transition:none !important; }
  }

/* ====== Section style block lines 4302,4392 ====== */
  /* FAQ pro — style assistance pleine largeur, fond blanc */
  #faq.csSection{
    background:#FFFFFF !important;
    width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    padding:64px 0 !important;
    border:0 !important;
    /* Passe par-dessus la sticky noire en même temps que .ktStats */
    position:relative;
    z-index:2;
  }
  @media (min-width:720px){ #faq.csSection{ padding:96px 0 !important; } }
  /* Padding horizontal géré uniquement par .csWrap (cohérent avec les autres sections) */
  #faq .csWrap{ max-width:1240px; margin:0 auto; padding:0 24px; }
  @media (min-width:980px){ #faq .csWrap{ padding:0 32px; } }
  #faq .csSectionHead{ display:block; margin:0 0 24px; }
  #faq .faqEyebrow{
    font-family:'Inter', sans-serif;
    font-size:11px;
    font-weight:600;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:#1D1D1F;
    margin:0 0 14px;
  }
  #faq .csSectionH2{
    font-family:'Bricolage Grotesque','Inter',sans-serif;
    /* Aligné sur .csSectionH2 : 28px mobile, 40px desktop */
    font-size:28px; line-height:1.1; font-weight:600;
    letter-spacing:-.025em;
    color:#1D1D1F;
    text-align:left;
    margin:0;
  }
  @media (min-width:720px){ #faq .csSectionH2{ font-size:40px; } }
  #faq .csSectionH2 .accent{ color:#1D1D1F; }
  #faq .csSectionH2 br{ display:none; }
  #faq .csSectionLead{ display:none; }

  /* Pas de bordure noire en haut de la liste — on retire la border-top
     héritée de .faqList et la border-top du premier item. */
  #faq .faqList{
    display:flex; flex-direction:column; gap:0;
    margin-top:6px;
    border-top:0 !important;
  }
  #faq .faqItem{
    background:transparent !important;
    border:0 !important;
    border-top:1px solid rgba(29,29,31,.08) !important;
    border-radius:0 !important;
    box-shadow:none !important;
    overflow:hidden;
    padding:0;
  }
  #faq .faqItem:first-child{ border-top:0 !important; }
  #faq .faqItem:last-child{ border-bottom:1px solid rgba(29,29,31,.08) !important; }
  #faq .faqQ{
    cursor:pointer;
    padding:20px 4px;
    display:flex; align-items:center; justify-content:space-between; gap:14px;
    font-family:'Bricolage Grotesque','Inter',sans-serif;
    font-size:16px; font-weight:600;
    color:#1D1D1F;
    letter-spacing:-.015em;
    line-height:1.35;
  }
  @media (min-width:720px){ #faq .faqQ{ font-size:17px; padding:22px 4px; } }
  #faq .faqQ-plus{
    width:18px; height:18px;
    display:inline-flex; align-items:center; justify-content:center;
    color:#86868B;
    flex:0 0 auto;
    transition:transform .2s ease;
    background:transparent !important;
    border:0 !important;
  }
  #faq .faqQ-plus svg{ width:16px; height:16px; }
  #faq .faqItem.open .faqQ-plus{ transform:rotate(90deg); background:transparent !important; color:#86868B !important; border:0 !important; }
  #faq .faqA{
    max-height:0; overflow:hidden;
    padding:0 4px;
    font-family:'Inter',sans-serif;
    font-size:14.5px; line-height:1.6;
    color:#6E6E73; font-weight:400;
    transition:max-height .3s ease, padding .3s ease;
  }
  #faq .faqItem.open .faqA{
    max-height:600px;
    padding:0 4px 20px;
  }

/* ====== Section style block lines 4399,4611 ====== */
  .ktVisio{
    background:#141914;
    color:#fff;
    width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    padding:88px 24px 96px;
    position:relative;
    z-index:2;
    font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  }
  @media (min-width:720px){ .ktVisio{ padding:120px 32px 140px; } }

  .ktVisio__wrap{ max-width:1240px; margin:0 auto; }

  .ktVisio__grid{
    display:grid;
    grid-template-columns:1fr;
    gap:40px;
    align-items:center;
  }
  @media (min-width:980px){
    .ktVisio__grid{ grid-template-columns:1fr 1fr; gap:80px; }
  }

  .ktVisio__head{ display:flex; flex-direction:column; }
  .ktVisio__eyebrow{
    display:inline-flex;
    align-items:center;
    font-family:'Inter', sans-serif;
    font-size:11px;
    font-weight:600;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:rgba(255,255,255,.55);
    margin:0 0 14px;
  }
  .ktVisio__title{
    font-family:'Bricolage Grotesque', 'Inter', sans-serif;
    font-size:28px;
    font-weight:600;
    letter-spacing:-.025em;
    line-height:1.1;
    margin:0 0 18px;
    color:#fff;
    text-wrap:balance;
  }
  @media (min-width:720px){ .ktVisio__title{ font-size:40px; margin:0 0 22px; } }
  .ktVisio__lead{
    font-size:15px;
    line-height:1.55;
    color:rgba(255,255,255,.65);
    margin:0 0 28px;
    max-width:42ch;
    letter-spacing:-.005em;
  }
  @media (min-width:720px){ .ktVisio__lead{ font-size:15.5px; } }

  .ktVisio__points{ display:flex; flex-direction:column; gap:18px; }
  .ktVisio__point{
    display:grid;
    grid-template-columns:22px 1fr;
    gap:14px;
    align-items:start;
  }
  .ktVisio__point svg{
    width:20px;
    height:20px;
    stroke:#fff;
    fill:none;
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;
    margin-top:2px;
  }
  .ktVisio__point h4{
    font-family:'Bricolage Grotesque', 'Inter', sans-serif;
    font-size:15px;
    font-weight:600;
    letter-spacing:-.015em;
    color:#fff;
    margin:0 0 4px;
  }
  .ktVisio__point p{
    font-size:13.5px;
    line-height:1.5;
    color:rgba(255,255,255,.6);
    margin:0;
    letter-spacing:-.005em;
  }

  /* Mockup visio — grille tuiles participants */
  .ktVisio__mock{
    background:#0d100d;
    border:1px solid rgba(255,255,255,.08);
    border-radius:20px;
    overflow:hidden;
    aspect-ratio:4/3;
    position:relative;
    box-shadow:0 12px 32px -12px rgba(0,0,0,.4);
  }
  @media (min-width:720px){ .ktVisio__mock{ border-radius:24px; } }

  .ktVisio__tiles{
    position:absolute;
    inset:14px 14px 64px;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    grid-template-rows:1fr 1fr;
    gap:10px;
  }
  @media (min-width:720px){
    .ktVisio__tiles{ inset:20px 20px 80px; gap:12px; }
  }

  .ktVisio__tile{
    border-radius:14px;
    position:relative;
    overflow:hidden;
    display:grid;
    place-items:center;
    color:#fff;
    font-family:'Bricolage Grotesque', sans-serif;
    font-size:22px;
    font-weight:600;
    letter-spacing:-.025em;
    opacity:0;
    transform:scale(.96);
    transition:opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1);
  }
  .ktVisio.is-in .ktVisio__tile{ opacity:1; transform:scale(1); }
  .ktVisio.is-in .ktVisio__tile:nth-child(1){ transition-delay:0s; }
  .ktVisio.is-in .ktVisio__tile:nth-child(2){ transition-delay:.08s; }
  .ktVisio.is-in .ktVisio__tile:nth-child(3){ transition-delay:.16s; }
  .ktVisio.is-in .ktVisio__tile:nth-child(4){ transition-delay:.24s; }
  .ktVisio.is-in .ktVisio__tile:nth-child(5){ transition-delay:.32s; }
  .ktVisio.is-in .ktVisio__tile:nth-child(6){ transition-delay:.40s; }

  .ktVisio__tile--main{
    grid-column:span 2;
    grid-row:span 2;
    background:linear-gradient(135deg, #2A2D33 0%, #1A1C20 100%);
  }
  .ktVisio__tile--main::after{
    content:'';
    position:absolute;
    top:10px;
    right:10px;
    width:8px;
    height:8px;
    border-radius:999px;
    background:#8FD46E;
    box-shadow:0 0 0 4px rgba(143,212,110,.18);
  }
  .ktVisio__tile--c1{ background:linear-gradient(135deg, #3D4148 0%, #2A2D33 100%); }
  .ktVisio__tile--c2{ background:linear-gradient(135deg, #4A4F58 0%, #353941 100%); }
  .ktVisio__tile--c3{ background:linear-gradient(135deg, #353941 0%, #25282E 100%); }
  .ktVisio__tile--c4{ background:linear-gradient(135deg, #2A2D33 0%, #1F2126 100%); }

  .ktVisio__tile span{
    position:absolute;
    bottom:8px;
    left:10px;
    font-family:'Inter', sans-serif;
    font-size:10px;
    font-weight:500;
    color:rgba(255,255,255,.65);
    letter-spacing:-.005em;
  }

  .ktVisio__bar{
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    height:56px;
    background:rgba(0,0,0,.5);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    border-top:1px solid rgba(255,255,255,.06);
  }
  @media (min-width:720px){ .ktVisio__bar{ height:64px; gap:14px; } }

  .ktVisio__btn{
    width:38px;
    height:38px;
    border-radius:999px;
    display:grid;
    place-items:center;
    background:rgba(255,255,255,.10);
    color:#fff;
    border:0;
  }
  @media (min-width:720px){ .ktVisio__btn{ width:44px; height:44px; } }
  .ktVisio__btn svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  .ktVisio__btn--end{
    background:#8FD46E;
    width:auto;
    padding:0 16px;
    font-family:'Inter', sans-serif;
    font-size:13px;
    font-weight:600;
    color:#141914;
    letter-spacing:-.005em;
  }

  @media (prefers-reduced-motion: reduce){
    .ktVisio__tile{ opacity:1 !important; transform:none !important; transition:none !important; }
  }

/* ====== Section style block lines 4680,4792 ====== */
  /* Section "Expérience client" — style "K.jpg" : image device à gauche,
     collée au bas de la section ; contenu (eyebrow + H2 + paragraphes) à droite.
     Fond #F9F9F9, épuré. */
  .ktExp{
    background:#F9F9F9;
    color:#1D1D1F;
    width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    /* Mobile : padding bas pour aérer sous l'image.
       Desktop : padding bas = 0, l'image vient toucher le bord inférieur. */
    padding:88px 24px 64px;
    position:relative;
    z-index:2;
    font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    overflow:hidden;
  }
  @media (min-width:720px){ .ktExp{ padding:120px 32px 0; } }

  .ktExp__wrap{ max-width:1240px; margin:0 auto; }

  .ktExp__grid{
    display:grid;
    grid-template-columns:1fr;
    gap:40px;
    align-items:end;
  }
  @media (min-width:980px){
    .ktExp__grid{
      grid-template-columns:1fr 1fr;
      gap:80px;
      align-items:end;
    }
  }

  /* Colonne image — image collée au bas de la section, agrandie.
     Pas de cadre, pas d'ombre : on laisse la photo respirer comme dans la réf. */
  .ktExp__visual{
    width:100%;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    margin-bottom:0;
  }
  .ktExp__visual img{
    display:block;
    width:100%;
    max-width:none;
    height:auto;
    object-fit:contain;
    margin-bottom:0;
  }
  @media (min-width:980px){
    .ktExp__visual img{
      /* Élargie au-delà de sa colonne pour rendre l'image plus présente,
         tout en restant ancrée au bas de la section. */
      width:115%;
      margin-left:-7.5%;
    }
  }

  /* Colonne texte */
  .ktExp__head{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    max-width:520px;
  }
  /* Sur desktop, le texte est centré verticalement dans la section,
     pendant que l'image colle au bas (la grille reste en align-items:end
     pour ancrer l'image, et la cellule texte se centre via align-self). */
  @media (min-width:980px){
    .ktExp__head{
      padding-right:24px;
      align-self:center;
      padding-bottom:0;
    }
  }

  .ktExp__eyebrow{
    font-family:'Inter', sans-serif;
    font-size:11px;
    font-weight:600;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:#6E6E73;
    margin:0 0 22px;
  }

  .ktExp__title{
    font-family:'Bricolage Grotesque', 'Inter', sans-serif;
    font-size:28px;
    font-weight:600;
    letter-spacing:-.025em;
    line-height:1.1;
    margin:0 0 22px;
    color:#1D1D1F;
    text-wrap:balance;
  }
  @media (min-width:720px){ .ktExp__title{ font-size:40px; margin:0 0 28px; } }

  .ktExp__lead{
    font-family:'Inter', sans-serif;
    font-size:15.5px;
    line-height:1.6;
    color:#1D1D1F;
    margin:0 0 18px;
    max-width:46ch;
    font-weight:400;
    letter-spacing:-.005em;
  }
  .ktExp__lead:last-child{ margin-bottom:0; }
  @media (min-width:720px){ .ktExp__lead{ font-size:16px; } }

/* ====== Section style block lines 4822,4954 ====== */
  .ktFeats{
    background:#FFFFFF;
    color:#1D1D1F;
    width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    padding:96px 24px 96px;
    position:relative;
    z-index:2;
    font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  }
  /* Mobile : contient le carousel scroll-snap pour éviter le scroll horizontal global */
  @media (max-width:979px){
    .ktFeats{ overflow:hidden; }
  }
  @media (min-width:720px){ .ktFeats{ padding:140px 32px 140px; } }

  .ktFeats__wrap{ max-width:1240px; margin:0 auto; }

  /* Mobile : carousel horizontal scroll-snap.
     Desktop : empilage vertical 1 colonne par feature, alterné. */
  .ktFeats__wrap{
    display:flex;
    gap:16px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    margin:0 -24px;
    padding:4px 24px 16px;
    scroll-padding-left:24px;
  }
  .ktFeats__wrap::-webkit-scrollbar{ display:none; }

  .ktFeat{
    display:flex;
    flex-direction:column;
    gap:20px;
    flex:0 0 82%;
    max-width:340px;
    scroll-snap-align:start;
    margin:0;
  }
  /* Sur mobile, on force l'image après le texte pour tous les blocs */
  .ktFeat__head{ order:1; }
  .ktFeat__media{ order:2; }

  @media (min-width:980px){
    .ktFeats__wrap{
      display:block;
      overflow:visible;
      margin:0 auto;
      padding:0;
    }
    .ktFeat{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:80px;
      align-items:center;
      margin-bottom:120px;
      flex:initial;
      max-width:none;
    }
    .ktFeat:last-child{ margin-bottom:0; }
    .ktFeat__head{ order:initial; }
    .ktFeat__media{ order:initial; }
    /* Alternance : la 2e a l'image à gauche, le texte à droite */
    .ktFeat--rev .ktFeat__media{ order:1; }
    .ktFeat--rev .ktFeat__head{ order:2; }
  }

  .ktFeat__head{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    max-width:520px;
  }
  @media (min-width:980px){
    .ktFeat__head{ padding:0 24px; }
    .ktFeat--rev .ktFeat__head{ padding:0 0 0 24px; }
  }

  .ktFeat__eyebrow{
    font-family:'Inter', sans-serif;
    font-size:11px;
    font-weight:600;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:#1D1D1F;
    margin:0 0 22px;
  }

  .ktFeat__title{
    font-family:'Bricolage Grotesque', 'Inter', sans-serif;
    /* Aligné sur .csSectionH2 : 28px mobile, 40px desktop */
    font-size:28px;
    font-weight:600;
    letter-spacing:-.025em;
    line-height:1.1;
    margin:0 0 22px;
    color:#1D1D1F;
    text-wrap:balance;
  }
  @media (min-width:720px){
    .ktFeat__title{ font-size:40px; margin:0 0 28px; }
  }

  .ktFeat__text{
    font-family:'Inter', sans-serif;
    font-size:15.5px;
    line-height:1.6;
    color:#1D1D1F;
    margin:0;
    max-width:46ch;
    font-weight:400;
    letter-spacing:-.005em;
  }
  @media (min-width:720px){ .ktFeat__text{ font-size:16px; } }

  /* Visuel : cadre arrondi à fond gris clair, image cover */
  .ktFeat__media{
    border-radius:20px;
    overflow:hidden;
    background:#F4F4F0;
    aspect-ratio:16/10;
    position:relative;
  }
  @media (min-width:720px){
    .ktFeat__media{ border-radius:26px; aspect-ratio:16/10; }
  }
  .ktFeat__media img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }

/* ====== Section style block lines 5294,5363 ====== */
  .ktFoot{
    background:#141914;
    color:#fff;
    width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    padding:64px 24px 32px;
    font-family:'Inter', -apple-system, sans-serif;
  }
  @media (min-width:720px){ .ktFoot{ padding:96px 32px 40px; } }

  .ktFoot__wrap{ max-width:1240px; margin:0 auto; }
  .ktFoot__grid{
    display:grid;
    grid-template-columns:1fr;
    gap:40px 32px;
  }
  @media (min-width:720px){
    .ktFoot__grid{ grid-template-columns:1.4fr 1fr 1fr 1fr; gap:48px 32px; }
  }

  .ktFoot__brand{
    font-family:'Bricolage Grotesque', 'Inter', sans-serif;
    font-size:22px;
    font-weight:700;
    letter-spacing:-.025em;
    color:#fff;
    margin:0 0 12px;
  }
  .ktFoot__tag{
    font-size:14px;
    line-height:1.55;
    color:rgba(255,255,255,.6);
    max-width:36ch;
    margin:0;
    letter-spacing:-.005em;
  }

  .ktFoot__col h5{
    font-size:11px;
    font-weight:600;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:rgba(255,255,255,.55);
    margin:0 0 14px;
  }
  .ktFoot__col{ display:flex; flex-direction:column; gap:10px; }
  .ktFoot__col a{
    font-size:14px;
    color:rgba(255,255,255,.85);
    text-decoration:none;
    letter-spacing:-.005em;
    transition:color .15s ease;
  }
  .ktFoot__col a:hover{ color:#fff; }

  .ktFoot__bottom{
    margin-top:48px;
    padding-top:24px;
    border-top:1px solid rgba(255,255,255,.10);
    display:flex;
    flex-direction:column;
    gap:8px;
    font-size:12.5px;
    color:rgba(255,255,255,.45);
    letter-spacing:-.005em;
  }
  @media (min-width:720px){
    .ktFoot__bottom{ flex-direction:row; justify-content:space-between; align-items:center; margin-top:64px; }
  }

/* ============================================ */
/* === TOP BAR (au-dessus du header)         === */
/* ============================================ */
.ktTopBar{
  position:fixed;
  top:0; left:0; right:0;
  z-index:51;
  background:#141914;
  color:#fff;
  font-family:'Inter', -apple-system, sans-serif;
  font-size:13px;
  font-weight:500;
  letter-spacing:-.005em;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 16px;
}
.ktTopBar__wrap{
  width:100%;
  max-width:1240px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
  text-align:center;
}
.ktTopBar__text{
  color:rgba(255,255,255,.85);
}
.ktTopBar__link{
  color:#8FD46E;
  text-decoration:none;
  font-weight:600;
  transition:color .15s ease, transform .15s ease;
  display:inline-flex;
  align-items:center;
  gap:4px;
  white-space:nowrap;
}
.ktTopBar__link:hover{
  color:#A7E08C;
  transform:translateX(2px);
}
/* Sur très petit écran, on cache le texte et on garde juste le lien */
@media (max-width:500px){
  .ktTopBar{ font-size:12px; }
  .ktTopBar__text{ display:none; }
}

/* ============================================ */
/* === NAVBAR Koatcher (partagée)           === */
/* ============================================ */
.ktNav{
  position:fixed;
  top:36px; left:0; right:0;     /* sous la top bar */
  z-index:50;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 24px;
  background:rgba(255,255,255,.78);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(29,29,31,.06);
  font-family:'Inter', -apple-system, sans-serif;
}
/* Aligner le padding desktop sur celui des sections (.csWrap → 32px) */
@media (min-width:980px){
  .ktNav{ padding:0 32px; }
}
.ktNav__wrap{
  width:100%;
  max-width:1240px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.ktNav__brand{
  display:inline-flex;
  align-items:center;
  font-family:'Bricolage Grotesque', 'Inter', sans-serif;
  font-size:18px;
  font-weight:700;
  letter-spacing:-.025em;
  color:#1D1D1F;
  text-decoration:none;
}
.ktNav__links{
  display:none;
  gap:28px;
  align-items:center;
}
@media (min-width:820px){ .ktNav__links{ display:flex; } }
.ktNav__link{
  font-size:13.5px;
  font-weight:500;
  color:#1D1D1F;
  letter-spacing:-.005em;
  text-decoration:none;
  transition:color .15s ease;
}
.ktNav__link:hover{ color:#6E6E73; }
.ktNav__cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:36px;
  padding:0 18px;
  background:#141914;
  color:#fff;
  text-decoration:none;
  border-radius:999px;
  font-family:'Inter', sans-serif;
  font-size:13.5px;
  font-weight:500;
  letter-spacing:-.005em;
  transition:background .15s ease, transform .15s ease;
  white-space:nowrap;
}
.ktNav__cta:hover{ background:#0d100d; transform:translateY(-0.5px); }

/* === Trigger méga-menu (Fonctionnalités, Pour qui) === */
.ktNav__menuItem{
  position:relative;
  display:inline-flex;
  align-items:center;
}
.ktNav__menuTrigger{
  display:inline-flex;
  align-items:center;
  gap:4px;
  background:transparent;
  border:0;
  padding:0;
  margin:0;
  font-family:inherit;
  font-size:13.5px;
  font-weight:500;
  color:#1D1D1F;
  letter-spacing:-.005em;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
  transition:color .15s ease;
}
.ktNav__menuTrigger:hover,
.ktNav__menuTrigger.is-open{ color:#6E6E73; }
.ktNav__caret{
  width:12px;
  height:12px;
  flex:0 0 12px;
  transition:transform .2s ease;
}
.ktNav__menuTrigger.is-open .ktNav__caret{ transform:rotate(180deg); }

/* === MÉGA-MENU panneau plein largeur === */
.ktMega{
  position:fixed;
  top:100px;                          /* sous topbar 36 + navbar 64 */
  left:0; right:0;
  z-index:48;                          /* sous la navbar 50 */
  background:#FFFFFF;
  border-bottom:1px solid rgba(29,29,31,.06);
  box-shadow:0 12px 32px -16px rgba(29,29,31,.08);
  font-family:'Inter', -apple-system, sans-serif;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-8px);
  transition:opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.ktMega.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
  transition:opacity .25s ease, transform .25s ease, visibility 0s linear 0s;
}
/* Masqué sur mobile : seul le drawer fonctionne */
@media (max-width:819px){
  .ktMega{ display:none !important; }
}

.ktMega__wrap{
  max-width:1240px;
  margin:0 auto;
  padding:40px 32px;
  display:grid;
  grid-template-columns:280px 1fr;
  gap:48px;
}
@media (max-width:1100px){
  .ktMega__wrap{ grid-template-columns:240px 1fr; gap:32px; padding:32px 24px; }
}

.ktMega__lead{
  border-right:1px solid #E5E5EA;
  padding-right:32px;
}
@media (max-width:1100px){ .ktMega__lead{ padding-right:24px; } }
.ktMega__eyebrow{
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#6E6E73;
  margin:0 0 12px;
}
.ktMega__title{
  font-family:'Bricolage Grotesque', 'Inter', sans-serif;
  font-size:22px;
  font-weight:600;
  letter-spacing:-.02em;
  line-height:1.2;
  color:#1D1D1F;
  margin:0 0 12px;
}
.ktMega__text{
  font-size:13px;
  line-height:1.5;
  color:#6E6E73;
  margin:0 0 18px;
  letter-spacing:-.005em;
}
.ktMega__leadCta{
  font-size:13px;
  font-weight:600;
  color:#141914;
  text-decoration:none;
  letter-spacing:-.005em;
  transition:transform .15s ease;
  display:inline-block;
}
.ktMega__leadCta:hover{ transform:translateX(3px); }

.ktMega__cols{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}
@media (max-width:1100px){ .ktMega__cols{ gap:18px; } }

.ktMega__colTitle{
  font-family:'Inter', sans-serif;
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#6E6E73;
  margin:0 0 12px;
  padding-bottom:10px;
  border-bottom:1px solid #F0F0F0;
}

.ktMega__link{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:10px 8px;
  margin:0 -8px;
  border-radius:10px;
  text-decoration:none;
  color:#1D1D1F;
  transition:background .15s ease, transform .15s ease;
}
.ktMega__link:hover{
  background:#F9F9F9;
  transform:translateX(2px);
}
.ktMega__link > span:last-child{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.ktMega__icon{
  flex:0 0 32px;
  width:32px;
  height:32px;
  border-radius:8px;
  background:#F5F5F7;
  display:grid;
  place-items:center;
  color:#141914;
  margin-top:1px;
  transition:background .15s ease, color .15s ease;
}
.ktMega__icon svg{ width:16px; height:16px; }
.ktMega__link:hover .ktMega__icon{
  background:#141914;
  color:#FFFFFF;
}
.ktMega__linkTitle{
  font-family:'Bricolage Grotesque', 'Inter', sans-serif;
  font-size:14px;
  font-weight:600;
  color:#1D1D1F;
  letter-spacing:-.005em;
  line-height:1.2;
}
.ktMega__linkSub{
  font-size:12px;
  color:#6E6E73;
  letter-spacing:-.005em;
  line-height:1.3;
}

/* Backdrop sous le méga-menu (clic pour fermer) */
.ktMega__backdrop{
  position:fixed;
  top:100px;                          /* sous topbar+navbar */
  left:0; right:0; bottom:0;
  z-index:47;                          /* sous le méga-menu 48 */
  background:rgba(29,29,31,.30);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .2s ease, visibility 0s linear .2s;
}
.ktMega__backdrop.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity .25s ease, visibility 0s linear 0s;
}
@media (max-width:819px){
  .ktMega__backdrop{ display:none !important; }
}

/* === Actions mobile (CTA + burger) === */
.ktNav__mobileActions{
  display:flex;
  align-items:center;
  gap:10px;
}
@media (min-width:820px){
  .ktNav__mobileActions{ display:none; }
}
.ktNav__ctaMobile{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:34px;
  padding:0 14px;
  background:transparent;
  color:#8FD46E;
  text-decoration:none;
  border:1.5px solid #8FD46E;
  border-radius:999px;
  font-family:'Inter', sans-serif;
  font-size:13px;
  font-weight:600;
  letter-spacing:-.005em;
  white-space:nowrap;
  transition:background .15s ease, color .15s ease, transform .15s ease;
}
.ktNav__ctaMobile:hover{
  background:#8FD46E;
  color:#141914;
  transform:translateY(-0.5px);
}

.ktNav__burger{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:999px;
  border:0;
  background:transparent;
  color:#1D1D1F;
  cursor:pointer;
}
@media (min-width:820px){ .ktNav__burger{ display:none; } }
.ktNav__burger svg{ width:20px; height:20px; }

/* ============================================ */
/* === DRAWER MOBILE pleine hauteur          === */
/* ============================================ */
.ktNavMobile{
  position:fixed;
  top:100px;                          /* sous topbar 36 + navbar 64 */
  left:0; right:0; bottom:0;          /* pleine hauteur sous le header */
  background:#FFFFFF;
  z-index:49;
  font-family:'Inter', -apple-system, sans-serif;
  display:flex;
  flex-direction:column;
  padding:24px 0 32px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-8px);
  transition:opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
.ktNavMobile.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
  transition:opacity .3s ease, transform .3s ease, visibility 0s linear 0s;
}

/* Bloque le scroll de la page derrière le drawer */
body.kt-noscroll{ overflow:hidden; }

/* Liste des liens */
.ktNavMobile__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  width:100%;
}
.ktNavMobile__item{
  display:block;
  width:100%;
  margin:0;
  padding:0;
  border-bottom:1px solid rgba(29,29,31,.06);
  opacity:0;
  transform:translateX(-12px);
}
.ktNavMobile.is-open .ktNavMobile__item{
  animation:ktNavFadeIn .4s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:calc(var(--i, 0) * .055s + .1s);
}
@keyframes ktNavFadeIn{
  from{ opacity:0; transform:translateX(-12px); }
  to{ opacity:1; transform:translateX(0); }
}

/* Lien menu : pleine largeur + arrow à droite */
.ktNavMobile__link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  width:100%;
  box-sizing:border-box;             /* indispensable pour calcul de largeur avec padding */
  padding:18px 24px;
  margin:0;
  background:transparent;
  border:0;
  color:#1D1D1F;
  font-family:'Bricolage Grotesque','Inter',sans-serif;
  font-size:20px;
  font-weight:600;
  letter-spacing:-.015em;
  line-height:1.2;
  text-decoration:none;
  cursor:pointer;
  text-align:left;
  transition:background .15s ease;
  -webkit-appearance:none;
  appearance:none;
}
.ktNavMobile__link:hover,
.ktNavMobile__link:focus-visible{
  background:#F9F9F9;
  outline:none;
}
.ktNavMobile__link > span:first-child,
.ktNavMobile__link .ktNavMobile__label{ flex:1; min-width:0; }
.ktNavMobile__arrow{
  width:20px;
  height:20px;
  flex:0 0 20px;
  color:#86868B;
  transition:color .15s ease, transform .15s ease;
}
.ktNavMobile__link:hover .ktNavMobile__arrow{
  color:#141914;
  transform:translateX(3px);
}

/* Variante avec icône (sous-menu Pour qui) */
.ktNavMobile__link--icon{
  padding:14px 24px;
  font-size:16px;
  gap:14px;
}
.ktNavMobile__icon{
  width:36px;
  height:36px;
  flex:0 0 36px;
  border-radius:10px;
  background:#F5F5F7;
  display:grid;
  place-items:center;
  color:#141914;
  transition:background .15s ease, color .15s ease;
}
.ktNavMobile__link--icon:hover .ktNavMobile__icon{
  background:#141914;
  color:#FFFFFF;
}
.ktNavMobile__icon svg{ width:18px; height:18px; }

/* CTA en bas du drawer principal */
.ktNavMobile__footer{
  margin-top:auto;
  padding:24px;
  opacity:0;
  transform:translateY(8px);
}
.ktNavMobile.is-open .ktNavMobile__footer{
  animation:ktNavFooterIn .4s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:calc(var(--i, 6) * .055s + .15s);
}
@keyframes ktNavFooterIn{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:translateY(0); }
}
.ktNavMobile__cta{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:52px;
  background:#141914;
  color:#FFFFFF !important;
  text-decoration:none;
  border-radius:999px;
  font-family:'Inter',sans-serif;
  font-size:15px;
  font-weight:600;
  letter-spacing:-.005em;
  transition:background .15s ease, transform .15s ease;
}
.ktNavMobile__cta:hover{
  background:#0d100d;
  transform:translateY(-1px);
}

/* === Sous-menu "Pour qui ?" === */
#ktNavMobileSub{
  transform:translateX(20px);
}
#ktNavMobileSub.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateX(0);
  transition:opacity .3s ease, transform .3s ease, visibility 0s linear 0s;
  z-index:50;                        /* au-dessus du menu principal */
}

.ktNavMobile__back{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin:0 24px 8px;
  background:transparent;
  border:0;
  color:#6E6E73;
  font-family:'Inter',sans-serif;
  font-size:13.5px;
  font-weight:500;
  letter-spacing:-.005em;
  cursor:pointer;
  padding:8px 0;
  align-self:flex-start;
  transition:color .15s ease, transform .15s ease;
  -webkit-appearance:none;
  appearance:none;
}
.ktNavMobile__back:hover{
  color:#1D1D1F;
  transform:translateX(-2px);
}
.ktNavMobile__back svg{ width:16px; height:16px; }

.ktNavMobile__subTitle{
  font-family:'Bricolage Grotesque','Inter',sans-serif;
  font-size:28px;
  font-weight:600;
  letter-spacing:-.025em;
  color:#1D1D1F;
  margin:0 24px 4px;
  line-height:1.1;
}
.ktNavMobile__subLead{
  font-size:14px;
  color:#6E6E73;
  margin:0 24px 20px;
  letter-spacing:-.005em;
  line-height:1.5;
}

/* === Burger animé en croix === */
.ktNav__burgerInner{
  position:relative;
  width:18px;
  height:14px;
  display:inline-block;
}
.ktNav__burgerLine{
  position:absolute;
  left:0; right:0;
  height:2px;
  background:#1D1D1F;
  border-radius:2px;
  transition:transform .25s cubic-bezier(.16,1,.3,1), top .25s cubic-bezier(.16,1,.3,1), opacity .15s ease;
}
.ktNav__burgerLine:nth-child(1){ top:2px; }
.ktNav__burgerLine:nth-child(2){ top:10px; }
.ktNav__burger.is-open .ktNav__burgerLine:nth-child(1){
  top:6px;
  transform:rotate(45deg);
}
.ktNav__burger.is-open .ktNav__burgerLine:nth-child(2){
  top:6px;
  transform:rotate(-45deg);
}

@media (prefers-reduced-motion: reduce){
  .ktNavMobile,
  .ktNavMobile__item,
  .ktNavMobile__footer,
  .ktNav__burgerLine,
  .ktNavMobile__arrow,
  .ktNavMobile__icon,
  .ktNavMobile__back{
    transition:none !important;
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
}

/* Pages avec un hero pleine page : padding-top sur le 1er bloc (topbar 36 + navbar 64) */
.kt-page-top{ padding-top:100px; }

/* ============================================ */
/* === BREADCRUMBS (fil d'Ariane)            === */
/* ============================================ */
.ktBreadcrumbs{
  background:transparent;
  padding:16px 24px 0;
  font-family:'Inter', -apple-system, sans-serif;
  position:relative;
  z-index:2;
}
@media (min-width:720px){ .ktBreadcrumbs{ padding:20px 32px 0; } }
.ktBreadcrumbs__wrap{
  max-width:1240px;
  margin:0 auto;
}
.ktBreadcrumbs__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0;
  font-size:13px;
  letter-spacing:-.005em;
}
.ktBreadcrumbs__item{
  display:inline-flex;
  align-items:center;
}
.ktBreadcrumbs__link{
  color:#6E6E73;
  text-decoration:none;
  transition:color .15s ease;
}
.ktBreadcrumbs__link:hover{ color:#1D1D1F; }
.ktBreadcrumbs__sep{
  margin:0 8px;
  color:#AEAEB2;
  font-size:14px;
  line-height:1;
}
.ktBreadcrumbs__current{
  color:#1D1D1F;
  font-weight:500;
}
/* Sur mobile, on tronque les items du milieu si trop long */
@media (max-width:560px){
  .ktBreadcrumbs__list{ font-size:12.5px; }
  .ktBreadcrumbs__sep{ margin:0 6px; }
}

/* ============================================ */
/* === FOOTER Koatcher (partagé)             === */
/* ============================================ */
.ktFoot{
  background:#141914;
  color:#fff;
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  padding:64px 24px 32px;
  font-family:'Inter', -apple-system, sans-serif;
  position:relative;
  z-index:2;
}
@media (min-width:720px){ .ktFoot{ padding:96px 32px 40px; } }

.ktFoot__wrap{ max-width:1240px; margin:0 auto; }
.ktFoot__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:40px 32px;
}
@media (min-width:720px){
  .ktFoot__grid{ grid-template-columns:1.4fr 1fr 1fr 1fr; gap:48px 32px; }
}

.ktFoot__brand{
  font-family:'Bricolage Grotesque', 'Inter', sans-serif;
  font-size:22px;
  font-weight:700;
  letter-spacing:-.025em;
  color:#fff;
  margin:0 0 12px;
}
.ktFoot__tag{
  font-size:14px;
  line-height:1.55;
  color:rgba(255,255,255,.6);
  max-width:36ch;
  margin:0;
  letter-spacing:-.005em;
}
.ktFoot__col h5{
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.55);
  margin:0 0 14px;
}
.ktFoot__col{ display:flex; flex-direction:column; gap:10px; }
.ktFoot__col a{
  font-size:14px;
  color:rgba(255,255,255,.85);
  text-decoration:none;
  letter-spacing:-.005em;
  transition:color .15s ease;
}
.ktFoot__col a:hover{ color:#fff; }

.ktFoot__bottom{
  margin-top:48px;
  padding-top:24px;
  border-top:1px solid rgba(255,255,255,.10);
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:12.5px;
  color:rgba(255,255,255,.45);
  letter-spacing:-.005em;
}
@media (min-width:720px){
  .ktFoot__bottom{ flex-direction:row; justify-content:space-between; align-items:center; margin-top:64px; }
}

/* === Sections "follow" : doivent passer PAR-DESSUS la sticky .csSection--dark === */
/* Toute section enfant direct du body passe par-dessus (z-index:2),
   sauf la sticky elle-même qui reste à z-index:1. */
body > section,
body > footer,
body > main > section,
body > main > footer {
  position: relative;
  z-index: 2;
}
body > section.csSection--dark,
body > main > section.csSection--dark {
  /* La sticky reste sous les autres */
  z-index: 1;
}

/* === Effet "remontée arrondie" : la section qui suit IMMÉDIATEMENT la sticky
   reçoit des coins arrondis en haut (comme .ktStats sur l'index).
   Le sélecteur "+" cible le sibling direct. */
.csSection--dark + section,
.csSection--dark + footer {
  border-top-left-radius: 48px;
  border-top-right-radius: 48px;
}
@media (min-width: 720px) {
  .csSection--dark + section,
  .csSection--dark + footer {
    border-top-left-radius: 72px;
    border-top-right-radius: 72px;
  }
}

/* === Body & html : overflow-x clip (fix décalage mobile SANS casser position:sticky) === */
/* overflow-x:clip empêche le scroll horizontal sans créer de contexte de défilement,
   donc le sticky enfant (.csSection--dark) continue de fonctionner.
   Fallback hidden pour anciens navigateurs : ils perdront le sticky mais auront le clip. */
html{ scroll-behavior:smooth; overflow-x:hidden; overflow-x:clip; }
body{ overflow-x:hidden; overflow-x:clip; width:100%; }
main, section, footer, nav { max-width:100vw; }