/* ============================================ */
  /* === TOKENS Apple Graphite (HARMONISÉS)   === */
  /* ============================================ */
  :root {
    --bpInk: #000000;           /* texte principal — brun */
    --bpInk-2: #333333;
    --bpForest: #000000;        /* brun — fonds sombres */
    --bpForestDeep: #1a1a1a;    /* brun foncé */
    --bpAccent: #000000;        /* accent = brun */
    --bpAccentBg: #DEDEE1;
    --bpAccentDeep: #1a1a1a;
    --bpOnAccent: #F6F6F7;
    --bpBlue: #000000;          /* brun — CTA principaux */
    --bpBlueDeep: #1a1a1a;      /* brun — CTA hover */
    --bpAppleGreen: #000000;    /* alias brun (ancien vert pomme) */

    --bpBg: #F6F6F7;
    --bpCard: #F6F6F7;
    --bpCardSoft: #ECECEE;
    --bpCardSoft-2: #DEDEE1;

    --bpLine: rgba(0,0,0,.08);
    --bpLineStrong: rgba(0,0,0,.18);
    --bpLine-2: #DEDEE1;

    --bpSoft: #6b5b56;
    --bpMuted: #8a7873;
    --bpMuted-2: #b0a29d;

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

    --visual-grad-1: #8a7873;
    --visual-grad-2: #333333;
    --visual-grad-3: #000000;

    --font-display: 'Google Sans', -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
    --font-sans: 'Google Sans', -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: #F6F6F7;
    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: #F6F6F7;
    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(246,246,247,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: #F6F6F7;
    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: #F6F6F7;
    color: #000000;
    border-color: #F6F6F7;
  }
  .csVideoHero-btn--primary:hover{
    background: #ECECEE;
    border-color: #ECECEE;
    transform: translateY(-1px);
  }
  .csVideoHero-note {
    margin: 20px 0 0;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 400;
    color: rgba(246,246,247,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(0,0,0,0) 0%,
      rgba(0,0,0,0) 40%,
      rgba(0,0,0,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(0,0,0,.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(246,246,247,.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(0,0,0,.24);
  }
  .video-banner:hover .video-play {
    transform: translate(-50%, -50%) scale(1.06);
    box-shadow: 0 12px 36px rgba(0,0,0,.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(246,246,247,.12);
    color: var(--bpOnAccent);
    border-color: rgba(246,246,247,.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(0,0,0,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(246,246,247,.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(246,246,247,.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(246,246,247,.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(246,246,247,.55);
    margin-left: auto;
  }

  /* Liste micro-meta (lieu, prix) */
  .bookHero-meta {
    display: flex;
    gap: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(246,246,247,.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(246,246,247,.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: #000000;
  }
  .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: #000000;
    color: #F6F6F7;
    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(246,246,247,0.7); }
  .feat-carousel-section .csEyebrow .dot { background: rgba(246,246,247,0.7); }
  .feat-carousel-section .csSectionH2 { color: #F6F6F7; }
  .feat-carousel-section .csSectionH2 .accent { color: rgba(246,246,247,0.5); }
  .feat-carousel-section .feat-slide-caption h4 { color: #F6F6F7; }
  .feat-carousel-section .feat-slide-caption p { color: rgba(246,246,247,0.6); }
  .feat-carousel-section .feat-carousel-btn {
    background: rgba(246,246,247,0.08);
    border-color: rgba(246,246,247,0.25);
    color: #F6F6F7;
  }
  .feat-carousel-section .feat-carousel-btn:hover {
    background: rgba(246,246,247,0.16);
    border-color: rgba(246,246,247,0.5);
  }
  .feat-carousel-section .feat-carousel-dot { background: rgba(246,246,247,0.25); }
  .feat-carousel-section .feat-carousel-dot.active { background: #F6F6F7; }

  .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(0,0,0,.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(0,0,0,.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0,0,0,.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(0,0,0,.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(0,0,0,.18); }
    50% { transform: translate(-50%, -50%) scale(1.04); box-shadow: 0 16px 40px rgba(0,0,0,.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(0,0,0,.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(0,0,0,.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(246,246,247,.55);
  }
  .csBecome .csEyebrow .dot {
    background: rgba(246,246,247,.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(246,246,247,.55);
    font-weight: 600;
  }

  .csBecome p {
    color: rgba(246,246,247,.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(246,246,247,.78);
    backdrop-filter:saturate(180%) blur(20px);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
    border-bottom:1px solid rgba(0,0,0,.06);
    font-family:'Google Sans', -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:'Google Sans', sans-serif;
    font-size:18px;
    font-weight:700;
    letter-spacing:-.025em;
    color:#000000;
    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:#000000;
    letter-spacing:-.005em;
    text-decoration:none;
    transition:color .15s ease;
  }
  .ktNav__link:hover{ color:#6b5b56; }
  .ktNav__cta{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:36px;
    padding:0 18px;
    background:#000000;
    color:#F6F6F7;
    text-decoration:none;
    border-radius:999px;
    font-family:'Google Sans', sans-serif;
    font-size:13.5px;
    font-weight:500;
    letter-spacing:-.005em;
    transition:background .15s ease;
    white-space:nowrap;
  }
  .ktNav__cta:hover{ background:#1a1a1a; }
  .ktNav__burger{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    border-radius:999px;
    border:0;
    background:transparent;
    color:#000000;
    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:#ECECEE;
    color:#000000;
    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:'Google Sans', -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:'Google Sans', sans-serif;
    font-size:11px;
    font-weight:600;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:#6b5b56;
    margin:0 0 22px;
  }

  .ktHero__title{
    font-family:'Google Sans', sans-serif;
    font-size:32px;
    font-weight:600;
    letter-spacing:-.025em;
    line-height:1.1;
    margin:0 0 22px;
    color:#000000;
    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:'Google Sans', sans-serif;
    font-size:15.5px;
    line-height:1.6;
    color:#000000;
    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:#000000;
    color:#F6F6F7;
    text-decoration:none;
    border-radius:999px;
    margin-top:14px;
    font-family:'Google Sans', 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:#1a1a1a;
    transform:translateY(-0.5px);
  }
  @media (prefers-reduced-motion: reduce){
    .ktHero__cta{ transition:none !important; }
  }

/* ====== Section style block lines 2709,2876 ====== */
  .ktBenefits{
    background:#F6F6F7;
    color:#000000;
    width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    padding:88px 24px 96px;
    font-family:'Google Sans', -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:'Google Sans', sans-serif;
    font-size:11px;
    font-weight:600;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:#000000;
    margin:0 0 18px;
  }

  .ktBenefits__title{
    /* Aligné sur .csSectionH2 : 28px mobile, 40px desktop */
    font-family:'Google Sans', sans-serif;
    font-size:28px;
    font-weight:600;
    letter-spacing:-.025em;
    line-height:1.1;
    margin:0 0 22px;
    color:#000000;
    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:#000000;
    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:#000000;
    text-decoration:none;
    border-radius:999px;
    border:1px solid #000000;
    font-family:'Google Sans', 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:#000000;
    color:#F6F6F7;
    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:#000000;
  }
  .ktBenefit__icon svg{
    width:22px;
    height:22px;
    stroke:#000000;
    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:'Google Sans', sans-serif;
    /* Mobile : titre plus compact */
    font-size:15px;
    font-weight:700;
    letter-spacing:-.015em;
    margin:0 0 6px;
    color:#000000;
    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:#000000;
    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:#ECECEE;
    color:#000000;
    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:'Google Sans', -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:'Google Sans', sans-serif;
    font-size:11px;
    line-height:1;
    font-weight:600;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:#000000;
    margin:0 0 14px;
  }

  .ktQuote__title{
    font-family:'Google Sans', 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:#000000;
    text-wrap:balance;
  }
  @media (min-width:720px){ .ktQuote__title{ font-size:40px; margin:0 0 22px; } }

  .ktQuote__lead{
    font-family:'Google Sans', sans-serif;
    font-size:15px;
    line-height:1.55;
    color:#6b5b56;
    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:#F6F6F7;
    border:1px solid #DEDEE1;
    border-bottom:none;
    border-radius:18px 18px 0 0;
    padding:24px 20px 0;
    box-shadow:0 8px 24px -8px rgba(0,0,0,.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:'Google Sans', sans-serif;
    font-size:18px;
    font-weight:600;
    color:#000000;
    letter-spacing:-.02em;
  }

  .ktMock__sub{
    font-size:12px;
    color:#6b5b56;
    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:#ECECEE;
    border:1px solid #DEDEE1;
    margin-bottom:16px;
    font-size:12px;
    color:#000000;
    font-weight:500;
    letter-spacing:-.005em;
  }
  .ktMock__recap svg{ width:14px; height:14px; flex:0 0 auto; color:#000000; 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 #DEDEE1;
    background:#F6F6F7;
    display:flex;
    flex-direction:column;
    gap:4px;
    position:relative;
  }
  .ktMock__payCard.is-on{
    border-color:#000000;
    box-shadow:0 0 0 1px #000000 inset;
  }
  .ktMock__payCard.is-on::after{
    content:"";
    position:absolute;
    top:10px;
    right:10px;
    width:16px;
    height:16px;
    border-radius:50%;
    background:#000000;
    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:#000000;
    letter-spacing:-.005em;
  }
  .ktMock__payCardSub{
    font-size:11px;
    color:#6b5b56;
    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 #DEDEE1;
    background:#F6F6F7;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    font-family:'Google Sans', sans-serif;
    font-size:13px;
    color:#000000;
    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:#ECECEE;
    color:#000000;
    font-size:9px;
    font-weight:700;
    letter-spacing:.04em;
    display:inline-flex;
    align-items:center;
  }
  .ktMock__cbBrand--visa{ background:#1A1F71; color:#F6F6F7; }
  .ktMock__cbBrand--mc{ background:#F6F6F7; border:1px solid #DEDEE1; color:#6b5b56; }
  .ktMock__cbRow{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }
  .ktMock__cbLabel{
    font-size:10.5px;
    font-weight:600;
    color:#6b5b56;
    letter-spacing:.04em;
    text-transform:uppercase;
  }

  /* Bouton "Payer" — pill bleu */
  .ktMock__pay{
    margin-top:auto;
    height:42px;
    border-radius:999px;
    background:#000000;
    color:#F6F6F7;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    font-family:'Google Sans', sans-serif;
    font-size:13.5px;
    font-weight:600;
    letter-spacing:-.005em;
    position:relative;
    overflow:hidden;
    border:1px solid #000000;
  }
  .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:#000000;
  }
  .ktMock__pay.is-loading::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg, transparent, rgba(246,246,247,.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:#ECECEE;
    border:1px solid #DEDEE1;
    color:#000000;
    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:#6b5b56;
    letter-spacing:-.005em;
    line-height:1.2;
  }
  .ktMock__successAmount{
    font-family:'Google Sans', sans-serif;
    font-size:15px;
    font-weight:600;
    color:#000000;
    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:#1F7A38;
    color:#F6F6F7;
    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:#6b5b56;
    letter-spacing:-.005em;
    line-height:1.4;
  }
  .ktMock__confirmStripe{
    width:28px;
    height:28px;
    border-radius:50%;
    background:#635BFF;
    color:#F6F6F7;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-family:'Google Sans', 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:#000000 !important;
    color:#F6F6F7;
    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:#F6F6F7; }
  .csSection--dark .csSectionH2 .accent{ color:rgba(246,246,247,.5); }
  .csSection--dark .csSectionLead{ color:rgba(246,246,247,.65); }

  .csSection--dark__eyebrow{
    font-family:'Google Sans', sans-serif;
    font-size:11px;
    font-weight:600;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:rgba(246,246,247,.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:#1a1a1a;
    border:1px solid rgba(246,246,247,.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:'Google Sans', sans-serif;
    font-size:11px;
    font-weight:500;
    padding:5px 10px;
    border-radius:999px;
    background:rgba(246,246,247,.04);
    border:1px solid rgba(246,246,247,.08);
    color:rgba(246,246,247,.55);
    letter-spacing:-.005em;
    white-space:nowrap;
  }
  .ktCrm__tab.is-on{
    background:#F6F6F7;
    color:#000000;
    border-color:#F6F6F7;
    font-weight:600;
  }

  .ktCrm__count{
    font-family:'Google Sans', sans-serif;
    font-size:11px;
    font-weight:500;
    color:rgba(246,246,247,.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:#1a1a1a;
    border:1px solid rgba(246,246,247,.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(246,246,247,.10);
    color:#F6F6F7;
    display:grid;
    place-items:center;
    font-family:'Google Sans', 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:'Google Sans', sans-serif;
    font-size:13.5px;
    font-weight:600;
    color:#F6F6F7;
    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:'Google Sans', sans-serif;
    font-size:11px;
    color:rgba(246,246,247,.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:'Google Sans', 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:#D5D5D9;
  }
  .ktCrm__tag--new{
    background:rgba(246,246,247,.10);
    color:#F6F6F7;
  }

  @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:#F6F6F7; }
  .csSection--dark .data-point h4{ color:#F6F6F7; }
  .csSection--dark .data-point p{ color:rgba(246,246,247,.65); }

  /* Grille certifications */
  .csSection--dark .certifications{
    background:rgba(246,246,247,.08);
    border-color:rgba(246,246,247,.08);
  }
  .csSection--dark .cert{
    background:#1a1a1a;
  }
  .csSection--dark .cert:hover{
    background:rgba(246,246,247,.04);
  }
  .csSection--dark .cert-icon{
    background:rgba(246,246,247,.06);
    border-color:rgba(246,246,247,.10);
  }
  .csSection--dark .cert-icon svg{ color:#F6F6F7; }
  .csSection--dark .cert h5{ color:#F6F6F7; }
  .csSection--dark .cert p{ color:rgba(246,246,247,.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:'Google Sans', sans-serif;
      font-size:17px;
      line-height:1.75;
      color:rgba(246,246,247,.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:'Google Sans', sans-serif;
    font-size:32px;
    font-weight:600;
    letter-spacing:-.025em;
    line-height:1.1;
    color:#F6F6F7;
    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:#1a1a1a;
    position:relative;
  }
  .ktCrmCard__media img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  .ktCrmCard__title{
    font-family:'Google Sans', sans-serif;
    font-size:15.5px;
    font-weight:600;
    color:#F6F6F7;
    letter-spacing:-.005em;
    line-height:1.35;
    margin:0;
  }
  @media (min-width:720px){
    .ktCrmCard__title{ font-size:17px; }
  }
  .ktCrmCard__text{
    font-family:'Google Sans', sans-serif;
    font-size:14px;
    line-height:1.55;
    color:rgba(246,246,247,.55);
    margin:0;
    letter-spacing:-.005em;
  }
  @media (min-width:720px){
    .ktCrmCard__text{ font-size:15px; }
  }
  .ktCrmCard__text strong{ color:#F6F6F7; 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:#F6F6F7;
    border:1px solid rgba(246,246,247,.7);
    font-family:'Google Sans', 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(246,246,247,.08);
    border-color:#F6F6F7;
  }

  /* 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:'Google Sans', sans-serif;
    font-size:22px;
    font-weight:600;
    letter-spacing:-.025em;
    color:rgba(246,246,247,.55);
    flex-shrink:0;
    text-transform:none;
  }
  @media (min-width:720px){ .ktCrmTicker__item{ font-size:28px; } }
  .ktCrmTicker__item em{
    font-style:normal;
    color:#F6F6F7;
    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:#ECECEE;
    color:#000000;
    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:'Google Sans', -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:#000000;
  }
  .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:'Google Sans', sans-serif;
    font-size:11px;
    font-weight:600;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:#000000;
  }

  .ktStats__title{
    font-family:'Google Sans', 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:#000000;
    text-wrap:balance;
  }
  @media (min-width:720px){ .ktStats__title{ font-size:40px; } }

  .ktStats__lead{
    font-size:14.5px;
    line-height:1.55;
    color:#6b5b56;
    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:#F6F6F7;
    border:1px solid #DEDEE1;
    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:#b0a29d;
  }
  .ktStat.is-active{
    border-color:#000000;
    box-shadow:0 0 0 1px #000000 inset;
  }
  .ktStat:focus-visible{
    outline:2px solid #000000;
    outline-offset:3px;
  }

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

  /* === Carte graphique principale === */
  .ktStats__chart{
    background:#F6F6F7;
    border:1px solid #DEDEE1;
    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:'Google Sans', sans-serif;
    font-size:18px;
    font-weight:600;
    color:#000000;
    letter-spacing:-.02em;
    line-height:1.2;
    margin:0 0 4px;
  }
  @media (min-width:720px){ .ktStats__chartTitle{ font-size:20px; } }
  .ktStats__chartSub{
    font-family:'Google Sans', sans-serif;
    font-size:12.5px;
    color:#6b5b56;
    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:#D5D5D9;
    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:'Google Sans', sans-serif;
    font-size:12px;
    font-weight:600;
    color:#000000;
    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:#F6F6F7 !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:'Google Sans', sans-serif;
    font-size:11px;
    font-weight:600;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:#000000;
    margin:0 0 14px;
  }
  #faq .csSectionH2{
    font-family:'Google Sans',sans-serif;
    /* Aligné sur .csSectionH2 : 28px mobile, 40px desktop */
    font-size:28px; line-height:1.1; font-weight:600;
    letter-spacing:-.025em;
    color:#000000;
    text-align:left;
    margin:0;
  }
  @media (min-width:720px){ #faq .csSectionH2{ font-size:40px; } }
  #faq .csSectionH2 .accent{ color:#000000; }
  #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(0,0,0,.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(0,0,0,.08) !important; }
  #faq .faqQ{
    cursor:pointer;
    padding:20px 4px;
    display:flex; align-items:center; justify-content:space-between; gap:14px;
    font-family:'Google Sans',sans-serif;
    font-size:16px; font-weight:600;
    color:#000000;
    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:#8a7873;
    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:#8a7873 !important; border:0 !important; }
  #faq .faqA{
    max-height:0; overflow:hidden;
    padding:0 4px;
    font-family:'Google Sans',sans-serif;
    font-size:14.5px; line-height:1.6;
    color:#6b5b56; 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:#000000;
    color:#F6F6F7;
    width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    padding:88px 24px 96px;
    position:relative;
    z-index:2;
    font-family:'Google Sans', -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:'Google Sans', sans-serif;
    font-size:11px;
    font-weight:600;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:rgba(246,246,247,.55);
    margin:0 0 14px;
  }
  .ktVisio__title{
    font-family:'Google Sans', sans-serif;
    font-size:28px;
    font-weight:600;
    letter-spacing:-.025em;
    line-height:1.1;
    margin:0 0 18px;
    color:#F6F6F7;
    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(246,246,247,.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:#F6F6F7;
    fill:none;
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;
    margin-top:2px;
  }
  /* h3 depuis la remise à plat des niveaux de titre (le h2 de la section était
     suivi d'un h4). h4 gardé le temps que d'anciennes pages soient reprises. */
  .ktVisio__point h3,
  .ktVisio__point h4{
    font-family:'Google Sans', sans-serif;
    font-size:15px;
    font-weight:600;
    letter-spacing:-.015em;
    color:#F6F6F7;
    margin:0 0 4px;
  }
  .ktVisio__point p{
    font-size:13.5px;
    line-height:1.5;
    color:rgba(246,246,247,.6);
    margin:0;
    letter-spacing:-.005em;
  }

  /* Mockup visio — grille tuiles participants */
  .ktVisio__mock{
    background:#1a1a1a;
    border:1px solid rgba(246,246,247,.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:#F6F6F7;
    font-family:'Google Sans', 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, #2b2b2b 0%, #1a1a1a 100%);
  }
  .ktVisio__tile--main::after{
    content:'';
    position:absolute;
    top:10px;
    right:10px;
    width:8px;
    height:8px;
    border-radius:999px;
    background:#000000;
    box-shadow:0 0 0 4px rgba(143,212,110,.18);
  }
  .ktVisio__tile--c1{ background:linear-gradient(135deg, #333333 0%, #2b2b2b 100%); }
  .ktVisio__tile--c2{ background:linear-gradient(135deg, #3a3a3a 0%, #2b2b2b 100%); }
  .ktVisio__tile--c3{ background:linear-gradient(135deg, #2b2b2b 0%, #2b2320 100%); }
  .ktVisio__tile--c4{ background:linear-gradient(135deg, #2b2b2b 0%, #261e1c 100%); }

  .ktVisio__tile span{
    position:absolute;
    bottom:8px;
    left:10px;
    font-family:'Google Sans', sans-serif;
    font-size:10px;
    font-weight:500;
    color:rgba(246,246,247,.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(246,246,247,.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(246,246,247,.10);
    color:#F6F6F7;
    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:#000000;
    width:auto;
    padding:0 16px;
    font-family:'Google Sans', sans-serif;
    font-size:13px;
    font-weight:600;
    color:#F6F6F7;
    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 #ECECEE, épuré. */
  .ktExp{
    background:#ECECEE;
    color:#000000;
    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:'Google Sans', -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:'Google Sans', sans-serif;
    font-size:11px;
    font-weight:600;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:#6b5b56;
    margin:0 0 22px;
  }

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

  .ktExp__lead{
    font-family:'Google Sans', sans-serif;
    font-size:15.5px;
    line-height:1.6;
    color:#000000;
    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:#F6F6F7;
    color:#000000;
    width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    padding:96px 24px 96px;
    position:relative;
    z-index:2;
    font-family:'Google Sans', -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:'Google Sans', sans-serif;
    font-size:11px;
    font-weight:600;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:#000000;
    margin:0 0 22px;
  }

  .ktFeat__title{
    font-family:'Google Sans', 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:#000000;
    text-wrap:balance;
  }
  @media (min-width:720px){
    .ktFeat__title{ font-size:40px; margin:0 0 28px; }
  }

  .ktFeat__text{
    font-family:'Google Sans', sans-serif;
    font-size:15.5px;
    line-height:1.6;
    color:#000000;
    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:#ECECEE;
    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:#000000;
    color:#F6F6F7;
    width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    padding:64px 24px 32px;
    font-family:'Google Sans', -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:'Google Sans', sans-serif;
    font-size:22px;
    font-weight:700;
    letter-spacing:-.025em;
    color:#F6F6F7;
    margin:0 0 12px;
  }
  .ktFoot__tag{
    font-size:14px;
    line-height:1.55;
    color:rgba(246,246,247,.6);
    max-width:36ch;
    margin:0;
    letter-spacing:-.005em;
  }

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

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

/* ============================================ */
/* === 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(246,246,247,.78);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(0,0,0,.06);
  font-family:'Google Sans', -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:'Google Sans', sans-serif;
  font-size:18px;
  font-weight:700;
  letter-spacing:-.025em;
  color:#000000;
  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:#000000;
  letter-spacing:-.005em;
  text-decoration:none;
  transition:color .15s ease;
}
.ktNav__link:hover{ color:#6b5b56; }
.ktNav__cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:36px;
  padding:0 18px;
  background:#000000;
  color:#F6F6F7;
  text-decoration:none;
  border-radius:999px;
  font-family:'Google Sans', 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:#1a1a1a; 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:#000000;
  letter-spacing:-.005em;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
  transition:color .15s ease;
}
.ktNav__menuTrigger:hover,
.ktNav__menuTrigger.is-open{ color:#6b5b56; }
.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:calc(var(--ktTopBarH) + var(--ktNavH));   /* sous la navbar */
  left:0; right:0;
  z-index:48;                          /* sous la navbar 50 */
  background:#F6F6F7;
  border-bottom:1px solid rgba(0,0,0,.06);
  box-shadow:0 12px 32px -16px rgba(0,0,0,.08);
  font-family:'Google Sans', -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 #DEDEE1;
  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:#6b5b56;
  margin:0 0 12px;
}
.ktMega__title{
  font-family:'Google Sans', sans-serif;
  font-size:22px;
  font-weight:600;
  letter-spacing:-.02em;
  line-height:1.2;
  color:#000000;
  margin:0 0 12px;
}
.ktMega__text{
  font-size:13px;
  line-height:1.5;
  color:#6b5b56;
  margin:0 0 18px;
  letter-spacing:-.005em;
}
.ktMega__leadCta{
  font-size:13px;
  font-weight:600;
  color:#000000;
  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:'Google Sans', sans-serif;
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#6b5b56;
  margin:0 0 12px;
  padding-bottom:10px;
  border-bottom:1px solid #ECECEE;
}

.ktMega__link{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:10px 8px;
  margin:0 -8px;
  border-radius:10px;
  text-decoration:none;
  color:#000000;
  transition:background .15s ease, transform .15s ease;
}
.ktMega__link:hover{
  background:#ECECEE;
  transform:translateX(2px);
}
.ktMega__link > span:last-child{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
/* Icônes de menu : plus de pastille de fond, juste le trait en orange.
   On garde la boîte de 32px pour ne pas décaler la colonne de texte, et le
   SVG passe de 16 à 20px pour occuper la place laissée libre par le fond. */
.ktMega__icon{
  flex:0 0 32px;
  width:32px;
  height:32px;
  background:none;
  display:grid;
  place-items:center;
  color:#E8552A;
  margin-top:1px;
  transition:color .15s ease, transform .15s ease;
}
.ktMega__icon svg{ width:20px; height:20px; }
.ktMega__link:hover .ktMega__icon{
  color:#E8552A;
  transform:translateX(1px);
}
.ktMega__linkTitle{
  font-family:'Google Sans', sans-serif;
  font-size:14px;
  font-weight:600;
  color:#000000;
  letter-spacing:-.005em;
  line-height:1.2;
}
.ktMega__linkSub{
  font-size:12px;
  color:#6b5b56;
  letter-spacing:-.005em;
  line-height:1.3;
}

/* Backdrop sous le méga-menu (clic pour fermer) */
.ktMega__backdrop{
  position:fixed;
  top:calc(var(--ktTopBarH) + var(--ktNavH));   /* sous la navbar */
  left:0; right:0; bottom:0;
  z-index:47;                          /* sous le méga-menu 48 */
  background:rgba(0,0,0,.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:#000000;
  text-decoration:none;
  border:1.5px solid #000000;
  border-radius:999px;
  font-family:'Google Sans', 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:#000000;
  color:#F6F6F7;
  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:#000000;
  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:calc(var(--ktTopBarH) + var(--ktNavH));   /* sous la navbar */
  left:0; right:0; bottom:0;          /* pleine hauteur sous le header */
  background:#F6F6F7;
  z-index:49;
  font-family:'Google Sans', -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(0,0,0,.06);
  /* Apparition une par une, en fondu seul. Le glissement lateral de 12px
     faisait osciller la colonne d'objets pendant toute la cascade : avec des
     images de 40px a gauche, le decalage se voyait bien plus qu'avec des
     traits. Reste la cascade, qui suffit a donner le rythme. */
  opacity:0;
}
.ktNavMobile.is-open .ktNavMobile__item{
  animation:ktNavFadeIn .34s ease-out forwards;
  animation-delay:calc(var(--i, 0) * .055s + .1s);
}
@keyframes ktNavFadeIn{
  from{ opacity:0; }
  to{ opacity:1; }
}

/* 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:#000000;
  font-family:'Google Sans',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:#ECECEE;
  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:#8a7873;
  transition:color .15s ease, transform .15s ease;
}
.ktNavMobile__link:hover .ktNavMobile__arrow{
  color:#000000;
  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;
  background:none;
  display:grid;
  place-items:center;
  color:#E8552A;
  transition:color .15s ease;
}
.ktNavMobile__link--icon:hover .ktNavMobile__icon{
  color:#E8552A;
}
.ktNavMobile__icon svg{ width:22px; height:22px; }

/* 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:#000000;
  color:#F6F6F7 !important;
  text-decoration:none;
  border-radius:999px;
  font-family:'Google Sans',sans-serif;
  font-size:15px;
  font-weight:600;
  letter-spacing:-.005em;
  transition:background .15s ease, transform .15s ease;
}
.ktNavMobile__cta:hover{
  background:#1a1a1a;
  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:#6b5b56;
  font-family:'Google Sans',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:#000000;
  transform:translateX(-2px);
}
.ktNavMobile__back svg{ width:16px; height:16px; }

.ktNavMobile__subTitle{
  font-family:'Google Sans',sans-serif;
  font-size:28px;
  font-weight:600;
  letter-spacing:-.025em;
  color:#000000;
  margin:0 24px 4px;
  line-height:1.1;
}
.ktNavMobile__subLead{
  font-size:14px;
  color:#6b5b56;
  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:#000000;
  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:calc(var(--ktTopBarH) + var(--ktNavH)); }

/* ============================================ */
/* === BREADCRUMBS (fil d'Ariane)            === */
/* ============================================ */
.ktBreadcrumbs{
  background:transparent;
  padding:16px 24px 0;
  font-family:'Google Sans', -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:#6b5b56;
  text-decoration:none;
  transition:color .15s ease;
}
.ktBreadcrumbs__link:hover{ color:#000000; }
.ktBreadcrumbs__sep{
  margin:0 8px;
  color:#b0a29d;
  font-size:14px;
  line-height:1;
}
.ktBreadcrumbs__current{
  color:#000000;
  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:#000000;
  color:#F6F6F7;
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  padding:64px 24px 32px;
  font-family:'Google Sans', -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:'Google Sans', sans-serif;
  font-size:22px;
  font-weight:700;
  letter-spacing:-.025em;
  color:#F6F6F7;
  margin:0 0 12px;
}
.ktFoot__tag{
  font-size:14px;
  line-height:1.55;
  color:rgba(246,246,247,.6);
  max-width:36ch;
  margin:0;
  letter-spacing:-.005em;
}
.ktFoot__col h3{
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(246,246,247,.55);
  margin:0 0 14px;
}
.ktFoot__col{ display:flex; flex-direction:column; gap:10px; }
.ktFoot__col a{
  font-size:14px;
  color:rgba(246,246,247,.85);
  text-decoration:none;
  letter-spacing:-.005em;
  transition:color .15s ease;
}
.ktFoot__col a:hover{ color:#F6F6F7; }

.ktFoot__bottom{
  margin-top:48px;
  padding-top:24px;
  border-top:1px solid rgba(246,246,247,.10);
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:12.5px;
  color:rgba(246,246,247,.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; }

/* ============================================================================
   HEADER — refonte façon Koatcher Pro
   ----------------------------------------------------------------------------
   Reprend la structure de /pro/includes/headerdesk.php de koatcher.com :
     - 3 zones : nav en pills à gauche, logo centré en absolu, actions à droite
     - deux états, .is-top (bandeau crème plein) et .is-top-overlay
       (transparent par-dessus le hero, texte crème) qui bascule au scroll
     - dock flottant + menu plein écran sur mobile

   Ce bloc est volontairement placé en fin de fichier : koatcher.css contient
   déjà deux définitions concurrentes de .ktNav (l. ~2359 et ~4546), c'est la
   dernière qui s'applique. On prolonge cette logique plutôt que d'aller
   éditer au milieu.

   Règle de contraste appliquée partout :
     texte #000000 par défaut — #F6F6F7 sur image ou sur fond brun.
   ========================================================================== */

:root{
  --ktNavH:64px;        /* hauteur du bandeau */
  --ktTopBarH:0px;      /* top bar supprimée — remplacée par le popup d'essai */
}

/* ---------------------------------------------------------------- bandeau  */
.ktNav{
  position:fixed;
  top:var(--ktTopBarH);
  left:0; right:0;
  z-index:50;
  height:var(--ktNavH);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 24px;
  border-bottom:1px solid rgba(0,0,0,.06);
  font-family:var(--font-sans);
  /* `top` est exclu de la transition : il suit la top bar au scroll et
     l'animer ferait chevaucher les deux bandeaux. */
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}

@media (min-width:980px){
  .ktNav{ padding:0 32px; }
}

/* État par défaut : bandeau crème plein. */
.ktNav,
.ktNav.is-top{
  background:var(--bpBg);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  color:var(--bpInk);
}

/* Au chargement, pas de transition : évite le flash de couleur. */
.ktNav.is-preload{ transition:none !important; }

/* --------------------------------------------- état overlay (sur le hero) */
/* Le bandeau se pose par-dessus l'image du hero : fond transparent,
   texte crème. Dès qu'on scrolle, le JS retire .is-top-overlay et on
   retombe sur le bandeau crème plein ci-dessus. */
.ktNav.is-top-overlay{
  background:transparent;
  border-bottom-color:transparent;
  color:var(--bpOnAccent);
}
.ktNav.is-top-overlay .ktNav__brand,
.ktNav.is-top-overlay .ktNav__link,
.ktNav.is-top-overlay .ktNav__menuTrigger{
  color:var(--bpOnAccent);
}
.ktNav.is-top-overlay .ktNav__link:hover,
.ktNav.is-top-overlay .ktNav__menuTrigger:hover{
  background:rgba(246,246,247,.16);
  color:var(--bpOnAccent);
}
.ktNav.is-top-overlay .ktNav__link.is-active{
  background:rgba(246,246,247,.24);
}
/* Sur fond d'image le CTA s'inverse : pastille crème, texte brun. */
.ktNav.is-top-overlay .ktNav__cta{
  background:var(--bpOnAccent);
  color:var(--bpInk);
}
.ktNav.is-top-overlay .ktNav__cta:hover{
  background:#fff;
}

/* ------------------------------------------------------------- les 2 zones */
/* Logo calé à gauche, tout le reste poussé à droite : nav, puis Connexion,
   puis le CTA. C'est .ktNav__right qui absorbe l'espace disponible. */
.ktNav__wrap{
  position:relative;
  width:100%;
  max-width:1240px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.ktNav__left,
.ktNav__right{
  display:flex;
  align-items:center;
  min-width:0;
}
.ktNav__left{ flex:0 0 auto; justify-content:flex-start; }
.ktNav__right{ flex:1 1 auto; justify-content:flex-end; gap:8px; }

/* Un cran d'air entre le dernier lien de nav et "Connexion", pour que les
   deux groupes ne se lisent pas comme une seule série. */
@media (min-width:820px){
  .ktNav__right > .ktNav__links{ margin-right:14px; }
}

.ktNav__brand{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-display);
  font-size:19px;
  font-weight:700;
  letter-spacing:-.03em;
  color:var(--bpInk);
  text-decoration:none;
  white-space:nowrap;
  transition:opacity .16s ease, color .2s ease;
}
.ktNav__brand:hover{ opacity:.78; }

/* ------------------------------------------------------ liens en pastilles */
.ktNav__links{
  display:none;
  align-items:center;
  gap:2px;
}
@media (min-width:820px){ .ktNav__links{ display:flex; } }

.ktNav__link,
.ktNav__menuTrigger{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:40px;
  padding:0 13px;
  flex:0 0 auto;
  border:0;
  background:transparent;
  color:var(--bpInk);
  font-family:var(--font-sans);
  font-size:14px;
  font-weight:500;
  line-height:1;
  letter-spacing:-.01em;
  white-space:nowrap;
  text-decoration:none;
  border-radius:999px;
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
}

.ktNav__link:hover,
.ktNav__menuTrigger:hover,
.ktNav__menuTrigger.is-open{
  background:var(--bpCardSoft);
  color:var(--bpInk);
}
.ktNav__link.is-active{
  background:var(--bpCardSoft-2);
  font-weight:600;
}

.ktNav__caret{
  width:14px; height:14px;
  transition:transform .2s ease;
}
.ktNav__menuTrigger.is-open .ktNav__caret{ transform:rotate(180deg); }

/* ------------------------------------------------------------------- CTA   */
.ktNav__cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:38px;
  padding:0 18px;
  background:var(--bpAccent);
  color:var(--bpOnAccent);
  border-radius:999px;
  font-family:var(--font-sans);
  font-size:14px;
  font-weight:500;
  letter-spacing:-.01em;
  text-decoration:none;
  white-space:nowrap;
  transition:background .15s ease, color .15s ease, transform .15s ease;
}
.ktNav__cta:hover{
  background:var(--bpAccentDeep);
  transform:translateY(-.5px);
}

/* Le CTA vit désormais dans .ktNav__right, hors de .ktNav__links qui était
   masqué sous 820px. Il faut donc le masquer explicitement en mobile, où
   "Essai gratuit" est porté par le dock. */
.ktNav__right > .ktNav__cta{ display:none; }
@media (min-width:820px){
  .ktNav__right > .ktNav__cta{ display:inline-flex; }
}

/* Lien "Connexion" : discret, sans pastille de fond. */
.ktNav__signin{
  display:none;
  align-items:center;
  height:40px;
  padding:0 10px;
  color:inherit;
  font-family:var(--font-sans);
  font-size:14px;
  font-weight:500;
  letter-spacing:-.01em;
  text-decoration:none;
  border-radius:999px;
  transition:opacity .16s ease, background .15s ease;
}
@media (min-width:820px){ .ktNav__signin{ display:inline-flex; } }
.ktNav__signin:hover{ opacity:.72; }

/* ====================================================================== */
/* MOBILE — dock flottant en bas d'écran                                  */
/* ---------------------------------------------------------------------- */
/* Repris du header mobile de koatcher : les actions principales sont à    */
/* portée de pouce plutôt qu'en haut de l'écran.                           */
/* ====================================================================== */
.ktDock{
  position:fixed;
  left:50%;
  bottom:calc(14px + env(safe-area-inset-bottom, 0px));
  transform:translateX(-50%);
  z-index:60;
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px;
  border-radius:999px;
  background:var(--bpAccent);
  box-shadow:0 8px 28px rgba(0,0,0,.28);
  transition:transform .25s cubic-bezier(.2,.85,.2,1), opacity .2s ease;
}
@media (min-width:820px){ .ktDock{ display:none; } }

/* Masqué quand le menu plein écran est ouvert. */
.ktDock.is-hidden{
  opacity:0;
  pointer-events:none;
  transform:translateX(-50%) translateY(120%);
}

.ktDock__cta,
.ktDock__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:44px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:var(--bpOnAccent);
  font-family:var(--font-sans);
  font-size:14.5px;
  font-weight:500;
  letter-spacing:-.01em;
  text-decoration:none;
  cursor:pointer;
  transition:background .15s ease;
}
.ktDock__cta{ padding:0 20px; }
.ktDock__btn{ width:44px; }
.ktDock__cta:hover,
.ktDock__btn:hover{ background:rgba(246,246,247,.14); }
.ktDock__btn svg{ width:20px; height:20px; }

@media (prefers-reduced-motion:reduce){
  .ktNav,
  .ktDock,
  .ktNav__link,
  .ktNav__cta,
  .ktNav__caret{ transition:none !important; }
}

/* ============================================================================
   POPUP D'ESSAI — remplace l'ancienne top bar
   ----------------------------------------------------------------------------
   Mobile  : feuille collée au bas de l'écran, coins supérieurs arrondis.
   Desktop : carte centrée.
   Le visuel du haut suit le même arrondi que la feuille.
   ========================================================================== */

.ktTrial{
  position:fixed;
  inset:0;
  z-index:200;
  display:flex;
  align-items:flex-end;          /* mobile : la feuille se colle en bas */
  justify-content:center;
  visibility:hidden;
  pointer-events:none;
}
.ktTrial.is-open{
  visibility:visible;
  pointer-events:auto;
}

.ktTrial__backdrop{
  position:absolute;
  inset:0;
  background:rgba(36,29,27,.55);
  opacity:0;
  transition:opacity .28s ease;
}
.ktTrial.is-open .ktTrial__backdrop{ opacity:1; }

/* ------------------------------------------------------------- la feuille  */
.ktTrial__sheet{
  position:relative;
  width:100%;
  max-width:none;
  max-height:92vh;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  background:var(--bpBg);
  /* Coins supérieurs arrondis, base à ras de l'écran. */
  border-radius:26px 26px 0 0;
  box-shadow:0 -12px 44px rgba(36,29,27,.28);
  transform:translateY(102%);
  transition:transform .34s cubic-bezier(.22,.9,.28,1);
  padding-bottom:env(safe-area-inset-bottom, 0px);
}
.ktTrial.is-open .ktTrial__sheet{ transform:translateY(0); }

/* ----------------------------------------------------- visuel du haut      */
/* L'image est posée en background : si le fichier n'est pas encore déposé
   dans /assets, la couche du dessous (dégradé brun) prend le relais — pas
   d'icône d'image cassée. Retirer le dégradé une fois la photo en place. */
.ktTrial__media{
  height:168px;
  background-image:
    url('/assets/hero-restaurant-960.jpg'),
    linear-gradient(135deg, #333333 0%, #000000 100%);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  border-radius:26px 26px 0 0;   /* suit l'arrondi de la feuille */
}

.ktTrial__close{
  position:absolute;
  top:12px; right:12px;
  z-index:2;
  width:34px; height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:999px;
  background:rgba(36,29,27,.42);
  color:var(--bpOnAccent);
  cursor:pointer;
  transition:background .15s ease;
}
.ktTrial__close:hover{ background:rgba(36,29,27,.62); }
.ktTrial__close svg{ width:17px; height:17px; }

/* ----------------------------------------------------------- contenu       */
.ktTrial__body{
  padding:22px 22px 24px;
}

.ktTrial__title{
  margin:0 0 8px;
  font-family:var(--font-display);
  font-size:23px;
  font-weight:700;
  letter-spacing:-.03em;
  line-height:1.15;
  color:var(--bpInk);
}

.ktTrial__text{
  margin:0 0 18px;
  font-family:var(--font-sans);
  font-size:14.5px;
  line-height:1.5;
  letter-spacing:-.005em;
  color:var(--bpSoft);
}

/* ---------------------------------------------------- la liste à 3 icônes  */
.ktTrial__list{
  list-style:none;
  margin:0 0 22px;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:13px;
}
.ktTrial__item{
  display:flex;
  align-items:flex-start;
  gap:12px;
  font-family:var(--font-sans);
  font-size:14.5px;
  line-height:1.4;
  letter-spacing:-.005em;
  color:var(--bpInk);
}
.ktTrial__ico{
  flex:0 0 auto;
  width:34px; height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:var(--bpCardSoft);
  color:var(--bpAccent);
}
.ktTrial__ico svg{ width:17px; height:17px; }

/* ------------------------------------------------------------------ CTA    */
.ktTrial__cta{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:50px;
  background:var(--bpAccent);
  color:var(--bpOnAccent);
  border-radius:999px;
  font-family:var(--font-sans);
  font-size:15.5px;
  font-weight:600;
  letter-spacing:-.01em;
  text-decoration:none;
  transition:background .15s ease, transform .15s ease;
}
.ktTrial__cta:hover{
  background:var(--bpAccentDeep);
  transform:translateY(-1px);
}

/* ====================================================================== */
/* DESKTOP — la feuille devient une carte centrée                         */
/* ====================================================================== */
@media (min-width:640px){
  .ktTrial{ align-items:center; }

  .ktTrial__sheet{
    width:min(430px, calc(100vw - 48px));
    max-height:88vh;
    border-radius:26px;            /* arrondi sur les 4 coins */
    box-shadow:0 24px 60px rgba(36,29,27,.32);
    transform:translateY(14px) scale(.97);
    opacity:0;
    transition:transform .3s cubic-bezier(.22,.9,.28,1), opacity .24s ease;
  }
  .ktTrial.is-open .ktTrial__sheet{
    transform:translateY(0) scale(1);
    opacity:1;
  }

  .ktTrial__media{
    height:184px;
    border-radius:26px 26px 0 0;   /* le visuel ne suit que le haut */
  }

  .ktTrial__body{ padding:24px 26px 26px; }
}

@media (prefers-reduced-motion:reduce){
  .ktTrial__sheet,
  .ktTrial__backdrop,
  .ktTrial__cta{ transition:none !important; }
  .ktTrial__sheet{ transform:none !important; }
}

/* Le dock mobile passerait par-dessus la feuille : on l'efface pendant
   l'ouverture du popup (piloté en JS, même mécanique que pour le menu). */

/* ============================================================================
   HERO ACCUEIL — bannière photo pleine largeur
   ----------------------------------------------------------------------------
   La photo (téléphone scannant un QR de table) remplace l'ancienne colonne
   image, qui pointait sur /assets/K.jpg — un fichier absent du serveur.
   Elle est posée en background plutôt qu'en <img> : le voile brun se compose
   par-dessus dans la même propriété, et le texte reste lisible quel que soit
   le recadrage.

   Composition de la photo : zone sombre à gauche, sujet à droite. Le texte va
   donc à gauche, et le dégradé assombrit ce côté-là.

   Contraste : texte #F6F6F7 puisqu'on est sur image (cf. règle du site).
   ========================================================================== */

.ktHero{
  /* Couleur de repli : si la photo ne charge pas, on garde un fond brun
     lisible plutôt qu'un texte crème sur crème. */
  background-color:#1a1a1a;

  /* Mobile : texte centré sur toute la largeur → voile uniforme. */
  background-image:
    linear-gradient(180deg, rgba(36,29,27,.86) 0%, rgba(36,29,27,.74) 100%),
    url('/assets/hero-restaurant-960.jpg');
  background-size:cover;
  background-position:62% center;
  background-repeat:no-repeat;
  color:var(--bpOnAccent);

  /* La top bar ayant disparu, le padding haut se recalcule tout seul. */
  padding:calc(var(--ktTopBarH) + var(--ktNavH) + 48px) 24px 56px;
}

@media (min-width:980px){
  .ktHero{
    /* Desktop : voile horizontal, dense à gauche sous le texte, presque
       transparent à droite pour laisser voir le téléphone et la table. */
    background-image:
      linear-gradient(90deg,
        rgba(36,29,27,.92) 0%,
        rgba(36,29,27,.80) 34%,
        rgba(36,29,27,.42) 58%,
        rgba(36,29,27,.18) 100%),
      url('/assets/hero-restaurant.jpg');
    background-position:center center;
    padding:calc(var(--ktTopBarH) + var(--ktNavH) + 76px) 32px 88px;
    align-items:center;          /* le texte se centre verticalement */
  }
}

/* La colonne image n'existe plus : le texte occupe la moitié gauche, là où
   le dégradé est le plus dense. */
@media (min-width:980px){
  .ktHero__grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:64px;
  }
  .ktHero__head{
    align-self:center;
    padding-bottom:0;
  }
}

/* ------------------------------------------------- textes sur la photo ---- */
.ktHero__eyebrow{
  color:rgba(246,246,247,.72);
}
.ktHero__title,
.ktHero__lead{
  color:var(--bpOnAccent);
}
.ktHero__lead{
  color:rgba(246,246,247,.88);
}

/* Sur fond photo le CTA s'inverse — pastille crème, texte brun — comme le
   CTA du header en overlay. */
.ktHero__cta{
  height:46px;
  padding:0 24px;
  font-size:15px;
  font-weight:600;
  background:var(--bpOnAccent);
  color:var(--bpInk);
}
.ktHero__cta:hover{
  background:#ffffff;
  color:var(--bpInk);
}

/* ============================================================================
   HEADER — troisième état : .is-dark
   ----------------------------------------------------------------------------
   Le bandeau prend la couleur de la section qu'il survole. Au-dessus d'une
   section brune il devient brun, logo et liens en crème ; au-dessus d'une
   section claire il repasse en crème, texte brun.

   Les sections concernées ne sont pas identifiables par leur classe :
   .csSection apparaît deux fois sur l'accueil, une fois brune et une fois
   crème. C'est donc le JS qui mesure la luminance réelle du fond calculé
   de chaque section et pose .is-dark quand il le faut.
   ========================================================================== */

.ktNav.is-dark{
  background:var(--bpForest);
  border-bottom-color:rgba(246,246,247,.10);
  color:var(--bpOnAccent);
}

.ktNav.is-dark .ktNav__brand,
.ktNav.is-dark .ktNav__link,
.ktNav.is-dark .ktNav__menuTrigger,
.ktNav.is-dark .ktNav__signin,
.ktNav.is-dark .ktNav__ctaMobile{
  color:var(--bpOnAccent);
}

.ktNav.is-dark .ktNav__link:hover,
.ktNav.is-dark .ktNav__menuTrigger:hover,
.ktNav.is-dark .ktNav__menuTrigger.is-open{
  background:rgba(246,246,247,.14);
  color:var(--bpOnAccent);
}
.ktNav.is-dark .ktNav__link.is-active{
  background:rgba(246,246,247,.22);
}

/* CTA inversé sur fond brun : pastille crème, texte brun. */
.ktNav.is-dark .ktNav__cta{
  background:var(--bpOnAccent);
  color:var(--bpInk);
}
.ktNav.is-dark .ktNav__cta:hover{
  background:#ffffff;
  color:var(--bpInk);
}

/* Le burger mobile est dessiné avec des traits en background-color : il faut
   les repasser en crème, sinon ils disparaissent sur le brun. */
.ktNav.is-dark .ktNav__burgerLine{
  background:var(--bpOnAccent);
}

/* ============================================================================
   HERO CLUSTER — bannière des pages /fonctionnalites/
   ----------------------------------------------------------------------------
   Même bannière photo que l'accueil, mais texte centré et section plus courte
   (pas de min-height:100vh : ces pages doivent montrer leur contenu vite).
   Remplace les styles inline de cluster_render_hero(), qui écrasaient la
   feuille et figeaient un padding hérité de la top bar supprimée.
   ========================================================================== */

.ktHero--cluster{
  display:block;
  min-height:0;
  /* Le header est transparent par-dessus : on ne réserve que sa hauteur. */
  padding:calc(var(--ktTopBarH) + var(--ktNavH) + 84px) 24px 84px;
  /* Voile uniforme : le texte est centré, il couvre toute la largeur. */
  background-image:
    linear-gradient(180deg, rgba(36,29,27,.88) 0%, rgba(36,29,27,.78) 100%),
    url('/assets/hero-restaurant-960.jpg');
  background-position:center center;
}
@media (min-width:980px){
  .ktHero--cluster{
    padding:calc(var(--ktTopBarH) + var(--ktNavH) + 104px) 32px 104px;
    /* Texte à gauche : on reprend le voile horizontal de l'accueil, dense
       sous le texte et presque transparent à droite pour laisser voir la
       scène. Le voile uniforme convenait au texte centré, plus maintenant. */
    background-image:
      linear-gradient(90deg,
        rgba(36,29,27,.92) 0%,
        rgba(36,29,27,.80) 34%,
        rgba(36,29,27,.42) 58%,
        rgba(36,29,27,.18) 100%),
      url('/assets/hero-restaurant.jpg');
  }
}

/* Texte aligné à gauche, sur la même colonne que le fil d'Ariane : les deux
   partagent un wrap de 1240px avec le même padding, donc les bords gauches
   tombent exactement l'un sur l'autre. */
.ktHero--cluster .ktHero__head{
  max-width:820px;
  margin:0;
  align-items:flex-start;
  text-align:left;
  padding:0;
}
.ktHero--cluster .ktHero__title,
.ktHero--cluster .ktHero__lead{ text-align:left; }
.ktHero--cluster .ktHero__lead{ margin-left:0; margin-right:0; }

.ktHero__ctas{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:flex-start;
  margin-top:24px;
}

/* CTA secondaire : il était en brun sur la photo sombre, donc illisible.
   Contour et texte en crème, comme le reste du texte sur image. */
.ktHero__cta--ghost{
  background:transparent;
  color:var(--bpOnAccent);
  border:1px solid rgba(246,246,247,.55);
}
.ktHero__cta--ghost:hover{
  background:rgba(246,246,247,.14);
  color:var(--bpOnAccent);
  border-color:var(--bpOnAccent);
}

/* ---------------------------------------------------------------------------
   FIL D'ARIANE posé sur la bannière
   ---------------------------------------------------------------------------
   Il est émis avant le hero dans le DOM et se retrouvait donc à y=0, caché
   sous le header fixe. En overlay on le sort du flux pour le poser sur la
   photo, juste sous le bandeau.
   ------------------------------------------------------------------------- */
.ktBreadcrumbs--onHero{
  position:absolute;
  top:calc(var(--ktTopBarH) + var(--ktNavH) + 10px);
  left:0; right:0;
  z-index:3;
  padding-top:0;
}
.ktBreadcrumbs--onHero,
.ktBreadcrumbs--onHero a,
.ktBreadcrumbs--onHero li,
.ktBreadcrumbs--onHero span{
  color:rgba(246,246,247,.78);
}
.ktBreadcrumbs--onHero a:hover{ color:var(--bpOnAccent); }

/* ============================================================================
   FOOTER — accroche
   ----------------------------------------------------------------------------
   Le bloc CTA "Trois étapes" qui précédait a été supprimé sur demande ; son
   CSS est parti avec pour ne pas laisser de règles mortes.
   ========================================================================== */

/* ------------------------------------------------- accroche du footer ----- */
.ktFoot__lead{
  display:flex;
  flex-direction:column;
  gap:24px;
  padding-bottom:44px;
  margin-bottom:44px;
  border-bottom:1px solid rgba(246,246,247,.14);
}
@media (min-width:900px){
  .ktFoot__lead{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:48px;
  }
}

.ktFoot__leadTitle{
  margin:0 0 10px;
  font-family:var(--font-display);
  font-size:26px;
  font-weight:600;
  letter-spacing:-.025em;
  line-height:1.15;
  color:var(--bpOnAccent);
}
@media (min-width:720px){ .ktFoot__leadTitle{ font-size:32px; } }

.ktFoot__leadSub{
  margin:0;
  max-width:46ch;
  font-size:14.5px;
  line-height:1.6;
  color:rgba(246,246,247,.66);
}

.ktFoot__leadCta{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:50px;
  padding:0 26px;
  background:var(--bpOnAccent);
  color:var(--bpInk);
  border-radius:14px;
  font-family:var(--font-sans);
  font-size:15px;
  font-weight:600;
  letter-spacing:-.01em;
  text-decoration:none;
  white-space:nowrap;
  transition:background .16s ease, transform .16s ease;
}
.ktFoot__leadCta:hover{ background:#ffffff; transform:translateY(-1px); }

@media (prefers-reduced-motion:reduce){
  .ktFoot__leadCta{ transition:none !important; }
}

/* ============================================================================
   DÉMO MENU MULTILINGUE — section "Votre carte, dans la langue du client"
   ----------------------------------------------------------------------------
   Sélecteur de langue cliquable : la carte se réaffiche dans la langue choisie.
   L'arabe bascule la carte en RTL (dir="rtl" posé par le JS) — c'est le point
   qui distingue une vraie démo multilingue d'une simple substitution de texte.
   ========================================================================== */

.ktMenuDemo{
  display:flex;
  flex-direction:column;
  gap:20px;                    /* les pastilles ne doivent pas coller à la carte */
  /* .ktVisio__mock imposait aspect-ratio:4/3 + overflow:hidden pour l'ancienne
     grille de tuiles : ça rognait la carte (desserts et pied coupés). Le
     contenu fait désormais la hauteur. */
  aspect-ratio:auto;
  overflow:visible;
  padding:16px;
  /* Format "mobile large" plutôt que pleine largeur du conteneur : la carte
     doit se lire comme un téléphone posé à côté du texte. */
  width:100%;
  max-width:420px;
  margin-left:auto;            /* calée à droite de sa colonne */
  margin-right:0;
}
@media (max-width:979.98px){
  .ktMenuDemo{ margin-left:auto; margin-right:auto; }   /* centrée en mobile */
}

/* ------------------------------------------------- sélecteur de langue ---- */
.ktMenuDemo__langs{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  justify-content:flex-start;
}

.ktMenuDemo__lang{
  min-width:44px;
  height:34px;
  padding:0 12px;
  border:1px solid rgba(246,246,247,.22);
  border-radius:999px;
  background:transparent;
  color:rgba(246,246,247,.72);
  font-family:var(--font-sans);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.04em;
  cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.ktMenuDemo__lang:hover{
  background:rgba(246,246,247,.10);
  color:var(--bpOnAccent);
}
.ktMenuDemo__lang.is-active{
  background:var(--bpOnAccent);
  border-color:var(--bpOnAccent);
  color:var(--bpInk);
}
.ktMenuDemo__lang:focus-visible{
  outline:2px solid rgba(246,246,247,.65);
  outline-offset:2px;
}

/* ------------------------------------------------------------- la carte --- */
.ktMenuDemo__card{
  background:var(--bpBg);
  color:var(--bpInk);
  border-radius:18px;
  padding:22px 22px 18px;
  box-shadow:0 18px 44px rgba(36,29,27,.34);
  font-family:var(--font-sans);
}

.ktMenuDemo__head{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding-bottom:14px;
  border-bottom:1px solid var(--bpLine);
}
.ktMenuDemo__logo{
  font-family:var(--font-display);
  font-size:19px;
  font-weight:700;
  letter-spacing:-.02em;
}
.ktMenuDemo__tagline{
  font-size:12.5px;
  color:var(--bpSoft);
}

/* Le corps est réécrit à chaque changement de langue : on le fait glisser
   légèrement pour que la bascule se voie sans être clinquante. */
.ktMenuDemo__body{
  padding:14px 0 4px;
  transition:opacity .18s ease, transform .18s ease;
}
.ktMenuDemo__body.is-swapping{
  opacity:0;
  transform:translateY(6px);
}

.ktMenuDemo__cat{
  margin:0 0 8px;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--bpMuted);
}
.ktMenuDemo__cat + .ktMenuDemo__dish{ margin-top:0; }
.ktMenuDemo__cat:not(:first-child){ margin-top:18px; }

.ktMenuDemo__dish{
  display:flex;
  align-items:baseline;
  gap:10px;
  padding:7px 0;
}
.ktMenuDemo__dish + .ktMenuDemo__dish{ border-top:1px solid var(--bpLine); }

.ktMenuDemo__name{
  flex:1 1 auto;
  font-size:14px;
  font-weight:500;
  letter-spacing:-.005em;
}
.ktMenuDemo__price{
  flex:0 0 auto;
  font-size:13.5px;
  font-weight:600;
  color:var(--bpInk);
  font-variant-numeric:tabular-nums;
}

.ktMenuDemo__foot{
  display:flex;
  align-items:center;
  gap:7px;
  padding-top:12px;
  border-top:1px solid var(--bpLine);
  font-size:11.5px;
  color:var(--bpMuted);
}
.ktMenuDemo__dot{
  width:6px; height:6px;
  border-radius:50%;
  background:#30D158;              /* pastille "en ligne" : vert sémantique */
  flex:0 0 auto;
}

@media (prefers-reduced-motion:reduce){
  .ktMenuDemo__body,
  .ktMenuDemo__lang{ transition:none !important; }
  .ktMenuDemo__body.is-swapping{ opacity:1; transform:none; }
}

/* ============================================================================
   MOCKUPS INTERACTIFS — parcours client, édition, allergènes, pilotage
   ----------------------------------------------------------------------------
   Même langage que la démo multilingue : cadre sombre, pastilles de contrôle,
   carte crème. Ils remplacent les visuels /assets/feat-*.jpg, absents du
   serveur, qui s'affichaient cassés.
   Chaque mockup montre/masque des panneaux préexistants plutôt que de
   reconstruire du HTML : moins de JS, rien à traduire côté script.
   ========================================================================== */

.ktDemo{
  display:flex;
  flex-direction:column;
  gap:16px;
  width:100%;
  max-width:440px;
  padding:16px;
  background:#1a1a1a;
  border:1px solid rgba(246,246,247,.08);
  border-radius:20px;
  box-shadow:0 14px 36px -14px rgba(36,29,27,.5);
}
@media (max-width:979.98px){ .ktDemo{ margin:0 auto; } }

/* ------------------------------------------------------ pastilles ---- */
.ktDemo__pills{ display:flex; flex-wrap:wrap; gap:6px; }

.ktDemo__pill{
  height:30px;
  padding:0 12px;
  border:1px solid rgba(246,246,247,.22);
  border-radius:999px;
  background:transparent;
  color:rgba(246,246,247,.72);
  font-family:var(--font-sans);
  font-size:12px;
  font-weight:600;
  letter-spacing:.01em;
  cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.ktDemo__pill:hover{ background:rgba(246,246,247,.10); color:var(--bpOnAccent); }
.ktDemo__pill.is-active{
  background:var(--bpOnAccent);
  border-color:var(--bpOnAccent);
  color:var(--bpInk);
}
.ktDemo__pill:focus-visible{ outline:2px solid rgba(246,246,247,.65); outline-offset:2px; }

/* ---------------------------------------------------------- carte ---- */
.ktDemo__card{
  background:var(--bpBg);
  color:var(--bpInk);
  border-radius:14px;
  padding:16px;
  font-family:var(--font-sans);
}
.ktDemo__panel{ transition:opacity .18s ease, transform .18s ease; }
.ktDemo__panel.is-swapping{ opacity:0; transform:translateY(5px); }

.ktDemo__lead{
  font-family:var(--font-display);
  font-size:15px;
  font-weight:700;
  letter-spacing:-.02em;
  margin-bottom:12px;
}

.ktDemo__row{
  display:flex;
  align-items:baseline;
  gap:10px;
  padding:7px 0;
  font-size:13.5px;
}
.ktDemo__row + .ktDemo__row{ border-top:1px solid var(--bpLine); }
.ktDemo__name{ flex:1 1 auto; }
.ktDemo__val{ flex:0 0 auto; font-weight:600; font-variant-numeric:tabular-nums; }
.ktDemo__row.is-changed .ktDemo__val{ color:#1F7A38; }   /* vert sémantique */
.ktDemo__row.is-changed s{ color:var(--bpMuted); font-weight:400; margin-right:5px; }
.ktDemo__row.is-off{ color:var(--bpMuted); }
.ktDemo__row.is-off .ktDemo__name{ text-decoration:line-through; }

/* --------------------------------------------------- allergènes ------ */
.ktDemo__chips{ display:flex; flex-wrap:wrap; gap:6px; }
.ktDemo__chip{
  padding:4px 10px;
  border-radius:999px;
  background:var(--bpCardSoft);
  color:var(--bpMuted);
  font-size:11.5px;
  font-weight:500;
}
.ktDemo__chip.is-on{
  background:var(--bpAccent);
  color:var(--bpOnAccent);
  font-weight:600;
}

/* ------------------------------------------------------- QR + hint --- */
.ktDemo__qr{
  display:block;
  width:96px; height:96px;
  margin:6px 0 4px;
  padding:6px;
  border-radius:10px;
  background:var(--bpBg);
  box-shadow:0 0 0 1px var(--bpLine);
}

.ktDemo__hint{
  display:flex;
  align-items:flex-start;
  gap:7px;
  margin:12px 0 0;
  padding-top:10px;
  border-top:1px solid var(--bpLine);
  font-size:11.5px;
  line-height:1.45;
  color:var(--bpMuted);
}
.ktDemo__dot{
  flex:0 0 auto;
  width:6px; height:6px;
  margin-top:5px;
  border-radius:50%;
  background:#1F7A38;
}

/* ---------------------------------------------------------- KPI ------ */
.ktDemo__kpis{ display:flex; gap:18px; margin-bottom:14px; }
.ktDemo__kpi{ display:flex; flex-direction:column; }
.ktDemo__kpi b{
  font-family:var(--font-display);
  font-size:19px;
  font-weight:700;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.ktDemo__kpi span{ font-size:11px; color:var(--bpMuted); }

.ktDemo__chart{
  display:flex;
  align-items:flex-end;
  gap:5px;
  height:78px;
}
.ktDemo__bar{
  flex:1 1 0;
  min-width:0;
  border-radius:3px 3px 0 0;
  background:var(--bpCardSoft-2);
}
.ktDemo__bar:last-child{ background:var(--bpAccent); }

@media (prefers-reduced-motion:reduce){
  .ktDemo__panel, .ktDemo__pill{ transition:none !important; }
  .ktDemo__panel.is-swapping{ opacity:1; transform:none; }
}

/* ---------------------------------------------------------------------------
   Mockups en pleine largeur de leur encart
   ---------------------------------------------------------------------------
   .ktDemo est plafonné à 440px pour rester "format téléphone" là où il
   accompagne du texte. Dans les encarts des sections Features et Expérience
   client, la colonne fait 580px : le mockup doit l'occuper entièrement.
   ------------------------------------------------------------------------- */
.ktFeat__media .ktDemo,
.ktExp__visual .ktDemo{
  max-width:none;
  width:100%;
  padding:20px;                /* un peu plus d'air, l'encart est plus large */
}
.ktExp__visual{
  align-items:stretch;         /* était flex-end : le mockup était tassé en bas */
}
.ktFeat__media .ktDemo__card,
.ktExp__visual .ktDemo__card{
  padding:20px;
}

/* Le graphique profite de la largeur gagnée. */
.ktFeat__media .ktDemo__chart{ height:104px; }

/* ---------------------------------------------------------------------------
   Header pendant l'ouverture d'un méga-menu
   ---------------------------------------------------------------------------
   Le panneau .ktMega est crème plein. Si le bandeau reste transparent (état
   overlay sur le hero) ou brun (état .is-dark), le raccord entre les deux est
   incohérent et le texte du header devient illisible. On force donc le même
   crème que le panneau tant qu'un méga est ouvert.

   Ce bloc est placé après .is-top-overlay et .is-dark : à spécificité égale,
   c'est la dernière règle qui gagne, quel que soit l'état posé par le JS de
   scroll. Aucune coordination nécessaire entre les deux scripts.
   ------------------------------------------------------------------------- */
.ktNav.is-mega-open,
.ktNav.is-menu-open{
  background:var(--bpBg);
  border-bottom-color:rgba(0,0,0,.06);
  color:var(--bpInk);
}

.ktNav.is-mega-open .ktNav__brand,
.ktNav.is-menu-open .ktNav__brand,
.ktNav.is-mega-open .ktNav__link,
.ktNav.is-menu-open .ktNav__link,
.ktNav.is-mega-open .ktNav__menuTrigger,
.ktNav.is-menu-open .ktNav__menuTrigger,
.ktNav.is-mega-open .ktNav__signin,
.ktNav.is-menu-open .ktNav__signin,
.ktNav.is-mega-open .ktNav__ctaMobile,
.ktNav.is-menu-open .ktNav__ctaMobile{
  color:var(--bpInk);
}

.ktNav.is-mega-open .ktNav__link:hover,
.ktNav.is-mega-open .ktNav__menuTrigger:hover,
.ktNav.is-mega-open .ktNav__menuTrigger.is-open{
  background:var(--bpCardSoft);
  color:var(--bpInk);
}
.ktNav.is-mega-open .ktNav__link.is-active{ background:var(--bpCardSoft-2); }

.ktNav.is-mega-open .ktNav__cta,
.ktNav.is-menu-open .ktNav__cta{
  background:var(--bpAccent);
  color:var(--bpOnAccent);
}
.ktNav.is-mega-open .ktNav__cta:hover{ background:var(--bpAccentDeep); }

.ktNav.is-mega-open .ktNav__burgerLine,
.ktNav.is-menu-open .ktNav__burgerLine{ background:var(--bpInk); }

/* Fil d'Ariane legacy (.breadcrumbs) posé sur la bannière — même traitement
   que .ktBreadcrumbs--onHero, pour les pages menu-qr-code-* et pour-qui. */
.breadcrumbs--onHero{
  position:absolute;
  top:calc(var(--ktTopBarH) + var(--ktNavH) + 10px);
  left:0; right:0;
  z-index:3;
  padding-top:0;
}
.breadcrumbs--onHero,
.breadcrumbs--onHero a,
.breadcrumbs--onHero li,
.breadcrumbs--onHero span{
  color:rgba(246,246,247,.78);
}
.breadcrumbs--onHero a:hover{ color:var(--bpOnAccent); }

/* Le markup legacy n'a pas de conteneur interne (pas d'équivalent à
   .ktBreadcrumbs__wrap) : la liste collait au bord gauche de l'écran au lieu
   de s'aligner sur la colonne de 1240px du hero. On borne donc la liste
   elle-même, avec le même padding que .ktHero--cluster. */
/* Les styles legacy de .breadcrumbs-* vivent dans landing.css, qui n'est
   chargé sur aucune page : le fil s'affichait donc en liste verticale non
   stylée. Personne ne l'avait remarqué tant qu'il restait caché sous le
   header fixe à y=0. On le met en ligne ici, dans le seul fichier chargé. */
.breadcrumbs--onHero .breadcrumbs-list{
  max-width:1240px;
  margin:0 auto;
  padding:0 24px;
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0 10px;
  font-size:13px;
}
.breadcrumbs--onHero .breadcrumbs-item{
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.breadcrumbs--onHero .breadcrumbs-item:not(:last-child)::after{
  content:'›';
  color:rgba(246,246,247,.45);
}
.breadcrumbs--onHero .breadcrumbs-item a{ text-decoration:none; }
.breadcrumbs--onHero .breadcrumbs-item.is-current{ font-weight:600; }
@media (min-width:980px){
  .breadcrumbs--onHero .breadcrumbs-list{ padding:0 32px; }
}

/* ============================================================================
   MODÈLE 3D — chevalet de table (section "commandent depuis leur poche")
   ----------------------------------------------------------------------------
   Le poster statique occupe la place dès le premier rendu ; le viewer 3D vient
   se superposer une fois chargé. Les dimensions sont portées par le <img>
   (width/height), donc aucun décalage de mise en page à l'échange.
   ========================================================================== */

.kt3d{
  position:relative;
  width:100%;
  max-width:560px;
  margin:0 auto;
  aspect-ratio:900/757;      /* ratio du poster : réserve la place */
}

.kt3d__poster{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  transition:opacity .4s ease;
}
.kt3d.is-ready .kt3d__poster{ opacity:0; }

.kt3d model-viewer{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  background:transparent;
  opacity:0;
  transition:opacity .4s ease;
  --poster-color:transparent;
}
.kt3d.is-ready model-viewer{ opacity:1; }


@media (prefers-reduced-motion:reduce){
  .kt3d__poster, .kt3d model-viewer{ transition:none !important; }
}

/* ---------------------------------------------------------------------------
   Mobile en overlay : les éléments doivent être crème sur transparent
   ---------------------------------------------------------------------------
   Le bloc .is-top-overlay ne traitait que le logo et les liens desktop.
   Sur mobile, "Connexion" (.ktNav__ctaMobile) et les traits du burger
   restaient en brun #000000, donc invisibles sur la photo du hero.
   ------------------------------------------------------------------------- */
.ktNav.is-top-overlay .ktNav__ctaMobile{
  color:var(--bpOnAccent);
}
.ktNav.is-top-overlay .ktNav__burgerLine{
  background:var(--bpOnAccent);
}
/* Même correction sur les sections sombres. */
.ktNav.is-dark .ktNav__ctaMobile{ color:var(--bpOnAccent); }

/* Menu mobile ou méga-menu ouvert : le bandeau est crème, donc les éléments
   repassent en brun. Ce bloc doit rester le DERNIER du fichier — les règles
   .is-top-overlay ci-dessus ont la même spécificité et gagneraient sinon,
   laissant "Connexion" et le burger en crème sur fond crème. */
.ktNav.is-menu-open .ktNav__ctaMobile,
.ktNav.is-mega-open .ktNav__ctaMobile{
  color:var(--bpInk);
}
.ktNav.is-menu-open .ktNav__burgerLine,
.ktNav.is-mega-open .ktNav__burgerLine{
  background:var(--bpInk);
}

/* ============================================================================
   HEADER — couleur reprise de la section survolée
   ----------------------------------------------------------------------------
   --ktNavBg est posée par le JS avec la couleur de fond réelle de la section
   sous le bandeau : crème #F6F6F7, crème foncé #ECECEE, blanc ou brun. Le
   repli est le crème, pour les pages sans JS.
   Les états .is-top-overlay / .is-mega-open / .is-menu-open définissent
   `background` directement : spécificité 0,2,0 contre 0,1,0, ils gagnent
   toujours, quelle que soit la valeur de la variable.
   ========================================================================== */
.ktNav,
.ktNav.is-top,
.ktNav.is-dark{
  background:var(--ktNavBg, var(--bpBg));
}

/* La bordure basse suit le ton : discrète et sombre sur fond clair,
   discrète et claire sur fond brun. */
.ktNav.is-dark{ border-bottom-color:rgba(246,246,247,.10); }
.ktNav.is-top{  border-bottom-color:rgba(0,0,0,.06); }

/* ---------------------------------------------------------------------------
   Bouton "Connexion" mobile : sa bordure suivait le texte avec un tour de
   retard. Sur fond transparent ou brun elle restait brune, donc invisible.
   ------------------------------------------------------------------------- */
.ktNav.is-top-overlay .ktNav__ctaMobile,
.ktNav.is-dark .ktNav__ctaMobile{
  border-color:rgba(246,246,247,.55);
}
.ktNav.is-top-overlay .ktNav__ctaMobile:hover,
.ktNav.is-dark .ktNav__ctaMobile:hover{
  border-color:var(--bpOnAccent);
  background:rgba(246,246,247,.14);
}

/* Ces deux blocs restent les DERNIERS : menu ou méga ouvert, le bandeau est
   crème, donc texte ET bordure repassent en brun. */
.ktNav.is-menu-open .ktNav__ctaMobile,
.ktNav.is-mega-open .ktNav__ctaMobile{
  color:var(--bpInk);
  border-color:rgba(0,0,0,.30);
}
.ktNav.is-menu-open .ktNav__burgerLine,
.ktNav.is-mega-open .ktNav__burgerLine{
  background:var(--bpInk);
}

/* ============================================================================
   MENU MOBILE OUVERT — tout en blanc
   ----------------------------------------------------------------------------
   Volontairement dissocié de .is-mega-open : le méga-menu desktop doit rester
   crème pour correspondre à son panneau .ktMega, alors que le menu mobile
   passe en blanc pur.
   Placé après les règles .is-menu-open précédentes (même spécificité), donc
   c'est bien ce blanc qui s'applique.
   ========================================================================== */
.ktNav.is-menu-open{
  background:#ffffff;
  border-bottom-color:rgba(0,0,0,.08);
}

/* Le panneau plein écran et ses sous-panneaux (Fonctionnalités, Pour qui). */
#ktNavMobile,
#ktNavMobileSub,
#ktNavMobileSubFunc{
  background:#ffffff;
}

/* La section "Vos clients commandent depuis leur poche" est devenue la
   première de l'accueil, à la place du hero supprimé. Le header étant fixe et
   opaque, elle doit réserver sa hauteur. */
.ktExp--first{
  padding-top:calc(var(--ktTopBarH) + var(--ktNavH) + 56px);
}
@media (min-width:980px){
  .ktExp--first{ padding-top:calc(var(--ktTopBarH) + var(--ktNavH) + 76px); }
}
/* Elle porte désormais le <h1> : on lui donne le poids d'un titre de page. */
.ktExp--first .ktExp__title{
  font-size:34px;
}
@media (min-width:720px){ .ktExp--first .ktExp__title{ font-size:46px; } }
@media (min-width:1200px){ .ktExp--first .ktExp__title{ font-size:54px; } }

/* ============================================================================
   PALETTE — décalage d'un cran vers le clair
   ----------------------------------------------------------------------------
   Nouvelle alternance demandée :
     - fond blanc #ffffff        avec encarts #F6F6F7
     - fond crème #F6F6F7        avec encarts #ECECEE
     - fonds bruns inchangés
   Les sections qui étaient en crème passent donc en blanc, et celles qui
   étaient en crème foncé passent en crème. Le header suit automatiquement :
   il lit la couleur calculée de la section, il n'y a rien à y toucher.
   ========================================================================== */

:root{
  --bpBg:#ffffff;              /* fond de page — était #F6F6F7 */
  --bpCard:#F6F6F7;            /* encart sur fond blanc */
  --bpCardSoft:#ECECEE;        /* encart sur fond crème */
}

/* --- Sections qui passent en blanc (elles étaient en crème) --- */
.ktBenefits,
.ktFeats,
.csSection,
.multiSection,
.tarifsHero{
  background:#ffffff;
}

/* --- Sections qui passent en crème (elles étaient en crème foncé) --- */
.ktQuote,
.ktStats,
.ktExp,
.csSection.alt,
.pricingSection,
.tarifsFaq,
.activitesSection{
  background:#F6F6F7;
}

/* --- Les fonds bruns restent : on les repose après, pour que les règles
       ci-dessus ne les emportent pas si une classe se cumule. --- */
.csSection.csSection--dark,
.ktVisio,
.ktFoot,
.tarifsCta{
  background:var(--bpForest);
}

/* ============================================================================
   BOUTONS — tous en pastille pleine
   ----------------------------------------------------------------------------
   L'essentiel du site était déjà en 999px. Restaient le bloc CTA et le footer
   (14px), et les liens de méga-menu et de templates (10px).
   ========================================================================== */
.ktFoot__leadCta,
.ktMega__link,
.tplPill{
  border-radius:999px;
}

/* Respiration en bas de la première section, qui n'a plus de hero au-dessus. */
.ktExp--first{ padding-bottom:88px; }
@media (min-width:980px){ .ktExp--first{ padding-bottom:120px; } }

/* ============================================================================
   HEADER DESKTOP — blanc au survol et méga-menu ouvert
   ----------------------------------------------------------------------------
   Ce bloc est placé en TOUT DERNIER, volontairement : la règle qui applique la
   couleur de la section (.ktNav.is-top / .is-dark) a la même spécificité et
   gagnait la cascade, ce qui laissait le bandeau en crème alors qu'il devait
   passer en blanc. À spécificité égale, c'est le dernier qui gagne.
   ========================================================================== */

/* Le panneau du méga-menu passe en blanc, comme le bandeau. */
.ktMega{ background:#ffffff; }

@media (hover:hover) and (min-width:820px){
  .ktNav:hover,
  .ktNav.is-mega-open{
    background:#ffffff;
    border-bottom-color:rgba(0,0,0,.08);
  }

  /* Sur fond blanc, tout le contenu du bandeau repasse en brun — sans ça, les
     états overlay et sombre laisseraient du crème sur blanc, illisible. */
  .ktNav:hover .ktNav__brand,
  .ktNav:hover .ktNav__link,
  .ktNav:hover .ktNav__menuTrigger,
  .ktNav:hover .ktNav__signin,
  .ktNav.is-mega-open .ktNav__brand,
  .ktNav.is-mega-open .ktNav__link,
  .ktNav.is-mega-open .ktNav__menuTrigger,
  .ktNav.is-mega-open .ktNav__signin{
    color:var(--bpInk);
  }

  .ktNav:hover .ktNav__link:hover,
  .ktNav:hover .ktNav__menuTrigger:hover,
  .ktNav:hover .ktNav__menuTrigger.is-open,
  .ktNav.is-mega-open .ktNav__link:hover,
  .ktNav.is-mega-open .ktNav__menuTrigger:hover,
  .ktNav.is-mega-open .ktNav__menuTrigger.is-open{
    background:var(--bpCardSoft);
    color:var(--bpInk);
  }

  .ktNav:hover .ktNav__cta,
  .ktNav.is-mega-open .ktNav__cta{
    background:var(--bpAccent);
    color:var(--bpOnAccent);
  }
  .ktNav:hover .ktNav__cta:hover,
  .ktNav.is-mega-open .ktNav__cta:hover{ background:var(--bpAccentDeep); }
}

/* ---------------------------------------------------------------------------
   Menu mobile ouvert — reste le tout dernier mot.
   ------------------------------------------------------------------------- */
.ktNav.is-menu-open{
  background:#ffffff;
  border-bottom-color:rgba(0,0,0,.08);
}
.ktNav.is-menu-open .ktNav__brand,
.ktNav.is-menu-open .ktNav__ctaMobile{ color:var(--bpInk); }
.ktNav.is-menu-open .ktNav__ctaMobile{ border-color:rgba(0,0,0,.30); }
.ktNav.is-menu-open .ktNav__burgerLine{ background:var(--bpInk); }

/* Plus de bordure basse sur le bandeau, desktop comme mobile.
   Les états ne posaient qu'une border-bottom-color : annuler la largeur ici
   suffit à la faire disparaître partout, sans avoir à toucher chaque état. */
.ktNav{ border-bottom:0; }

/* ============================================================================
   OBJETS 3D — plus de conteneur, plus de rognage
   ----------------------------------------------------------------------------
   Les emplacements .ktFeat__media et .ktCrmCard__media étaient prévus pour des
   photos : hauteur figée, overflow:hidden, et object-fit:cover sur l'image.
   Les objets 3D y étaient donc coupés (−81px sur les cartes, −108px sur les
   features). On neutralise le cadre quand il contient un modèle : il n'a plus
   ni fond, ni bordure, ni hauteur imposée.
   ========================================================================== */

.ktFeat__media:has(.kt3d),
.ktCrmCard__media:has(.kt3d){
  overflow:visible;
  height:auto;
  min-height:0;
  max-height:none;
  background:transparent;
  border:0;
  box-shadow:none;
  padding:0;
  aspect-ratio:auto;
}

/* Repli pour les navigateurs sans :has() — on vise alors le parent direct. */
.kt3d{ overflow:visible; }

.kt3d__poster{
  object-fit:contain;          /* était cover via les styles d'image */
  width:100%;
  height:auto;
}

/* Le modèle occupe la largeur disponible, la hauteur suit son ratio. */
.ktFeat__media .kt3d,
.ktCrmCard__media .kt3d{
  max-width:none;
  width:100%;
  margin:0;
}

/* .ktFeat__media img et .ktCrmCard__media img (spécificité 0,1,1) battaient
   .kt3d__poster (0,1,0) et réimposaient object-fit:cover, qui recadre. On
   remonte la spécificité au même niveau, en dernier. */
.kt3d .kt3d__poster,
.ktFeat__media .kt3d__poster,
.ktCrmCard__media .kt3d__poster{
  object-fit:contain;
  width:100%;
  height:auto;
}

/* model-viewer affiche sa propre barre de progression en haut de l'élément :
   un bandeau de 5px en rgba(0,0,0,.4), d'où la barre noire pendant le
   chargement. On a déjà notre aperçu statique à la place, elle fait doublon.
   On la neutralise par ::part() et par les variables, selon ce que la version
   du composant expose. */
.kt3d model-viewer{
  --progress-bar-color:transparent;
  --progress-bar-height:0px;
}
.kt3d model-viewer::part(default-progress-bar){
  display:none;
  height:0;
  background:transparent;
  opacity:0;
}
/* Le bouton AR par défaut n'est pas utilisé non plus. */
.kt3d model-viewer::part(default-ar-button){ display:none; }


/* Repli pour les navigateurs sans backdrop-filter : on remonte l'opacité,
   sinon le texte se lit sur l'objet lui-même. */


/* La section multilingue accueille désormais un modèle 3D : le cadre sombre
   de .ktVisio__mock (fond, bordure, aspect-ratio) n'a plus lieu d'être. */
.ktVisio__mock.kt3d{
  background:transparent;
  border:0;
  box-shadow:none;
  padding:0;
  aspect-ratio:auto;
  overflow:visible;
  max-width:none;
  width:100%;
}

/* ---------------------------------------------------------------------------
   Mobile : les deux modèles principaux passent en pleine largeur d'écran
   ---------------------------------------------------------------------------
   Ils étaient bornés à la largeur du conteneur (342px sur un écran de 390),
   donc bridés par le padding de section. On les fait déborder de ce padding
   pour qu'ils occupent tout l'écran, la hauteur suit leur ratio.
   ------------------------------------------------------------------------- */
@media (max-width:979.98px){
  .ktExp__visual .kt3d,
  .ktVisio__mock.kt3d{
    width:100vw;
    max-width:100vw;
    /* recentre en annulant le padding du conteneur, quelle que soit sa valeur */
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
  }
  /* Les sections ne doivent pas générer de scroll horizontal au passage. */
  .ktExp,
  .ktVisio{ overflow-x:clip; }
}

/* Mention sous le premier objet 3D uniquement : une seule fois sur la page
   suffit à faire comprendre que les objets sont manipulables. */
.kt3d__legende{
  margin:10px 0 0;
  text-align:center;
  font-family:var(--font-sans);
  font-size:12px;
  font-weight:500;
  letter-spacing:.01em;
  color:var(--bpMuted);
}

/* .ktExp__visual est un flex : la légende ajoutée dessous devenait un second
   élément flex posé À CÔTÉ de l'objet, qui perdait la moitié de sa largeur
   (d'où le décalage constaté sur desktop). On passe le conteneur en colonne. */
.ktExp__visual{
  flex-direction:column;
  justify-content:center;
}

/* ---------------------------------------------------------------------------
   Fil d'Ariane des pages SANS bannière
   ---------------------------------------------------------------------------
   Sur ces pages il reste dans le flux, tout en haut du <body> — donc
   intégralement recouvert par le header fixe, sur mobile comme sur desktop.
   Les pages à bannière ne sont pas concernées : leur fil est en absolu avec
   son propre décalage (--onHero).
   Le padding pousse aussi le contenu qui suit, qui démarrait lui aussi sous
   le bandeau.
   ------------------------------------------------------------------------- */
.ktBreadcrumbs:not(.ktBreadcrumbs--onHero),
.breadcrumbs:not(.breadcrumbs--onHero){
  padding-top:calc(var(--ktTopBarH) + var(--ktNavH) + 16px);
}

/* ============================================================================
   BOUTONS EN CONTOUR — footer et header desktop
   ----------------------------------------------------------------------------
   Placé en fin de fichier : le CTA du header est repeint par plusieurs états
   (overlay, sombre, survol, méga ouvert) qui ont tous la même spécificité.
   Ces règles doivent donc passer après pour s'appliquer partout.
   ========================================================================== */

/* --- Footer --- */
.ktFoot__leadCta{
  background:transparent;
  color:var(--bpOnAccent);
  border:1px solid rgba(246,246,247,.55);
}
.ktFoot__leadCta:hover{
  background:rgba(246,246,247,.12);
  border-color:var(--bpOnAccent);
  color:var(--bpOnAccent);
}

/* --- Header desktop, tous états ---
   La bordure et le texte suivent la couleur du contenu du bandeau : crème
   quand il est transparent ou brun, brun quand il est clair. */
@media (min-width:820px){
  .ktNav__cta,
  .ktNav.is-top .ktNav__cta,
  .ktNav.is-top-overlay .ktNav__cta,
  .ktNav.is-dark .ktNav__cta,
  .ktNav:hover .ktNav__cta,
  .ktNav.is-mega-open .ktNav__cta{
    background:transparent;
  }

  /* Fond clair : contour et texte bruns. */
  .ktNav.is-top .ktNav__cta,
  .ktNav:hover .ktNav__cta,
  .ktNav.is-mega-open .ktNav__cta{
    color:var(--bpInk);
    border:1px solid rgba(0,0,0,.34);
  }
  .ktNav.is-top .ktNav__cta:hover,
  .ktNav:hover .ktNav__cta:hover,
  .ktNav.is-mega-open .ktNav__cta:hover{
    background:rgba(0,0,0,.07);
    border-color:var(--bpInk);
    color:var(--bpInk);
  }

  /* Fond transparent ou brun : contour et texte crème. */
  .ktNav.is-top-overlay .ktNav__cta,
  .ktNav.is-dark .ktNav__cta{
    color:var(--bpOnAccent);
    border:1px solid rgba(246,246,247,.55);
  }
  .ktNav.is-top-overlay .ktNav__cta:hover,
  .ktNav.is-dark .ktNav__cta:hover{
    background:rgba(246,246,247,.14);
    border-color:var(--bpOnAccent);
    color:var(--bpOnAccent);
  }
}

/* ============================================================================
   FOOTER — colonnes en accordéon sur mobile
   ----------------------------------------------------------------------------
   Les 4 colonnes de maillage empilaient une trentaine de liens sur mobile.
   Chaque titre devient un bouton dépliant. En desktop l'accordéon est
   neutralisé : le bouton redevient un simple titre et les liens sont toujours
   visibles, quel que soit l'état d'aria-expanded.
   ========================================================================== */

.ktFoot__colTitle{ margin:0; }

.ktFoot__colToggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:default;              /* desktop : ce n'est pas un bouton actionnable */
}
.ktFoot__colChev{
  width:16px; height:16px;
  flex:0 0 auto;
  display:none;                /* chevron réservé au mobile */
  transition:transform .2s ease;
}

.ktFoot__colLinks{
  display:flex;
  flex-direction:column;
  gap:10px;
}

@media (max-width:719.98px){
  .ktFoot__grid{ gap:0; }

  .ktFoot__col{
    gap:0;
    border-bottom:1px solid rgba(246,246,247,.12);
  }
  .ktFoot__col:first-child{ border-top:1px solid rgba(246,246,247,.12); }

  .ktFoot__colToggle{
    cursor:pointer;
    padding:16px 0;
    min-height:52px;           /* cible tactile confortable */
  }
  .ktFoot__colChev{ display:block; }
  .ktFoot__col.is-open .ktFoot__colChev{ transform:rotate(180deg); }

  /* Replié par défaut, animé à l'ouverture.
     On utilise max-height et non grid-template-rows:0fr : cette astuce
     n'écrase qu'une seule rangée, or les liens sont enfants directs du
     conteneur, qui en crée donc autant que de liens.
     Le bouton est DANS le <h5>, un sélecteur frère depuis le bouton
     n'atteindrait pas les liens : on passe par une classe sur la colonne,
     posée en JS — plus sûr que :has(), pas encore universel. */
  .ktFoot__colLinks{
    max-height:0;
    overflow:hidden;
    transition:max-height .28s ease, padding-bottom .28s ease;
  }
  .ktFoot__col.is-open .ktFoot__colLinks{
    max-height:480px;
    padding-bottom:16px;
  }
}

@media (prefers-reduced-motion:reduce){
  .ktFoot__colLinks, .ktFoot__colChev{ transition:none !important; }
}

/* ---------------------------------------------------------------------------
   Dock mobile — CTA avec flèche + mention, sans burger
   ---------------------------------------------------------------------------
   Le burger du dock faisait doublon avec celui du header, qui reste le seul
   accès au menu. Le dock ne porte plus que l'appel à l'action.
   ------------------------------------------------------------------------- */
.ktDock{
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:8px 8px 10px;
  border-radius:22px;
}
.ktDock__cta{
  gap:8px;
  padding:0 22px;
}
.ktDock__arrow{
  width:17px; height:17px;
  flex:0 0 auto;
  transition:transform .18s ease;
}
.ktDock__cta:hover .ktDock__arrow{ transform:translateX(3px); }

.ktDock__note{
  font-family:var(--font-sans);
  font-size:11px;
  font-weight:500;
  letter-spacing:.01em;
  color:rgba(246,246,247,.68);
  white-space:nowrap;
}

@media (prefers-reduced-motion:reduce){
  .ktDock__arrow{ transition:none !important; }
}

/* ---------------------------------------------------------------------------
   Hero des pages cluster : même mise en page que la première section de
   l'accueil, mais elles gardent leur fil d'Ariane posé au-dessus.
   ------------------------------------------------------------------------- */
.ktExp--cluster{
  background:#ffffff;
}
.ktExp--cluster .ktExp__title{
  font-size:30px;
}
@media (min-width:720px){ .ktExp--cluster .ktExp__title{ font-size:40px; } }
@media (min-width:1200px){ .ktExp--cluster .ktExp__title{ font-size:46px; } }

/* Les objets des cartes sombres n'ont pas de cadre non plus. */
.ktCrmCard__media .kt3d{ margin:0 auto; }

/* ---------------------------------------------------------------------------
   Hero cluster : le texte doit être brun, pas crème
   ---------------------------------------------------------------------------
   Ces pages utilisaient .ktHero__* du temps de la bannière photo, où le texte
   était en crème. Le hero est désormais blanc : sans ça, titre et texte
   deviennent invisibles.
   ------------------------------------------------------------------------- */
.ktExp--cluster .ktHero__title,
.ktExp--cluster .ktExp__title{
  color:var(--bpInk);
}
.ktExp--cluster .ktHero__lead,
.ktExp--cluster .ktExp__lead{
  color:var(--bpSoft);
}
.ktExp--cluster .ktHero__eyebrow,
.ktExp--cluster .ktExp__eyebrow{
  color:var(--bpMuted);
}

/* Le CTA plein reste brun ; le CTA secondaire passe du contour crème au
   contour brun, invisible autrement sur fond blanc. */
.ktExp--cluster .ktHero__cta{
  background:var(--bpAccent);
  color:var(--bpOnAccent);
}
.ktExp--cluster .ktHero__cta:hover{ background:var(--bpAccentDeep); }
.ktExp--cluster .ktHero__cta--ghost{
  background:transparent;
  color:var(--bpInk);
  border:1px solid rgba(0,0,0,.34);
}
.ktExp--cluster .ktHero__cta--ghost:hover{
  background:rgba(0,0,0,.07);
  border-color:var(--bpInk);
  color:var(--bpInk);
}

/* ---------------------------------------------------------------------------
   Objets 3D : réserver la place avant l'affichage
   ---------------------------------------------------------------------------
   Les aperçus font tous 700×609. Sans ratio ni dimensions sur l'image, la
   boîte vaut zéro tant que le fichier n'est pas arrivé, puis la page saute —
   deux fois : à l'arrivée de l'aperçu, puis au remplacement par le modèle.
   ------------------------------------------------------------------------- */
.kt3d{
  aspect-ratio:700 / 609;
}
.kt3d__poster{
  width:100%;
  height:100%;
  object-fit:contain;
}

/* ---------------------------------------------------------------------------
   Pages cluster : alternance stricte des fonds
   ---------------------------------------------------------------------------
   Elles enchaînaient blanc/blanc puis crème/crème/crème. On alterne sur le
   rang de la section, et la section brune reprend la main ensuite — elle sert
   de rupture et ne doit pas suivre l'alternance.
   La spécificité doit dépasser .csSection.alt (0,2,0), d'où le préfixe
   .ktExp--cluster ~ qui porte le sélecteur à 0,3,0.
   ------------------------------------------------------------------------- */
.ktExp--cluster ~ section:nth-of-type(odd){
  background:#ffffff;
}
.ktExp--cluster ~ section:nth-of-type(even){
  background:#F6F6F7;
}
.ktExp--cluster ~ section.csSection--dark,
.ktExp--cluster ~ section.ktVisio,
.ktExp--cluster ~ section.ktCta{
  background:var(--bpForest);
}

/* ---------------------------------------------------------------------------
   Alternance des fonds des pages cluster
   ---------------------------------------------------------------------------
   La classe est posée par cluster_bg_class() côté PHP. On évite ainsi de
   dépendre d'un :nth-of-type qui se faisait battre par .csSection.alt.
   Double classe pour passer devant les règles de section existantes.
   ------------------------------------------------------------------------- */
/* !important assumé : la section FAQ porte un id, et #faq.csSection a une
   spécificité (1,1,1) qu'aucune combinaison de classes ne peut dépasser.
   C'est le seul moyen de faire respecter l'alternance sur cette section. */
section.ktBg--blanc.ktBg--blanc{ background:#ffffff !important; }
section.ktBg--creme.ktBg--creme{ background:#F6F6F7 !important; }
/* Les sections brunes gardent la main quoi qu'il arrive. */
section.csSection--dark.csSection--dark{ background:var(--bpForest); }

/* ============================================================================
   CARROUSEL « POUR QUI » — bas des pages établissement
   ----------------------------------------------------------------------------
   Défilement horizontal avec accroche, sur mobile comme sur desktop : neuf
   établissements ne tiennent pas en grille sans écraser les cartes.
   Le visuel est le rendu statique du modèle 3D de chaque page — charger huit
   .glb sur une même page coûterait plusieurs mégaoctets.
   ========================================================================== */

.pqCarousel{ padding:80px 0 96px; }
@media (min-width:980px){ .pqCarousel{ padding:110px 0 130px; } }

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

.pqCarousel__head{ padding:0 24px; margin-bottom:32px; }
@media (min-width:980px){ .pqCarousel__head{ padding:0 32px; } }

.pqCarousel__eyebrow{
  font-family:var(--font-sans);
  font-size:11px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--bpMuted); margin-bottom:14px;
}
.pqCarousel__title{
  margin:0;
  font-family:var(--font-display);
  font-size:28px; font-weight:600;
  letter-spacing:-.025em; line-height:1.15;
  color:var(--bpInk); text-wrap:balance;
}
@media (min-width:720px){ .pqCarousel__title{ font-size:36px; } }

/* Piste défilante avec accroche. */
.pqCarousel__track{
  display:flex;
  gap:16px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding:4px 24px 20px;
  scroll-padding-left:24px;
}
.pqCarousel__track::-webkit-scrollbar{ display:none; }
@media (min-width:980px){
  .pqCarousel__track{ padding:4px 32px 24px; scroll-padding-left:32px; }
}

.pqCard{
  flex:0 0 260px;
  scroll-snap-align:start;
  display:flex;
  flex-direction:column;
  padding:16px 16px 18px;
  border:1px solid var(--bpLine);
  border-radius:20px;
  background:var(--bpCard);
  color:var(--bpInk);
  text-decoration:none;
  transition:border-color .16s ease, transform .16s ease;
}
@media (min-width:720px){ .pqCard{ flex-basis:300px; } }
.pqCard:hover{
  border-color:rgba(0,0,0,.28);
  transform:translateY(-2px);
}

.pqCard__media{
  aspect-ratio:700 / 609;
  margin-bottom:14px;
  border-radius:14px;
  background:var(--bpCardSoft);
  overflow:hidden;
}
.pqCard__media img{
  width:100%; height:100%;
  object-fit:contain;
  display:block;
}

.pqCard__title{
  margin:0 0 6px;
  font-family:var(--font-display);
  font-size:17px; font-weight:600;
  letter-spacing:-.02em;
}
.pqCard__text{
  margin:0 0 14px;
  font-family:var(--font-sans);
  font-size:13.5px; line-height:1.5;
  color:var(--bpSoft);
  flex:1 1 auto;
}
.pqCard__lien{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-sans);
  font-size:13.5px; font-weight:600;
  color:var(--bpInk);
}
.pqCard__lien svg{ width:15px; height:15px; transition:transform .16s ease; }
.pqCard:hover .pqCard__lien svg{ transform:translateX(3px); }

@media (prefers-reduced-motion:reduce){
  .pqCard, .pqCard__lien svg{ transition:none !important; }
}

/* ---------------------------------------------------------------------------
   Carrousel « Pour qui » : pleine largeur, aligné sur la grille
   ---------------------------------------------------------------------------
   La piste était bornée à 1240px et se coupait donc avant le bord de l'écran.
   Elle occupe maintenant toute la largeur, avec un retrait de départ calculé
   pour que la première carte tombe exactement sur la ligne de grille (132px
   sur un écran de 1440), et le même retrait en fin de piste.
   ------------------------------------------------------------------------- */
.pqCarousel__wrap{ max-width:none; }

.pqCarousel__head{
  max-width:1240px;
  margin:0 auto 32px;
  padding:0 24px;
}
@media (min-width:980px){ .pqCarousel__head{ padding:0 32px; } }

.pqCarousel__track{
  padding-left:max(24px, calc((100vw - 1240px) / 2 + 24px));
  padding-right:max(24px, calc((100vw - 1240px) / 2 + 24px));
  scroll-padding-left:max(24px, calc((100vw - 1240px) / 2 + 24px));
}
@media (min-width:980px){
  .pqCarousel__track{
    padding-left:max(32px, calc((100vw - 1240px) / 2 + 32px));
    padding-right:max(32px, calc((100vw - 1240px) / 2 + 32px));
    scroll-padding-left:max(32px, calc((100vw - 1240px) / 2 + 32px));
  }
}

/* ---------------------------------------------------------------------------
   Ni fond ni cadre : les objets reposent directement sur la section, comme
   partout ailleurs sur le site.
   ------------------------------------------------------------------------- */
.pqCard{
  background:transparent;
  border:0;
  padding:0 0 4px;
}
.pqCard:hover{
  border:0;
  transform:translateY(-3px);
}
.pqCard__media{
  background:transparent;
  border-radius:0;
  overflow:visible;
  margin-bottom:16px;
}

/* ============================================================================
   DOCK MOBILE — pastille blanche, libellé à gauche, bouton à droite
   ========================================================================== */
.ktDock{
  position:fixed;
  left:16px; right:16px;
  bottom:calc(14px + env(safe-area-inset-bottom, 0px));
  z-index:60;
  display:flex;
  /* réinitialisation explicite : le bloc précédent posait column, ce qui
     empilait et centrait le contenu au lieu de le répartir en ligne */
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  width:auto;
  transform:none;
  padding:12px 12px 12px 18px;
  border-radius:15px;
  background:#ffffff;
  box-shadow:0 10px 30px rgba(36,29,27,.22), 0 0 0 1px rgba(0,0,0,.06);
  text-decoration:none;
  transition:transform .25s cubic-bezier(.2,.85,.2,1), opacity .2s ease;
}
@media (min-width:820px){ .ktDock{ display:none; } }

.ktDock.is-hidden{
  opacity:0;
  pointer-events:none;
  transform:translateY(140%);
}

.ktDock__texte{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.ktDock__titre{
  font-family:var(--font-sans);
  font-size:15px;
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--bpInk);
  white-space:nowrap;
}
.ktDock__note{
  font-family:var(--font-sans);
  font-size:11.5px;
  font-weight:500;
  color:var(--bpSoft);
  white-space:nowrap;
}

.ktDock__btn{
  flex:0 0 auto;
  width:44px; height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:var(--bpAccent);
  color:var(--bpOnAccent);
  transition:background .15s ease;
}
.ktDock__btn svg{ width:19px; height:19px; }
.ktDock:hover .ktDock__btn{ background:var(--bpAccentDeep); }

@media (prefers-reduced-motion:reduce){
  .ktDock, .ktDock__btn{ transition:none !important; }
}

/* ---------------------------------------------------------------------------
   Heros sur mobile : un seul bouton, centré
   ---------------------------------------------------------------------------
   Les heros proposent deux actions côte à côte. Sur mobile elles se
   partageaient la largeur et le bloc n'était pas centré. On ne garde que
   l'action principale, centrée.
   ------------------------------------------------------------------------- */
@media (max-width:819.98px){
  .ktHero__ctas{
    justify-content:center;
    width:100%;
  }
  .ktHero__ctas .ktHero__cta--ghost{
    display:none;
  }
  .ktExp--first .ktHero__ctas,
  .ktExp--cluster .ktHero__ctas{
    justify-content:center;
  }
  /* Le hero de l'accueil n'a qu'un bouton : on le centre aussi. */
  .ktExp--first .ktExp__head,
  .ktExp--cluster .ktHero__head{
    align-items:center;
    text-align:center;
  }
  .ktExp--first .ktExp__lead,
  .ktExp--cluster .ktHero__lead{
    margin-left:auto;
    margin-right:auto;
  }
}

/* ---------------------------------------------------------------------------
   Dock mobile : textes en ligne, plus petits, bouton orange
   ---------------------------------------------------------------------------
   L'orange #E8552A est celui de la palette des templates et de la famille
   corail des modèles 3D. Avec la flèche crème il donne 3,56 de contraste :
   au-dessus du seuil de 3:1 exigé pour un élément non textuel.
   ------------------------------------------------------------------------- */
.ktDock{
  padding:10px 10px 10px 16px;
}
.ktDock__texte{
  flex-direction:row;
  align-items:baseline;
  gap:7px;
  flex-wrap:wrap;
}
.ktDock__titre{ font-size:13.5px; }
.ktDock__note{
  font-size:11px;
  /* séparateur discret entre les deux libellés désormais sur la même ligne */
  position:relative;
  padding-left:9px;
}
.ktDock__note::before{
  content:'';
  position:absolute;
  left:0; top:50%;
  transform:translateY(-50%);
  width:3px; height:3px;
  border-radius:50%;
  background:var(--bpMuted);
}

.ktDock__btn{
  width:40px; height:40px;
  border-radius:11px;
  background:#E8552A;
  color:#F6F6F7;
}
.ktDock:hover .ktDock__btn{ background:#D9481E; }
.ktDock__btn svg{ width:18px; height:18px; }

/* Dock : arrondi 10px et plus aucun contour.
   L'anneau venait du second box-shadow (0 0 0 1px) qui simulait une bordure. */
.ktDock{
  border-radius:10px;
  border:0;
  box-shadow:0 10px 30px rgba(36,29,27,.22);
}
.ktDock__texte{ flex-wrap:nowrap; }
.ktDock__btn{ border-radius:9px; }

/* La section FAQ porte id="faq" ET un !important dans le CSS d'origine.
   Entre deux !important c'est la spécificité qui départage : il faut donc
   remonter au niveau ID pour que l'alternance s'applique aussi à elle. */
section#faq.ktBg--blanc{ background:#ffffff !important; }
section#faq.ktBg--creme{ background:#F6F6F7 !important; }

/* ---------------------------------------------------------------------------
   Hub des fonctionnalités : grille au lieu du carrousel
   ---------------------------------------------------------------------------
   Sur le hub il n'y a rien à exclure : les huit cartes s'affichent d'un coup.
   Même habillage que le carrousel, mais en grille et sans défilement.
   ------------------------------------------------------------------------- */
.pqGrid .pqGrid__track{
  display:grid;
  grid-template-columns:1fr;
  gap:34px 24px;
  overflow:visible;
  scroll-snap-type:none;
  max-width:1240px;
  margin:0 auto;
  padding-left:24px;
  padding-right:24px;
}
@media (min-width:640px){ .pqGrid .pqGrid__track{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:980px){
  .pqGrid .pqGrid__track{
    grid-template-columns:repeat(4,1fr);
    padding-left:32px;
    padding-right:32px;
  }
}
.pqGrid .pqCard{ flex:none; }

/* ============================================================================
   HEROS DE TEMPLATES, TARIFS ET FAQ — alignés à gauche, même hauteur
   ----------------------------------------------------------------------------
   Les trois avaient un titre centré, un padding haut différent (176px, 0 et
   128px) et un retrait du fil d'Ariane de 80px. On aligne tout à gauche sur
   la grille et on impose la même réserve haute aux trois.
   ========================================================================== */

/* Fil d'Ariane : moins de retrait au-dessus. Il doit toujours dégager le
   header fixe, on ne descend donc pas sous sa hauteur + une petite marge. */
.ktBreadcrumbs:not(.ktBreadcrumbs--onHero),
.breadcrumbs:not(.breadcrumbs--onHero){
  padding-top:calc(var(--ktTopBarH) + var(--ktNavH) + 4px);
  padding-bottom:0;
}

/* Réserve haute identique sur les trois heros. */
.tplPage,
.tarifsHero,
body.page-faq .ktBenefits:first-of-type{
  padding-top:36px;
}

/* Titres et textes à gauche, sur la colonne de 1240px. */
.tplPage__head,
.tarifsHero__wrap,
.tplPage__title,
.tplPage__lead,
.tarifsHero__title,
.tarifsHero__lead,
.tarifsHero__eyebrow{
  text-align:left;
  margin-left:0;
  margin-right:0;
}
.tplPage__head{ max-width:820px; }
.tarifsHero__wrap{ max-width:1240px; margin:0 auto; }

/* La FAQ : son en-tête de section sert de hero. */
.csSectionHead:first-of-type,
.csSectionHead:first-of-type .csSectionH2,
.csSectionHead:first-of-type .faqEyebrow{
  text-align:left;
}
.csSectionHead:first-of-type{ margin-left:0; margin-right:0; max-width:820px; }

/* Même réserve haute pour les trois heros : ils partaient à 176, 180 et 128px,
   d'où 52px d'écart entre les titres. Valeur réduite et commune. */
.tplPage,
.tarifsHero,
.page-faq-hero{
  padding-top:72px !important;
}

/* =========================================================
   BLOG — liste, catégories, article
   Reprend la grille 1240 et l'alternance de fonds du reste du site.
   ========================================================= */
.blogHero{ padding:72px 0 40px; }
.blogHero__wrap{ max-width:1240px; margin:0 auto; padding:0 24px; }
@media (min-width:980px){ .blogHero__wrap{ padding:0 32px; } }

.blogHero__eyebrow{
  font-size:11px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:#000000; margin:0 0 14px;
}
.blogHero__title{
  font-family:'Google Sans', sans-serif;
  font-size:32px; font-weight:600; letter-spacing:-.025em;
  line-height:1.1; color:#000000; margin:0 0 14px; text-wrap:balance;
}
@media (min-width:720px){ .blogHero__title{ font-size:48px; } }
.blogHero__lead{
  font-size:16px; line-height:1.55; color:#6b5b56;
  margin:0; max-width:620px; letter-spacing:-.005em;
}

.blogCats{ display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; }
.blogCats__item{
  display:inline-flex; align-items:center; height:36px; padding:0 16px;
  border:1px solid rgba(0,0,0,.16); border-radius:999px;
  color:#333333; text-decoration:none; font-size:14px; letter-spacing:-.005em;
  transition:background .16s ease, color .16s ease, border-color .16s ease;
}
.blogCats__item:hover{ background:#ECECEE; }
.blogCats__item.is-active{ background:#000000; border-color:#000000; color:#F6F6F7; }

.blogList{ padding:24px 0 96px; }
.blogList__wrap{ max-width:1240px; margin:0 auto; padding:0 24px; }
@media (min-width:980px){ .blogList__wrap{ padding:0 32px; } }
.blogList__vide{ color:#6b5b56; font-size:16px; padding:40px 0; }

.blogList__grid{ display:grid; grid-template-columns:1fr; gap:24px; }
@media (min-width:720px){ .blogList__grid{ grid-template-columns:repeat(2, 1fr); } }
@media (min-width:1040px){ .blogList__grid{ grid-template-columns:repeat(3, 1fr); } }

.blogCard{ display:flex; }
.blogCard__lien{
  display:flex; flex-direction:column; width:100%;
  background:#ffffff; border:1px solid rgba(0,0,0,.10);
  border-radius:18px; overflow:hidden; text-decoration:none; color:inherit;
  transition:transform .18s ease, box-shadow .18s ease;
}
.blogCard__lien:hover{ transform:translateY(-2px); box-shadow:0 10px 30px rgba(0,0,0,.08); }
.blogCard__media{ aspect-ratio:16 / 9; background:#ECECEE; }
.blogCard__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.blogCard__corps{ padding:20px; display:flex; flex-direction:column; gap:8px; flex:1; }
.blogCard__meta{
  display:flex; gap:10px; align-items:center;
  font-size:11px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:#8a7a74;
}
.blogCard__titre{
  font-family:'Google Sans', sans-serif;
  font-size:19px; font-weight:600; line-height:1.25;
  letter-spacing:-.02em; color:#000000; margin:0;
}
.blogCard__extrait{ font-size:14.5px; line-height:1.55; color:#6b5b56; margin:0; }
.blogCard__date{ margin-top:auto; padding-top:8px; font-size:12.5px; color:#8a7a74; }

/* --- Article --- */
.blogPost{ padding:56px 0 72px; }
.blogPost__wrap{ max-width:760px; margin:0 auto; padding:0 24px; }

.blogPost__meta{
  display:flex; flex-wrap:wrap; gap:12px; align-items:center;
  font-size:12.5px; color:#8a7a74; margin-bottom:16px;
}
.blogPost__cat{
  color:#000000; text-decoration:none; font-weight:600;
  text-transform:uppercase; letter-spacing:.1em; font-size:11px;
}
.blogPost__titre{
  font-family:'Google Sans', sans-serif;
  font-size:32px; font-weight:600; letter-spacing:-.025em;
  line-height:1.12; color:#000000; margin:0 0 16px; text-wrap:balance;
}
@media (min-width:720px){ .blogPost__titre{ font-size:44px; } }
.blogPost__chapo{ font-size:18px; line-height:1.6; color:#333333; margin:0 0 20px; }


.blogPost__banniere{ margin:0 0 32px; }
.blogPost__banniere img{
  width:100%; height:auto; display:block;
  border-radius:18px; background:#ECECEE;
}

/* Le corps est du HTML rédigé à la main : on style les balises, pas des classes. */
.blogPost__corps{ font-size:16.5px; line-height:1.7; color:#333333; }
.blogPost__corps > *:first-child{ margin-top:0; }
.blogPost__corps h2{
  font-family:'Google Sans', sans-serif;
  font-size:26px; font-weight:600; letter-spacing:-.02em;
  color:#000000; margin:40px 0 14px; line-height:1.2;
}
.blogPost__corps h3{
  font-family:'Google Sans', sans-serif;
  font-size:20px; font-weight:600; letter-spacing:-.015em;
  color:#000000; margin:28px 0 10px;
}
.blogPost__corps p{ margin:0 0 18px; }
.blogPost__corps ul, .blogPost__corps ol{ margin:0 0 18px; padding-left:22px; }
.blogPost__corps li{ margin-bottom:8px; }
.blogPost__corps a{ color:#000000; text-decoration:underline; text-underline-offset:2px; }
.blogPost__corps img{ max-width:100%; height:auto; border-radius:14px; margin:24px 0; }
.blogPost__corps blockquote{
  margin:24px 0; padding:16px 20px;
  border-left:3px solid #000000; background:#F6F6F7;
  border-radius:0 12px 12px 0; color:#000000;
}
/* Les tableaux d'un article peuvent être larges : ils défilent dans leur boîte
   au lieu de faire déborder la page entière. */
.blogPost__corps table{ display:block; overflow-x:auto; width:100%; border-collapse:collapse; margin:24px 0; }
.blogPost__corps th, .blogPost__corps td{
  border:1px solid rgba(0,0,0,.14); padding:10px 12px;
  font-size:14.5px; line-height:1.5; text-align:left; vertical-align:top;
}
/* Seuls les en-tetes restent d'un bloc : mettre les cellules en nowrap
   rendait illisible tout tableau contenant des phrases, et forcait un
   defilement horizontal sur la moindre comparaison. */
.blogPost__corps th{ white-space:nowrap; }
@media (max-width:560px){ .blogPost__corps th{ white-space:normal; } }
.blogPost__corps tbody tr:nth-child(even){ background:rgba(0,0,0,.025); }
.blogPost__corps th{ background:#F6F6F7; font-weight:600; color:#000000; }

.blogProches{ padding:64px 0 96px; }
.blogProches__wrap{ max-width:1240px; margin:0 auto; padding:0 24px; }
@media (min-width:980px){ .blogProches__wrap{ padding:0 32px; } }
.blogProches__titre{
  font-family:'Google Sans', sans-serif;
  font-size:26px; font-weight:600; letter-spacing:-.02em;
  color:#000000; margin:0 0 24px;
}

/* (Bloc retiré : ces sections doublaient la gouttière déjà posée par leur
   wrap — 24 + 24 = 48px — alors que le header pose 24px. L'alignement de
   référence est celui du header, pas celui de templates/tarifs qui était
   lui-même décalé.) */

/* =========================================================
   Correctifs mobile
   ========================================================= */
@media (max-width:979.98px){

  /* --- Hero de l'accueil ---
     La règle pleine largeur (100vw + marges négatives) faisait sortir l'objet
     du conteneur : il démarrait à x=0 alors que le titre est à x=24, d'où
     l'impression de décalage, et occupait 390px contre 342 pour le texte.
     On la neutralise pour ce seul hero — les pages cluster portent en plus
     .ktExp--cluster et gardent donc le comportement pleine largeur. */
  .ktExp--first:not(.ktExp--cluster) .ktExp__visual .kt3d{
    width:100%;
    max-width:320px;
    margin-left:auto;
    margin-right:auto;
  }
  .ktExp--first:not(.ktExp--cluster) .kt3d__legende{ text-align:center; }

  /* --- Accordéons du pied de page ---
     Les titres reprenaient le style des libellés de colonne du desktop :
     11px en capitales espacées, illisible en en-tête d'accordéon. */
  .ktFoot__colToggle{
    padding:12px 0;
    min-height:46px;          /* reste au-dessus des 44px de cible tactile */
  }
  /* .ktFoot__col h5 vaut (0,1,1) : une classe seule (0,1,0) perdait.
     On passe par le parent pour atteindre (0,2,0), sans !important. */
  .ktFoot__col .ktFoot__colTitle{
    font-family:'Google Sans', sans-serif;
    font-size:15px;
    font-weight:500;
    letter-spacing:-.01em;
    text-transform:none;
    /* 0.55 d'opacité convenait à un libellé de colonne ; en en-tête
       d'accordéon le titre doit primer sur les liens qu'il ouvre. */
    color:rgba(246,246,247,.92);
    margin:0;
  }
  .ktFoot__col.is-open .ktFoot__colLinks{ padding-bottom:12px; }
}

/* =========================================================
   ALIGNEMENT SUR LE HEADER
   ---------------------------------------------------------
   Référence : .ktNav = padding 32px (24 en mobile), .ktNav__wrap = 1240px
   SANS padding. Le contenu du header fait donc 1240px de large, à x=100
   sur un écran de 1440.

   Ces conteneurs-ci portent au contraire leur gouttière EN DEDANS d'un
   max-width de 1240 : leur contenu ne faisait que 1176px et démarrait à
   x=132, soit 32px plus à droite que le logo. On élargit la boîte de deux
   fois la gouttière pour que ce soit bien le CONTENU qui mesure 1240.

   En mobile le max-width ne borne rien (l'écran est plus étroit), la
   gouttière de 24px du wrap suffit et tombe déjà juste : rien à corriger.
   ========================================================= */
@media (min-width:980px){
  .csWrap,
  .csSection--dark .csWrap,
  #faq .csWrap,
  .blogHero__wrap,
  .blogList__wrap,
  .blogProches__wrap{
    max-width:calc(1240px + 64px);
  }
}

/* =========================================================
   HEADER — état « survolé au-dessus d'une section brune »
   ---------------------------------------------------------
   .ktNav.is-dark .ktNav__cta (crème) et .ktNav:hover .ktNav__cta (brun)
   valent tous deux (0,2,0) : à spécificité égale c'est le dernier écrit qui
   gagne, et c'est is-dark. Résultat, au survol le bandeau passait bien en
   blanc mais le bouton gardait son texte et son contour crème — invisible.
   On combine les deux classes pour monter à (0,3,0) et trancher.
   ========================================================= */
@media (min-width:820px){
  .ktNav.is-dark:hover .ktNav__cta,
  .ktNav.is-dark.is-mega-open .ktNav__cta,
  .ktNav.is-top-overlay:hover .ktNav__cta,
  .ktNav.is-top-overlay.is-mega-open .ktNav__cta{
    color:var(--bpInk);
    border-color:rgba(0,0,0,.34);
  }
  .ktNav.is-dark:hover .ktNav__cta:hover,
  .ktNav.is-dark.is-mega-open .ktNav__cta:hover,
  .ktNav.is-top-overlay:hover .ktNav__cta:hover,
  .ktNav.is-top-overlay.is-mega-open .ktNav__cta:hover{
    background:rgba(0,0,0,.07);
    border-color:var(--bpInk);
    color:var(--bpInk);
  }
}

/* .ktStats pose sa propre gouttière (24px, 32 au-delà de 980) comme le fait
   .ktNav : son conteneur ne doit donc pas en rajouter une. Sans ça le contenu
   partait à 48px en mobile au lieu des 24px du header. */
.ktStats .csWrap{ max-width:1240px; padding:0; }

/* .ktBenefits pose déjà sa gouttière et .ktBenefits__wrap borne à 1240 :
   l'en-tête ajoutait une seconde gouttière par-dessus, ce qui décalait le
   titre de 32px (24 en mobile) vers la droite par rapport au header. */
.ktBenefits__head{ padding-left:0; padding-right:0; }

/* =========================================================
   SÉLECTEUR DE LANGUE (header)
   ---------------------------------------------------------
   Icône globe + code de langue, qui déroule la liste au clic.
   Les couleurs suivent le même jeu d'états que le reste du header :
   crème sur brun ou sur bannière, brun sur fond clair.
   ========================================================= */
.ktLang{ position:relative; display:inline-flex; }

.ktLang__btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:34px;
  padding:0 10px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:inherit;
  font-family:'Google Sans', sans-serif;
  font-size:13.5px;
  font-weight:500;
  letter-spacing:-.005em;
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.ktLang__btn svg{ width:17px; height:17px; flex:0 0 auto; }
.ktLang__btn:hover{ background:rgba(0,0,0,.07); }
.ktNav.is-dark .ktLang__btn:hover,
.ktNav.is-top-overlay .ktLang__btn:hover{ background:rgba(246,246,247,.14); }
.ktNav.is-dark:hover .ktLang__btn:hover,
.ktNav.is-top-overlay:hover .ktLang__btn:hover{ background:rgba(0,0,0,.07); }

/* --- Liste déroulante --- */
.ktLang__menu{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  min-width:214px;
  background:#ffffff;
  border:1px solid rgba(0,0,0,.10);
  border-radius:16px;
  box-shadow:0 18px 44px rgba(0,0,0,.14);
  padding:8px;
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
  z-index:60;
}
.ktLang.is-open .ktLang__menu{ opacity:1; visibility:visible; transform:translateY(0); }

.ktLang__titre{
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#8a7a74;
  padding:6px 10px 8px;
}
.ktLang__item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 10px;
  border-radius:10px;
  color:#000000;
  text-decoration:none;
  font-size:14px;
  letter-spacing:-.005em;
}
.ktLang__item:hover{ background:#F6F6F7; }
.ktLang__item.is-active{ background:#ECECEE; font-weight:500; }
.ktLang__drapeau{ font-size:16px; line-height:1; }
.ktLang__nom{ flex:1; }
.ktLang__check{ width:15px; height:15px; color:#000000; }
/* Langue pas encore traduite pour cette page : le lien reste actif mais
   annonce qu'il mènera à l'accueil de la langue, pas à la page équivalente. */
.ktLang__bientot{
  font-size:10.5px;
  color:#8a7a74;
  border:1px solid rgba(0,0,0,.16);
  border-radius:999px;
  padding:2px 7px;
}

/* --- Mobile : feuille collée en bas, comme la fenêtre de partage --- */
@media (max-width:819.98px){
  .ktLang{ position:static; }
  .ktLang__code{ display:none; }

  .ktLang__menu{
    position:fixed;
    top:auto;
    left:0;
    right:0;
    bottom:0;
    min-width:0;
    border-radius:20px 20px 0 0;
    border:0;
    padding:10px 16px calc(18px + env(safe-area-inset-bottom));
    transform:translateY(100%);
    transition:transform .26s cubic-bezier(.32,.72,0,1), visibility .26s;
  }
  .ktLang.is-open .ktLang__menu{ transform:translateY(0); }
  .ktLang__titre{ text-align:center; padding:10px 0 12px; }
  .ktLang__item{ padding:13px 12px; font-size:15.5px; }
}

/* =========================================================
   POP-UPS (langue, cookies)
   ---------------------------------------------------------
   Reprend l'habillage de l'ancien pop-up d'essai : feuille collée en bas
   sur mobile, boîte centrée en desktop. La photo est remplacée par un
   objet 3D, et les coins hauts gardent l'arrondi habituel du site.
   ========================================================= */
.ktPop{ position:fixed; inset:0; z-index:140; visibility:hidden; }
.ktPop.is-open{ visibility:visible; }

.ktPop__backdrop{
  position:absolute; inset:0;
  background:rgba(36,29,27,.48);
  opacity:0; transition:opacity .24s ease;
}
.ktPop.is-open .ktPop__backdrop{ opacity:1; }

/* La feuille descend sous le bord bas de l'écran : au rebond du défilement
   iOS, aucun contenu de la page ne réapparaît sous elle. */
.ktPop__sheet{
  position:absolute; left:0; right:0; bottom:-40px;
  padding-bottom:calc(40px + env(safe-area-inset-bottom));
  background:#ffffff;
  border-radius:26px 26px 0 0;
  overflow:hidden;
  transform:translateY(100%);
  transition:transform .28s cubic-bezier(.32,.72,0,1);
  max-height:92dvh; overflow-y:auto;
}
.ktPop.is-open .ktPop__sheet{ transform:translateY(0); }

@media (min-width:720px){
  .ktPop__sheet{
    left:50%; right:auto; bottom:50%;
    width:420px;
    border-radius:26px;
    transform:translate(-50%,50%) scale(.96);
    opacity:0;
    transition:transform .2s ease, opacity .2s ease;
  }
  .ktPop.is-open .ktPop__sheet{ transform:translate(-50%,50%) scale(1); opacity:1; }
}

/* L'objet remplace la photo : fond crème foncé, pas de rognage. */
.ktPop__media{
  height:190px;
  background:#ECECEE;
  border-radius:26px 26px 0 0;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.ktPop__media .kt3d{ width:100%; height:190px; aspect-ratio:auto; }
.ktPop__media .kt3d__poster{ width:100%; height:190px; object-fit:contain; }
@media (min-width:720px){ .ktPop__media{ border-radius:26px 26px 0 0; } }

.ktPop__close{
  position:absolute; top:12px; right:12px; z-index:2;
  width:34px; height:34px;
  display:grid; place-items:center;
  border:0; border-radius:999px;
  background:rgba(36,29,27,.42); color:#F6F6F7;
  cursor:pointer;
}
.ktPop__close:hover{ background:rgba(36,29,27,.62); }
.ktPop__close svg{ width:17px; height:17px; }

.ktPop__body{ padding:22px 22px 24px; }
.ktPop__title{
  font-family:'Google Sans', sans-serif;
  font-size:21px; font-weight:600; letter-spacing:-.02em;
  color:#000000; margin:0 0 8px;
}
.ktPop__text{ font-size:14.5px; line-height:1.6; color:#6b5b56; margin:0 0 18px; }

.ktPop__cta{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:48px;
  border:0; border-radius:999px;
  background:#000000; color:#F6F6F7;
  font-family:'Google Sans', sans-serif; font-size:14.5px; font-weight:500;
  text-decoration:none; cursor:pointer;
}
.ktPop__cta:hover{ background:#1a1a1a; }

.ktPop__ghost{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:44px; margin-top:8px;
  border:1px solid rgba(0,0,0,.20); border-radius:999px;
  background:transparent; color:#000000;
  font-family:'Google Sans', sans-serif; font-size:14px; cursor:pointer;
}
.ktPop__ghost:hover{ background:#F6F6F7; }

.ktPop__lien{
  display:block; text-align:center; margin-top:12px;
  font-size:12.5px; color:#8a7a74; text-decoration:underline; text-underline-offset:2px;
}

/* =========================================================
   Sous-menus mobiles (Fonctionnalités, Pour qui)
   ---------------------------------------------------------
   space-between répartissait icône, libellé et flèche sur toute la largeur :
   le texte se retrouvait au milieu de l'écran, détaché de son icône.
   On colle le libellé à l'icône et on renvoie la flèche à droite.
   ========================================================= */
@media (max-width:819.98px){
  .ktNavMobile__link--icon{
    justify-content:flex-start;
    gap:14px;
  }
  /* La flèche est le dernier enfant : elle absorbe seule l'espace restant. */
  .ktNavMobile__link--icon > :last-child{
    margin-left:auto;
    flex:0 0 auto;
  }
  /* Le libellé prend la place qu'il lui faut sans repousser la flèche. */
  .ktNavMobile__link--icon > .ktNavMobile__label{
    flex:0 1 auto;
    text-align:left;
  }

  /* L'icône héritait de flex:1 1 0% et occupait 179px : c'est elle qui
     repoussait le libellé au milieu de l'écran. Plus de conteneur ni de
     boîte fixe — le SVG seul donne la taille, le libellé suit aussitôt. */
  /* .ktNavMobile__link > span:first-child{flex:1} vaut (0,2,1) : il visait le
     libellé mais attrapait l'icône, premier span du lien. On monte à (0,3,1)
     en qualifiant la balise et la classe, plutôt que d'ajouter un !important. */
  .ktNavMobile__link--icon > span.ktNavMobile__icon:first-child{
    flex:0 0 auto;
    width:auto;
    height:auto;
    padding:0;
    background:none;
  }
  /* Le libellé reprend l'espace : la flèche est repoussée à droite d'elle-même. */
  .ktNavMobile__link--icon > .ktNavMobile__label{ flex:1 1 auto; }
}

/* =========================================================
   Objets 3D des heros sur mobile
   ---------------------------------------------------------
   Une règle posait width:100vw avec des marges négatives : l'objet démarrait
   à x=0 alors que le titre du hero est à x=24, d'où le décalage visible sur
   toutes les pages. On le ramène dans le conteneur, centré et borné, pour
   qu'il ne mange plus la largeur du texte.
   ========================================================= */
@media (max-width:979.98px){
  .ktExp__visual .kt3d,
  .ktVisio__mock.kt3d{
    width:100%;
    max-width:320px;
    margin-left:auto;
    margin-right:auto;
  }
  .ktExp__visual .kt3d__legende{ text-align:center; }
}

/* L'ombre du dock le détachait du bas de l'écran sans rien apporter :
   la pastille blanche se lit déjà seule sur le contenu. */
.ktDock{ box-shadow:none; }

/* Tiroir mobile fermé : il restait à 20px du bord droit au lieu d'être
   entièrement hors écran, ce qui créait un défilement horizontal sur les
   pages assez larges pour le révéler (/pour-qui). visibility:hidden le
   retire du calcul de la zone de défilement sans toucher à l'animation. */
.ktNavMobile:not(.is-open){
  visibility:hidden;
  pointer-events:none;
}
.ktNavMobile.is-open{ visibility:visible; pointer-events:auto; }

/* Sur mobile la rangée de cartes sombres est plus large que l'écran et
   provoquait un défilement horizontal de toute la page. Elle défile
   désormais dans sa propre boîte : aucune carte n'est perdue. */
@media (max-width:819.98px){
  .ktCrmCards__grid{
    overflow-x:auto;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .ktCrmCards__grid::-webkit-scrollbar{ display:none; }
  .csSection--dark{ overflow-x:clip; }
}


/* Dock mobile pendant l'affichage d'un pop-up : il glisse vers le bas au lieu
   de flotter au-dessus du fond assombri, et remonte à la fermeture. */
.ktDock{ transition:transform .26s cubic-bezier(.32,.72,0,1), opacity .2s ease; }
body.kt-pop-ouvert .ktDock{
  transform:translateY(140%);
  opacity:0;
  pointer-events:none;
}

/* =========================================================
   Sections brunes collantes — contenu remonté
   ---------------------------------------------------------
   .csSection--dark pose déjà 120px de padding ; .ktCrmCards en rajoutait
   128 par-dessus, ce qui poussait le titre à 264px du haut et laissait
   322px de vide en bas. Comme la section est sticky et que la suivante lui
   passe dessus, ce vide n'était jamais vu — seul le décalage l'était.
   ========================================================= */
@media (min-width:980px){
  .ktCrmCards{ padding-top:40px; padding-bottom:40px; }
}

/* =========================================================
   En-tête de la section Statistiques
   ---------------------------------------------------------
   .csSectionHead passe en deux colonnes au-delà de 768px : l'intitulé et le
   titre se retrouvaient côte à côte, le titre rejeté au milieu de la page.
   Ici on veut l'intitulé AU-DESSUS du titre, tous deux à gauche.
   ========================================================= */
.ktStats .csSectionHead{
  grid-template-columns:1fr;
  gap:12px;
  align-items:start;
  text-align:left;
}

/* =========================================================
   FAQ — un seul style sur tout le site
   ---------------------------------------------------------
   La section Statistiques de l'accueil avait reçu une pastille de 36px
   bordée et un intitulé en casse normale ; les autres blocs de questions
   gardaient une pastille nue de 18px et un intitulé en capitales. On
   généralise le premier style, qui est celui retenu.
   ========================================================= */
.faqQ-plus{
  width:36px;
  height:36px;
  flex:0 0 36px;
  border:1px solid rgba(0,0,0,.28);
  border-radius:999px;
  display:grid;
  place-items:center;
  color:#000000;
  transition:background .16s ease, border-color .16s ease, color .16s ease;
}
.faqItem.open .faqQ-plus{
  background:#000000;
  border-color:#000000;
  color:#F6F6F7;
}

.faqEyebrow{
  font-family:'Google Sans', sans-serif;
  font-size:16px;
  font-weight:400;
  letter-spacing:-.01em;
  text-transform:none;
  color:#6b5b56;
}

/* Les blocs produits par cluster_render_faq portent id="faq", et la règle
   #faq .faqQ-plus (1,1,0) pose background et border en !important. Le
   conteneur est un <div>, pas une <section> : on ajoute .faqItem au
   sélecteur pour atteindre (1,2,0) quelle que soit la balise. */
#faq .faqItem .faqQ-plus{
  width:36px !important;
  height:36px !important;
  flex:0 0 36px !important;
  border:1px solid rgba(0,0,0,.28) !important;
  border-radius:999px !important;
  background:transparent !important;
  color:#000000 !important;
}
/* border complet, pas seulement border-color : la règle concurrente pose
   border:0 !important, qui remet l'épaisseur à zéro. */
#faq .faqItem.open .faqQ-plus{
  background:#000000 !important;
  border:1px solid #000000 !important;
  color:#F6F6F7 !important;
  transform:rotate(90deg);
}
#faq .faqEyebrow{
  font-size:16px;
  font-weight:400;
  letter-spacing:-.01em;
  text-transform:none;
  color:#6b5b56;
}

/* ================================================================
   POP-UP CONNEXION SANS MOT DE PASSE (code email / Google)
   ================================================================ */
.ktAuth__google{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; height:46px;
  border:1px solid #DEDEE1; border-radius:999px;
  background:#ffffff; color:#000000;
  font-family:'Google Sans', sans-serif; font-size:14.5px; font-weight:600;
  text-decoration:none;
  transition:background .15s ease, border-color .15s ease;
}
.ktAuth__google:hover{ background:#F6F6F7; border-color:#D5D5D9; }
.ktAuth__google svg{ width:18px; height:18px; flex:0 0 18px; }

.ktAuth__sep{
  display:flex; align-items:center; gap:12px;
  margin:14px 0; color:#6b5b56; font-size:12.5px;
}
.ktAuth__sep::before, .ktAuth__sep::after{ content:''; flex:1; height:1px; background:#DEDEE1; }

.ktAuth__input{
  width:100%; height:46px; padding:0 16px;
  border:1px solid #DEDEE1; border-radius:12px;
  background:#F6F6F7; color:#000000;
  font-family:'Google Sans', sans-serif; font-size:16px;
  margin:0 0 10px; outline:none;
  transition:border-color .15s ease, background .15s ease;
}
.ktAuth__input:focus{ border-color:#000000; background:#ffffff; }
.ktAuth__input--code{
  text-align:center; font-size:22px; letter-spacing:.35em;
  font-feature-settings:"tnum";
}
.ktAuth__err{ margin:10px 0 0; font-size:13.5px; line-height:1.45; color:#b3261e; }

#ktPopAuth .ktPop__cta{ width:100%; }
#ktPopAuth form{ margin:0; }
.ktPop__lien--btn{ background:none; border:0; cursor:pointer; font:inherit; }

/* ================================================================
   POP-UP COOKIES : carte discrète en bas à droite sur desktop.
   La page reste entièrement utilisable (pas de fond assombri).
   ================================================================ */
@media (min-width:720px){
  #ktPopCookies{ pointer-events:none; }
  #ktPopCookies .ktPop__backdrop{ display:none; }
  #ktPopCookies .ktPop__sheet{
    pointer-events:auto;
    position:fixed; left:auto; top:auto; right:24px; bottom:24px;
    width:380px; max-width:calc(100vw - 48px);
    border-radius:22px;
    box-shadow:0 24px 64px -20px rgba(36,29,27,.45);
    transform:translateY(16px); opacity:0;
    transition:transform .35s cubic-bezier(.32,.72,0,1), opacity .35s ease;
  }
  #ktPopCookies.is-open .ktPop__sheet{ transform:none; opacity:1; }
  #ktPopCookies .ktPop__media{ display:none; }
}

/* Pop-up connexion : pas de visuel, feuille placée plus haut sur desktop */
@media (min-width:720px){
  #ktPopAuth .ktPop__sheet{
    bottom:auto; top:88px;
    transform:translateX(-50%) translateY(8px) scale(.98);
  }
  #ktPopAuth.is-open .ktPop__sheet{ transform:translateX(-50%) scale(1); }
}

/* ================================================================
   TYPOGRAPHIE — Une seule échelle de H2 de section sur tout le site,
   alignée sur la référence .ktVisio__title (28px mobile, 40px desktop).
   Les titres d'interface (pop-ups, tiroir mobile, cartes de prix)
   ne sont pas des titres de section et gardent leur échelle.
   ================================================================ */
.ktCrmCards__title,
.tarifsFaq__title,
.pqCarousel__title,
.ktFoot__leadTitle,
.blogProches__titre{
  font-size:28px;
}
@media (min-width:720px){
  .ktCrmCards__title,
  .tarifsFaq__title,
  .pqCarousel__title,
  .ktFoot__leadTitle,
  .blogProches__titre{
    font-size:40px;
  }
}

/* H1 de l'accueil : un quart plus grand (54→68px desktop, 34→42px mobile) */
.ktExp--first .ktExp__title{ font-size:42px; }
@media (min-width:720px){
  .ktExp--first .ktExp__title{ font-size:68px; }
}

/* ================================================================
   ÉCHELLE DES H1 — DESKTOP
   ----------------------------------------------------------------
   Les H1 avaient dérivé vers le très grand (jusqu'à 68px) et prenaient
   toute la hauteur utile du premier écran. On redescend d'environ un
   cinquième : 52px pour l'accueil, 40px pour les pages intérieures.
   Le mobile n'est pas touché — il était déjà à la bonne échelle.
   Les H2 de section restent à 40px : le H1 s'en distingue par sa
   position et son interlignage, plus par une différence de taille.
   ================================================================ */
@media (min-width:720px){
  .ktExp--first .ktExp__title{ font-size:52px; }
  .ktExp--cluster .ktExp__title,
  .ktExp--cluster .ktHero__title{ font-size:36px; }
  .ktHero__title{ font-size:40px; }
  .blogHero__title{ font-size:40px; }
  .blogPost__titre{ font-size:38px; }
}
@media (min-width:1200px){
  .ktExp--cluster .ktExp__title,
  .ktExp--cluster .ktHero__title{ font-size:40px; }
  .ktHero__title{ font-size:46px; }
}

/* ================================================================
   HERO DE L'ACCUEIL — VERSION MARRON
   ----------------------------------------------------------------
   La première section de l'accueil passe du crème foncé au brun de
   la charte (#000000), comme les sections .csSection--dark. Le texte
   s'inverse en crème. Le bandeau de navigation n'a rien à savoir de
   ce changement : il lit la couleur calculée de la section sous lui
   et bascule tout seul en version claire.
   L'objet 3D et son poster sont sur fond transparent, ils se posent
   donc directement sur le brun.
   ================================================================ */
section.ktExp--first{
  background:var(--bpForest);
  color:var(--bpOnAccent);
}
.ktExp--first .ktExp__title{ color:var(--bpOnAccent); }
.ktExp--first .ktExp__lead{ color:rgba(246,246,247,.82); }
.ktExp--first .ktExp__eyebrow{ color:rgba(246,246,247,.62); }
.ktExp--first .kt3d__legende{ color:rgba(246,246,247,.55); }

/* La page cluster réutilise .ktExp--first pour son hero blanc : elle ne doit
   pas hériter du brun de l'accueil.
   Le titre est repris avec une spécificité plus forte (0,3,1) et non à égalité :
   à égalité c'est l'ordre du fichier qui tranche, et la règle brune ci-dessus
   l'emportait — titre crème sur fond blanc, invisible sur toutes les pages
   cluster (fonctionnalités, conformité, comparatifs, menu-qr, pour-qui). */
section.ktExp--first.ktExp--cluster{
  background:#ffffff;
  color:var(--bpInk);
}
section.ktExp--first.ktExp--cluster .ktExp__title,
section.ktExp--first.ktExp--cluster .ktHero__title{ color:var(--bpInk); }
.ktExp--cluster .ktExp__lead{ color:var(--bpSoft); }
.ktExp--cluster .ktExp__eyebrow{ color:var(--bpMuted); }
.ktExp--cluster .kt3d__legende{ color:var(--bpMuted); }

/* ============================================================================
   BLOG — GABARIT D'ARTICLE
   ----------------------------------------------------------------------------
   Trois bandes : un hero crème (texte à gauche, objet 3D à droite, fil d'Ariane
   inclus dans la bande), le corps en deux colonnes (sommaire collant à gauche,
   article à droite), puis les articles proches illustrés par leurs objets 3D.
   Sous 980px tout repasse en une colonne et le sommaire devient un bloc dépliant
   posé avant l'article — un sommaire collant sur mobile mange l'écran.
   ========================================================================== */

/* --- Bande du hero : le fil d'Ariane rendu par le header en fait partie ---
   Bannière brune, texte crème. Le bandeau de navigation n'a rien à savoir de
   ce choix : il relève la couleur calculée de la tranche sous lui (.blogHead
   et .ktBreadcrumbs sont dans sa liste de sondage) et bascule tout seul en
   version claire, sans démarcation au-dessus de la bannière. */
/* Une seule source pour la colonne de gauche : le sommaire, le décalage du
   fil d'Ariane et celui du titre en sortent tous, donc les trois tombent sur
   la même verticale quelle que soit la largeur. */
body.page-blog-article{
  --blogGouttiere:200px;   /* largeur du sommaire */
  --blogEcart:40px;        /* espace entre sommaire et article */
}
@media (min-width:1200px){
  body.page-blog-article{ --blogGouttiere:248px; --blogEcart:64px; }
}

body.page-blog-article .ktBreadcrumbs:not(.ktBreadcrumbs--onHero){
  background:var(--bpForest);
  padding-bottom:0;
}
body.page-blog-article .ktBreadcrumbs__link{ color:rgba(246,246,247,.68); }
body.page-blog-article .ktBreadcrumbs__link:hover{ color:var(--bpOnAccent); }
body.page-blog-article .ktBreadcrumbs__sep{ color:rgba(246,246,247,.38); }
body.page-blog-article .ktBreadcrumbs__current{ color:rgba(246,246,247,.85); }

.blogHead{
  background:var(--bpForest);
  color:var(--bpOnAccent);
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  padding:12px 24px 40px;
  position:relative;
  z-index:2;
  overflow:hidden;
}
@media (min-width:980px){ .blogHead{ padding:16px 32px 0; } }

.blogHead__wrap{
  max-width:1240px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
  align-items:end;
}
@media (min-width:980px){
  /* Le titre doit tomber sur la même verticale que le texte de l'article :
     une première colonne vide de la largeur du sommaire + sa gouttière
     (248 + 64) aligne la bannière sur le corps, en dessous. */
  /* Le texte démarre au bord de la bande, comme le fil d'Ariane au-dessus.
     Une colonne vide alignée sur le sommaire avait été tentée : elle alignait
     le titre sur le texte de l'article, mais laissait un vide à gauche qui
     faisait lire la bannière comme centrée. */
  .blogHead__wrap{
    grid-template-columns:minmax(0, 1.15fr) minmax(0, .85fr);
    gap:0 var(--blogEcart);
  }
  .blogHead__texte{ align-self:center; padding:56px 0 64px; }
}
.blogHead__texte{ max-width:640px; }

.blogHead__meta{
  display:flex; flex-wrap:wrap; gap:12px; align-items:center;
  font-size:12.5px; color:rgba(246,246,247,.60); margin-bottom:16px;
}
.blogHead__meta time::before,
.blogHead__meta span::before{ content:"·"; margin-right:12px; color:rgba(246,246,247,.34); }
.blogHead__meta .blogPost__cat::before{ content:none; }
.blogHead .blogPost__cat{ color:rgba(246,246,247,.85); }
.blogHead .blogPost__cat:hover{ color:var(--bpOnAccent); }

/* Le hero porte le h1 : il ne reprend pas la taille réduite des titres de liste. */
.blogHead .blogPost__titre{ margin:0 0 16px; color:var(--bpOnAccent); }
.blogHead .blogPost__chapo{
  font-size:17px; line-height:1.6; color:rgba(246,246,247,.78); margin:0;
  max-width:52ch;
}

.blogHead__visuel{ display:flex; align-items:flex-end; justify-content:center; }
.blogHead__visuel .kt3d{ max-width:440px; width:100%; margin:0; }
@media (max-width:979.98px){
  .blogHead__visuel{ order:-1; }
  .blogHead__visuel .kt3d{ max-width:300px; }
}

/* --- Corps : sommaire + article --------------------------------------- */
.blogPost{ padding:48px 0 72px; }
.blogPost__wrap{
  max-width:1240px;
  margin:0 auto;
  padding:0 24px;
  display:grid;
  grid-template-columns:1fr;
  gap:32px;
}
@media (min-width:980px){
  .blogPost__wrap{
    padding:0 32px;
    grid-template-columns:var(--blogGouttiere) minmax(0, 1fr);
    gap:var(--blogEcart);
    align-items:start;
  }
}
/* La colonne de lecture garde une longueur de ligne confortable même quand
   la grille lui laisse toute la largeur. */
.blogPost__colonne{ max-width:760px; min-width:0; }

.blogSom__boite{
  border:1px solid var(--bpLine);
  border-radius:16px;
  background:var(--bpCard);
  padding:18px 18px 20px;
}
@media (min-width:980px){
  .blogSom{ position:sticky; top:calc(var(--ktNavH) + 24px); }
  .blogSom__boite{
    /* Un sommaire long ne doit pas dépasser l'écran : il défile chez lui. */
    max-height:calc(100vh - var(--ktNavH) - 48px);
    overflow-y:auto;
    background:transparent;
    border:0;
    border-left:1px solid var(--bpLine-2);
    border-radius:0;
    padding:2px 0 2px 20px;
  }
}
.blogSom__titre{
  font-family:'Google Sans', sans-serif;
  font-size:11px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--bpMuted);
  margin:0 0 12px;
}
.blogSom__liste{ list-style:none; margin:0; padding:0; }
.blogSom__item{ margin:0; }
.blogSom__item a{
  display:block;
  padding:6px 0;
  font-size:14px;
  line-height:1.4;
  color:var(--bpSoft);
  text-decoration:none;
  border-left:2px solid transparent;
  margin-left:-20px;
  padding-left:18px;
  transition:color .15s ease, border-color .15s ease;
}
.blogSom__item--n3 a{ font-size:13.5px; padding-left:32px; color:var(--bpMuted); }
.blogSom__item a:hover{ color:var(--bpInk); }
.blogSom__item a.is-active{ color:var(--bpInk); font-weight:600; border-left-color:#E8552A; }
@media (max-width:979.98px){
  .blogSom__item a{ margin-left:0; padding-left:0; border-left:0; }
  .blogSom__item--n3 a{ padding-left:14px; }
  .blogSom__item a.is-active{ color:#E8552A; }
}

/* Une ancre cliquée ne doit pas se garer sous le bandeau fixe. */
.blogPost__corps h2,
.blogPost__corps h3{ scroll-margin-top:calc(var(--ktNavH) + 24px); }

/* --- Listes à puces avec icône ---------------------------------------- */
/* Chevron corail dessiné en CSS : pas d'image à charger, et il suit la
   couleur du texte sur les fonds bruns comme sur les fonds clairs. */
.blogPost__corps ul{ list-style:none; padding-left:0; }
.blogPost__corps ul > li{
  position:relative;
  padding-left:30px;
  margin-bottom:10px;
}
.blogPost__corps ul > li::before{
  content:"";
  position:absolute;
  left:0; top:.55em;
  width:16px; height:16px;
  margin-top:-8px;
  border-radius:50%;
  background:rgba(232,85,42,.12);
}
/* Le chevron est tracé par deux bordures d'une boîte pivotée : son encre est
   en bas à droite de la boîte, il faut donc la remonter d'un poil moins que
   la moitié pour qu'elle tombe au centre optique de la pastille. */
.blogPost__corps ul > li::after{
  content:"";
  position:absolute;
  left:5.5px; top:.55em;
  width:5px; height:8px;
  margin-top:-3px;
  border:solid #E8552A;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
  transform-origin:center;
}
/* Les listes numérotées gardent leurs chiffres. */
.blogPost__corps ol{ padding-left:22px; }
.blogPost__corps ol > li{ margin-bottom:10px; }
.blogPost__corps ol > li::before,
.blogPost__corps ol > li::after{ content:none; }

/* --- Encadré « note » orange ------------------------------------------ */
/* À écrire dans le contenu : <div class="note">…</div>, avec un <strong> en
   première ligne pour le titre. Le corail sert d'accent, jamais de fond plein :
   du texte long sur aplat orange fatigue et sort de la charte brun/crème. */
.blogPost__corps .note{
  position:relative;
  margin:28px 0;
  padding:18px 20px 18px 52px;
  background:rgba(232,85,42,.06);
  border:1px solid rgba(232,85,42,.18);
  border-left:3px solid #E8552A;
  border-radius:0 14px 14px 0;
  color:var(--bpInk-2);
  font-size:15.5px;
  line-height:1.65;
}
.blogPost__corps .note::before{
  content:"!";
  position:absolute;
  left:18px; top:20px;
  width:20px; height:20px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:#E8552A;
  color:#F6F6F7;
  font-family:'Google Sans', sans-serif;
  font-size:13px; font-weight:700; line-height:1;
}
.blogPost__corps .note > *:first-child{ margin-top:0; }
.blogPost__corps .note > *:last-child{ margin-bottom:0; }
.blogPost__corps .note strong{ color:var(--bpInk); }
/* Une puce dans une note reprend l'accent, pas le fond blanc de la note. */
.blogPost__corps .note ul > li::before{ background:rgba(232,85,42,.16); }

/* --- Articles proches, illustrés par leurs objets 3D ------------------- */
.blogProches--3d{ background:var(--bpCardSoft); padding:64px 0 88px; }
.blogProches__tete{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:28px;
}
.blogProches--3d .blogProches__titre{ margin:0; }
.blogProches__tout{
  font-size:14px; color:var(--bpSoft); text-decoration:none;
  border-bottom:1px solid var(--bpLineStrong); padding-bottom:2px;
}
.blogProches__tout:hover{ color:var(--bpInk); border-bottom-color:var(--bpInk); }

.blogCard--3d .blogCard__lien{
  background:var(--bpBg);
  border-color:var(--bpLine);
  border-radius:20px;
}
.blogCard__objet{
  display:flex; align-items:flex-end; justify-content:center;
  padding:18px 18px 0;
  background:linear-gradient(180deg, var(--bpCardSoft) 0%, rgba(246,246,247,0) 100%);
}
.blogCard__objet .kt3d{ max-width:220px; width:100%; margin:0; }
.blogCard--3d .blogCard__corps{ padding:18px 22px 22px; gap:10px; }
.blogCard__fleche{
  margin-top:auto;
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px;
  border-radius:50%;
  background:var(--bpCardSoft);
  color:var(--bpInk);
  transition:background .16s ease, color .16s ease, transform .16s ease;
}
.blogCard__fleche svg{ width:16px; height:16px; }
.blogCard--3d .blogCard__lien:hover .blogCard__fleche{
  background:#E8552A; color:#F6F6F7; transform:translateX(3px);
}

@media (prefers-reduced-motion: reduce){
  .blogCard--3d .blogCard__lien,
  .blogCard__fleche{ transition:none !important; }
  .blogCard--3d .blogCard__lien:hover .blogCard__fleche{ transform:none; }
}

/* ============================================================================
   OBJETS 3D — le poster doit couvrir exactement la boîte du modèle
   ----------------------------------------------------------------------------
   .kt3d__poster est une <img> : il héritait des règles écrites pour les photos
   de section, notamment .ktExp__visual img { width:115%; margin-left:-7.5% }.
   La largeur était bien reprise plus bas, mais pas la marge négative : le
   poster se retrouvait décalé de 7,5% vers la gauche, alors que <model-viewer>
   est posé en position:absolute; inset:0, donc jamais décalé. Au basculement
   poster → modèle, l'objet sautait vers la droite d'autant — 42px mesurés sur
   un rendu de 1300px. Les deux doivent occuper la même boîte au pixel près.
   ========================================================================== */
.kt3d .kt3d__poster{
  margin:0;
}

/* ============================================================================
   TEXTE DES PAGES CLUSTER — sortie des styles en ligne
   ----------------------------------------------------------------------------
   Les pages /menu-qr portaient leur typographie en attributs style : la police
   « Bricolage Grotesque » et le noir #1D1D1F de l'ancienne charte, répétés 110
   fois. Impossible à repeindre, et resté en dehors du passage au brun/crème.
   Ces trois classes les remplacent ; la police et les couleurs viennent
   maintenant des variables comme partout ailleurs.
   ========================================================================== */
.csTexte__h2{
  font-family:'Google Sans', sans-serif;
  font-size:26px; font-weight:600; letter-spacing:-.02em; line-height:1.2;
  color:var(--bpInk); margin:0 0 24px;
  text-wrap:balance;
}
@media (min-width:720px){ .csTexte__h2{ font-size:28px; } }
.csTexte__h3{
  font-family:'Google Sans', sans-serif;
  font-size:20px; font-weight:600; letter-spacing:-.015em; line-height:1.25;
  color:var(--bpInk); margin:32px 0 16px;
}
.csTexte__h4{
  font-family:'Google Sans', sans-serif;
  font-size:16.5px; font-weight:600; letter-spacing:-.015em;
  color:var(--bpInk); margin:0;
}
.csTexte__p{
  font-size:16px; line-height:1.7; color:var(--bpInk-2); margin:0 0 16px;
  max-width:72ch;
}
.csTexte__p--petit{ font-size:14px; line-height:1.55; margin:0; }

/* ============================================================================
   [hidden] doit toujours gagner
   ----------------------------------------------------------------------------
   Le navigateur applique display:none à [hidden] via sa feuille par défaut —
   donc n'importe quelle règle d'auteur qui pose un display l'emporte. Le piège
   s'est déclenché trois fois : les boutons des assistants (.btn est
   inline-flex, les trois s'affichaient ensemble), le formulaire d'ajout de
   catégorie, et l'aperçu photo (.mwiz__photo img est display:block, l'image
   vide poussait le libellé hors du cadre).
   Un filet global vaut mieux que d'y penser à chaque fois.
   ========================================================================== */
[hidden] { display: none !important; }

/* ============================================================================
   MENUS — objets 3D à la place des icônes
   ----------------------------------------------------------------------------
   Chaque destination porte son objet, le même dans le méga-menu de bureau et
   dans le tiroir mobile. Ce sont les posters, donc des images fixes : dix-huit
   modèles animés dans un menu déroulant tireraient plusieurs mégaoctets et
   tourneraient tous en même temps.
   ========================================================================== */
.ktMega__objet{
  flex:0 0 38px; width:38px; height:38px;
  margin-top:0;
}
.ktMega__objet img{
  width:100%; height:100%;
  object-fit:contain; display:block;
}
/* La transition de couleur ne s'applique plus : il n'y a plus de trait à
   colorer. Un léger grossissement remplace le survol. */
.ktMega__link:hover .ktMega__objet img{ transform:scale(1.06); }
.ktMega__objet img{ transition:transform .15s ease; }

.ktNavMobile__objet{
  /* 40px etait trop : avec la gouttiere de 24px de chaque cote, l'ecart de
     14px et la fleche, la ligne depassait la largeur d'un telephone etroit.
     28px suffisent a reconnaitre l'objet. */
  width:28px; height:28px; flex:0 0 28px;
  max-width:28px; max-height:28px;
  overflow:hidden;
}
.ktNavMobile__objet img{
  width:100%; height:100%;
  max-width:100%; max-height:100%;
  object-fit:contain; display:block;
}
/* Le libelle doit pouvoir retrecir : sans min-width:0, un mot long pousse la
   ligne au-dela du conteneur au lieu de se couper. */
.ktNavMobile__link--icon{ min-width:0; }
.ktNavMobile__link--icon .ktNavMobile__label{ flex:1; min-width:0; }
/* Gouttiere resserree sur les lignes a objet, pour rendre la place prise. */
.ktNavMobile__link--icon{ padding-inline:18px; gap:12px; }

@media (prefers-reduced-motion: reduce){
  .ktMega__objet img{ transition:none; }
  .ktMega__link:hover .ktMega__objet img{ transform:none; }
}

/* ============================================================================
   BLOG — fond blanc et filtres en carrousel
   ----------------------------------------------------------------------------
   L'index alternait blanc et crème par tranche, via cluster_bg_class(). Sur une
   page qui n'est qu'une grille de cartes blanches, la bande crème du bas se
   lisait comme une seconde section. Tout passe en blanc.
   ========================================================================== */
/* Le !important est ici obligatoire, pas confortable : la regle generique
   `section.ktBg--creme.ktBg--creme{ background:#F6F6F7 !important }` porte
   deja le sien. Sans lui, la tranche des articles restait creme. */
section.blogHero.ktBg--creme,
section.blogList.ktBg--creme,
section.blogHero.ktBg--blanc,
section.blogList.ktBg--blanc,
section.csSection.ktBg--creme{ background:#ffffff !important; }

/* Filtres : rail défilant sur téléphone. Neuf catégories en flex-wrap
   occupaient trois lignes avant même le premier article ; en rail, elles
   tiennent sur une ligne et se parcourent au pouce. */
@media (max-width: 720px){
  .blogCats{
    flex-wrap:nowrap;
    overflow-x:auto;
    scroll-snap-type:x proximity;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    /* Le rail traverse la gouttière puis la réapplique en rembourrage : la
       première pastille s'aligne sur le titre, la dernière ne colle pas au
       bord. */
    margin-inline:-24px;
    padding:2px 0 8px 24px;
    scroll-padding-left:24px;
  }
  .blogCats::-webkit-scrollbar{ display:none; }
  .blogCats__item{
    flex:0 0 auto;
    scroll-snap-align:start;
    white-space:nowrap;
  }
  /* Respiration de fin : un padding-right est ignoré quand le contenu d'un
     conteneur flex déborde. */
  .blogCats::after{ content:''; flex:0 0 24px; }
}

/* ============================================================================
   CLUSTER — pages voisines dans la bande marron
   ----------------------------------------------------------------------------
   Trois destinations du même dossier, illustrées par leur objet. Rail défilant
   sur téléphone, trois colonnes dès qu'il y a la place. Le contraste de la
   bande marron suffit : pas de carte, pas de contour, juste l'objet et le mot.
   ========================================================================== */
.csVoisins{ margin-top:56px; }
.csVoisins__titre{
  font-family:'Google Sans', sans-serif;
  font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(246,246,247,.52);
  margin-bottom:18px;
}
.csVoisins__rail{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }

.csVoisin{
  display:flex; align-items:center; gap:14px;
  padding:14px 16px;
  border-radius:16px;
  background:rgba(246,246,247,.06);
  color:#F6F6F7; text-decoration:none;
  transition:background .16s ease, transform .16s ease;
}
.csVoisin__objet{ flex:0 0 56px; width:56px; height:56px; }
.csVoisin__objet img{ width:100%; height:100%; object-fit:contain; display:block; }
.csVoisin__texte{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.csVoisin__nom{
  font-family:'Google Sans', sans-serif;
  font-size:15px; font-weight:600; letter-spacing:-.01em;
}
.csVoisin__accroche{ font-size:13px; line-height:1.4; color:rgba(246,246,247,.62); }

@media (hover:hover) and (pointer:fine){
  .csVoisin:hover{ background:rgba(246,246,247,.11); transform:translateY(-2px); }
}

@media (max-width: 860px){
  /* Rail défilant : trois cartes empilées ajouteraient 300px à une section
     déjà longue. Le rail traverse la gouttière puis la réapplique. */
  .csVoisins__rail{
    display:flex; grid-template-columns:none;
    overflow-x:auto; gap:12px;
    scroll-snap-type:x proximity; overscroll-behavior-x:contain;
    scrollbar-width:none;
    margin-inline:calc(var(--csGouttiere, 24px) * -1);
    padding-left:var(--csGouttiere, 24px);
    scroll-padding-left:var(--csGouttiere, 24px);
  }
  .csVoisins__rail::-webkit-scrollbar{ display:none; }
  .csVoisin{ flex:0 0 78%; max-width:300px; scroll-snap-align:start; }
  /* Respiration de fin : un padding-right est ignoré quand un conteneur flex
     déborde. */
  .csVoisins__rail::after{ content:''; flex:0 0 var(--csGouttiere, 24px); }
}

@media (prefers-reduced-motion: reduce){
  .csVoisin{ transition:none; }
  .csVoisin:hover{ transform:none; }
}

/* ============================================================================
   « ALLER PLUS LOIN » — rail de pages illustrées
   ----------------------------------------------------------------------------
   Chaque lien porte l'objet du hero de sa destination. Grille dès qu'il y a la
   place, rail défilant sur téléphone : six cartes empilées ajoutaient 600px de
   pied de page.
   ========================================================================== */
.csSuite{ display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:14px; }
.csSuite__carte{
  display:flex; align-items:center; gap:14px;
  padding:14px 16px;
  background:#ffffff; border:1px solid #F6F6F7; border-radius:16px;
  color:#000000; text-decoration:none;
  transition:border-color .15s ease, transform .15s ease;
}
.csSuite__objet{ flex:0 0 52px; width:52px; height:52px; }
.csSuite__objet img{ width:100%; height:100%; object-fit:contain; display:block; }
.csSuite__texte{ min-width:0; display:flex; flex-direction:column; gap:3px; }
.csSuite__titre{
  font-family:'Google Sans', sans-serif;
  font-size:14.5px; font-weight:600; letter-spacing:-.015em; line-height:1.25;
}
.csSuite__sous{ font-size:12.5px; line-height:1.4; color:#6b5b56; letter-spacing:-.005em; }
@media (hover:hover) and (pointer:fine){
  .csSuite__carte:hover{ border-color:#000000; transform:translateY(-2px); }
}

@media (max-width: 860px){
  .csSuite{
    display:flex; grid-template-columns:none;
    overflow-x:auto; gap:12px;
    scroll-snap-type:x proximity; overscroll-behavior-x:contain;
    scrollbar-width:none;
    margin-inline:-24px; padding-left:24px; scroll-padding-left:24px;
  }
  .csSuite::-webkit-scrollbar{ display:none; }
  .csSuite__carte{ flex:0 0 76%; max-width:290px; scroll-snap-align:start; }
  .csSuite::after{ content:''; flex:0 0 24px; }
}

@media (prefers-reduced-motion: reduce){
  .csSuite__carte{ transition:none; }
  .csSuite__carte:hover{ transform:none; }
}


/* ============================================================================
   TABLEAUX DANS LE CORPS DES PAGES
   ----------------------------------------------------------------------------
   Le blog stylait ses tableaux (.blogPost__corps table), pas les pages : un
   tableau ajoute dans une .csSection sortait sans bordure, sans fond d'entete
   et debordait de la colonne de texte. On reprend l'aspect du blog, avec le
   defilement horizontal plutot qu'un ecrasement des colonnes sur mobile.
   ========================================================================== */

.csWrap table{
  display:block; overflow-x:auto; width:100%;
  max-width:100%; border-collapse:collapse; margin:24px 0;
  -webkit-overflow-scrolling:touch;
}
.csWrap th, .csWrap td{
  border:1px solid rgba(0,0,0,.14); padding:10px 12px;
  font-size:14.5px; line-height:1.5; text-align:left; vertical-align:top;
}
.csWrap th{ background:#F6F6F7; font-weight:600; color:#000000; }
.csWrap table{ min-width:min(100%, 560px); }
@media (min-width:760px){ .csWrap table{ display:table; } }
.csWrap td{ color:#333333; }
.csWrap tbody tr:nth-child(even){ background:rgba(0,0,0,.025); }

/* Les listes ajoutees dans une section suivent la largeur du texte, sinon
   elles courent sur toute la page alors que les paragraphes s'arretent. */
.csWrap > ul, .csWrap > ol,
.csTexte__liste{
  max-width:72ch; margin:0 0 18px; padding-left:22px;
  font-size:16px; line-height:1.7; color:var(--bpInk-2);
}
.csWrap li{ margin:6px 0; }

/* Une carte sombre sans visuel affichait un rectangle vide de 16/10 : le
   cadre disparait quand il n'y a rien dedans. */
.ktCrmCard__media:empty{ display:none; }


/* ============================================================================
   BOUTON D'ACTION DANS LE CORPS D'UNE PAGE
   ----------------------------------------------------------------------------
   Les CTA n'existaient qu'en haut (ktHero__cta) et dans la bande sombre
   (ktCrmCards__cta). Une page longue a besoin de relances au fil du texte,
   au moment ou le lecteur vient d'etre convaincu.
   ========================================================================== */

.csCtaLigne{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px;
  margin:28px 0 8px; padding:20px 22px;
  background:#F6F6F7; border:1px solid #DEDEE1; border-radius:14px;
}
.csCtaLigne__texte{
  flex:1 1 260px; margin:0;
  font-size:15.5px; line-height:1.55; color:#000000;
}
.csCtaLigne__bouton{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 22px; border-radius:999px;
  background:#ff4f00; color:#fff; font-weight:600; font-size:15px;
  text-decoration:none; white-space:nowrap;
  transition:transform .12s ease, filter .12s ease;
}
.csCtaLigne__bouton:hover{ filter:brightness(1.06); transform:translateY(-1px); }
.csCtaLigne__bouton--ghost{
  background:transparent; color:#000000; border:1px solid #000000;
}
@media (max-width:560px){
  .csCtaLigne{ flex-direction:column; align-items:stretch; }
  .csCtaLigne__bouton{ width:100%; }
}

/* ============================================================================
   SECTION « TEXTE + OBJET » — les deux côte à côte
   ----------------------------------------------------------------------------
   Les sections narratives posaient leur objet sous le texte : il fermait le
   paragraphe au lieu de l'accompagner, et la colonne de lecture courait sur
   toute la largeur, jusqu'à 100 caractères par ligne. Ici l'objet prend un
   tiers, le texte deux, et la lecture retrouve une largeur tenable.
   ========================================================================== */
.csDuo{
  display:grid;
  grid-template-columns:minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap:40px;
  align-items:center;
}
.csDuo--droite{ grid-template-columns:minmax(0, 1.15fr) minmax(0, 0.85fr); }
.csDuo--droite .csDuo__objet{ order:2; }
.csDuo--droite .csDuo__texte{ order:1; }
.csDuo__objet .kt3d{ margin:0; max-width:420px; }
.csDuo__texte > .csTexte__h2:first-child{ margin-top:0; }

@media (max-width: 900px){
  /* Une colonne : l'objet passe au-dessus du texte dans les deux sens, plutôt
     que de suivre l'ordre de lecture du bureau. */
  .csDuo, .csDuo--droite{ grid-template-columns:1fr; gap:20px; }
  .csDuo--droite .csDuo__objet{ order:0; }
  .csDuo--droite .csDuo__texte{ order:1; }
  .csDuo__objet .kt3d{ max-width:320px; margin:0 auto; }
}

/* Objet à la place de l'icône dans une grille de bénéfices. */
.ktBenefit__objet{ width:64px; height:64px; margin-bottom:14px; }
.ktBenefit__objet img{ width:100%; height:100%; object-fit:contain; display:block; }

/* --- Bouton contour dans une section narrative --------------------------- */
.csBtnContour{
  display:inline-flex; align-items:center; justify-content:center;
  margin-top:22px;
  height:46px; padding:0 22px;
  border:2px solid #000000; border-radius:999px;
  /* Transparent, pas blanc : le bouton prend le fond de sa section. En blanc
     il dessinait une pastille claire au milieu du creme, et il aurait fallu
     une regle par couleur de section. */
  background:transparent; color:#000000;
  font-family:'Google Sans', sans-serif; font-size:14.5px; font-weight:600;
  letter-spacing:-.01em; text-decoration:none;
  transition:background .16s ease, color .16s ease;
}
@media (hover:hover) and (pointer:fine){
  .csBtnContour:hover{ background:#000000; color:#F6F6F7; }
}

/* Objet d'une grille de bénéfices : centré comme l'icône qu'il remplace.
   Sans les marges automatiques, il se collait à gauche dans une carte dont
   tout le reste est centré — c'était le décalage visible. */
.ktBenefit__objet{
  /* 72px etait la taille d'une icone, pas d'un objet : les scenes 3D ont du
     detail — des cartes, des pastilles d'allergenes — qui disparaissait. */
  width:124px; height:124px;
  margin:0 auto 18px;
  display:block;
}
@media (min-width:900px){
  .ktBenefit__objet{ width:150px; height:150px; }
}
.ktBenefit__objet img{ width:100%; height:100%; object-fit:contain; display:block; }

/* --- Section pleine couleur, variante orange ----------------------------- */
.csSection--orange{
  background:#E8552A !important;
  color:#F6F6F7;
}
.csSection--orange .ktCrmCards__title,
.csSection--orange .ktCrmCard__title{ color:#F6F6F7; }
.csSection--orange .ktCrmCard__text{ color:rgba(246,246,247,.86); }
/* Le bouton passe en crème sur orange : un bouton orange sur orange
   disparaîtrait, et le brun de la charte y devient sourd. */
.csSection--orange .ktCrmCards__cta{
  background:#F6F6F7; color:#000000; border-color:#F6F6F7;
}
@media (hover:hover) and (pointer:fine){
  .csSection--orange .ktCrmCards__cta:hover{ background:#ffffff; color:#000000; }
}
.csSection--orange .csVoisins__titre{ color:rgba(246,246,247,.72); }
.csSection--orange .csVoisin{ background:rgba(246,246,247,.14); }
.csSection--orange .csVoisin__accroche{ color:rgba(246,246,247,.78); }
@media (hover:hover) and (pointer:fine){
  .csSection--orange .csVoisin:hover{ background:rgba(246,246,247,.22); }
}

/* ============================================================================
   SECTIONS SUR FOND MARRON
   ----------------------------------------------------------------------------
   Le !important est nécessaire ici : la règle générique
   « section.ktBg--creme.ktBg--creme { background:#F6F6F7 !important } » porte
   déjà le sien, et sans poids égal la couleur ne s'appliquerait pas.
   ========================================================================== */
section.csSection--marron,
section.ktBenefits.csSection--marron{
  background:#000000 !important;
  color:#F6F6F7;
}
.csSection--marron .ktBenefits__eyebrow{ color:rgba(246,246,247,.55); }
.csSection--marron .ktBenefits__title,
.csSection--marron .ktBenefit__title,
.csSection--marron .csTexte__h2,
.csSection--marron .csTexte__h3{ color:#F6F6F7; }
.csSection--marron .ktBenefits__lead,
.csSection--marron .ktBenefit__text,
.csSection--marron .csTexte__p,
.csSection--marron li{ color:rgba(246,246,247,.80); }
.csSection--marron .ktBenefit__icon,
.csSection--marron .ktBenefit__icon svg{ color:#F6F6F7; stroke:#F6F6F7; }

/* Le tableau comparatif sur fond sombre : filets clairs, en-tête estompé. */
.csSection--marron .csTable{ color:#F6F6F7; }
/* .csWrap th pose un fond creme : sur marron, l'en-tete devenait une bande
   claire portant un texte creme, donc illisible. */
.csSection--marron .csTable th,
.csSection--marron .csWrap th{
  background:rgba(246,246,247,.10);
  color:rgba(246,246,247,.72);
  border-color:rgba(246,246,247,.22);
}
.csSection--marron .csTable td{
  color:rgba(246,246,247,.86);
  border-color:rgba(246,246,247,.14);
}
.csSection--marron .csBtnContour{
  border-color:#F6F6F7; color:#F6F6F7;
}
@media (hover:hover) and (pointer:fine){
  .csSection--marron .csBtnContour:hover{ background:#F6F6F7; color:#000000; }
}

/* Deux sections de même couleur qui se suivent ne doivent pas laisser croire
   à deux blocs : la seconde perd son rembourrage haut. */
.csSection--colle{ padding-top:0 !important; }
.ktBenefits--marron{ padding-bottom:40px !important; }
@media (min-width:720px){
  .ktBenefits--marron{ padding-bottom:56px !important; }
}

/* ============================================================================
   GRILLE DE BÉNÉFICES — autant de colonnes que d'éléments
   ----------------------------------------------------------------------------
   La grille était figée à quatre colonnes. Les sections qui n'ont que trois
   cartes laissaient donc une colonne vide à droite : les trois se serraient
   sur les trois quarts de la largeur, décalées vers la gauche. auto-fit crée
   exactement le nombre de colonnes nécessaires, chacune prenant sa part de la
   largeur disponible.
   ========================================================================== */
@media (min-width:900px){
  .ktBenefits__grid{
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    justify-items:stretch;
  }
}
/* Contenu centré dans sa colonne, quelle que soit la largeur de celle-ci. */
.ktBenefit{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.ktBenefit__title, .ktBenefit__text{ width:100%; }
/* Le texte garde une largeur de lecture même dans une colonne de 400px. */
.ktBenefit__text{ max-width:34ch; margin-inline:auto; }

/* --- Grille de bénéfices : variante alignée à gauche --------------------- */
.ktBenefits--gauche .ktBenefits__head{ text-align:left; }
.ktBenefits--gauche .ktBenefits__title,
.ktBenefits--gauche .ktBenefits__lead{ margin-left:0; margin-right:auto; }
.ktBenefits--gauche .ktBenefit{ align-items:flex-start; text-align:left; }
.ktBenefits--gauche .ktBenefit__text{ margin-inline:0; max-width:40ch; }
.ktBenefits--gauche .ktBenefit__icon{ margin-left:0; margin-right:auto; }

/* --- Sections resserrées ------------------------------------------------- */
/* Deux sections qui se suivent sur le même sujet n'ont pas besoin de deux
   respirations pleines. */
.ktBenefits--compact{ padding-top:56px !important; padding-bottom:56px !important; }
@media (min-width:720px){
  .ktBenefits--compact{ padding-top:72px !important; padding-bottom:72px !important; }
}
.csSection--compact{ padding-top:32px !important; padding-bottom:40px !important; }
@media (min-width:720px){
  .csSection--compact{ padding-top:40px !important; padding-bottom:56px !important; }
}

/* L'écart entre le chapô et les colonnes, dans la variante alignée à gauche.
   96px séparaient l'introduction de ce qu'elle introduit : sur un bloc de
   trois colonnes de texte, sans illustration pour occuper l'intervalle, le
   vide se lisait comme une fin de section. */
.ktBenefits--gauche .ktBenefits__head{ margin-bottom:34px; }
@media (min-width:720px){
  .ktBenefits--gauche .ktBenefits__head{ margin-bottom:44px; }
}


/* ============================================================================
   SECTIONS SOMBRES → CLAIRES
   ----------------------------------------------------------------------------
   Les sections de contenu qui étaient en noir passent en #F6F6F7, texte en
   noir : la section bibliothèque (.ktVisio) et la section sombre de l'accueil
   (.csSection--dark). Les autres sélecteurs sont couverts par précaution, ils
   servent sur des gabarits qui peuvent revenir.

   DEUX EXCLUSIONS VOLONTAIRES :
     - le héros de l'accueil (section.ktExp--first) reste NOIR, texte clair ;
     - le pied de page (.ktFoot) reste NOIR sur tout le site.
   Ni l'un ni l'autre ne figure dans les sélecteurs ci-dessous.

   Reste sombre aussi : .ktVisio__mock et ses tuiles. C'est la maquette d'un
   écran, pas un fond de section — l'éclaircir la ferait disparaître, et son
   texte crème reste lisible dessus.

   !important sur les fonds : les règles d'origine en portent déjà un
   (« section.ktBg--creme.ktBg--creme » notamment), sans poids égal la couleur
   ne prendrait pas.
   ========================================================================== */
section.csSection--dark,
section.csSection--dark.csSection--dark,
section.csSection--marron,
section.ktBenefits.csSection--marron,
.csSection.csSection--dark,
.ktVisio,
.tarifsCta,
.ktCta,
.ktExp--cluster ~ section.csSection--dark,
.ktExp--cluster ~ section.ktVisio,
.ktExp--cluster ~ section.ktCta{
  background:#F6F6F7 !important;
  color:#000000;
}

/* --- Section générique sombre --- */
.csSection--dark .csSectionH2,
.csSection--dark .data-point-icon,
.csSection--dark .data-point h4,
.csSection--dark .cert-icon svg,
.csSection--dark .cert h5{ color:#000000; }
.csSection--dark .csSectionH2 .accent{ color:rgba(0,0,0,.5); }
.csSection--dark .csSectionLead,
.csSection--dark .data-point p{ color:rgba(0,0,0,.65); }
.csSection--dark__eyebrow,
.csSection--dark .cert p{ color:rgba(0,0,0,.55); }
.csSection--dark__para{ color:rgba(0,0,0,.72); }
/* Ces encarts étaient plus clairs que le fond noir ; ils doivent maintenant
   être plus foncés que le fond clair, sinon ils disparaissent. */
.csSection--dark .certifications{ background:rgba(0,0,0,.04); }
.csSection--dark .cert{ background:#ECECEE; }
.csSection--dark .cert:hover{ background:#E2E2E5; }
.csSection--dark .cert-icon{ background:rgba(0,0,0,.06); }
.csSection--marron .ktBenefits__eyebrow{ color:rgba(0,0,0,.55); }
.csSection--marron li{ color:rgba(0,0,0,.80); }

/* --- Section bibliothèque --- */
.ktVisio__title{ color:#000000; }
.ktVisio__eyebrow{ color:rgba(0,0,0,.55); }
.ktVisio__lead{ color:rgba(0,0,0,.65); }
.ktVisio__point h3{ color:#000000; }
.ktVisio__point p{ color:rgba(0,0,0,.6); }