/* ====== Global safety =================================================== */
html, body { overflow-x: hidden; }

/* Si le thème ajoute du padding sur .container, on le neutralise dans la hero */
.neatik-home-hero [class*="container"]{
  padding-left: 0;
  padding-right: 0;
}

/* ====== HERO – Variables & bloc ======================================== */
.neatik-home-hero{
  /* 🎚 Réglages rapides */
  --space-top: clamp(28px, 6vw, 96px);
  --gap:       clamp(12px, 2.2vw, 22px);
  --hero-h:    clamp(580px, 74vh, 820px); /* hauteur visible image (desktop) */
  --hero-pos:  50% 50%;                   /* cadrage par défaut */
  --hero-zoom: 1;                          /* 1 = pas de zoom ; <1 dézoom */

  margin: 0 0 clamp(28px, 5vw, 56px) 0;
  overflow: visible;
}

/* ====== HEAD ============================================================ */
.neatik-home-hero__head{
  text-align: center;
  padding-top: var(--space-top);
  /* double l’espace entre les CTA et l’image */
  padding-bottom: clamp(28px, 5.6vw, 64px);
}

.neatik-home-hero__title{
  margin: 0 0 var(--gap) 0 !important;
  font-size: clamp(42px, 7.2vw, 64px) !important;
  font-weight: 900 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.02em;
  color: #1A1F1C !important;
}

.neatik-home-hero__lead{
  max-width: min(880px, 92vw);
  margin: 0 auto;
  font-size: clamp(20px, 1.8vw, 19px);
  line-height: 1.55;
  color: #5D6368;
}

/* ====== CTAs ============================================================ */
.neatik-home-hero__ctas{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2vw, 16px);
  margin-top: clamp(14px, 2.4vw, 22px);
  font-size: 16px;   /* évite un héritage qui gonflerait les <img> en em */
  line-height: 1;
}

.neatik-home-hero__ctas .btn-cta{
  display: inline-flex;
  align-items: center;
}

.neatik-home-hero__ctas .btn-cta img{
  display: block;
  height: clamp(44px, 5.2vw, 56px);
  width: auto;
  max-width: none !important;
}

/* ====== MEDIA – Desktop full-bleed centré =============================== */
.neatik-home-hero__media{
  position: relative;
  width: 100vw;
  height: var(--hero-h);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
  background: transparent;
}

.neatik-home-hero__img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: var(--hero-pos);
  transform: scale(var(--hero-zoom));
  transform-origin: center;
  will-change: transform;
}

/* ====== Mobile (≤ 768px) =============================================== */
@media (max-width: 768px){
  /* Espacements et tailles mobile */
  .neatik-home-hero{
    --space-top: 88px;
    --hero-h: clamp(320px, 56vh, 520px);  /* hauteur cible visuel mobile */
    --hero-pos: 52% 32%;
    --hero-zoom: 1.0;
  }

  .neatik-home-hero__title{
    font-size: clamp(38px, 11vw, 50px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.015em;
    margin-top: 8px !important;
    color: #1A1F1C !important;
  }

  .neatik-home-hero__lead{
    font-size: clamp(20px, 4.2vw, 18.5px);
    line-height: 1.55;
    max-width: 92%;
    color: #5D6368;
  }

  .neatik-home-hero__ctas{
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    margin-bottom: 24px;  /* espace au-dessus du visuel */
  }

  .neatik-home-hero__ctas .btn-cta img{
    height: 46px;
    width: auto;
  }

  /* Image centrée avec marge latérale et coins arrondis */
  .neatik-home-hero__media{
    width: 94vw;              /* marge gauche/droite légère */
    height: 78vh;
    max-height: 460px;
    margin: 0 auto;           /* centrage horizontal */
    border-radius: 18px;
    overflow: hidden;
  }

  .neatik-home-hero__img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transform: scale(1.3);    /* zoom portrait */
  }
}

/* ====== Micro-ajustement CTA pour très petits écrans (≤520px) ========== */
@media (max-width: 520px){
  .neatik-home-hero__ctas .btn-cta img{ height: 42px; }
}


/* ===========================================================
   SECTION 2 — Routage (deux cartes façon ClickUp)
   =========================================================== */
.neatik-routing{
  padding: clamp(28px, 6vw, 64px) 0 clamp(28px, 7vw, 80px);
}

.neatik-routing .neatik-routing__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2.8vw, 28px);
}

/* ====== Cartes ====== */
.route-card{
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr; /* texte / visuel */
  min-height: 420px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  isolation: isolate;
}

.route-card__body{
  padding: clamp(20px, 3.4vw, 36px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(10px, 1.6vw, 16px);
}

.route-card__title{
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0;
}

.route-card__lead{
  font-size: clamp(14px, 1.25vw, 16.5px);
  line-height: 1.55;
  margin: 0;
  opacity: .9;
}

.route-card__cta{
  align-self: flex-start;
  display: inline-block;
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}

.route-card__media{
  position: relative;
}

.route-card__media img,
.route-card__media canvas{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* ====== Variantes de carte ====== */
.route-card--light{
  background: #F6F7FB;
}
.route-card--light .route-card__title{ color: #1A1F1C; }
.route-card--light .route-card__lead{ color: #394049; }
.route-card--light .route-card__cta{
  background: #5E5AED; /* violet Neatik-like */
  color: #fff;
  box-shadow: 0 8px 18px rgba(94,90,237,.25);
}
.route-card--light .route-card__cta:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(94,90,237,.32);
}

.route-card--dark{
  background: radial-gradient(120% 120% at 80% 10%, #252545 0%, #0B0B10 55%, #070709 100%);
  color: #E8ECF3;
}
.route-card--dark .route-card__title{ color: #FFFFFF; }
.route-card--dark .route-card__lead{ color: #C7CEE1; }
.route-card--dark .route-card__cta{
  background: #fff;
  color: #0B0B10;
}
.route-card--dark .route-card__cta--invert{
  background: transparent;
  color: #FFFFFF;
  border: 1.5px solid rgba(255,255,255,.24);
}
.route-card--dark .route-card__cta--invert:hover{
  background: rgba(255,255,255,.06);
  transform: translateY(-1px);
}

/* ====== Responsive ====== */
@media (max-width: 1024px){
  .route-card{
    grid-template-columns: 1fr;
    min-height: 420px;
  }
  .route-card__media{
    min-height: 260px;
  }
}

@media (max-width: 700px){
  .neatik-routing .neatik-routing__grid{
    grid-template-columns: 1fr;
  }
  .route-card{
    min-height: 420px;
  }
  .route-card__body{
    padding: 22px 18px;
  }
  .route-card__title{
    font-size: clamp(22px, 6.2vw, 28px);
  }
  .route-card__lead{
    font-size: clamp(14px, 4vw, 16px);
  }
  .route-card__media{
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}

/* petite touche : arrondi propre quand l’image est dessous */
.route-card--light .route-card__media img{ border-radius: 0 28px 28px 0; }
@media (max-width: 1024px){
  .route-card--light .route-card__media img{ border-radius: 0 0 28px 28px; }
}

/* 1) Mobile : inverser l’ordre (la card noire avant la grise) */
@media (max-width: 768px){
  .neatik-routing__grid{
    display: flex;
    flex-direction: column-reverse;
  }
}

/* 2) Plus d’espace entre le texte et le CTA (desktop + mobile) */
.route-card__cta{
  margin-top: 18px;                        /* était ~10–12px, on aère un peu */
}
/* Si ton paragraphe colle au bouton, on force aussi le bottom du texte */
.route-card p{
  margin-bottom: 10px;
}

/* ======================= SECTION 3 : How it works ======================== */
.neatik-how{
  --radius: 22px;
  --shadow: 0 8px 30px rgba(20,16,56,.06);
  --ink: #1A1F1C;
  --muted: #5D6368;
  --bg-soft: #F6F7FB;
  --accent: #5B5BFF; /* ajuste si besoin à ta couleur primaire */
  padding: clamp(38px, 6vw, 72px) 0;
}

.neatik-how .container{ max-width: 1100px; margin: 0 auto; padding: 0 20px; }

.neatik-how__eyebrow{
  display:inline-block;
  font-size: 12px;
  letter-spacing:.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

.neatik-how__title{
  margin: 0 0 clamp(18px, 3vw, 28px) 0;
  font-weight: 900;
  font-size: clamp(22px, 3.6vw, 34px);
  color: var(--ink);
  letter-spacing: -.01em;
}

.neatik-how__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2.4vw, 24px);
}

.how-card{
  background: #fff;
  border-radius: var(--radius);
  padding: clamp(18px, 2.4vw, 22px);
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
  position: relative;
}

.how-card:hover{ transform: translateY(-2px); box-shadow: 0 12px 36px rgba(20,16,56,.09); }

.how-card__icon{
  width: 64px; height: 64px;
  border-radius: 16px;
  background: var(--bg-soft);
  display: grid; place-items: center;
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
}
.how-card__icon img{ width: 36px; height: 36px; object-fit: contain; }

.how-card__badge{
  position: absolute; right: -6px; top: -6px;
  background: var(--accent); color:#fff;
  font-weight: 700; font-size: 12px;
  width: 26px; height: 26px; border-radius: 50%;
  display:grid; place-items:center;
  box-shadow: 0 4px 18px rgba(91,91,255,.35);
}

.how-card__heading{
  margin: 6px 0 6px 0;
  font-weight: 800;
  font-size: clamp(16px, 1.6vw, 18px);
  color: var(--ink);
}

.how-card__text{
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
}

/* CTA sous la grille */
.neatik-how__cta{
  margin-top: clamp(18px, 3.2vw, 28px);
  display:flex; justify-content:center;
}
.neatik-how .btn-solid{
  display:inline-block;
  background: var(--accent);
  color:#fff; text-decoration:none;
  font-weight: 700; letter-spacing:.01em;
  padding: 14px 22px; border-radius: 999px;
  box-shadow: 0 10px 24px rgba(91,91,255,.25);
}
.neatik-how .btn-solid:hover{ filter: brightness(1.05); }

/* ---------- Responsive ---------- */
@media (max-width: 920px){
  .neatik-how__grid{ grid-template-columns: 1fr; }
  .how-card{ padding: 18px 16px; }
  .neatik-how__cta{ margin-top: 16px; }
}

/* --- Ajustements section 3 (Comment ça marche) --- */

/* (1a) Bulle "Comment ça marche" centrée */
.neatik-how__eyebrow{
  background: #F6F7FB;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #5B5BFF;
  display: inline-block;
  margin-bottom: 10px;
}
.neatik-how{
  text-align: center;
}

/* (1b) Titre centré + un peu plus grand */
.neatik-how__title{
  font-size: clamp(24px, 4.4vw, 38px);
  font-weight: 900;
  color: #1A1F1C;
  margin: 0 auto clamp(22px, 3vw, 34px);
  letter-spacing: -0.02em;
}

/* (2) Icônes légèrement plus grandes dans leurs box */
.how-card__icon{
  width: 72px;
  height: 72px;
}
.how-card__icon img{
  width: 42px;
  height: 42px;
}

/* --- Fix alignement cartes --- */
.neatik-how__grid,
.how-card{
  text-align: left; /* garde les textes des cartes alignés à gauche */
}

.neatik-how__intro{
  max-width: 680px;
  margin: 0 auto clamp(28px, 4vw, 42px);
  color: #5D6368;
  font-size: clamp(18px, 2vw, 19px);
  line-height: 1.6;
}

/* ========== SECTION COMPARAISON V3 (style ClickUp) ========== */
.neatik-compare-v3{
  --pad-x: clamp(22px, 5.5vw, 56px);
  --pad-y: clamp(34px, 6vw, 72px);
  --radius: 22px;
  --brand: #6C5CE7;               /* utilisé pour le CTA */
  --txt-muted: #5D5D81;

  padding: var(--pad-y) var(--pad-x);
}

.neatik-compare-v3 .ncv3-head{
  text-align: center;
  max-width: 980px;
  margin: 0 auto clamp(26px, 4vw, 40px);
}

.ncv3-pill{
  display: inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  background: #F4F1FF;
  color: #6D5BD0;
  font-weight: 600;
  font-size: 14px;
}

.ncv3-title{
  margin: 10px 0 12px;
  font-size: clamp(28px, 4.4vw, 44px);
  line-height: 1.1;
}

.ncv3-sub{
  margin: 0 auto;
  color: #5D6368;
  font-size: clamp(15px, 2.2vw, 18px);
  line-height: 1.55;
  max-width: 860px;
  padding: 0 var(--pad-x); /* évite le texte qui touche les bords en mobile */
}

/* ----- Table grille (3 colonnes : libellé | Neatik | Autres) ----- */
.ncv3-table{
  margin: clamp(24px, 4vw, 38px) auto 0;
  max-width: 1100px;
  display: grid;
  grid-template-columns: 42% 29% 29%;
  gap: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
}

/* Mobile : tout tient sans scroll (labels plus larges, colonnes icônes plus étroites) */
@media (max-width: 640px){
  .ncv3-table{
    grid-template-columns: 1.2fr 0.55fr 0.55fr;
    margin-top: clamp(12px, 3vw, 20px);
  }
}

/* En-têtes */
.ncv3-th{
  padding: clamp(14px, 2.8vw, 20px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-bottom: 1px solid #EEEFFD;
}

.ncv3-th.ncv3-feature{ background: #fff; align-items: flex-start; }

.ncv3-th.ncv3-neatik{
  background: #FBF8FF; /* demandé */
  position: relative;
  box-shadow:
    0 0 0 1px #EBDDFF inset,
    0 10px 24px rgba(108,92,231,0.08);
}

.ncv3-th.ncv3-others{
  background: #F8F8FC; /* demandé */
  box-shadow: inset 0 0 0 1px #ECECF7;
}

.ncv3-logo{ width: 34px; height: 34px; border-radius: 8px; object-fit: cover; }
.ncv3-name{ margin-top: 8px; font-weight: 700; }

.ncv3-cta{
  margin-top: 10px;
  display: inline-block;
  padding: 10px 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, #7C6CF4, #5E4AE3);
  color: #fff !important;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: transform .15s ease;
}
.ncv3-cta:hover{ transform: translateY(-1px); }

/* Lignes */
.ncv3-feature,
.ncv3-cell{
  padding: clamp(14px, 2.8vw, 20px);
  border-bottom: 1px solid #EEEFFD;
  display: flex; align-items: center;
}

.ncv3-feature{
  color: var(--txt-muted);
  font-weight: 500;               /* “un poil moins gras” */
}

.ncv3-cell{ justify-content: center; }

.ncv3-check, .ncv3-cross{
  display: block;
  width: clamp(18px, 4.6vw, 28px);
  height: auto;
  image-rendering: -webkit-optimize-contrast;
}

/* Fondu premium sur la colonne Neatik (optionnel, activé si .in-view sur la section) */
.neatik-compare-v3.in-view .ncv3-th.ncv3-neatik{
  box-shadow:
    0 0 0 1px #EBDDFF inset,
    0 16px 38px rgba(108,92,231,0.15),
    0 0 0 6px rgba(124,108,244,0.06);
}

/* CTA bas de section */
.ncv3-bottom{
  max-width: 1100px;
  margin: clamp(28px, 5.4vw, 56px) auto 0;  /* marge plus grande demandée */
  text-align: center;
}
.ncv3-secondary{
  display: inline-block;
  padding: 12px 18px;
  border-radius: 12px;
  background: #F4F4FB;
  color: #1A1F1C;
  text-decoration: none;
  font-weight: 600;
}
.ncv3-secondary:hover{ background:#EEEFFD; }

/* === Sticky header pour tableau comparaison (section 4) === */
.ncv3-th.ncv3-neatik,
.ncv3-th.ncv3-others {
  position: sticky;
  top: 0;
  z-index: 5;
}

/* pour la colonne de gauche (features), pas sticky */
.ncv3-th.ncv3-feature {
  position: relative;
}

/* effet visuel doux quand les headers deviennent sticky */
@supports (backdrop-filter: blur(8px)) {
  .ncv3-th.ncv3-neatik,
  .ncv3-th.ncv3-others {
    backdrop-filter: blur(10px);
  }
}

/* petite ombre sous l’en-tête pour délimiter quand on scrolle */
.ncv3-th.ncv3-neatik::after,
.ncv3-th.ncv3-others::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background: rgba(200, 200, 230, 0.6);
}

/* H2 + lead sous le H2 */
.neatik-compare-v3 .ncv3-title{
  margin: 0 0 8px 0;
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-align: center;
  color:#1A1F1C;
  font-size: clamp(28px, 4.6vw, 42px); /* même esprit que la section 3 */
}

.neatik-compare-v3 .ncv3-lead{
  margin: 0 auto 28px auto;
  max-width: min(920px, 92vw);
  text-align: center;
  color:#5D6368;
  font-size: 18px;              /* demandé */
  line-height: 1.55;
}

/* CTA visible desktop seulement */
.neatik-compare-v3 .ncv3-cta{ display:inline-flex; }
@media (max-width: 768px){
  .neatik-compare-v3 .ncv3-cta{ display:none; }
}

/* Neutralise sticky + dégradés/ombres éventuels */
.neatik-compare-v3 .ncv3-th{
  position: static !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}
.neatik-compare-v3 .ncv3-th::before,
.neatik-compare-v3 .ncv3-th::after{
  content: none !important;
}

/* Colonne Neatik : entête + toutes les cellules */
.neatik-compare-v3 .ncv3-th.ncv3-neatik{ 
  background: #FBF8FF !important;
}

/* Lignes : 1ère colonne = libellé, 2e = Neatik, 3e = Autres  */
.neatik-compare-v3 .ncv3-row > .ncv3-td:nth-child(2){
  background: #FBF8FF;
}

/* Arrondis propres sur mobile si tes cartes ont des radius */
@media (max-width: 768px){
  .neatik-compare-v3 .ncv3-th.ncv3-neatik{ border-radius: 16px 16px 0 0; }
  .neatik-compare-v3 .ncv3-row:last-child > .ncv3-td:nth-child(2){ border-radius: 0 0 16px 16px; }
}

@media (max-width: 640px){
  .neatik-compare-v3{ padding-inline: 16px; }
}

/* Bulle au-dessus du H2 */
.neatik-compare-v3 .ncv3-kicker{
  display:inline-block;
  padding:6px 12px;
  border-radius:999px;
  background:#F3ECFF;
  color:#6B46C1;
  font-weight:600;
  font-size:14px;
  line-height:1;
  margin-bottom: clamp(20px, 4.2vw, 28px); /* <= espace sous la bulle */
}

/* Entête Neatik (ok de le garder) */
.neatik-compare-v3 .ncv3-th.ncv3-neatik{
  background:#FBF8FF !important;
}

/* TOUTES les lignes de la colonne Neatik */
.neatik-compare-v3 .ncv3-row > .ncv3-td:nth-of-type(2),
.neatik-compare-v3 .ncv3-row > *:nth-child(2){
  background:#FBF8FF;
}

/* (optionnel) arrondir proprement le bas de colonne sur mobile */
@media (max-width: 768px){
  .neatik-compare-v3 .ncv3-row:last-child > .ncv3-td:nth-of-type(2),
  .neatik-compare-v3 .ncv3-row:last-child > *:nth-child(2){
    border-radius: 0 0 16px 16px;
  }
}

/* espace sous la bulle au-dessus du H2 */
.neatik-compare-v3 .ncv3-pill{
  display:inline-block;
  margin-bottom: clamp(16px, 3.8vw, 24px) !important;
}

/* head cell for Neatik */
.neatik-compare-v3 .ncv3-th.ncv3-neatik{
  background: #FBF8FF !important;
}

/* body cells: 2nd cell of every 3-cell group */
.neatik-compare-v3 .ncv3-table > .ncv3-cell:nth-child(3n + 2){
  background: #FBF8FF !important;
}

/* Supprime la couleur de fond de l’entête "Autres" */
.neatik-compare-v3 .ncv3-th.ncv3-others {
  background: transparent !important;
}

/* Paragraph under the H2 (section 4 – compare) */
.neatik-compare-v3 .ncv3-head > p.ncv3-sub{
  margin: 0 auto 28px;
  max-width: min(920px, 92vw);
  text-align: center;
  color:#5D6368;
  font-size: clamp(18px, 2vw, 19px);
  line-height: 1.55;
}

/* Mobile: make it bigger and add breathing room */
@media (max-width: 600px){
  .neatik-compare-v3 .ncv3-head > p.ncv3-sub{
    font-size: 19px !important;
    line-height: 1.6;
    padding: 0 18px;   /* keep it off the edges */
  }
}

/* =========================
   SECTION — Preuve sociale
   ========================= */

.neatik-social{
  padding: clamp(60px, 8vw, 100px) 6vw;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

/* Titre */
.ns-pill{
  display:inline-block;
  padding:6px 14px;
  border-radius:999px;
  background:#F3ECFF;
  color:#6B46C1;
  font-weight:600;
  font-size:14px;
  margin-bottom:24px;
}
.ns-title{
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 900;
  color:#1A1F1C;
  line-height:1.1;
  margin: 0 0 12px 0;
}
.ns-title .highlight{ color:#97A4C7; }
.ns-sub{
  color:#5D6368;
  font-size: clamp(16px, 2vw, 18px);
  max-width: 780px;
  margin: 0 auto 60px auto;
}

/* === GRID === */
.ns-grid.v4{
  display:grid;
  gap: clamp(16px, 2vw, 22px);
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas:
    "left left top top"
    "left left g   h";
  align-items: stretch;
}

/* Positionnement */
.ns-card--mega{ grid-area: left; }
.ns-card--wide{ grid-area: top;  }
.ns-card--g   { grid-area: g;    }
.ns-card--h   { grid-area: h;    }

/* === Cards === */
.ns-card{
  background:#fff;
  border-radius:16px;
  box-shadow:0 12px 28px rgba(16,24,40,.08);
  padding:clamp(28px,3vw,38px);
  text-align:left;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.ns-card.is-dark{
  background:#0D0D10;
  color:#fff;
}
.ns-card.is-dark .ns-quote{ color:#EDEDED; }

/* Stats */
.ns-stat{
  font-size:clamp(26px,4vw,42px);
  font-weight:900;
  margin:0;
  color:#1A1F1C;
}
.ns-substat{
  color:#666;
  font-size:15px;
  margin:0 0 14px 0;
}

/* Quote */
.ns-quote{
  font-size:17px;
  line-height:1.6;
  margin:0 0 24px 0;
  position:relative;
}
.ns-quote-icon{
  width:24px;
  height:24px;
  margin-right:8px;
  vertical-align:middle;
}

/* Footer */
.ns-footer{
  display:flex;
  align-items:center;
  gap:12px;
}
.ns-avatar{
  width:44px;
  height:44px;
  border-radius:50%;
  object-fit:cover;
}
.ns-name{
  font-weight:600;
  font-size:15px;
  color:inherit;
}
.ns-role{
  color:#8A8F95;
  font-size:13px;
}
.ns-brand{
  margin-left:auto;
  width:22px;
  height:auto;
  opacity:.9;
}

/* === CTA === */
.ns-cta{
  margin-top: clamp(50px, 6vw, 80px);
}
.btn-primary{
  display:inline-block;
  background:#5B50E8;
  color:#fff;
  font-weight:600;
  padding:14px 32px;
  border-radius:12px;
  text-decoration:none;
  box-shadow:0 6px 20px rgba(91,80,232,.3);
  transition:transform .25s, box-shadow .25s;
}
.btn-primary:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 24px rgba(91,80,232,.45);
}

/* === Responsive === */
@media (max-width:960px){
  .ns-grid.v4{
    grid-template-columns:1fr;
    grid-template-areas:
      "left"
      "top"
      "g"
      "h";
  }
  .ns-card{ min-height:auto; }
  .ns-card--mega{ order:-1; }
}

/* === Reveal on scroll (Neatik Social) =============================== */
.neatik-social [data-reveal]{
  opacity: 0;
  transform: translateY(16px);
  filter: blur(2px);
  transition: opacity .6s ease, transform .6s ease, filter .6s ease;
  will-change: opacity, transform, filter;
}
.neatik-social [data-reveal].is-visible{
  opacity: 1;
  transform: none;
  filter: none;
}

/* Stagger on the 4 cards */
.neatik-social .ns-grid.v4 > .ns-card:nth-child(1){ transition-delay: .06s; }
.neatik-social .ns-grid.v4 > .ns-card:nth-child(2){ transition-delay: .12s; }
.neatik-social .ns-grid.v4 > .ns-card:nth-child(3){ transition-delay: .18s; }
.neatik-social .ns-grid.v4 > .ns-card:nth-child(4){ transition-delay: .24s; }

/* Respect user preferences */
@media (prefers-reduced-motion: reduce){
  .neatik-social [data-reveal]{ transition: none; transform: none; filter: none; }
}

/* =========================
   SECTION — Hook Simulateur
   ========================= */
:root{
  --nsim-bg: #0f1220;           /* fond carte mockup */
  --nsim-grad: radial-gradient(1200px 600px at 20% -10%, rgba(123,104,238,.18), transparent 60%);
  --nsim-accent: #97A4C7;       /* 2e ligne du titre */
  --nsim-primary: #6C5CE7;      /* violet Neatik (bouton) */
  --nsim-primary-dark:#5948e2;
  --nsim-ring: rgba(108,92,231,.35);
}

.neatik-simteaser{
  position: relative;
  padding: clamp(36px, 6vw, 80px) 0;
  background:
    linear-gradient(180deg, #fff 0%, #fafbff 100%);
  overflow: hidden;
}

.neatik-simteaser::before{
  /* petit halo violet discret en fond */
  content:"";
  position:absolute; inset:0;
  background: var(--nsim-grad);
  pointer-events:none;
}

.nsim-wrap{
  max-width: min(1200px, 92vw);
  margin-inline: auto;
}

.nsim-grid{
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(18px, 4vw, 42px);
  align-items: center;
}

/* Texte */
.nsim-kicker{
  display:inline-block;
  padding:6px 12px;
  border-radius:999px;
  background:#F3ECFF;
  color:#6B46C1;
  font-weight:600;
  font-size:14px;
  line-height:1;
  margin-bottom: clamp(14px, 2.4vw, 18px);
}

.nsim-title{
  margin:0 0 clamp(8px, 1.2vw, 12px) 0;
  font-size: clamp(28px, 4.4vw, 44px);
  line-height:1.08;
  letter-spacing:-0.02em;
  color:#1A1F1C;
  font-weight:900;
}
.nsim-title .nsim-accent{ color: var(--nsim-accent); font-weight:900; }

.nsim-lead{
  color:#5D6368;
  font-size: clamp(16px, 1.6vw, 18px);
  line-height:1.55;
  margin: 0 0 clamp(16px, 2.2vw, 22px) 0;
  max-width: 52ch;
}

.nsim-ctas{ display:flex; gap:12px; align-items:center; }

.nsim-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 14px 20px;
  border-radius: 999px;
  background: var(--nsim-primary);
  color:#fff; text-decoration:none; font-weight:700;
  box-shadow: 0 10px 24px -8px var(--nsim-ring);
  transition: transform .16s ease, box-shadow .2s ease, background .2s ease;
}
.nsim-btn:hover{ transform: translateY(-1px); background: var(--nsim-primary-dark); }
.nsim-btn:active{ transform: translateY(0); }

.nsim-note{
  margin: 10px 0 0 0;
  font-size: 13px;
  color:#8590A2;
}

/* Mockup visuel */
.nsim-right{ position:relative; }
.nsim-mock{
  position: relative;
  margin: 0;
  background: var(--nsim-bg);
  border-radius: 20px;
  overflow:hidden;
  box-shadow:
    0 22px 60px -22px rgba(10,16,40,.35),
    0 8px 22px -10px rgba(10,16,40,.2);
  isolation:isolate;
}
.nsim-mock::before{
  /* glow doux autour du mock */
  content:"";
  position:absolute; inset:-1px;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  pointer-events:none;
}

.nsim-mock img{
  display:block; width:100%; height:auto;
  transform: scale(1.02);
  filter: blur(2px) saturate(1.05) brightness(1.02);
  opacity: .96;
}

/* Ratio et respiration */
.nsim-mock{ aspect-ratio: 16 / 10; }

/* Responsive */
@media (max-width: 980px){
  .nsim-grid{
    grid-template-columns: 1fr;
  }
  .nsim-right{ order:2; }
  .nsim-left { order:1; }
  .nsim-mock{ aspect-ratio: 16/10; }
  .nsim-lead{ max-width: 60ch; }
}

/* Effet shimmer premium */
.nsim-mock {
  position: relative;
  margin: 0;
  background: var(--nsim-bg);
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 22px 60px -22px rgba(10,16,40,.35),
    0 8px 22px -10px rgba(10,16,40,.2);
  isolation: isolate;
}

.nsim-mock img {
  display: block;
  width: 100%;
  height: auto;
  transform: scale(1.02);
  filter: blur(2px) saturate(1.05) brightness(1.02);
  opacity: 0.96;
}

/* Shimmer overlay */
.nsim-shimmer {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    75deg,
    transparent 0%,
    rgba(255, 255, 255, 0.1) 45%,
    rgba(255, 255, 255, 0.35) 50%,
    rgba(255, 255, 255, 0.1) 55%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: shimmerMove 6s infinite linear;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 0.7;
  z-index: 3;
  border-radius: inherit;
}

@keyframes shimmerMove {
  0% {
    transform: translateX(-100%) rotate(5deg);
  }
  100% {
    transform: translateX(200%) rotate(5deg);
  }
}

/* Halo subtil autour du mock */
.nsim-mock::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 0 30px rgba(108, 92, 231, 0.12);
  pointer-events: none;
}

/* ratio */
.nsim-mock {
  aspect-ratio: 16 / 10;
}

/* ==== Révélation au scroll (fade + slide-up) ==================== */
.neatik-simteaser {
  /* rien */
}

/* État initial tant que la section n'est pas en vue */
.neatik-simteaser:not(.is-inview) .nsim-left,
.neatik-simteaser:not(.is-inview) .nsim-right {
  opacity: 0;
  transform: translateY(18px) scale(.98);
  filter: saturate(.9);
}

/* Transition */
.neatik-simteaser .nsim-left,
.neatik-simteaser .nsim-right {
  transition:
    opacity .6s cubic-bezier(.2,.7,.2,1),
    transform .6s cubic-bezier(.2,.7,.2,1),
    filter .6s linear;
}

/* Stagger léger */
.neatik-simteaser .nsim-left { transition-delay: .05s; }
.neatik-simteaser .nsim-right { transition-delay: .18s; }

/* Accessibilité : si l’utilisateur réduit les animations, on les coupe */
@media (prefers-reduced-motion: reduce) {
  .neatik-simteaser .nsim-left,
  .neatik-simteaser .nsim-right {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
}

/* ================================
   App Neatik – Product block (clean)
   ================================ */

.appshow{
  --container: min(1200px, 92vw);
  --gap: clamp(24px, 3vw, 40px);
  --bullets-max: clamp(48ch, 37vw, 58ch); /* wrap column for bullets */
  --check-size: 22px;                     /* ← change to grow/shrink checks */
  --phone-nudge-desktop: 10px;            /* ← lower/raise phone on desktop */

  background:#fff;
  padding: clamp(48px, 8vw, 120px) 0;
}

.appshow__inner{
  width:var(--container);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr; /* mobile first */
  gap:var(--gap);
  align-items:center;
}

/* ---------- Left column ---------- */
.appshow__left{}

/* kicker */
.appshow__kicker{
  display:inline-block;
  padding:8px 14px;
  border-radius:999px;
  background:#F3ECFF;
  color:#6B46C1;
  font-weight:600;
  font-size:14px;
  line-height:1;
  margin-bottom: clamp(12px, 1.6vw, 16px);
}

/* title (no forced line break) */
.appshow__title{
  margin:0 0 clamp(12px, 2.2vw, 20px);
  font-weight:900;
  letter-spacing:-.02em;
  line-height:1.08;
  color:#1A1F1C;
  font-size:clamp(28px, 4.8vw, 48px);
}

/* bullets */
.appshow__list{
  margin: clamp(16px, 2.2vw, 24px) 0 0;
  padding:0;
  list-style:none;
  max-width:var(--bullets-max);
}

.appshow__list li{
  position:relative;
  padding-left: calc(var(--check-size) + 10px);
  margin:0 0 14px;
  color:#1A1F1C;
  font-size:clamp(15px, 2.2vw, 18px);
  line-height:1.55;
  text-wrap:pretty; /* soft breaks, nicer rag */
}

.appshow__list li::before{
  content:"";
  position:absolute;
  left:0; top:.45em;
  width:var(--check-size); height:var(--check-size);
  background:#111;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.55 17.8L4.7 12.95l1.4-1.4l3.45 3.45l7.35-7.35l1.4 1.4z'/%3E%3C/svg%3E") no-repeat 50% 50% / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.55 17.8L4.7 12.95l1.4-1.4l3.45 3.45l7.35-7.35l1.4 1.4z'/%3E%3C/svg%3E") no-repeat 50% 50% / contain;
}

/* ---------- CTAs ---------- */
/* Use ONE CTA block in your HTML: <div class="appshow__ctas">…</div>
   If you still have a legacy “top/bottom” pair, we force-hide the top. */
.appshow__ctas--top{ display:none !important; }

.appshow__ctas{
  display:grid;
  gap:12px;              /* stacked on mobile */
  margin-top:14px;
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding:14px 22px;
  font-weight:700;
  text-decoration:none;
  transition:transform .15s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
  white-space:nowrap;
  width:100%; /* full width on mobile; desktop overrides below */
}

.btn-primary{
  background:linear-gradient(180deg,#7C5CFF 0%,#5B43F0 100%);
  color:#fff;
  box-shadow:0 12px 28px rgba(95,74,245,.24),0 2px 6px rgba(17,17,17,.06);
}
.btn-primary:hover{ transform:translateY(-1px); }

.btn-ghost{
  background:#fff;
  color:#111;
  border:2px solid #E7E8EC;
}
.btn-ghost--black{
  border-color:#111;
  box-shadow:0 10px 24px rgba(17,17,17,.08),0 2px 6px rgba(17,17,17,.05);
}
.btn-ghost--black:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 32px rgba(17,17,17,.12),0 4px 10px rgba(17,17,17,.07);
}

/* ---------- Right column (phone) ---------- */
.appshow__img{
  display:block;
  width:min(640px, 88vw);
  height:auto;
}

/* ============ Desktop ============ */
@media (min-width: 992px){
  .appshow__inner{
    grid-template-columns:1.05fr 1fr;
    align-items:center;
  }

  /* CTAs inline on desktop */
  .appshow__ctas{
    grid-auto-flow:column;
    justify-content:start;
    gap:14px;
    margin-top: clamp(10px, 1.6vw, 16px);
  }
  .btn{ width:auto; } /* no full-width on desktop */

  /* lower the phone a bit */
  .appshow__img{ transform: translateY(var(--phone-nudge-desktop)); }
}

/* ================================
   Bloc prestataires – layout & style
   ================================ */
.providers{
  --container: min(1200px, 92vw);
  --gap: clamp(24px, 3vw, 48px);
  --radius: 22px;
  --card-shadow: 0 18px 46px rgba(16,24,40,.16), 0 4px 12px rgba(16,24,40,.08);
  --bullets-max: clamp(48ch, 37vw, 58ch);

  background:#fff;
  padding: clamp(56px, 8vw, 120px) 0;
}

.providers__inner{
  width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 1fr;  /* media | content */
  align-items: center;
  gap: var(--gap);
}

/* ===== Media (cartes décalées à gauche) ===== */
.providers__media{
  position: relative;
  height: clamp(380px, 42vw, 560px); /* hauteur réelle pour les cartes en absolute */
}

.providers__card{
  position: absolute;
  width: clamp(220px, 28vw, 360px);
  height: clamp(320px, 38vw, 500px);
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  background:#f7f7f9;
}

.providers__card img{
  width:100%; height:100%; object-fit: cover; display:block;
}

/* Décalage “Qonto-like” */
.providers__card--left{
  left: 0;
  top: 4%;
  transform: rotate(-2.4deg);
}
.providers__card--right{
  right: 6%;
  bottom: 0;
  transform: rotate(2.8deg);
}

/* ===== Texte ===== */
.providers__content{ max-width: 680px; }

.providers__title{
  margin: 0 0 clamp(12px, 1.6vw, 16px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color:#111;
  font-size: clamp(28px, 4.6vw, 48px);
}

/* Liste check noire (même style que l’autre bloc) */
.providers__list{
  margin: clamp(14px, 2vw, 20px) 0 clamp(18px, 2.4vw, 26px);
  padding: 0;
  list-style: none;
  max-width: var(--bullets-max);
}
.providers__list li{
  position: relative;
  padding-left: 30px;
  margin: 0 0 12px;
  color:#1A1F1C;
  font-size: clamp(15px, 2.1vw, 18px);
  line-height: 1.55;
  text-wrap: pretty;
}
.providers__list li::before{
  content:"";
  position:absolute; left:0; top:.45em;
  width:22px; height:22px; background:#111;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.55 17.8 4.7 12.95l1.4-1.4 3.45 3.45 7.35-7.35 1.4 1.4z'/%3E%3C/svg%3E") no-repeat 50% 50%/contain;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.55 17.8 4.7 12.95l1.4-1.4 3.45 3.45 7.35-7.35 1.4 1.4z'/%3E%3C/svg%3E") no-repeat 50% 50%/contain;
}

/* CTA noir (identique à avant) */
.providers__cta{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 14px 22px;
  border-radius: 999px;
  background:#111; color:#fff; text-decoration:none; font-weight:700;
  box-shadow: 0 14px 30px rgba(17,17,17,.18), 0 3px 8px rgba(17,17,17,.12);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.providers__cta:hover{
  background:#000; transform: translateY(-1px);
  box-shadow: 0 18px 40px rgba(17,17,17,.24), 0 6px 12px rgba(17,17,17,.14);
}

/* =========================
   Mobile / tablettes (≤991px)
   - on force l’ordre colonne
   - le MEDIA passe APRÈS le CTA
   - on conserve l’effet “cards” avec absolute + rotations
   ========================= */
@media (max-width: 991px){
  .providers__inner{
    display: flex;           /* override le grid desktop */
    flex-direction: column;  /* empile */
    gap: clamp(20px, 4vw, 28px);
  }

  /* ordre du contenu sur mobile :
     1️⃣ texte + liste
     2️⃣ CTA (dans le même bloc .providers__content si tu veux, sinon laisse-le à la suite)
     3️⃣ images  */
  .providers__content{ order: 1; width: 100%; }
  .providers__media{ order: 3; }

  /* CTA full width sur mobile */
  .providers__cta{ width: 100%; }

  /* Media : garde une hauteur réelle, garde les cartes en absolute (effet intact) */
  .providers__media{
    position: relative;
    width: 100%;
    height: clamp(360px, 72vw, 520px);   /* ↑ hauteur visible */
    margin-top: clamp(18px, 4vw, 28px);
  }

  .providers__card{
    position: absolute;                 /* on conserve l’effet superposé */
    width: clamp(44%, 52vw, 62%);
    height: 88%;
    box-shadow: var(--card-shadow);
  }

  /* léger recentrage pour mobiles */
  .providers__card--left{ left: 3%; top: 6%; }
  .providers__card--right{ right: 3%; bottom: -2%; }
}


/* ===============================
   SECTION FAQ – Neatik (desktop + mobile)
   =============================== */

.faq {
  --container: min(1200px, 92vw);
  --gap: clamp(24px, 4vw, 56px);
  --indent: clamp(8px, 1.8vw, 24px);      /* décalage des réponses */
  --rule: #E7E8EC;
  --q-size: clamp(16px, 2.4vw, 20px);     /* taille question */
  --a-size: clamp(16px, 2vw, 17px);       /* taille réponse */

  background: #fff;
  padding: clamp(56px, 8vw, 120px) 0;
}

.faq__container{
  width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--gap);
  align-items: start;
}

/* Colonne gauche */
.faq__introTitle{
  margin: 0 0 12px;
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: clamp(28px, 4.6vw, 48px);
  color: #111;
}
.faq__introText{
  margin: 0;
  color: #1A1F1C;
  font-size: clamp(16px, 2.1vw, 20px);
}
.faq__introText a{ color:#2b61ff; text-decoration: underline; }

/* Colonne droite */
.faq__content{ width: 100%; }

/* Item */
.faq__item{ border-bottom: 1px solid var(--rule); }

/* Question (H3 + button) */
.faq__question{
  margin: 0; 
  font-size: var(--q-size);
  font-weight: 600;        /* un peu moins “gras” que 800/900 */
  letter-spacing: -.01em;
  color:#111;
}
.faq__btn{
  all: unset;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: clamp(14px, 2.4vw, 18px) 0;
  cursor: pointer;
}

/* Chevron (SVG mask) */
.faq__chev{
  flex: 0 0 auto;
  width: 22px; height: 22px;
  background: #111;
  transition: transform .2s ease;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.7 9.3L12 14.6l5.3-5.3' fill='%23000'/%3E%3C/svg%3E") no-repeat 50% 50%/contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.7 9.3L12 14.6l5.3-5.3' fill='%23000'/%3E%3C/svg%3E") no-repeat 50% 50%/contain;
  transform: rotate(0deg);
}

/* Réponse */
.faq__answer{
  display: none;
  padding: 0 0 clamp(16px, 2.2vw, 20px);
  margin-left: var(--indent);        /* léger décalage à droite */
  color:#1A1F1C;
  font-size: var(--a-size);
  line-height: 1.6;
}
.faq__answer p{ margin: 0 0 10px; }
.faq__answer ul, .faq__answer ol{ margin: 10px 0 10px var(--indent); }

/* État ouvert (piloté par JS) */
.faq__item.open .faq__answer{ display: block; }
.faq__item.open .faq__btn[aria-expanded="true"] + .faq__chev,
.faq__item.open .faq__chev{ transform: rotate(180deg); }

/* Table légère si utilisée */
.faq__Table{
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  font-size: var(--a-size);
}
.faq__Table th,
.faq__Table td{
  padding: 10px 12px;
  border-bottom: 1px solid var(--rule);
  text-align: left;
}

/* Responsive */
@media (max-width: 991px){
  .faq__container{
    grid-template-columns: 1fr;
    gap: clamp(16px, 5vw, 28px);
  }
}

/* ================================
   À PROPOS NEATIK — Styles
   ================================ */
.aboutai{
  /* variables faciles à tuner */
  --container: min(1100px, 92vw);
  --gap-x: clamp(20px, 3vw, 28px);
  --gap-y: clamp(16px, 2.4vw, 22px);
  --dtw: 220px;                 /* largeur de la colonne <dt> sur desktop */
  --line: #E7E8EC;
  --ink: #1A1F1C;
  --muted: #5D6368;
  --kicker-bg: #F3ECFF;
  --kicker-ink: #6B46C1;

  background: #FBFBFE;          /* léger différenciant vs sections blanches */
  padding: clamp(48px, 8vw, 96px) 0;
  color: var(--ink);
}

.aboutai__inner{
  width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gap-x);
}

/* Titre + pitch */
.aboutai__title{
  margin: 0 0 clamp(10px, 1.6vw, 14px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.08;
  font-size: clamp(28px, 4.4vw, 42px);
  color: var(--ink);
}

.aboutai__pitch{
  margin: 0 0 clamp(20px, 3.2vw, 28px);
  max-width: 80ch;
  color: var(--muted);
  font-size: clamp(15px, 2.2vw, 18px);
  line-height: 1.6;
}
.aboutai__pitch strong{ color: var(--ink); }

/* Liste de faits (dl → paires dt/dd) */
.aboutai__facts{
  margin: 0 0 clamp(28px, 4vw, 40px);
  padding: 0;
  display: grid;
  gap: 0;                       /* les séparateurs gèrent l’espace vertical */
}

/* Chaque couple dt/dd */
.aboutai__fact{
  display: grid;
  grid-template-columns: minmax(140px, var(--dtw)) 1fr;
  column-gap: clamp(14px, 2.4vw, 24px);
  row-gap: 6px;
  padding: clamp(12px, 1.8vw, 16px) 0;
  border-bottom: 1px solid var(--line);
}

/* Titre du fait (colonne gauche) */
.aboutai__fact dt{
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7A7F87;
  line-height: 1.3;
}

/* Valeur (colonne droite) */
.aboutai__fact dd{
  margin: 0;
  color: var(--ink);
  font-size: clamp(15px, 2vw, 17px);
  line-height: 1.6;
}
.aboutai__fact dd ul{
  margin: 8px 0 0 0;
  padding: 0 0 0 18px;          /* listes internes bien nettes */
}
.aboutai__fact dd li{ margin: 4px 0; }

/* Résumé final (boîte douce) */
.aboutai__summary{
  margin-top: clamp(26px, 4vw, 40px);
  padding: clamp(16px, 2.6vw, 22px);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #FFFFFF;
  box-shadow: 0 2px 8px rgba(16,24,40,.04);
}
.aboutai__summary h3{
  margin: 0 0 6px 0;
  font-size: clamp(16px, 2.4vw, 18px);
  font-weight: 800;
  letter-spacing: .01em;
}
.aboutai__summary p{
  margin: 0;
  color: var(--muted);
  font-size: clamp(14px, 2vw, 16px);
  line-height: 1.6;
}

/* Liens */
.aboutai a{
  color: #5B43F0;
  text-decoration: none;
}
.aboutai a:hover{ text-decoration: underline; }

/* --------- Responsive --------- */
@media (max-width: 840px){
  .aboutai__fact{
    grid-template-columns: 1fr;         /* dt au-dessus de dd */
    row-gap: 4px;
  }
  .aboutai__fact dt{
    order: 1;
  }
  .aboutai__fact dd{
    order: 2;
  }
  .aboutai__pitch{ max-width: 100%; }
}
/*carousel*/


       

        @keyframes fadeInLocation {
            to { opacity: 1; }
        }

        .location-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.12);
        }

        .location-item svg {
            width: 20px;
            height: 20px;
            color: #666;
        }

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

        .location-item .name {
            font-size: 15px;
            font-weight: 600;
            color: #1a1a1a;
        }

        .location-item .type {
            font-size: 13px;
            color: #999;
        }

        .location-item .arrow {
            margin-left: 8px;
            width: 16px;
            height: 16px;
        }

        .left-locations {
            display: flex;
            flex-direction: column;
            gap: 20px;
            width: 220px;
        }

        .right-locations {
            display: flex;
            flex-direction: column;
            gap: 20px;
            width: 220px;
            align-items: flex-end;
        }

       

        @keyframes fadeIn {
            to { opacity: 1; }
        }