/* ==========================================================================
   Dock — Design System
   Source de vérité : Figma "Dock-website" (node 1:39, desktop)
   Ce fichier est réutilisé par toutes les pages : n'y mettre que des tokens
   et des composants génériques (pas de layout spécifique à une page).
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Roobert";
  src: url("assets/fonts/Roobert-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Roobert";
  src: url("assets/fonts/Roobert-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Roobert";
  src: url("assets/fonts/Roobert-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/Inter-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Couleurs — texte */
  --ds-ink: #121722;                       /* texte principal */
  --ds-ink-80: rgba(18, 23, 34, 0.8);
  --ds-ink-50: rgba(18, 23, 34, 0.5);      /* texte secondaire */
  --ds-white: #ffffff;
  --ds-white-60: rgba(255, 255, 255, 0.6); /* texte inactif sur bleu */

  /* Couleurs — marque */
  --ds-blue: #0068f9;                      /* primaire */
  --ds-blue-hover: #1372ff;
  --ds-blue-active: #005fe4;
  --ds-sky: #56bdff;                       /* accent (dot actif) */

  /* Couleurs — surfaces */
  --ds-bg: #ffffff;
  --ds-surface-tint: #faf9f7;              /* cartes feature / fond section produit — TEST Luc (avant : #f7fcff) */
  --ds-surface-chip: #f5f1ea;              /* hovers nav / cartes stat / chips — beige light assorti au tint TEST (avant : #eff8fe) */
  --ds-surface-chip-neutral: rgba(224, 231, 235, 0.4); /* pastille flèche sur blanc */
  --ds-surface-gray: #f4f4f4;              /* chrome navigateur */

  /* Couleurs — bordures */
  --ds-border: #e3ddd1;              /* bordures/hairlines — beige light assorti au tint TEST (avant : #d6e3ef) */
  --ds-ring: rgba(18, 23, 34, 0.15);       /* anneau bouton outline */
  --ds-dot-idle: rgba(169, 186, 197, 0.31);/* dot inactif */

  /* Ombres */
  --ds-shadow-btn: 0 0.5px 1px 0 rgba(0, 0, 0, 0.25);
  --ds-shadow-btn-primary-inset:
    inset 0 -1px 0 0 rgba(11, 68, 147, 0.22),
    inset 0 0 0 0.5px rgba(11, 68, 147, 0.25);
  --ds-ring-card: 0 0 0 0.5px rgba(0, 0, 0, 0.25);
  --ds-ring-section: inset 0 0 0 0.5px rgba(0, 0, 0, 0.05);
  --ds-shadow-window:
    0 0 0 0.969px rgba(0, 0, 0, 0.1),
    0 16.48px 17.45px -11.633px rgba(0, 0, 0, 0.08);

  /* Rayons */
  --ds-radius-xs: 4px;
  --ds-radius-sm: 6px;
  --ds-radius-md: 16px;    /* cartes & sections */
  --ds-radius-lg: 26px;    /* carte prompt */
  --ds-radius-pill: 100px;

  /* Typo */
  --ds-font: "Roobert", sans-serif;
  --ds-font-ui: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Rythme vertical (Figma : sections espacées de 216, titre → contenu 56) */
  --ds-section-gap: 216px;
  --ds-heading-gap: 56px;
  --ds-grid-gap: 16px;     /* gouttière entre cartes d'une même grille */

  /* Conteneur */
  --ds-page-max: 1728px;   /* largeur canvas desktop */
  --ds-content-max: 1712px;/* largeur sections (cartes, stage produit) */
  --ds-page-gutter: 32px; /* retrait commun du header, des héros et des sections */
  --ds-heading-indent: 48px;
}

/* ---------- Base ---------- */
.ds-page {
  background: var(--ds-bg);
  font-family: var(--ds-font);
  color: var(--ds-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Conteneur de section : pleine largeur moins gouttières, centré */
.ds-container {
  width: calc(100% - 2 * var(--ds-page-gutter));
  max-width: var(--ds-content-max);
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 800px) {
  :root { --ds-page-gutter: 16px; }
}

/* ---------- Typographie ----------
   h1  : 60/64, Medium, -1% — héros (blanc sur bleu)
   h2  : 40/46, -1% — SemiBold pour la phrase d'accroche, Medium pour la suite
   h3  : 24px, Medium — titres de cartes
   body-lg : 18/28, Regular — descriptions
   label   : 16px, Medium — nav, boutons                                     */
.ds-h1 {
  font-weight: 500;
  font-size: 60px;
  line-height: 64px;
  letter-spacing: -0.01em;
}
.ds-h2 {
  font-weight: 500;
  font-size: 40px;
  line-height: 46px;
  letter-spacing: -0.01em;
  color: var(--ds-ink);
  /* lignes équilibrées, pas d'orphelins */
  text-wrap: balance;
}
.ds-h2 .ds-h2-lead {
  font-weight: 600;
  display: block;
  margin-bottom: 16px;
  letter-spacing: -0.004em; /* Figma : -0.16px sur 40px */
}
.ds-h2 .ds-h2-lead:last-child { margin-bottom: 0; }
.ds-h3 {
  font-weight: 500;
  font-size: 24px;
  line-height: 32px;
  color: var(--ds-ink);
}
.ds-body-lg {
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: var(--ds-ink);
  text-wrap: pretty;
}
.ds-label {
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  color: var(--ds-ink);
}

/* ---------- Boutons ----------
   Les CTA marketing utilisent le format Medium : 40px, texte 17/22 Medium. */
.ds-btn {
  height: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 20px 9px;
  font-family: var(--ds-font);
  font-weight: 500;
  font-size: 17px;
  line-height: 22px;
  color: var(--ds-ink);
  white-space: nowrap;
  border: 0;
  cursor: pointer;
  border-radius: var(--ds-radius-pill);
}
.ds-btn--lg { height: 40px; }
.ds-btn--ghost {
  background: var(--ds-white);
  border-radius: var(--ds-radius-sm);
  padding: 7px 14px 8px;
}
.ds-btn--outline {
  background: var(--ds-white);
  box-shadow:
    0 0.5px 1px 0 rgba(0, 0, 0, 0.08),
    inset 0 -1px 0 0 rgba(18, 23, 34, 0.1),
    inset 0 0 0 0.5px var(--ds-ring);
}
.ds-btn--primary {
  background: var(--ds-blue);
  color: var(--ds-white);
  box-shadow: var(--ds-shadow-btn), var(--ds-shadow-btn-primary-inset);
}
.ds-btn--ghost:hover { background: #f4f4f5; }
.ds-btn--outline:hover { background: #f7f7f8; }
.ds-btn--primary:hover { background: var(--ds-blue-hover); }
.ds-btn--ghost:active {
  background: #eeeeef;
  box-shadow: inset 0 2px 4px rgba(18, 23, 34, 0.1);
}
.ds-btn--outline:active {
  background: #f2f2f3;
  box-shadow:
    inset 0 0 0 0.5px var(--ds-ring),
    inset 0 2px 4px rgba(18, 23, 34, 0.12);
}
.ds-btn--primary:active {
  background: var(--ds-blue-active);
  box-shadow:
    inset 0 0 0 0.5px rgba(11, 68, 147, 0.35),
    inset 0 2px 5px rgba(4, 36, 78, 0.4);
}

/* ---------- Cartes ---------- */
/* Carte feature : fond teinté, rayon 16, titre 24 + description 18/28 */
.ds-card {
  position: relative;
  background: var(--ds-surface-tint);
  border-radius: var(--ds-radius-md);
  overflow: hidden;
}
.ds-card-title {
  font-weight: 500;
  font-size: 24px;
  line-height: 32px;
  color: var(--ds-ink);
  text-wrap: balance;
}
.ds-card-body {
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: var(--ds-ink);
  text-wrap: pretty;
}
/* Carte stat / témoignage : blanche, bordure fine, gros chiffre 48.
   Bloc entier cliquable quand c'est un <a>. */
.ds-card--stat {
  background: var(--ds-bg);
  /* bordure un cran plus douce que --ds-border */
  border: 0.5px solid #ece8e0;
}
a.ds-card {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
/* cartes témoignage/stat cliquables : au hover, remplissage = fond des cartes (surface-tint) */
a.ds-card--stat:hover {
  background: var(--ds-surface-tint);
  border-color: transparent;
}
a.ds-card:hover .ds-arrow-chip,
a.ds-card--stat:hover .ds-arrow-chip { background: #fff; }
.ds-stat-value {
  font-weight: 600;
  font-size: 48px;
  line-height: 52px;
  color: var(--ds-ink);
  white-space: nowrap;
}
.ds-stat-label {
  font-weight: 500;
  font-size: 48px;
  line-height: 52px;
  color: var(--ds-ink);
  /* le chiffre reste sur une ligne, mais un libellé long passe à la ligne
     plutôt que d'être coupé par le bord de la carte */
  text-wrap: balance;
}

/* Pastille flèche (coin des cartes) : cercle 36, flèche vers le haut-droite */
.ds-arrow-chip {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ds-radius-pill);
  background: #fff;
  box-shadow: 0 0 0 1px rgba(18, 23, 34, 0.05);
  transform: rotate(-45deg);
}
.ds-arrow-chip img { width: 12px; height: 10px; }
.ds-card--stat .ds-arrow-chip,
.ds-arrow-chip--neutral { background: #fff; }

/* Grille de cartes : gouttière au token, hauteurs figées par la grille */
.ds-card-grid {
  display: flex;
  gap: var(--ds-grid-gap);
  width: 100%;
}
.ds-card-grid > * { flex: 1 1 0; min-width: 0; }

/* ---------- Rythme des sections ---------- */
.ds-section { margin-top: var(--ds-section-gap); }
.ds-section-heading {
  /* mesure confortable : les longs titres se répartissent sur 2 lignes
     équilibrées (text-wrap: balance) au lieu de filer sur une seule */
  max-width: 1060px;
  padding-left: var(--ds-heading-indent);
  margin-bottom: var(--ds-heading-gap);
}

/* ---------- Responsive de base ---------- */
@media (max-width: 1024px) {
  .ds-h1 { font-size: 44px; line-height: 48px; }
  .ds-h2 { font-size: 30px; line-height: 36px; }
  :root { --ds-section-gap: 120px; --ds-heading-gap: 36px; }
  .ds-section-heading { padding-left: 24px; }
}
@media (max-width: 640px) {
  .ds-h1 { font-size: 36px; line-height: 40px; }
  .ds-h2 { font-size: 26px; line-height: 32px; }
  :root { --ds-section-gap: 88px; --ds-heading-gap: 28px; }
  .ds-card-grid { flex-direction: column; }
  .ds-card-grid > * { flex: none; }
}


/* ==========================================================================
   Composants sous-pages (déclinables sur toutes les pages internes)
   sp-hero : hero split texte / stage bleu · sp-chat : carte chat IA statique
   cards-auto : grilles de cartes à hauteur de contenu · faq : accordéon
   ========================================================================== */
/* ---- Hero split : texte sur fond clair, faux chat sur le fond bleu stage.
   Le bleu vif plein panneau reste réservé à la home. ---- */
/* Règle : les deux colonnes d'un hero split font toujours la même hauteur —
   la plus haute impose sa hauteur à l'autre (align-items: stretch). */
/* Règle : hauteur uniforme pour tous les heroes de pages internes (700px),
   colonnes toujours égales. La home garde son hero propre (fg-hero). */
.hero.fg-hero.sp-hero {
  height: auto;
  min-height: 740px;
  align-items: stretch;
  /* échancrures des coins du bloc droit sur le fond teinté du panneau gauche */
  background: var(--ds-surface-tint);
}
.sp-hero-left {
  flex: 1 1 50%;
  min-width: 0;
  /* règle : contenu top-aligné, et l'espace au-dessus de l'eyebrow est
     ÉGAL à l'espace à gauche (64px). Hauteur fixe 740. */
  padding: 64px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  background: var(--ds-surface-tint);
}
.sp-hero-eyebrow {
  margin-bottom: 24px;
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  /* subheads en encre, pas en gris (règle globale) */
  color: var(--ds-ink);
}
.sp-hero-title { max-width: 640px; color: var(--ds-ink); }
.sp-hero-sub { margin-top: 24px; max-width: 560px; }
.sp-hero-ctas { display: flex; margin-top: 32px; gap: 8px; }
.sp-hero-left .sp-list { margin-top: 16px; }
/* CTA in-page « medium » (blanc ou bleu) : même format partagé de 40px,
   texte 17/22 et padding horizontal de 20px. */
.hero-ctas .btn,
.sp-hero-ctas .btn,
.features-ctas .ds-btn,
.demo-cta .btn,
.wall-more .btn,
.pr-col .btn,
.plan-grid .btn {
  height: 40px;
  font-size: 17px;
  line-height: 22px;
  padding: 7px 20px 9px;
}

/* panneau droit : même fond que le stage des sections onglets */
.sp-hero-right {
  position: relative;
  flex: 1 1 50%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 48px;
  background: var(--ds-blue);
  overflow: hidden;
  /* coins gauches arrondis comme le cadre : le bloc droit lit comme une carte */
  border-radius: var(--ds-radius-md) 0 0 var(--ds-radius-md);
}
/* fond du stage hero = fond de la hero home : grille de dots sur bleu */
.sp-hero-right::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(18, 23, 34, 0.23) 1.7px, rgba(18, 23, 34, 0) 2.15px);
  /* vraie grille : cellules calibrées par header.js pour un nombre entier
     de colonnes/lignes — marges symétriques, aucun dot coupé */
  background-size: var(--dotx, 20.6px) var(--doty, 20.6px);
  background-position: 0 0;
  pointer-events: none;
}
.sp-hero-right::after {
  content: "";
  position: absolute;
  inset: 0;
  /* tuile de grain : 256 au lieu de 512, posée à sa taille native. Le bruit
     est monochrome et ne se compresse pas — passer la tuile de 512 à 256 la
     fait tomber de 117 à 24 Ko. AVIF d'abord, WebP pour qui ne le lit pas. */
  background: url("assets/img/figma/grain-256.webp");
  background-image: image-set(url("assets/img/figma/grain-256.avif") type("image/avif"), url("assets/img/figma/grain-256.webp") type("image/webp"));
  background-size: 256px 256px;
  mix-blend-mode: soft-light;
  opacity: 0.2;
  pointer-events: none;
}

/* ---- Faux chat Claude ↔ Dock (statique) ---- */
.sp-chat {
  position: relative;
  z-index: 1;
  width: 520px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 24px;
  box-shadow:
    0 0 0 1px rgba(18, 23, 34, 0.08),
    0 17px 18px -12px rgba(18, 23, 34, 0.08);
  overflow: hidden;
}
.sp-chat-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  box-shadow: inset 0 -0.5px 0 rgba(18, 23, 34, 0.12);
}
.sp-chat-mark { font-size: 14px; color: var(--ds-ink); }
.sp-chat-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--ds-ink);
}
.sp-chat-conn img { height: 12px; width: auto; }
.sp-chat-conn {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 5px;
  background: var(--ds-surface-chip);
  border-radius: var(--ds-radius-pill);
  font-weight: 500;
  font-size: 12px;
  color: var(--ds-ink);
}
.sp-chat-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px 20px;
}
.sp-msg p {
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  color: var(--ds-ink);
}
.sp-msg--user {
  align-self: flex-end;
  max-width: 85%;
  padding: 10px 14px 11px;
  background: var(--ds-surface-gray);
  border-radius: 14px 14px 4px 14px;
}
.sp-msg--ai { max-width: 92%; display: flex; flex-direction: column; gap: 8px; }
.sp-tool {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  padding: 4px 12px 5px;
  background: var(--ds-surface-chip);
  border-radius: var(--ds-radius-pill);
  font-family: var(--ds-font-ui);
  font-size: 11.5px;
  color: var(--ds-ink);
}
.sp-tool-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ds-sky);
}
.sp-linkcard {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 6px 14px 7px 7px;
  background: var(--ds-surface-gray);
  border-radius: var(--ds-radius-pill);
  font-family: var(--ds-font-ui);
  font-weight: 500;
  font-size: 12px;
  color: var(--ds-ink);
}
.sp-linkcard-badge {
  width: 19px;
  height: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: var(--ds-radius-pill);
}
.sp-chat-input {
  display: flex;
  align-items: center;
  margin: 4px 12px 12px;
  padding: 5px 5px 5px 16px;
  border-radius: var(--ds-radius-pill);
  box-shadow: inset 0 0 0 1px rgba(18, 23, 34, 0.1);
}
.sp-chat-input p {
  font-size: 14px;
  color: var(--ds-ink-50);
}
.sp-chat-send {
  margin-left: auto;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ds-blue);
  border-radius: var(--ds-radius-pill);
  box-shadow: var(--ds-shadow-btn), var(--ds-shadow-btn-primary-inset);
}
.sp-chat-send img { width: 12px; height: 10px; }

/* ---- FAQ : deux colonnes — titre + contact à gauche, accordéon en lignes à droite ---- */
.faq-wrap {
  display: flex;
  align-items: flex-start;
  gap: 64px;
  /* meme retrait que les titres de section (--ds-heading-indent) : la FAQ
     etait le seul bloc de texte pose a nu dans le conteneur, donc a 16 du
     bord sur un petit ecran */
  padding: 0 var(--ds-heading-indent);
}
.faq-left { flex: 0 0 380px; }
.faq-contact {
  margin-top: 16px;
  color: var(--ds-ink);
}
.faq-contact a { display: block; margin-top: 4px; color: var(--ds-blue); text-decoration: none; }
.faq-contact a:hover { text-decoration: underline; }
.faq-contact a.ds-btn { display:inline-flex;gap:8px;margin-top:16px;color:var(--ds-white); }
.faq-contact a.ds-btn:hover { text-decoration:none; }
.faq-list {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.faq-item {
  background: none;
  border-radius: 0;
  border-top: 0.5px solid var(--ds-border);
}
.faq-item summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 26px 4px;
  cursor: pointer;
  font-weight: 500;
  font-size: 20px;
  line-height: 28px;
  color: var(--ds-ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
/* toggle : + qui devient − à l'ouverture (la barre verticale s'efface) */
.faq-toggle {
  position: relative;
  margin-left: auto;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  font-size: 0; /* masque le caractère "+" du markup */
  color: transparent;
}
.faq-toggle::before,
.faq-toggle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--ds-ink);
  transform: translate(-50%, -50%);
}
.faq-toggle::before { width: 14px; height: 1.5px; }
.faq-toggle::after {
  width: 1.5px;
  height: 14px;
  transition: transform 0.2s ease, opacity 0.15s ease;
}
.faq-item[open] .faq-toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}
.faq-item .faq-answer {
  padding: 0 44px 28px 4px;
  max-width: 860px;
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: var(--ds-ink);
}
.faq-item .faq-answer p + p { margin-top: 12px; }
@media (max-width: 900px) {
  .faq-wrap { flex-direction: column; gap: 32px; }
  .faq-left { flex: none; }
}

/* ---- Capabilities : la section onglets de la home, graphique statique ---- */
.ts-rail .sl-tab .ts-desc ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ts-rail .sl-tab .ts-desc li { padding: 2px 0; }
.ts-rail .sl-tab .ts-desc li::before { content: "— "; }
.ts-stage .sp-shot {
  position: absolute;
  left: 22px;
  top: 22px;
  width: 1248px;
  height: 736px;
  object-fit: cover;
  object-position: top left;
  border-radius: 12px;
  box-shadow: var(--ds-shadow-window);
  background: #fff;
}

/* ---- Grilles : cartes à hauteur de contenu (FAQ, workflows) ---- */
.cards-auto .ds-card {
  height: auto;
  /* règle : espace au-dessus de l'icône = espace à gauche (48px) */
  padding: 48px;
}
.cards-auto .ds-card-title,
.cards-auto .ds-card-body {
  position: static;
  width: auto;
  max-width: 560px;
}
.cards-auto .ds-card-body { margin-top: 10px; }
.cards-auto .ds-card .ds-arrow-chip {
  position: absolute;
  right: 46px;
  top: 40px;
}
.cards-auto.with-chip .ds-card { padding-right: 120px; }
/* rangée = même hauteur (flex stretch par défaut) */
.ds-card-grid.cards-auto { align-items: stretch; }
.ds-card-grid + .ds-card-grid { margin-top: var(--ds-grid-gap); }

/* ---- Setup : cartes façon "stat" cliquables ---- */
.setup-grid .ds-card--stat { height: 240px; }
.setup-grid .setup-name {
  position: absolute;
  left: 48px;
  top: 44px;
  font-weight: 600;
  font-size: 32px;
  line-height: 38px;
  color: var(--ds-ink);
}
.setup-grid .setup-label {
  position: absolute;
  left: 48px;
  bottom: 40px;
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: var(--ds-ink-50);
}
.setup-grid .ds-arrow-chip { position: absolute; right: 37px; top: 38px; }

/* ---- CTA : boutons centrés sous le titre ---- */
/* ---------- CTA finale (pattern Glide : déclaration + action) ---------- */
.cta-final { display: block; text-align: left; padding: 0; }
.cta-glide {
  max-width: 1060px;
  /* pas d'indentation : aligné pile sur les éléments de la grille
     (ex. "Frequently asked questions") */
  padding-left: 0;
}
.cta-glide .cta-dim {
  display: block;
  font-weight: 600;
  /* en encre, même taille que les headings (hérite du .ds-h2 40/46) */
  color: var(--ds-ink);
}
.cta-action {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-top: 10px;
  font-weight: 600;
  color: var(--ds-ink);
  text-decoration: none;
}
.cta-arrow {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--ds-ink);
  transition: transform 0.15s ease;
}
.cta-arrow img { width: 15px; height: 13px; }
.cta-action:hover .cta-arrow { transform: translateX(4px); }

@media (max-width: 1024px) {
  .fg-hero.fg-hero--sub .fg-hero-left { padding: 72px 20px 80px; }
  .cards-auto .ds-card { padding: 24px; }
  .cards-auto.with-chip .ds-card { padding-right: 96px; }
}

/* Fenêtre placeholder blanche (screens à venir) — même style que sp-shot */
.sp-placeholder {
  position: relative;
  z-index: 1;
  width: min(640px, calc(100% - 16px));
  max-width: 100%;
  height: 480px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(18, 23, 34, 0.08);
}
/* liste à tirets (bullets de hero / descriptions d'onglets) */
.sp-list {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  font-weight: 400;
  font-size: 18px;
  line-height: 30px;
  color: var(--ds-ink);
}
.sp-list li::before { content: "— "; color: var(--ds-ink-50); }

/* ==========================================================================
   Footer (composant global — présent sur toutes les pages)
   Colonnes de liens, badges conformité, barre basse logo + légal.
   ========================================================================== */
.ds-footer {
  margin-top: var(--ds-section-gap);
  padding: 88px 0 40px;
}
/* Page sans section entre le hero et le footer (la page Demo) : les 216 du
   rythme inter-sections y creusent un trou. On retombe sur les 88 que le
   footer se donne lui-meme au-dessus de son trait, donc autant d'air
   au-dessus qu'en dessous. */
.hero + .ds-footer { margin-top: 88px; }
/* le trait du haut fait la largeur de la GRILLE (du logo dock au bord droit
   du contenu), pas toute la page */
.ds-footer > .ds-container {
  border-top: 0.5px solid var(--ds-border);
  padding-top: 88px;
}
.ds-footer { padding-top: 0; }
.ds-footer-grid {
  display: grid;
  /* Les colonnes extérieures partagent l’espace libre : General garde
     une vraie largeur, au lieu de laisser tout l’air autour du logo. */
  grid-template-columns: minmax(64px, 1fr) repeat(6, max-content) minmax(160px, 1fr);
  justify-content: space-between;
  gap: 40px 40px;
}
.ds-footer-brand img { width: 30px; height: auto; }
.ds-footer-col { min-width: 0; }
.ds-footer-heading {
  /* même rythme entre le sub-header et les items qu'entre les items */
  margin-bottom: 16px;
  font-weight: 600;
  font-size: 15px;
  line-height: 20px;
  color: var(--ds-ink);
  white-space: nowrap;
}
.ds-footer-col a {
  display: block;
  padding: 8px 0;
  font-weight: 400;
  font-size: 15px;
  line-height: 20px;
  color: var(--ds-ink);
  text-decoration: none;
  white-space: nowrap;
}
.ds-footer-col a:hover { color: var(--ds-blue); }
.ds-footer-badges {
  grid-column: 2 / -1; /* démarre sous Revenue Enablement */
  display: flex;
  gap: 8px;
  margin-top: 48px;
}
/* Badge de conformité : même logique que les pills d'intégration (pill blanc,
   filet fin) mais SANS le renfoncement inset des CTA — c'est une mention, pas
   un bouton. L'icône est en currentColor : encre dans le footer, blanche sur
   le bloc sécurité sombre. */
.ds-footer-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 13px 6px 11px;
  background: var(--ds-white);
  border-radius: var(--ds-radius-pill);
  box-shadow: inset 0 0 0 0.5px var(--ds-ring);
  font-weight: 500;
  font-size: 13.5px;
  letter-spacing: 0.02em;
  color: var(--ds-ink);
  white-space: nowrap;
}
/* le sceau GDPR est un disque : pour qu'il épouse le bout arrondi du pill, son
   air à gauche vaut exactement son air en haut et en bas — les trois écarts
   sont égaux, le disque est concentrique avec l'arrondi */
.ds-footer-badge:has(.trust-gdpr) { padding-left: 4.25px; }
/* Icônes en masque CSS : le glyphe est teinté par background, donc il suit le
   contexte (encre sur blanc, blanc sur le bloc sombre) sans dupliquer le SVG
   dans le HTML de chaque page. Chaque icône garde son ratio Figma. */
.trust-ico {
  display: inline-block;
  flex-shrink: 0;
  background: var(--ds-ink);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.trust-soc {
  width: 19.2px; height: 11px;
  -webkit-mask-image: url("assets/img/trust/soc2.svg");
  mask-image: url("assets/img/trust/soc2.svg");
}
/* le sceau est un disque : à hauteur égale il pèse visuellement moins qu'un
   lockup rectangulaire, donc on le monte à 19px. Les marges négatives
   l'empêchent de pousser la boîte de ligne : le pill garde sa hauteur. */
.trust-gdpr {
  width: 19.4px; height: 19px;
  /* le pill a 5px de padding en haut et 6px en bas : on rattrape le demi-pixel
     pour que le disque soit vraiment centré verticalement */
  margin-top: -1.5px;
  margin-bottom: -2.5px;
  -webkit-mask-image: url("assets/img/trust/gdpr.svg");
  mask-image: url("assets/img/trust/gdpr.svg");
}
.trust-ccpa {
  width: 10px; height: 15px;
  -webkit-mask-image: url("assets/img/trust/ccpa.svg");
  mask-image: url("assets/img/trust/ccpa.svg");
}
.ds-footer-bottom {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 32px;
  padding-top: 28px;
  border-top: 0.5px solid var(--ds-border);
}
.ds-footer-tagline {
  font-weight: 400;
  font-size: 15px;
  color: var(--ds-ink-50);
}
.ds-footer-legal {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
}
.ds-footer-legal a {
  font-weight: 400;
  font-size: 15px;
  color: var(--ds-ink-50);
  text-decoration: none;
  white-space: nowrap;
}
.ds-footer-legal a:hover { color: var(--ds-ink); }
.ds-footer-copy {
  font-weight: 400;
  font-size: 15px;
  color: var(--ds-ink-50);
  white-space: nowrap;
}
@media (max-width: 1610px) {
  .ds-footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ds-footer-col a, .ds-footer-heading { white-space: normal; }
  .ds-footer-brand { grid-column: 1 / -1; }
  .ds-footer-badges { grid-column: 1 / -1; flex-wrap: wrap; }
}
@media (max-width: 760px) {
  .ds-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-footer-bottom { flex-direction: column; align-items: flex-start; }
  .ds-footer-legal { margin-left: 0; }
}

/* Eyebrow de section (petit label au-dessus d'un h2 — cf. Figma Home Page) */
.ds-eyebrow {
  display: block;
  margin-bottom: 16px;
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  /* subheads en encre, pas en gris (règle globale) */
  color: var(--ds-ink);
}


/* ---------- Variantes de contenu de carte (normalisées) ---------- */
/* kicker (petit label) au-dessus du titre d'une carte à padding */
.cards-auto .card-kicker {
  margin: 0 0 8px;
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  color: var(--ds-ink-50);
}
/* liste à tirets dans une carte */
.ds-card .sp-list {
  margin-top: 12px;
  font-size: 18px;
  line-height: 30px;
}
/* paragraphes empilés dans une carte (citation + auteur) */
.ds-card .ds-card-body + .ds-card-body { margin-top: 16px; }

/* ==========================================================================
   Illustrations produit (mini-UI statiques)
   Style : crop d'interface zoomé avec de l'espace autour, micro-copy claire,
   ombres discrètes, aucun mouvement. Composables dans .card-media, .ts-stage,
   .sp-placeholder ou tout conteneur média.
   ========================================================================== */
/* zone média qui accueille une illustration : reprend le fond de la carte */
.card-media.has-il,
.il-canvas {
  background: transparent;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  /* règle : ne jamais cropper une illustration — le spread des ombres
     reste entièrement visible */
  overflow: visible;
  /* pas de padding propre : le bloc média est déjà calé sur les marges
     du texte — l'illustration va de là où le texte part à là où il s'arrête */
  padding: 0;
}
.il {
  position: relative;
  z-index: 1; /* au-dessus des calques décoratifs (symbol, grain) des stages */
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: stretch;
  width: 100%;
}
/* panneau UI blanc — l'unité de base */
.il-ui {
  background: #fff;
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow:
    0 0 0 1px rgba(18, 23, 34, 0.06),
    0 12px 24px -12px rgba(18, 23, 34, 0.1);
  font-family: var(--ds-font-ui);
  font-size: 13px;
  line-height: 18px;
  color: var(--ds-ink);
}
.il-ui--pad { padding: 18px 20px; }
/* rangée de liste (icône + texte + méta) */
.il-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
}
.il-row + .il-row { border-top: 0.5px solid rgba(18, 23, 34, 0.06); }
.il-ico {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--ds-surface-chip);
}
.il-ico--blue { background: linear-gradient(180deg, #2b83ff, var(--ds-blue)); }
.il-ico--sky { background: linear-gradient(180deg, #8ad2ff, var(--ds-sky)); }
.il-ico--gray { background: var(--ds-surface-gray); }
/* avatar : photo (lib de portraits, assets/img/avatars) ou initiales pour
   les non-personnes (domaines, groupes) */
.il-avatar {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-family: var(--ds-font-ui);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
  background: linear-gradient(180deg, #2b83ff, var(--ds-blue));
  box-shadow: 0 0 0 2px #fff;
}
img.il-avatar { object-fit: cover; }
.il-avatar--sky { background: linear-gradient(180deg, #8ad2ff, var(--ds-sky)); }
.il-avatar--ink { background: linear-gradient(180deg, #3a4150, var(--ds-ink)); }
/* pile d'avatars qui se chevauchent */
.il-avatars { display: inline-flex; }
.il-avatars > * + * { margin-left: -8px; }
.il-name { font-weight: 500; font-size: 13.5px; letter-spacing: -0.01em; }
.il-meta { font-size: 11.5px; color: var(--ds-ink-50); }
.il-right { margin-left: auto; display: flex; align-items: center; gap: 6px; }
/* champ de recherche / saisie */
.il-input {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 15px;
  border-radius: var(--ds-radius-pill);
  box-shadow:
    inset 0 0 0 1px rgba(18, 23, 34, 0.08),
    0 2px 6px rgba(18, 23, 34, 0.03);
  font-family: var(--ds-font-ui);
  font-size: 12.5px;
  color: var(--ds-ink-50);
  background: #fff;
}
/* petits tags */
.il-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 5px;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-surface-chip);
  font-family: var(--ds-font-ui);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ds-ink);
  white-space: nowrap;
}
.il-tag--ok { background: #e9f8ef; color: #0f7b46; }
.il-tag--ai { color: var(--ds-blue); }
.il-tag--lock { background: var(--ds-surface-gray); color: rgba(18, 23, 34, 0.6); }
.il-tags { display: flex; flex-wrap: wrap; gap: 6px; }
/* ligne squelette */
.il-line {
  height: 7px;
  border-radius: var(--ds-radius-pill);
  background: rgba(18, 23, 34, 0.08);
}
.il-line--lt { background: rgba(18, 23, 34, 0.05); }
/* barre de progression */
.il-bar {
  position: relative;
  height: 7px;
  border-radius: var(--ds-radius-pill);
  background: rgba(18, 23, 34, 0.06);
  overflow: hidden;
}
.il-bar i {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--ds-blue), #2b83ff);
}
/* case à cocher de checklist */
.il-check {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(18, 23, 34, 0.18);
}
.il-check--done {
  background: var(--ds-blue);
  box-shadow: none;
  position: relative;
}
.il-check--done::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 7px;
  border: solid #fff;
  border-width: 0 1.5px 1.5px 0;
  /* centré, avec un léger lift optique */
  transform: translate(-50%, -58%) rotate(45deg);
}
/* onde audio */
.il-wave { display: flex; align-items: center; gap: 2.5px; height: 22px; }
.il-wave i {
  width: 3px;
  border-radius: var(--ds-radius-pill);
  background: rgba(0, 104, 249, 0.45);
}
.il-wave i:nth-child(3n) { background: var(--ds-blue); }
/* flux : pills reliées par des flèches */
.il-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.il-flow-arrow { color: var(--ds-ink-50); font-size: 15px; }
.il-stack { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
/* couverture de template */
.il-cover {
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: var(--ds-radius-md);
  overflow: hidden;
  box-shadow: var(--ds-ring-section);
}
.il-cover-band {
  height: 58%;
  background: var(--ds-blue);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 0 32px;
}
.il-cover-band--sky { background: var(--ds-sky); }
.il-cover-band--ink { background: var(--ds-ink); }
.il-cover-band .il-line { background: rgba(255, 255, 255, 0.85); }
.il-cover-band .il-line--lt { background: rgba(255, 255, 255, 0.45); }
.il-cover-body {
  flex: 1;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 0 32px;
}


/* grille de tuiles logos (embed anything) */
.il-embed-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.il-embed-grid .il-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  background: #fff;
  border-radius: 14px;
  box-shadow:
    0 0 0 1px rgba(18, 23, 34, 0.06),
    0 8px 16px -10px rgba(18, 23, 34, 0.1);
}
.il-embed-grid .il-tile img { width: 22px; height: 22px; object-fit: contain; }
/* la screen placeholder peut accueillir une illustration centrée */
.sp-placeholder { display: flex; align-items: center; justify-content: center; }
/* zone éditable (slides) */
.il-editable {
  border: 1.5px dashed rgba(0, 104, 249, 0.5);
  border-radius: 8px;
  padding: 10px 12px;
}


/* Icône de carte (pictos Carbon/IBM recolorés encre) */
.ds-card-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(18, 23, 34, 0.05);
}
.ds-card-icon img { width: 20px; height: 20px; }
/* la screen d'un stage peut accueillir une illustration centrée */
.sp-shot { display: flex; align-items: center; justify-content: center; }
.sp-shot .il { width: min(720px, calc(100% - 96px)); }
.sp-placeholder .il { width: calc(100% - 0px); }

/* carte cards-auto avec zone d'illustration en tête (largeur = largeur texte) */
.cards-auto .card-media {
  width: 100%;
  height: 240px;
  margin: 0 0 24px;
}

/* ---------- Stepper : étapes numérotées reliées, dans une carte teintée ---------- */
.ds-stepper {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 40px;
  background: var(--ds-surface-tint);
  border-radius: var(--ds-radius-md);
  padding: 56px 48px;
}
.ds-step { position: relative; min-width: 0; }
.ds-step-num {
  position: relative;
  z-index: 1;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(18, 23, 34, 0.08), 0 4px 10px -4px rgba(18, 23, 34, 0.1);
  font-family: var(--ds-font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--ds-ink);
}
.ds-step--accent .ds-step-num {
  background: var(--ds-blue);
  color: #fff;
  box-shadow: var(--ds-shadow-btn), var(--ds-shadow-btn-primary-inset);
}
/* ligne de liaison entre les numéros */
.ds-step:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 44px;
  right: -28px;
  height: 1px;
  background: rgba(18, 23, 34, 0.1);
}
.ds-step-title {
  font-weight: 500;
  font-size: 18px;
  line-height: 26px;
  color: var(--ds-ink);
}
.ds-step-body {
  margin-top: 6px;
  font-weight: 400;
  font-size: 15px;
  line-height: 23px;
  color: var(--ds-ink-50);
}
@media (max-width: 1024px) {
  .ds-stepper { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .ds-step:not(:last-child)::before { display: none; }
}
@media (max-width: 640px) {
  .ds-stepper { grid-template-columns: 1fr; padding: 32px 24px; }
}

/* ---------- Table de comparaison (pricing) ---------- */
.ds-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--ds-font);
}
.ds-table th,
.ds-table td {
  padding: 16px 20px;
  text-align: left;
  font-size: 15px;
  line-height: 22px;
  color: var(--ds-ink);
  border-top: 0.5px solid var(--ds-border);
}
.ds-table thead th {
  border-top: 0;
  font-weight: 600;
  font-size: 16px;
  padding-bottom: 20px;
}
.ds-table td + td,
.ds-table th + th { text-align: center; }
/* Premiere categorie du tableau : elle ne separe rien de ce qui precede, les
   36 y creusent un trou sous les cartes de plan. Les autres les gardent. */
.ds-table tbody tr.ds-table-cat:first-child td { padding-top: 12px; }
.ds-table .ds-table-cat td {
  padding-top: 36px;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ds-ink-50);
}
.ds-table .ds-tick {
  display: inline-flex;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ds-blue);
  position: relative;
}
.ds-table .ds-tick::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 7px;
  border: solid #fff;
  border-width: 0 1.5px 1.5px 0;
  transform: translate(-50%, -58%) rotate(45deg);
}
.ds-table .ds-dash { color: rgba(18, 23, 34, 0.25); }

/* ---------- Cartes de plan (pricing) ---------- */
.plan-grid { align-items: stretch; }
.plan-grid .ds-card {
  position: relative;
  height: auto;
  background: var(--ds-bg);
  border: 0.5px solid var(--ds-border);
  padding: 36px 36px 40px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.plan-grid .ds-card--popular {
  border: 0.5px solid transparent; /* même métrique que les autres colonnes */
  box-shadow: 0 0 0 1.5px var(--ds-blue);
}
.plan-name { font-weight: 600; font-size: 20px; line-height: 28px; color: var(--ds-ink); }
/* Free (1re colonne) en 500, les autres en 600 */
.pr-intro + .pr-col .plan-name { font-weight: 500; }
.plan-tagline { font-size: 15px; color: var(--ds-ink-50); }
.plan-price { margin-top: 20px; font-weight: 600; font-size: 40px; line-height: 46px; letter-spacing: -0.01em; color: var(--ds-ink); }
.plan-note { font-size: 14px; color: var(--ds-ink-50); }
.plan-grid .btn { margin-top: 24px; justify-content: center; }
.plan-badge {
  position: absolute;
  top: 24px;
  right: 24px;
  padding: 4px 10px 5px;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-surface-chip);
  font-size: 12px;
  font-weight: 500;
  color: var(--ds-blue);
}

/* ---------- Formulaire (demo) ---------- */
.ds-form { display: flex; flex-direction: column; gap: 12px; max-width: 440px; }
.ds-form input {
  height: 48px;
  padding: 0 18px;
  border: 0;
  border-radius: 6px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(18, 23, 34, 0.1);
  font-family: var(--ds-font);
  font-size: 16px;
  color: var(--ds-ink);
  outline: none;
}
.ds-form input::placeholder { color: var(--ds-ink-50); }
.ds-form input:focus { box-shadow: inset 0 0 0 1.5px var(--ds-blue); }
/* select : même anatomie que les inputs, mais avec le bump des CTA blancs
   (signale l'interaction) et un caret propre */
.ds-form select {
  height: 48px;
  padding: 0 44px 0 18px;
  border: 0;
  border-radius: 6px;
  /* caret dédié : plus petit et plus fin (10x6, trait 1.2) */
  background: #fff url("assets/img/select-caret.svg") no-repeat right 18px center;
  background-size: 9px 5.5px;
  box-shadow:
    0 0.5px 1px 0 rgba(0, 0, 0, 0.08),
    inset 0 -1px 0 0 rgba(18, 23, 34, 0.1),
    inset 0 0 0 0.5px rgba(18, 23, 34, 0.15);
  font-family: var(--ds-font);
  font-size: 16px;
  color: var(--ds-ink);
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.ds-form select:invalid { color: var(--ds-ink-50); }
.ds-form select:focus { box-shadow: inset 0 0 0 1.5px var(--ds-blue); }
.ds-form .btn {
  justify-content: center;
  height: 48px;
  margin-top: 4px;
  border-radius: 6px;
  /* +2pt de texte, taille du bouton inchangée */
  font-size: 18px;
}
.ds-form-row { display: flex; gap: 12px; }
.ds-form-row input { flex: 1 1 0; min-width: 0; }
.ds-form-legal {
  font-size: 14.5px;
  line-height: 19px;
  color: var(--ds-ink-50);
  max-width: 440px;
}
/* le legal est calé en bas du panneau : padding bas du bloc (64) = padding gauche */
.sp-hero--form .ds-form-legal { margin-top: auto; }

/* liens rendus comme composants : jamais soulignés */
a.nav-link,
a.btn,
a.ds-btn,
a.intg-pill,
a.nav-menu-item { text-decoration: none; }

/* ==========================================================================
   Cartes illustrées — style "use case" (réf. Figma 9-3238)
   Texte en haut, zone d'illustration full-bleed en bas : un grand panneau
   UI blanc, plat (liseré fin, pas d'ombre portée), qui DÉBORDE des bords
   de la carte et se fait rogner par elle.
   ========================================================================== */
.ds-card.il-card {
  height: 100%;
  min-height: 440px;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.il-card .il-copy { padding: 48px 48px 0; }
.il-card .il-copy .card-kicker,
.il-card .il-copy .ds-card-title,
.il-card .il-copy .ds-card-body {
  position: static;
  margin: 0;
  width: auto;
  max-width: none;
}
.il-card .il-copy .card-kicker { margin-bottom: 8px; }
.il-card .il-copy .ds-card-body { margin-top: 10px; }
/* zone d'illustration : occupe le bas de la carte */
.il-card .il-bleed {
  position: relative;
  flex: 1;
  margin-top: 32px;
  min-height: 230px;
}
/* le panneau UI : blanc, plat, radius 20, liseré hairline — il déborde */
.il-panel {
  position: absolute;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 0 0 1px rgba(18, 23, 34, 0.05);
  padding: 24px 26px;
  overflow: hidden;
}
/* règle : le rognage ne mange QUE de la surface vide du panneau — le
   contenu reste dans la zone visible grâce à un padding interne égal
   au débordement. Jamais de bleed gauche sur du contenu aligné à gauche. */
.il-panel--br { left: 48px; top: 0; right: -48px; bottom: -48px; padding-right: 74px; }
.il-panel--b  { left: 48px; top: 0; right: 48px;  bottom: -48px; padding-bottom: 74px; }
.il-panel--bl { left: -48px; top: 0; right: 48px; bottom: -48px; padding-left: 74px; }
/* à l'intérieur d'un panneau, les sous-panneaux deviennent plats :
   un seul bloc cohérent, séparé par des filets fins */
.il-panel .il { gap: 0; }
.il-panel .il-ui {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}
.il-panel .il > * + * {
  border-top: 0.5px solid rgba(18, 23, 34, 0.07);
  padding-top: 14px;
  margin-top: 14px;
}
.il-panel .il-input { box-shadow: inset 0 0 0 1px rgba(18, 23, 34, 0.08); }
/* cartes features (texte absolu) : le panneau saigne en bas à droite */
.features-grid .card-il .il-panel {
  position: absolute;
  left: 0;
  top: 0;
  right: -48px;
  bottom: -40px;
}
.features-grid .card-il {
  position: absolute;
  left: 48px;
  right: 0;
  bottom: 0;
  height: 250px;
}

/* ---------- Plans niveau Glide : liste d'inclusions par colonne ---------- */
.plan-grid .ds-card { padding: 32px 32px 36px; gap: 2px; }
.plan-price { margin-top: 24px; font-size: 44px; line-height: 50px; }
.plan-price .plan-per { display: block; margin-top: 6px; font-size: 14.5px; font-weight: 400; color: var(--ds-ink-50); letter-spacing: 0; }
.plan-grid .btn { margin-top: 20px; width: 100%; height: 40px; }
.plan-divider { border-top: 0.5px solid var(--ds-border); margin: 28px 0 18px; }
.plan-inc {
  margin-bottom: 14px;
  font-family: var(--ds-font-ui);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ds-ink-50);
}
.plan-feat {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 5px 0;
  font-size: 14.5px;
  line-height: 21px;
  color: var(--ds-ink);
}
.plan-feat .ds-tick { flex-shrink: 0; margin-top: 2.5px; }
.plan-feat .ds-tick { display: inline-flex; width: 16px; height: 16px; border-radius: 50%; background: var(--ds-surface-chip); position: relative; }
.plan-feat .ds-tick::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px; height: 7px;
  border: solid var(--ds-blue);
  border-width: 0 1.5px 1.5px 0;
  transform: translate(-50%, -58%) rotate(45deg);
}
.ds-card--popular .plan-feat .ds-tick { background: var(--ds-blue); }
.ds-card--popular .plan-feat .ds-tick::after { border-color: #fff; }

/* ---------- Compare plans : en-tête sticky qui suit le scroll ---------- */
.compare-head {
  position: sticky;
  top: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: 32% repeat(4, 1fr);
  align-items: center;
  background: var(--ds-bg);
  padding: 20px 0 16px;
  border-bottom: 0.5px solid var(--ds-border);
}
.compare-head .ds-h2 { margin: 0; }
.compare-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.compare-col .compare-name {
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
  color: var(--ds-ink);
}
.compare-col .btn {
  height: 36px;
  width: min(160px, 88%);
  justify-content: center;
}
.ds-table--compare { table-layout: fixed; }
.ds-table--compare td:first-child { width: 32%; }
/* les labels suivent le décalage de l'icône : 4 + 20 = 24px */
.ds-table--compare tbody tr:not(.ds-table-cat) td:first-child { padding-left: 24px; }
.ds-table--compare tbody tr:not(.ds-table-cat):hover td { background: var(--ds-surface-tint); }
@media (max-width: 900px) {
  .compare-head { grid-template-columns: 28% repeat(4, 1fr); }
  .compare-col .btn { width: 95%; padding: 7px 8px 8px; font-size: 13px; }
}


/* Rectangle placeholder d'illustration : blanc, ombre spread + liseré fin.
   Ne chevauche jamais le texte — il vit dans sa zone, sans bleed. */
.il-rect {
  position: absolute;
  inset: 0 48px 48px 48px;
  background: #fff;
  border-radius: 12px;
  /* règle : jamais d'ombre diffuse sur les placeholders — ring fin only */
  box-shadow: 0 0 0 1px rgba(18, 23, 34, 0.06);
}

/* ---- Hero /demo : stage vidéo en surface-chip (contraste léger avec le
   panneau tint), sans dots ; le bloc vient au bord du form — l'espace à
   droite du form = l'espace à sa gauche (64px) ---- */
.sp-hero-right--video {
  position: relative;
  background: var(--ds-surface-chip);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* grille de dots en couleur surface (--ds-border), calibrée comme les stages
   (cellules entières via --dotx/--doty posés par header.js) */
.sp-hero-right--video::before {
  content: "";
  position: absolute;
  inset: 0;
  /* dots = la surface du bloc vidéo (chip #F5F1EA) un poil plus sombre */
  background-image: radial-gradient(circle, #eae4d9 2.1px, rgba(234, 228, 217, 0) 2.55px);
  background-size: var(--dotx, 20.6px) var(--doty, 20.6px);
  background-position: 0 0;
  pointer-events: none;
}
.sp-video-wrap { position: relative; z-index: 1; }
/* la vidéo prend plus de la moitié du bloc, centrée, radius léger,
   légende en dessous dans nos tokens */
.sp-video-wrap { width: min(78%, 780px); }
.sp-video-embed {
  position: relative;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  /* rase 1px sur les bords : supprime le liseré haut/bas du player
     (arrondi 56.25% vs hauteur réelle + clip 0.5px de Wistia) */
  clip-path: inset(1px round 12px);
}
/* le poster Wistia est en object-fit contain sur fond NOIR : le moindre
   demi-pixel d'écart fait un filet noir — on couvre et on retire le noir */
.sp-video-embed .wistia_embed img {
  background-color: transparent !important;
  object-fit: cover !important;
}
/* play circulaire maison (le gros play rectangulaire Wistia est désactivé) ;
   le clic passe à la vidéo, l'overlay disparaît pendant la lecture */
.sp-video-embed::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  /* inversé : cercle blanc, triangle bleu */
  background: #fff;
  box-shadow: 0 4px 16px rgba(18, 23, 34, 0.22);
  pointer-events: none;
  z-index: 2;
  transition: transform 0.15s ease;
}
.sp-video-embed::before {
  content: "";
  position: absolute;
  /* +2px : centrage optique du triangle */
  left: calc(50% + 2px);
  top: 50%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent var(--ds-blue);
  pointer-events: none;
  z-index: 3;
  transition: transform 0.15s ease;
}
/* hover : le play grossit un peu ; press : il s'enfonce */
.sp-video-embed:hover::after { transform: translate(-50%, -50%) scale(1.07); }
.sp-video-embed:hover::before { transform: translate(-50%, -50%) scale(1.07); }
.sp-video-embed:active::after { transform: translate(-50%, -50%) scale(0.93); }
.sp-video-embed:active::before { transform: translate(-50%, -50%) scale(0.93); }
.sp-video-embed.is-playing::before,
.sp-video-embed.is-playing::after { display: none; }
/* poster maison : couvre le player au repos, disparaît à la lecture */
.sp-video-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  pointer-events: none;
}
.sp-video-embed.is-playing .sp-video-poster { display: none; }
/* fun : pendant la lecture, le bloc passe INSTANTANÉMENT au bleu du hero
   home (dots encre 23% comme là-bas) ; à l'arrêt, retour au surface */
.sp-hero-right--video:has(.sp-video-embed.is-playing) { background: var(--ds-blue); }
.sp-hero-right--video:has(.sp-video-embed.is-playing)::before {
  background-image: radial-gradient(circle, rgba(18, 23, 34, 0.23) 1.7px, rgba(18, 23, 34, 0) 2.15px);
}
.sp-video-caption {
  margin-top: 20px;
  text-align: center;
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  color: var(--ds-ink);
}
.sp-hero--form .sp-hero-left { flex: 0 0 auto; width: 568px; /* 64 + form 440 + 64 */ }
.sp-hero--form .sp-hero-right { flex: 1 1 auto; }
/* (le content:none historique tuait la grille de dots — supprimé) */

/* ---- Duo demo (idée Ramp) : deux blocs gris sur une ligne, sans image —
   kicker en haut, titre + body poussés en bas ---- */
.demo-duo .ds-card {
  height: 236px;
  padding: 40px 44px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* blocs cliquables façon customer cards : blanc + hairline, hover en tint
     (hérités de ds-card--stat), pas de chip flèche */
}
.demo-duo .card-kicker { margin: 0; font-weight: 500; font-size: 16px; line-height: 20px; color: var(--ds-ink); }
.demo-duo .ds-card-title { font-size: 32px; line-height: 40px; }
.demo-duo .ds-card-body { margin-top: 8px; }

/* ==========================================================================
   Pricing — layout réf. dock.us : intro à gauche + 4 colonnes de plans
   alignées sur les colonnes de la table (32 / 17 / 17 / 17 / 17), colonne
   Premium surlignée en continu (header + table), badge Most popular.
   Uniquement nos tokens.
   ========================================================================== */
.pr-grid {
  display: grid;
  grid-template-columns: 32% 17% 17% 17% 17%;
  align-items: stretch;
}
.pr-intro {
  /* calé en haut, même départ que les noms de plans (padding-top des colonnes) */
  align-self: start;
  padding-top: 44px;
  padding-right: 48px;
}
.pr-eyebrow { margin-bottom: 12px; }
.pr-title {
  font-weight: 600;
  font-size: 60px;
  line-height: 64px;
  letter-spacing: -0.01em;
  color: var(--ds-ink);
  margin-bottom: 20px;
}
.pr-sub { color: var(--ds-ink); line-height: 24px; }
.pr-col {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* padding latéral = padding bas (32) : les CTA pleine largeur respirent pareil partout */
  padding: 44px 32px 32px;
}
.pr-col .plan-tagline {
  margin-top: 2px;
  color: var(--ds-ink);
  /* hauteur fixe (2 lignes max) : les prix des 4 colonnes restent alignés */
  min-height: 40px;
}
.pr-col .plan-price {
  margin-top: 4px;
  font-size: 44px;
  line-height: 50px;
  /* le chiffre ne casse jamais ("$1,000" wrappait en colonne étroite) */
  white-space: nowrap;
}
.pr-col .plan-per { white-space: normal; }
.pr-col .plan-price sup {
  font-size: 24px;
  position: relative;
  top: -9px;
  margin-right: 1px;
  /* ne gonfle pas la boîte de ligne : les baselines des 4 prix restent identiques */
  vertical-align: baseline;
  line-height: 0;
}
.pr-col .plan-per {
  display: block;
  margin-top: 6px;
  font-size: 14.5px;
  /* line-height propre : sinon il hérite des 50px du chiffre (2 lignes = 100px) */
  line-height: 19px;
  font-weight: 400;
  color: var(--ds-ink);
  letter-spacing: 0;
  /* hauteur fixe (2 lignes max) : les CTA restent alignés */
  min-height: 40px;
}
.pr-col .btn {
  margin-top: 14px;
  /* pleine largeur de colonne : bords du CTA à 32px des bords, comme en bas */
  width: 100%;
  justify-content: center;
  height: 40px;
  font-size: 17px;
}
/* le groupe entier (nom → CTA) est calé en bas : les rangées internes ayant
   des hauteurs fixes, tout reste aligné entre colonnes, et resserré */
.pr-col .plan-name { margin-top: auto; }
.pr-col .plan-price { margin-bottom: 0; }
.pr-col--popular {
  background: var(--ds-surface-tint);
  border-radius: var(--ds-radius-md) var(--ds-radius-md) 0 0;
}
.pr-badge {
  position: absolute;
  /* collé au-dessus de "Premium" (groupe calé en bas, hauteurs fixes :
     32+40+14+46+50+4+42+28 = 256 du bas au haut du nom, +3 d'air) */
  bottom: 259px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px 5px;
  background: #fff;
  color: var(--ds-blue);
  border-radius: var(--ds-radius-pill);
  font-weight: 600;
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* colonne Premium surlignée en continu dans la table (4e colonne de valeurs) */
.ds-table--compare tbody tr:not(.ds-table-cat) td:nth-child(4) { background: var(--ds-surface-tint); }
.ds-table--compare tbody tr:not(.ds-table-cat):hover td:nth-child(4) { background: var(--ds-surface-tint); }
/* catégories : bandeau gris avec icône */
.ds-table .ds-table-cat td {
  background: #fff;
  border-radius: 6px;
  /* icône décalée de 4px du bord ; titre calé sur les labels de rows
     via la largeur fixe de .cat-ico (20px) ; 48px de respiration partout */
  padding: 48px 20px 14px 4px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 15.5px;
  font-weight: 500;
  color: var(--ds-ink);
}
.cat-ico { display: inline-flex; width: 20px; vertical-align: -1px; margin-right: 0; }
.cat-ico img { width: 14px; height: 14px; }

/* ---------- Barre sticky condensée (pricing) ----------
   Apparaît quand on dépasse le bloc de packs, suit le header (top ajusté en
   JS), disparaît après la table. Colonnes calées sur celles de la table. */
.pr-sticky {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 80;
  background: #fff;
  /* -200% : totalement hors écran même avec top 61px (sinon le bas de la
     barre dépasse en haut de page quand le header se masque) */
  transform: translateY(-200%);
  transition: transform 0.25s ease;
  pointer-events: none;
}
.pr-sticky.is-on { transform: translateY(0); pointer-events: auto; }
/* le trait du bas ne fait que la largeur de la table (le conteneur est calé
   dessus en JS), pas toute la page */
.pr-sticky .ds-container { border-bottom: 0.5px solid var(--ds-border); padding-top: 8px; }
.pr-sticky-grid {
  display: grid;
  grid-template-columns: 32% 17% 17% 17% 17%;
  /* stretch : toutes les colonnes à la même hauteur, CTA pinnés en bas */
  align-items: stretch;
}
.pr-sticky-col {
  display: flex;
  flex-direction: column;
  /* textes centrés, badge au-dessus de Premium */
  align-items: center;
  text-align: center;
  gap: 2px;
  /* latéral 16px = padding bas ; plus d'air en haut, hauteur globale stable */
  padding: 16px 16px 16px;
}
.pr-sticky-col--popular { background: var(--ds-surface-tint); border-radius: 12px 12px 0 0; }
.pr-sticky-name { font-weight: 600; font-size: 14px; line-height: 20px; color: var(--ds-ink); }
.pr-sticky-grid > div:nth-child(2) .pr-sticky-name { font-weight: 500; }
.pr-sticky-price { font-weight: 600; font-size: 19px; line-height: 24px; letter-spacing: -0.01em; color: var(--ds-ink); }
.pr-sticky-price sup { font-size: 12px; position: relative; top: -4px; vertical-align: baseline; line-height: 0; }
.pr-sticky-col .btn {
  /* 6 + gap 2 = 8px entre le billing et le CTA */
  margin-top: 6px;
  /* CTA pleine largeur de colonne, texte centré */
  width: 100%;
  justify-content: center;
  text-align: center;
}
.pr-sticky-per {
  font-size: 12.5px;
  line-height: 16px;
  color: var(--ds-ink);
  /* jamais de wrap : hauteur identique dans les 4 colonnes, gap constant */
  white-space: nowrap;
}
.pr-sticky-badge {
  /* inline à côté de "Premium" : ne décale rien verticalement */
  display: inline-block;
  margin-left: 4px;
  vertical-align: 2px;
  padding: 3px 6px 3px;
  background: #fff;
  color: var(--ds-blue);
  border-radius: var(--ds-radius-pill);
  font-weight: 600;
  font-size: 8px;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pr-sticky-name { white-space: nowrap; }

/* ---- Shimmer discret du texte "Most popular" : un reflet clair passe sur
   le bleu de temps en temps (le reste du cycle est immobile) ---- */
.pr-shine {
  background-image: linear-gradient(110deg, var(--ds-blue) 42%, #8ec2ff 50%, var(--ds-blue) 58%);
  background-size: 250% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: pr-shine 7s ease-in-out infinite;
}
@keyframes pr-shine {
  0%, 78% { background-position: 100% 0; }
  92%, 100% { background-position: 0 0; }
}
/* hover de la colonne Premium (bloc ou sticky) : le reflet part tout de suite */
.pr-col--popular:hover .pr-shine,
.pr-sticky-col--popular:hover .pr-shine {
  animation: pr-shine-hover 0.9s ease-in-out forwards;
}
@keyframes pr-shine-hover {
  from { background-position: 100% 0; }
  to { background-position: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pr-shine { animation: none !important; color: var(--ds-blue); }
}

/* ==========================================================================
   Customers — composants de la page études de cas
   cs-marquee : bandeau de logos qui défile · cs-feature : story mise en avant
   ds-section-sub : phrase d'intro sous un titre de section (aligné à gauche)
   card-metric : pastille chiffrée sur une carte story
   ========================================================================== */

/* Phrase d'intro sous un titre de section, calée sur l'indent du titre.
   Pendant .section-sub (centré), mais pour les sections alignées à gauche. */
.ds-section-sub {
  max-width: 640px;
  margin: -32px 0 0 var(--ds-heading-indent);
  padding-bottom: var(--ds-heading-gap);
  color: var(--ds-ink-50);
}

/* ---- Bandeau de logos défilant (deux pistes identiques bout à bout) ---- */
.cs-marquee {
  position: relative;
  overflow: hidden;
  /* les logos s'effacent sur les bords au lieu d'être coupés net */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 96px, #000 calc(100% - 96px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 96px, #000 calc(100% - 96px), transparent);
}
.cs-marquee-track {
  display: flex;
  width: max-content;
  animation: cs-marquee 42s linear infinite;
}
.cs-marquee-row {
  display: flex;
  align-items: center;
  gap: 88px;
  padding-right: 88px;
  flex: 0 0 auto;
}
.cs-marquee img {
  /* même traitement que la logo bar en mode dark */
  filter: brightness(0);
  opacity: 0.85;
  flex-shrink: 0;
}
@keyframes cs-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
/* le survol ralentit le défilement (même règle que les pills d'intégrations) */
.cs-marquee:hover .cs-marquee-track { animation-duration: 120s; }
@media (prefers-reduced-motion: reduce) {
  .cs-marquee-track { animation: none; }
}

/* ---- Story mise en avant : citation à gauche, stage à droite ---- */
.cs-feature {
  display: flex;
  align-items: stretch;
  gap: var(--ds-grid-gap);
}
.cs-feature .ds-card { display: flex; flex-direction: column; }
.cs-feature-copy {
  flex: 1 1 52%;
  min-width: 0;
  padding: 56px 48px 48px;
}
.cs-feature-logo { display: block; margin-bottom: 40px; }
/* nom du client quand on n'a pas son logo en asset (jamais un logo à la place
   d'un autre) */
.cs-feature-name {
  margin: 0 0 40px;
  font-weight: 500;
  font-size: 20px;
  line-height: 28px;
  color: var(--ds-ink);
}
.cs-feature-quote {
  font-weight: 500;
  font-size: 30px;
  line-height: 42px;
  letter-spacing: -0.01em;
  color: var(--ds-ink);
  text-wrap: pretty;
}
.cs-feature-foot {
  margin-top: auto;
  padding-top: 40px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.cs-feature-author .ds-label { display: block; }
.cs-feature-author span:last-child {
  font-weight: 400;
  font-size: 15px;
  line-height: 22px;
  color: var(--ds-ink-50);
}
/* stage : bloc blanc à dots, coins gauches arrondis comme les heroes */
.cs-feature-stage {
  position: relative;
  flex: 1 1 48%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  overflow: hidden;
  background: var(--ds-surface-tint);
  border-radius: var(--ds-radius-md);
}
.cs-feature-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  /* dots de la couleur du fond, grille calibrée par header.js */
  background-image: radial-gradient(circle, var(--ds-border) 1.7px, rgba(227, 221, 209, 0) 2.15px);
  background-size: var(--dotx, 20.6px) var(--doty, 20.6px);
}
.cs-feature-stage .sp-placeholder {
  height: auto;
  align-self: stretch;
  min-height: 360px;
  width: 100%;
}

/* ---- Pastille chiffrée sur une carte story ---- */
.card-metric {
  display: inline-flex;
  align-items: center;
  margin-top: 16px;
  padding: 4px 12px 5px;
  border-radius: var(--ds-radius-pill);
  background: var(--ds-surface-chip);
  font-weight: 500;
  font-size: 15px;
  line-height: 22px;
  color: var(--ds-ink);
  white-space: nowrap;
}
/* sur une carte stat, le nom du client remplace le logo quand on n'en a pas */
.stat-name {
  position: absolute;
  left: 48px;
  top: 48px;
  font-weight: 500;
  font-size: 20px;
  line-height: 28px;
  color: var(--ds-ink);
}

@media (max-width: 1024px) {
  .ds-section-sub { margin-left: 24px; }
  .cs-feature { flex-direction: column; }
  .cs-feature-copy { padding: 40px 24px 32px; }
  .cs-feature-quote { font-size: 24px; line-height: 34px; }
  .cs-feature-stage { padding: 24px; }
  .cs-marquee-row { gap: 56px; padding-right: 56px; }
  .stat-name { left: 24px; top: 24px; }
}

/* ==========================================================================
   Modale de partage (bloc Security)
   Maquette d'interface produit : mêmes tokens que le reste du site, icônes
   internes (locked.svg, link.svg) posées en masque pour suivre leur couleur.
   Rayons courts (6px) comme les autres écrans produit — la pill est réservée
   aux CTA du site, pas à l'UI applicative.
   ========================================================================== */
.sh-modal {
  position: relative;
  z-index: 1;
  flex: 0 1 560px;
  width: min(560px, 100%);
  /* padding-top optique : la boîte de ligne du titre porte 10.84px de vide
     au-dessus de la capitale, on les déduit pour que l'air au-dessus du « S »
     vaille exactement les 28px de gauche */
  padding: 17px 28px 28px;
  background: var(--ds-white);
  border-radius: var(--ds-radius-md);
  box-shadow: var(--ds-shadow-window);
  text-align: left;
}
.sh-title {
  margin: 0;
  font-weight: 500;
  font-size: 24px;
  line-height: 32px;
  color: var(--ds-ink);
}
/* champ en état focus : c'est le premier geste de la modale */
.sh-input {
  margin-top: 18px;
  height: 48px;
  display: flex;
  align-items: center;
  padding: 0 18px;
  border-radius: var(--ds-radius-sm);
  box-shadow: inset 0 0 0 1px var(--ds-blue);
  font-size: 16px;
  color: var(--ds-ink-50);
}
/* le curseur clignotant du champ */
.sh-input::before {
  content: "";
  width: 1px;
  height: 20px;
  margin-right: 1px;
  background: var(--ds-ink);
  animation: sh-caret 1.1s step-end infinite;
}
@keyframes sh-caret { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sh-input::before { animation: none; } }

.sh-head {
  margin: 24px 0 0;
  font-weight: 500;
  font-size: 17px;
  line-height: 24px;
  color: var(--ds-ink);
}
/* le bloc appartient à son titre : on le colle davantage au heading au-dessus */
.sh-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
}
.sh-ava { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.sh-name { display: block; font-weight: 500; font-size: 15px; line-height: 22px; color: var(--ds-ink); }
.sh-mail { display: block; font-size: 15px; line-height: 22px; color: var(--ds-ink-50); }

/* pastille de statut : le vert « conforme » déjà présent dans le système
   (celui de il-tag--ok), le cadenas en blanc par-dessus */
.sh-lock {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #0f7b46;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sh-ico {
  display: inline-block;
  background: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.sh-ico--lock {
  width: 18px; height: 18px;
  background: var(--ds-white);
  -webkit-mask-image: url("assets/img/icons/locked.svg");
  mask-image: url("assets/img/icons/locked.svg");
}
.sh-ico--link {
  width: 16px; height: 16px;
  background: var(--ds-ink);
  -webkit-mask-image: url("assets/img/icons/link.svg");
  mask-image: url("assets/img/icons/link.svg");
}
.sh-set-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  font-size: 15px;
  line-height: 22px;
  color: var(--ds-ink);
}
.sh-caret {
  width: 9px;
  height: 5.5px;
  background: var(--ds-ink);
  -webkit-mask: url("assets/img/select-caret.svg") center / contain no-repeat;
  mask: url("assets/img/select-caret.svg") center / contain no-repeat;
}
.sh-set-desc { display: block; font-size: 15px; line-height: 22px; color: var(--ds-ink-50); }

.sh-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 28px;
}
.sh-copy {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 44px;
  padding: 0 18px;
  border-radius: var(--ds-radius-sm);
  /* le traitement des CTA secondaires du site, rayon et corps inchangés */
  background: var(--ds-white);
  box-shadow:
    0 0.5px 1px 0 rgba(0, 0, 0, 0.08),
    inset 0 -1px 0 0 rgba(18, 23, 34, 0.1),
    inset 0 0 0 0.5px var(--ds-ring);
  font-weight: 500;
  font-size: 16px;
  color: var(--ds-ink);
}
.sh-done {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 26px;
  border-radius: var(--ds-radius-sm);
  background: var(--ds-blue);
  box-shadow: var(--ds-shadow-btn), var(--ds-shadow-btn-primary-inset);
  font-weight: 500;
  font-size: 16px;
  color: var(--ds-white);
}
@media (max-width: 640px) {
  .sh-modal { padding: 24px; }
  .sh-title { font-size: 20px; line-height: 28px; }
}

/* ==========================================================================
   Illustrations de la section Integrations
   Posées directement sur le fond de la carte (pas de panneau blanc) : logos
   réels du dossier integrations, texte minimal, aucune donnée inventée.
   Le layout des cartes (il-card / il-copy / il-bleed) n'est pas touché.
   ========================================================================== */
.ig { position: absolute; left: 48px; right: 0; top: 0; bottom: 0; }

/* ---- Connect your CRM : deux disques, la marque Dock au milieu ---- */
.ig--crm {
  right: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ig-orb {
  width: 148px;
  height: 148px;
  border-radius: 50%;
  background: var(--ds-white);
  box-shadow: inset 0 0 0 1px rgba(18, 23, 34, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ig-orb img { width: 84px; height: 84px; object-fit: contain; }
/* maj node 15:3 : les logos flottent sans disque blanc, seul Dock garde
   le sien — ombre douce portée directement sur le logo */
.ig-logo {
  width: 148px;
  height: 148px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ig-logo img { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25)); }
.ig-logo--hubspot { width: 96.657px; height: 27.399px; object-fit: contain; }
.ig-logo--salesforce { width: 84px; height: 84px; object-fit: contain; }
/* la marque Dock a son propre disque : le trio respire d'un même poids */
.ig-bridge {
  margin: 0 30px;
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--ds-white);
  box-shadow: inset 0 0 0 1px rgba(18, 23, 34, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ig-bridge img { width: 57.344px; height: 57.344px; object-fit: contain; display: block; }

/* ---- Embed anything : le menu d'insertion, colonnes par type ---- */
.ig--embed { padding-top: 4px; }
.ig-opts { display: flex; gap: 44px; }
.ig-opt {
  display: flex;
  align-items: center;
  gap: 11px;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: var(--ds-ink);
  white-space: nowrap;
}
.ig-tile {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--ds-white);
  box-shadow: inset 0 0 0 1px rgba(18, 23, 34, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ig-tile img { width: 16px; height: 16px; object-fit: contain; }
/* la grille des types d'integration (les outils vivent dans le marquee
   au-dessus de la section) : tuiles blanches du systeme, icones au masque */
.eg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 26px;
  margin-right: 48px;
}
.eg-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--ds-white);
  border: 0.5px solid #ebe5d8;
  border-radius: 10px;
  padding: 13px 14px;
}
.eg-tile b { font-weight: 500; font-size: 13.5px; line-height: normal; color: var(--ds-ink); white-space: nowrap; }

.ig-cols { display: flex; gap: 44px; margin-top: 26px; }
.ig-col { min-width: 0; }
.ig-col-head {
  font-size: 15px;
  line-height: 22px;
  color: var(--ds-ink-50);
  margin-bottom: 12px;
  white-space: nowrap;
}
.ig-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 6px 0;
  font-size: 15px;
  line-height: 22px;
  color: var(--ds-ink);
  white-space: nowrap;
}
/* la liste continue au-delà du cadre : les dernières entrées s'estompent */
.ig-fade-1 { opacity: 0.45; }
.ig-fade-2 { opacity: 0.2; }

/* ---- Import calls : les appels importés, vignette + libellé ---- */
.ig--calls { display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.ig-call { display: flex; align-items: center; gap: 18px; }
.ig-thumb {
  width: 132px;
  height: 82px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ig-thumb--blue { background: var(--ds-blue); }
.ig-thumb--ink { background: var(--ds-ink); }
.ig-thumb span {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: var(--ds-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ig-thumb img { width: 24px; height: 24px; object-fit: contain; }
.ig-call-body { min-width: 0; flex: 1 1 auto; }
.ig-call-title { font-weight: 500; font-size: 18px; line-height: 26px; color: var(--ds-ink); }
.ig-call-body .il-line { margin-top: 8px; }
.ig-call-body .il-tag { margin-top: 12px; }

/* ==========================================================================
   Graphe radial Dock AI (section « Give reps AI agents… »)
   Chaque grandeur est une variable : la page /illo les pilote en direct, la
   home garde les valeurs par défaut. Géométrie relevée sur la référence —
   un seul cercle, 5 nœuds à 69/70/82/70/69 degrés.
   ========================================================================== */
.ai-graph {
  position: relative;
  width: 100%;
  height: calc(640px * var(--ais, 1));
  --ai-orbit-r: 191px;
  --ai-node: 42px;
  --ai-node-ico: 20px;
  --ai-core: 300px;
  --ai-core-inner: 172px;
  --ai-mark: 76px;
  --ai-guide-r: 300px;
  --ai-guide-d: 150px;
  --ai-guide-rot: 45deg;
  --ai-big-r: 560px;
  --ai-guide-ink: 0.22;
  --ai-pill-h: 40px;
  --ai-pill-font: 17px;
  --ai-pill-gap: 13px;
  --ai-pill-pad: 18px;
  --ai-logo: 22px;
  --ai-logo-img: 13px;
  --ai-ring-dur: 4.5s;
  --ai-core-dur: 6.5s;
  --ai-in-dur: 1.5s;
  --ai-in-scale: 0.2;
  --ai-in-rot: -180deg;
  --ai-pill-step: 0.1s;
}
.ai-fit {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1400px;
  height: 640px;
  transform: translateX(-50%) scale(var(--ais, 1));
  transform-origin: 50% 0;
}
.ai-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* Le border entier chatoie : le tracé prend un dégradé bleu -> bleu clair ->
   bleu (les teintes de pr-shine, notre shimmer maison), et c'est le cercle
   qui tourne — le dégradé étant lié à sa boîte, la lumière balaie tout
   l'anneau au lieu qu'un trait le parcoure. */
.ai-ring { fill: none; stroke: url(#aiShine); stroke-width: 2; r: var(--ai-orbit-r); }
.ai-ring-spin {
  transform-origin: 700px 343px;
  animation: ai-shine var(--ai-ring-dur) linear infinite;
}
@keyframes ai-shine { to { transform: rotate(360deg); } }

.ai-guide {
  fill: none;
  stroke: rgba(18, 23, 34, var(--ai-guide-ink));
  stroke-width: 1;
  stroke-dasharray: 5 7;
  animation: ai-drift 90s linear infinite;
  r: var(--ai-guide-r);
}
.ai-guide--big { r: var(--ai-big-r); animation-duration: 150s; }
/* les quatre cercles : même point d'ancrage, écartés par translate et
   orientés par --ai-guide-rot — les deux sont pilotables */
.ai-guide--set {
  transform-origin: 700px 343px;
  transform:
    rotate(calc(var(--i) * 90deg + var(--ai-guide-rot)))
    translate(0, calc(-1 * var(--ai-guide-d)));
}
.ai-guide--set:nth-of-type(3) { animation-duration: 120s; animation-direction: reverse; }
.ai-guide--set:nth-of-type(4) { animation-duration: 105s; }
.ai-guide--set:nth-of-type(5) { animation-duration: 135s; animation-direction: reverse; }
@keyframes ai-drift { to { stroke-dashoffset: -240; } }
/* les pointillés se déploient en même temps que l'anneau des icônes */
.ai-guides { transform-origin: 700px 343px; }

/* cœur : disque teinté bleu clair parcouru d'un reflet qui tourne, et
   par-dessus le disque blanc qui porte la marque */
.ai-core {
  position: absolute;
  left: 700px; top: 343px;
  width: var(--ai-core); height: var(--ai-core);
  margin: calc(-0.5 * var(--ai-core)) 0 0 calc(-0.5 * var(--ai-core));
  border-radius: 50%;
  overflow: hidden;
  background: rgba(0, 104, 249, 0.07);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ai-core::before {
  content: "";
  position: absolute;
  inset: -30%;
  background: conic-gradient(from 0deg,
    rgba(0, 104, 249, 0) 0deg,
    rgba(0, 104, 249, 0.18) 55deg,
    rgba(86, 189, 255, 0.22) 90deg,
    rgba(0, 104, 249, 0) 150deg,
    rgba(0, 104, 249, 0) 360deg);
  animation: ai-core-shine var(--ai-core-dur) linear infinite;
}
@keyframes ai-core-shine { to { transform: rotate(360deg); } }
.ai-core::after {
  content: "";
  position: absolute;
  width: var(--ai-core-inner); height: var(--ai-core-inner);
  border-radius: 50%;
  background: var(--ds-white);
  box-shadow: 0 0 0 0.5px rgba(18, 23, 34, 0.05);
}
.ai-core img { position: relative; z-index: 1; width: var(--ai-mark); height: var(--ai-mark); object-fit: contain; }

/* nœuds : disque bleu, glyphe blanc */
.ai-node {
  position: absolute;
  width: var(--ai-node); height: var(--ai-node);
  margin: calc(-0.5 * var(--ai-node)) 0 0 calc(-0.5 * var(--ai-node));
  border-radius: 50%;
  background: var(--ds-blue);
  box-shadow: 0 2px 8px -2px rgba(0, 104, 249, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ai-node i {
  width: var(--ai-node-ico); height: var(--ai-node-ico);
  background: var(--ds-white);
  -webkit-mask: var(--ai-ico) center / contain no-repeat;
  mask: var(--ai-ico) center / contain no-repeat;
}

/* pastilles : blanches, filet fin, texte encre */
.ai-pill {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: var(--ai-pill-gap);
  height: var(--ai-pill-h);
  /* à gauche le cercle du premier logo épouse le bout arrondi du pill : son
     air vaut exactement son inset vertical */
  padding: 0 var(--ai-pill-pad) 0 calc((var(--ai-pill-h) - var(--ai-logo)) / 2);
  background: var(--ds-white);
  border-radius: var(--ds-radius-pill);
  box-shadow: inset 0 0 0 0.5px var(--ds-ring), 0 1px 3px rgba(18, 23, 34, 0.05);
  font-weight: 500;
  font-size: var(--ai-pill-font);
  line-height: 22px;
  color: var(--ds-ink);
  white-space: nowrap;
  transform: translateY(-50%);
}
.ai-pill--c { transform: translate(-50%, -50%); padding: 0 var(--ai-pill-pad); }
/* chaque logo dans son disque blanc */
.ai-pill .ai-logo {
  width: var(--ai-logo);
  height: var(--ai-logo);
  border-radius: 50%;
  background: var(--ds-white);
  box-shadow: inset 0 0 0 0.5px rgba(18, 23, 34, 0.09);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ai-pill img { width: var(--ai-logo-img); height: var(--ai-logo-img); object-fit: contain; flex-shrink: 0; }
/* Gong et Fathom portent leur propre fond coloré : leur logo occupe tout le
   disque au lieu de flotter dedans */
.ai-pill .ai-logo--full { overflow: hidden; box-shadow: inset 0 0 0 0.5px rgba(18, 23, 34, 0.09); }
.ai-pill .ai-logo--full img { width: 100%; height: 100%; object-fit: cover; }
/* les logos d'une même famille restent groupés, eux */
.ai-pill .ai-logos { display: inline-flex; align-items: center; gap: 4px; }

/* ---- Entrée du graphe à l'arrivée dans la section ----
   Le cercle des nœuds part à -180° et se remet en place ; chaque nœud
   contre-tourne d'autant pour que son glyphe reste droit. Les pastilles
   suivent, une par une, une fois la rotation bien engagée. */
.ai-orbit {
  position: absolute;
  inset: 0;
  transform-origin: 700px 343px;
}
.ai-graph .ai-core,
.ai-graph .ai-pill { opacity: 0; }
.ai-graph.is-in .ai-orbit,
.ai-graph.is-in .ai-ring-g,
.ai-graph.is-in .ai-guides { animation: ai-in-orbit var(--ai-in-dur) cubic-bezier(0.22, 1, 0.36, 1) both; }
/* les guides ne tournent pas de 180 : elles se déploient seulement */
.ai-graph.is-in .ai-guides { animation-name: ai-in-guides; }
@keyframes ai-in-guides {
  from { transform: scale(var(--ai-in-scale)); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.ai-ring-g { transform-origin: 700px 343px; }
.ai-graph.is-in .ai-node { animation: ai-in-node var(--ai-in-dur) cubic-bezier(0.22, 1, 0.36, 1) both; }
.ai-graph.is-in .ai-core { animation: ai-in-core 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; }
.ai-graph.is-in .ai-pill { animation: ai-in-pill 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
/* les pastilles se posent dans l'ordre de lecture, après la rotation */
.ai-graph.is-in .ai-pill:nth-of-type(1) { animation-delay: calc(0.75s + 1 * var(--ai-pill-step)); }
.ai-graph.is-in .ai-pill:nth-of-type(2) { animation-delay: calc(0.75s + 2 * var(--ai-pill-step)); }
.ai-graph.is-in .ai-pill:nth-of-type(3) { animation-delay: calc(0.75s + 3 * var(--ai-pill-step)); }
.ai-graph.is-in .ai-pill:nth-of-type(4) { animation-delay: calc(0.75s + 4 * var(--ai-pill-step)); }
.ai-graph.is-in .ai-pill:nth-of-type(5) { animation-delay: calc(0.75s + 5 * var(--ai-pill-step)); }
.ai-graph.is-in .ai-pill:nth-of-type(6) { animation-delay: calc(0.75s + 6 * var(--ai-pill-step)); }
@keyframes ai-in-orbit { from { transform: rotate(var(--ai-in-rot)) scale(var(--ai-in-scale)); } to { transform: rotate(0) scale(1); } }
@keyframes ai-in-node {
  from { transform: rotate(calc(-1 * var(--ai-in-rot))); opacity: 0; }
  35%  { opacity: 1; }
  to   { transform: rotate(0); opacity: 1; }
}
@keyframes ai-in-core { from { opacity: 0; transform: scale(0.82); } to { opacity: 1; transform: scale(1); } }
@keyframes ai-in-pill { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
/* les pastilles centrées gardent leur recentrage pendant l'animation */
.ai-graph.is-in .ai-pill--c { animation-name: ai-in-pill-c; }
@keyframes ai-in-pill-c {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 6px)); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ai-graph .ai-core, .ai-graph .ai-pill { opacity: 1; }
  .ai-graph.is-in .ai-orbit,
  .ai-graph.is-in .ai-ring-g,
  .ai-graph.is-in .ai-node,
  .ai-graph.is-in .ai-core,
  .ai-graph.is-in .ai-pill { animation: none; }
  .ai-ring-spin, .ai-guide, .ai-core::before { animation: none; }
}

/* Shared showcase-tab density — 2026-09-29. */
/* More than three showcase tabs: give copy room instead of wide gutters. */
@media(min-width:901px){
 .lms-cols:has(> .lms-col:nth-child(4)){column-gap:24px!important;padding-inline:24px!important}
 .lms-cols:has(> .lms-col:nth-child(4))>.lms-col{padding-inline:0!important}
 .rv-tablist:has(> [role="tab"]:nth-child(4)){column-gap:20px!important}
}

/* Keep Sales and Customer success stacked within the existing nav column. */
.header .nav-menu-heading--subsection{margin-top:24px!important}