/* ==========================================================================
   Dock — Home (layout Figma node 1:39)
   Charge APRÈS styles.css : les overrides re-skinnent les widgets hérités
   (prompt, slides) aux valeurs du design system.
   ========================================================================== */

/* ============ Header (deltas vs styles.css) ============ */
.header-left { gap: 32px; }
.desktop { padding-bottom: 0; }

/* ============ Hero — panneau bleu + photo ============ */
.hero.fg-hero {
  margin: 16px auto 0;
  width: calc(100% - 2 * var(--ds-page-gutter));
  max-width: var(--ds-content-max);
  padding: 0;
  gap: 0;
  border-radius: var(--ds-radius-md);
  overflow: hidden;
  /* le fond du conteneur = fond du panneau gauche : les échancrures des
     coins arrondis du bloc droit tombent sur le bleu, jamais sur du blanc */
  background: var(--ds-blue);
}

/* hero home = même hauteur que les heroes produit (740px) sur desktop ;
   les scènes du panneau droit sont ancrées relativement à --panel-h et
   clipées, rien ne casse — en dessous de 1080px le layout colonne de
   styles.css reprend sa propre valeur */
@media (min-width: 1081px) {
  .hero.fg-hero { --panel-h: 740px; }
}

/* ---- Panneau gauche : bleu, grain, grille de points ---- */
.fg-hero-left {
  position: relative;
  z-index: 0;
  flex: 1 1 50%;
  min-width: 0;
  height: var(--panel-h);
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--ds-blue);
  overflow: hidden;
}
/* grille de points (Figma : dots 3.86px, pas 20.6px, encre #121722 à ~23%) */
.fg-hero-left::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);
  background-size: var(--dotx, 20.6px) var(--doty, 20.6px);
  background-position: 0 0;
  pointer-events: none;
}
/* grain (soft-light, comme le calque "image 3" du Figma) */
.fg-hero-left::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;
}
.fg-hero-left > * { position: relative; z-index: 1; }

.fg-hero .hero-title {
  color: #fff;
  /* centre optique du bloc titre+prompt : 19px au-dessus du centre panneau */
  margin-top: -30px;
}

/* ---- Rangée de pills (remplace les tabs soulignées) ---- */
.fg-hero .prompt-widget {
  margin-top: 34px;
  width: 560px;
}
.fg-hero .prompt-tabs {
  height: auto;
  margin-bottom: 0;
  padding: 2px 2px 5px;
  justify-content: center;
  gap: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-radius: 30px 30px 0 0;
  box-shadow: none;
  overflow: visible;
}
.fg-hero .prompt-tabs::before {
  content: "Ask Dock to create:";
  padding: 8px 16px 9px;
  font-weight: 400;
  font-size: 16px;
  line-height: 16.8px;
  color: #fff;
  white-space: nowrap;
}
.fg-hero .prompt-tab {
  margin-top: 0;
  /* même boîte de ligne que le label "Ask Dock to create:" (::before, 16/16.8)
     sinon le strut du div (line-height normal ≈ 19.5px) décale la baseline */
  line-height: 16.8px;
  padding: 8px 16px 9px 3px;
  border-bottom: 0;
  border-radius: var(--ds-radius-pill);
  opacity: 0.6;
  transition: opacity 0.2s ease;
}
.fg-hero .prompt-tab:hover { opacity: 1; }
.fg-hero .prompt-tab.is-active { margin-top: 0; opacity: 1; }
.fg-hero .prompt-tab span {
  font-size: 16px;
  color: #fff;
}
.fg-hero .tab-indicator { display: none; }

/* ---- Carte prompt : blanche, rayon 26 ---- */
.fg-hero .prompt-card {
  height: 135px;
  /* radius concentrique : rayon du CTA Generate (18px) + padding (12px) */
  border-radius: 30px;
  box-shadow: var(--ds-ring-card);
}
.fg-hero .btn-generate { border-radius: var(--ds-radius-pill); }

/* ---- Logos (dans le panneau bleu, bas) ---- */
.fg-hero .logo-bar,
.fg-hero-left > .logo-bar {
  position: absolute;
  /* insets 28px partout : au max du panneau (848px) la barre fait 790px,
     la géométrie validée par Luc */
  left: 28px;
  right: 28px;
  bottom: 20px;
  width: auto;
  min-height: 32px;
  padding: 0;
  flex-wrap: nowrap;
  justify-content: space-between;
  z-index: 2;
}
.fg-hero .logo-bar .pblur { display: none; }
.logo-bar-text {
  font-weight: 500;
  font-size: 16px;
  line-height: 16px;
  color: #fff;
  white-space: nowrap;
}

/* ---- Panneau droit : photo + mockups animés (mécanique dock-home) ----
   coins gauches arrondis comme le cadre */
.fg-hero .hero-right { border-radius: var(--ds-radius-md) 0 0 var(--ds-radius-md); }

/* ============ Section produit — rail d'onglets + stage bleu ============ */
/* neutralise la largeur héritée de .slides (1296px dans styles.css) */
.slides.ds-section {
  display: block;
  width: 100%;
  max-width: none;
  margin: var(--ds-section-gap) 0 0;
  gap: 0;
}

.tabs-section {
  position: relative;
  width: 100%;
  height: calc(828px * var(--tss, 1));
}
.ts-fit {
  position: absolute;
  left: 0;
  top: 0;
  width: 1712px;
  height: 828px;
  transform: scale(var(--tss, 1));
  transform-origin: 0 0;
  background: var(--ds-surface-tint);
  border-radius: var(--ds-radius-md);
  box-shadow: var(--ds-ring-section);
  overflow: hidden;
}

/* ---- Rail gauche ---- */
.ts-rail {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 396px;
  padding: 48px 0 48px 48px;
  display: flex;
  flex-direction: column;
}
.ts-rail .sl-tab {
  position: relative;
  margin-top: 0;
  padding: 0 78px 0 0;
  border-bottom: 0;
  opacity: 1;
  cursor: pointer;
}
.ts-rail .sl-tab.is-active { margin-top: 0; border-bottom: 0; }
/* l'onglet actif absorbe l'espace : les inactifs se regroupent en bas */
.ts-rail .sl-tab + .sl-tab { margin-top: 22px; }
.ts-rail .sl-tab.is-active { flex: 1 1 auto; }
.ts-rail .sl-tab > span {
  display: block;
  font-weight: 500;
  font-size: 24px;
  line-height: 46px;
  text-align: left;
  color: var(--ds-ink-50);
  transition: color 0.15s ease;
  white-space: nowrap;
}
.ts-rail .sl-tab:hover > span,
.ts-rail .sl-tab.is-active > span { color: var(--ds-ink); }
/* débogueur de steps : outil de dev, masqué */
.sr-debug { display: none; }
/* dot indicateur, aligné sur la ligne de titre (Figma : x355 → right 30) */
.ts-rail .sl-tab::after {
  content: "";
  position: absolute;
  right: 30px;
  top: 17.5px;
  width: 11px;
  height: 11px;
  border-radius: 24px;
  background: var(--ds-dot-idle);
  transition: background 0.2s ease;
}
.ts-rail .sl-tab:hover::after { background: rgba(169, 186, 197, 0.55); }
/* dot actif = timer circulaire : l'anneau se remplit (var --tabp, 0→100)
   puis la tab suivante prend le relais */
.ts-rail .sl-tab.is-active::after,
.ts-rail .sl-tab.is-active:hover::after {
  width: 13px;
  height: 13px;
  right: 29px;
  top: 16.5px;
  background: conic-gradient(var(--ds-sky) calc(var(--tabp, 0) * 1%), rgba(169, 186, 197, 0.31) 0);
}
/* description : visible uniquement sur l'onglet actif */
.ts-rail .sl-tab .ts-desc {
  display: none;
  margin-top: 8px;
  width: 318px;
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: var(--ds-ink);
  white-space: normal;
}
.ts-rail .sl-tab.is-active .ts-desc { display: block; }

/* ---- Stage bleu ---- */
.ts-stage {
  position: absolute;
  left: 396px;
  top: 24px;
  width: 1292px;
  height: 780px;
  border-radius: 4px;
  background: var(--ds-blue);
  overflow: hidden;
}
.ts-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/img/figma/stage-symbol.svg") no-repeat;
  background-size: 3345px 2230px;
  background-position: -700px -611px;
  pointer-events: none;
}
.ts-stage::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;
}

/* fenêtre navigateur : le .sl-frame hérité, ancré à 22/22 (Figma 1248x736) */
.ts-stage .sl-frame {
  left: 22px;
  top: 22px;
  transform: none;
  z-index: 1;
}
.ts-stage .sl-window { height: 668px; }

/* ============ Section stats ============ */
.stats-grid .ds-card--stat {
  height: 312px;
}
.stat-logo {
  position: absolute;
  left: 48px;
  /* même respiration en haut qu'à gauche */
  top: 48px;
}
.stats-grid .ds-arrow-chip {
  position: absolute;
  right: 37px;
  /* suit le logo : centre du chip aligné sur le centre du logo */
  top: 45px;
}
.stat-figures {
  position: absolute;
  left: 48px;
  /* même respiration en bas qu'à gauche */
  bottom: 48px;
}

/* ============ Section features ============ */
.features-ctas {
  margin: -32px 0 0 var(--ds-heading-indent);
  padding-bottom: 54px; /* + gouttière 2px de la grille = 56 (Figma) */
  display: flex;
  gap: 8px;
}
.features-grid { margin-top: var(--ds-grid-gap); }
/* Le titre et le corps sont dans le flux, pas posés en absolu : aux cotes du
   Figma le titre tient sur une ligne, mais dans les colonnes étroites il en
   prend deux — et le corps, cloué à top 95, passait dessous. En flux il
   descend. Les illustrations restent en absolu, elles ne bougent pas. */
.features-grid .ds-card { height: 462px; padding: 41px 48px 0; }
.features-grid .ds-card-title {
  margin-right: 72px;
  /* 46 d'interligne, c'était la cote Figma pour une ligne unique — sur deux
     lignes ça bâille. Les 7px de part et d'autre rendent la même hauteur de
     46 sur une ligne, donc la même ligne de base, avec un interligne de 32
     entre les lignes quand le titre passe à deux. */
  line-height: 32px;
  padding: 7px 0;
}
.features-grid .ds-card-body {
  margin-top: 8px;
  width: 408px;
  max-width: 100%;
}
.features-grid .ds-card--wide .ds-card-body { width: 440px; }
.features-grid .ds-card--wd .ds-card-body { width: 525px; }
.features-grid .ds-arrow-chip {
  position: absolute;
  right: 46px;
  top: 46px;
}

/* ============ CTA finale ============ */

/* ============ Responsive ============ */
@media (max-width: 1100px) {
  .fg-hero { flex-direction: column; }
  .fg-hero-left {
    width: 100%;
    /* Empile : le panneau se regle sur son contenu. La hauteur calculee pour
       la colonne de droite du bureau n'a plus de sens ici — elle tombait a
       292 pour 288 de contenu et sans padding vertical, donc le titre etait
       rogne en haut et la carte de prompt collee au bord. */
    height: auto;
    padding: 48px 24px 28px;
    gap: 28px;
  }
  /* et la barre de logos revient dans le flux : posee en absolu a 20 du bas,
     elle s'imprimait par-dessus la carte de prompt */
  .fg-hero .logo-bar,
  .fg-hero-left > .logo-bar {
    position: static;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px 24px;
  }
  .fg-hero .prompt-widget { width: min(560px, 100%); }
  .stats-grid { flex-wrap: wrap; }
  .stats-grid .ds-card--stat { min-width: 280px; }
}
@media (max-width: 640px) {
  .features-grid .ds-card { height: auto; padding: 32px 24px 40px; }
  .features-grid .ds-card-title,
  .features-grid .ds-card-body {
    position: static;
    width: auto;
    max-width: none;
    margin-right: 0;
  }
  .features-grid .ds-card-body { margin-top: 12px; }
  .features-grid .ds-arrow-chip { right: 24px; top: 24px; }
  .features-ctas { margin-left: 24px; }
}

/* ============ Home — sections après "Stop chasing reps..." ============ */
/* Carte avec zone media (screen blanche en attendant les visuels) */
.media-grid .ds-card { height: auto; padding-bottom: 44px; }
/* la carte à illustration colle sa zone au bord bas (node 11:11142 : 718
   tout rond) — le padding bas ne vaut que pour les cartes texte */
.media-grid .ds-card.il-card:has(.il-bleed),
.media-grid .ds-card.il-card:has(.it-copy) { padding-bottom: 0; }
.media-grid .card-media {
  width: calc(100% - 96px);
  height: 260px;
  margin: 48px 48px 40px;
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--ds-shadow-window);
}
.media-grid .ds-card-title,
.media-grid .ds-card-body {
  position: static;
  width: auto;
  margin: 0 48px;
  max-width: 480px;
}
.media-grid .card-kicker {
  margin: 0 48px 8px;
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  color: var(--ds-ink-50);
}
.media-grid .ds-card-body { margin-top: 10px; }

/* Sections centrées (Dock AI, templates, CTA démo) */
.section-center { text-align: center; }
.section-center .ds-section-heading {
  padding-left: 0;
  margin-left: auto;
  margin-right: auto;
}
.section-center .ds-eyebrow { margin-left: auto; margin-right: auto; }
.section-center .section-sub {
  max-width: 640px;
  margin: -32px auto 0;
  padding-bottom: var(--ds-heading-gap);
}

/* Dock AI : grande carte teintée vide (le bloc blanc a été retiré,
   même hauteur qu'avant pour ne rien décaler) */
.ai-stage.ds-card {
  position: relative;
  overflow: hidden;
  height: auto;
  min-height: 624px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 72px 48px;
}

/* Wall of love */
.wall-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: -16px 0 var(--ds-heading-gap);
}
.wall-grid { align-items: stretch; }
.wall-grid .ds-card {
  height: auto;
  padding: 40px 44px 36px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.wall-grid .wall-video {
  width: 100%;
  height: 200px;
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--ds-shadow-window);
  flex-shrink: 0;
}
.wall-quote {
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: var(--ds-ink);
}
.wall-author { margin-top: auto; }
.wall-author .ds-label { display: block; }
.wall-author span:last-child {
  font-weight: 400;
  font-size: 15px;
  line-height: 22px;
  color: var(--ds-ink-50);
}
.wall-more { display: flex; justify-content: center; margin-top: 40px; }

/* Sécurité : panneau sombre (token --ds-ink) structuré comme un hero produit —
   texte à gauche (padding 64 uniforme, comme sp-hero-left), stage noir à droite
   flush au bord, dots de la couleur du panneau, screen blanche dedans */
.security-panel.ds-card {
  height: auto;
  background: var(--ds-ink);
  display: flex;
  align-items: stretch;
  gap: 48px;
  padding: 0;
}
.security-panel .ds-eyebrow { color: rgba(255, 255, 255, 0.6); }
.security-panel .ds-h2 { color: #fff; }
.security-panel .ds-card-title { color: #fff; margin-top: 40px; }
.security-panel .ds-card-body { color: rgba(255, 255, 255, 0.6); margin-top: 8px; max-width: 380px; }
.security-left {
  flex: 1 1 50%;
  min-width: 0;
  padding: 64px;
  display: flex;
  flex-direction: column;
}
.security-stage {
  position: relative;
  flex: 1 1 50%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* le pas de 64 du panneau, sur les quatre côtés autour de la modale */
  padding: 64px;
  /* bloc sombre, un cran plus foncé que le panneau encre */
  background: #0a0e15;
  overflow: hidden;
  /* coins gauches arrondis comme le stage des heroes */
  border-radius: var(--ds-radius-md) 0 0 var(--ds-radius-md);
}

.security-stage .sp-placeholder {
  position: relative;
  /* bloc de la couleur du fond gauche (panneau --ds-ink), pas blanc */
  background: var(--ds-ink);
}
/* poussées en bas de colonne : l'air sous les pills vaut le padding gauche */
.security-badges {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  /* l'écart avec le texte grandit : la colonne pousse le panneau, et la
     modale de droite gagne son air en haut et en bas */
  margin-top: 140px;
}
/* les deux sceaux, en grand : logo au-dessus, label dessous — pas de
   bordure, contraste adouci, les deux lockups sur la même ligne */
.security-badges { gap: 44px; }
.sec-trust {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.sec-trust .trust-ico { background: rgba(255, 255, 255, 0.82); margin: 0; }
.sec-trust .trust-soc {
  width: 63px;
  height: 36px;
  /* même encombrement vertical que le sceau GDPR (61.7) : le lockup AICPA
     se centre sur lui, les labels restent sur la même ligne */
  margin: 12.85px 0;
}
.sec-trust .trust-gdpr { width: 63px; height: 61.7px; }
.sec-trust > span {
  font-weight: 500;
  font-size: 11.5px;
  line-height: normal;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
}
/* la hauteur du panneau est dictée par la COLONNE TEXTE (padding 64 uniforme :
   l'espace sous les badges = l'espace au-dessus du subhead) ; le bloc du stage
   s'étire pour suivre */
.security-panel .sp-placeholder { flex: 0 1 560px; height: auto; align-self: stretch; min-height: 320px; }

/* Templates : cartes à vignette + nom + catégorie */
.ds-card-grid.tpl-grid { gap: var(--ds-grid-gap); text-align: left; }
.tpl-grid .ds-card { height: auto; background: none; overflow: visible; }
.tpl-grid .card-media {
  width: 100%;
  height: 312px;
  background: #fff;
  border-radius: var(--ds-radius-md);
  /* liseré INSET : le trait vit dans le bloc, la gouttière 2px reste intacte
     et le bloc blanc reste lisible sur fond blanc */
  box-shadow: inset 0 0 0 1px rgba(18, 23, 34, 0.08);
}
/* ---- Mockups des templates : la fenêtre workspace crème des tuiles
   features (dots, écran cerné #ebe5d8), en version claire branding Dock —
   pastilles blanches, accents bleus, pas de couverture sombre. ---- */
.tpl-grid .card-media.tpl-shot {
  background: #faf9f7;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-align: left;
  font-family: var(--ds-font);
}
.tpl-bar {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 8px 0 6px 10px;
  flex-shrink: 0;
}
.tpl-bar img { width: 7px; height: 7px; }
.tpl-screen {
  flex: 1;
  margin: 0 2px 2px;
  border: 0.5px solid #ebe5d8;
  border-radius: 6px;
  overflow: hidden;
  padding: 12px 16px;
  min-height: 0;
  /* l'ecran est blanc, seule la barre reste creme */
  background: #fff;
}
/* rangée d'onglets : la pastille active en bleu Dock, le reste en retrait */
.tpl-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  /* alignee a gauche : le premier onglet ne se fait jamais rogner,
     le surplus sort par la droite */
  justify-content: flex-start;
  white-space: nowrap;
  overflow: hidden;
  font-size: 9px;
  color: rgba(18, 23, 34, 0.55);
}
.tpl-nav b {
  font-weight: 600;
  color: #fff;
  background: var(--ds-blue);
  padding: 3px 9px 4px;
  border-radius: 100px;
}
/* marques + titre du workspace */
.tpl-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 0;
}
.tpl-marks { display: flex; }
.tpl-marks img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px #faf9f7;
}
.tpl-marks img + img { margin-left: -6px; }
.tpl-hero > span:last-child {
  font-weight: 500;
  font-size: 13px;
  line-height: normal;
  color: var(--ds-ink);
  white-space: nowrap;
}
/* intro + sommaire, deux tuiles blanches côte à côte */
.tpl-panel { display: flex; gap: 8px; }
.tpl-text,
.tpl-toc {
  background: #fff;
  border: 0.5px solid #ebe5d8;
  border-radius: 8px;
  padding: 10px 11px;
}
.tpl-text { flex: 1; }
.tpl-text p {
  margin: 0;
  font-size: 8.5px;
  line-height: 13px;
  color: rgba(18, 23, 34, 0.7);
}
.tpl-toc { width: 44%; flex-shrink: 0; }
.tpl-toc b {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 500;
  font-size: 6.8px;
  letter-spacing: 0.28px;
  text-transform: uppercase;
  color: var(--ds-ink);
  margin-bottom: 6px;
}
.tpl-toc b::before {
  content: "";
  width: 4.5px;
  height: 4.5px;
  background: var(--ds-blue);
  flex-shrink: 0;
}
.tpl-toc span { display: block; font-size: 8px; line-height: normal; color: var(--ds-ink); margin-top: 4px; white-space: nowrap; overflow: hidden; }
.tpl-toc span::before { content: "\2192\00a0\00a0"; color: rgba(18, 23, 34, 0.45); }
/* section du bas : plan d'action / timeline / équipe, une tuile blanche */
.tpl-sec {
  margin-top: 8px;
  background: #fff;
  border: 0.5px solid #ebe5d8;
  border-radius: 8px;
  padding: 9px 11px;
}
.tpl-sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 500;
  font-size: 9px;
  color: var(--ds-ink);
  padding-bottom: 7px;
}
.tpl-sec-head span:last-child { font-weight: 400; color: var(--ds-ink-50); }
.tpl-task {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5.5px 0;
  border-top: 0.5px solid rgba(18, 23, 34, 0.06);
  font-size: 9px;
  color: var(--ds-ink);
}
.tpl-check {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(18, 23, 34, 0.18);
  flex-shrink: 0;
  position: relative;
}
.tpl-check.is-on { background: var(--ds-blue); border-color: var(--ds-blue); }
.tpl-check.is-on::after {
  content: "";
  position: absolute;
  left: 2.6px;
  top: 0.8px;
  width: 2.8px;
  height: 5px;
  border: solid #fff;
  border-width: 0 1px 1px 0;
  transform: rotate(45deg);
}
.tpl-task s { text-decoration: none; }
.tpl-done { margin-left: auto; font-weight: 500; font-size: 8px; color: #0ba258; }
.tpl-pill {
  margin-left: auto;
  font-weight: 500;
  font-size: 8px;
  color: var(--ds-blue);
  background: rgba(0, 104, 249, 0.08);
  padding: 2px 7px 3px;
  border-radius: 100px;
}
/* timeline en colonnes */
.tpl-cols { display: flex; gap: 10px; padding-top: 2px; }
.tpl-col { flex: 1; min-width: 0; }
.tpl-col b { display: block; font-weight: 500; font-size: 8.5px; color: var(--ds-ink); white-space: nowrap; overflow: hidden; }
.tpl-col .tpl-bar { display: block; height: 3px; background: rgba(18, 23, 34, 0.08); border-radius: 100px; margin: 5px 0 4px; padding: 0; }
.tpl-col .tpl-bar i { display: block; height: 100%; background: var(--ds-blue); border-radius: inherit; }
.tpl-col em { font-style: normal; font-size: 7.5px; color: var(--ds-ink-50); white-space: nowrap; }
/* équipe : mêmes rangées que la liste de deals de Catch deals, en petit */
.tpl-team { display: flex; flex-direction: column; }
.tpl-team > span {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4.5px 0;
  border-top: 0.5px solid rgba(18, 23, 34, 0.06);
}
.tpl-team img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.tpl-team b { display: block; font-weight: 500; font-size: 8.5px; line-height: normal; color: var(--ds-ink); }
.tpl-team em { display: block; font-style: normal; font-size: 7.5px; line-height: normal; color: var(--ds-ink-50); margin-top: 1px; }

.tpl-grid .ds-card-title { margin-top: 20px; font-size: 18px; line-height: 26px; }
.tpl-grid .tpl-cat {
  margin-top: 2px;
  font-weight: 400;
  font-size: 15px;
  color: var(--ds-ink-50);
}

/* CTA démo : grande carte teintée centrée */
/* CTA demo : bande pleine largeur collee au footer — le pas de 64 du
   panneau Security, textes encre, pas de rayon */
.demo-cta-section .ds-container { max-width: none; padding: 0; }
.demo-cta-section + footer.ds-footer { margin-top: 0; }
.demo-cta.ds-card {
  position: relative;
  height: 410px;
  padding: 0;
  text-align: left;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--ds-white);
  border-radius: 0;
}
.demo-cta-left { position: relative; flex: 878 0 0; min-width: min(100%, 440px); padding: 64px; }
.demo-cta .ds-h2 { max-width: 560px; margin: 0; }
.demo-cta .ds-body-lg { margin: 20px 0 36px; }
.demo-cta .btn { display:inline-flex; width:max-content; max-width:none; flex:none; align-self:flex-start; margin:0; }
.demo-cta-illo {
  position: relative;
  flex: 0 0 1142px;
  min-width: 0;
  height: 368px;
  align-self: flex-start;
  margin-top: 56px;
}
.demo-cta-illo .wd-il { top: 0; }
@media (max-width: 1100px) {
  .demo-cta-illo { display: none; }
  .demo-cta-left { padding: 80px 48px; }
}

@media (max-width: 900px) {
  .security-panel.ds-card { flex-direction: column; padding: 0; }
  .security-left { padding: 40px 24px; }
  .security-stage { width: 100%; padding: 40px 24px; border-radius: 0 0 var(--ds-radius-md) var(--ds-radius-md); }
  .security-panel .sp-placeholder { flex: none; width: 100%; }
  .ai-stage .sp-placeholder { width: 100%; }
  .media-grid .card-media { width: calc(100% - 48px); margin: 24px 24px 24px; }
  .media-grid .ds-card-title, .media-grid .ds-card-body,
  .media-grid .card-kicker { margin-left: 24px; margin-right: 24px; }
}

/* ============ Wall of love — carrousel horizontal (layout réf. Glide) ============ */
.wall-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: var(--ds-heading-gap);
}
.wall-head .ds-section-heading { margin-bottom: 0; }
.wall-arrows { display: flex; gap: 8px; padding-right: var(--ds-heading-indent); }
.wall-arrow {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ds-radius-pill);
  /* fond en surface-tint (l'ancien gris-bleu neutre est abandonné) */
  background: var(--ds-surface-tint);
  border: 0;
  cursor: pointer;
}
.wall-arrow:hover { background: var(--ds-surface-chip); }
.wall-arrow img { width: 12px; height: 10px; }
.wall-arrow--prev img { transform: scaleX(-1); }

.wall-strip {
  display: flex;
  gap: var(--ds-grid-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.wall-strip::-webkit-scrollbar { display: none; }
.wall-card {
  position: relative;
  flex: 0 0 420px;
  height: 500px;
  scroll-snap-align: start;
  background: var(--ds-surface-tint);
  border-radius: var(--ds-radius-md);
  overflow: hidden;
}
/* carte "vidéo" : media plein cadre (placeholder blanc), légende en bas */
.wall-card .wall-photo {
  position: absolute;
  inset: 0;
  background: #fff;
  box-shadow: var(--ds-ring-section);
  border-radius: inherit;
}
.wall-card .wall-author {
  position: absolute;
  left: 32px;
  right: 32px;
  bottom: 28px;
}
.wall-card .wall-author .ds-label { display: block; }
.wall-card .wall-author span:last-child {
  font-weight: 400;
  font-size: 15px;
  line-height: 22px;
  color: var(--ds-ink-50);
}
/* carte video : poster plein cadre, pas d'UI de player — le clic lance
   la lecture dans la card (script.js), memes proportions */
.wall-card .wall-photo--video { cursor: pointer; overflow: hidden; }
.wall-photo--video img,
.wall-photo--video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.wall-photo--video img { object-fit: cover; }
/* la vraie photo du client, plein cadre. La couleur de la carte reste
   dessous : c'est le repli si la photo ne charge pas, et le fond que
   l'iframe Wistia laisse voir le temps de se lancer. */
/* Les posters sont fabriques depuis la video source : image choisie a la
   main (regard camera, pas d'entre-deux), fenetre portrait 0.84 centree sur
   le visage et arretee au-dessus des sous-titres incrustes. Rien a recadrer
   ici, l'image arrive deja cadree. */
.wall-photo--video img {
  display: block;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.wall-photo--video:hover img { transform: scale(1.04); }
/* un voile bas, assez court pour ne pas assombrir le visage : il tient le
   nom en blanc lisible sur la photo. */
.wall-photo--video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(18, 23, 34, 0.72) 0%,
    rgba(18, 23, 34, 0.28) 24%,
    rgba(18, 23, 34, 0) 50%);
  pointer-events: none;
}
/* le bouton de lecture : un seul disque clair, le triangle en filets CSS.
   La carte entiere reste le bouton, celui-ci n'est que l'affordance. */
.wall-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border-radius: var(--ds-radius-pill);
  background: rgba(255, 255, 255, 0.92);
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), background 0.2s ease;
}
.wall-play::after {
  content: "";
  position: absolute;
  left: 22px;
  top: 18px;
  border-left: 16px solid var(--ds-ink);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}
.wall-photo--video:hover .wall-play { transform: scale(1.08); background: #fff; }
/* quand la video joue, la photo, le voile et le bouton s'effacent */
.wall-photo--video.is-playing img,
.wall-photo--video.is-playing .wall-play { display: none; }
.wall-photo--video.is-playing::after { content: none; }
.wall-card .wall-photo--c1 { background: var(--ds-blue); }
.wall-card .wall-photo--c2 { background: #5a39ff; }
.wall-card .wall-photo--c3 { background: var(--ds-ink); }
.wall-card .wall-photo--c4 { background: var(--ds-sky); }
.wall-photo--video + .wall-author .ds-label,
.wall-photo--video + .wall-author span { color: #fff; }
/* le role sous le nom : sa regle de base est plus specifique, on la bat */
.wall-card .wall-photo--video + .wall-author span:last-child { color: rgba(255, 255, 255, 0.75); }
.wall-card .wall-author { z-index: 1; pointer-events: none; }
/* carte citation : quote en grand + auteur en bas */
.wall-card--quote { padding: 44px 40px 96px; }
/* La marque du client, en haut de la carte de citation. Une fente : un vrai
   logo quand on l'a, sinon le nom typographie — le meme repli que .stat-name
   sur les cartes chiffrees et que /customers. Jamais le logo d'une societe a
   la place d'une autre. */
.wall-mark {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  font-weight: 500;
  font-size: 20px;
  line-height: 28px;
  color: var(--ds-ink);
}
/* le meme verrou que la pill compte de la carte bleue : une boite fixe, le
   logo contenu dedans. Les marques n'ont pas toutes le meme fond ni la meme
   marge interne, la boite les remet a la meme hauteur optique. */
.wall-mark-ico {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  object-fit: contain;
  border-radius: 6px;
}
/* la citation prend la place qui reste, l'auteur reste colle en bas */
.wall-card--quote { display: flex; flex-direction: column; }
.wall-card--quote .wall-quote {
  font-weight: 500;
  font-size: 24px;
  line-height: 34px;
  color: var(--ds-ink);
}
@media (max-width: 640px) {
  .wall-card { flex-basis: 320px; height: 420px; }
  .wall-arrows { padding-right: 24px; }
}

/* ============ Flèches carrousel : glyphe noir (encre) ============ */
.wall-arrow img { width: 14px; height: 12px; }

/* ============ Integrations — rangées de pastilles défilantes (réf. Glide) ============ */
.intg-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}
.intg-row { display: flex; overflow: hidden; }
.intg-track {
  display: flex;
  gap: 12px;
  padding-right: 12px;
  flex-shrink: 0;
  animation: intg-scroll 46s linear infinite;
}
.intg-row--reverse .intg-track { animation-direction: reverse; }
/* hover : le ralenti est piloté en JS (script.js) sur TOUT le bloc,
   quelle que soit la ligne survolée — updatePlaybackRate, sans à-coup */
@keyframes intg-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}
.intg-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 20px 0 18px;
  background: #fff;
  border-radius: var(--ds-radius-pill);
  box-shadow: inset 0 0 0 0.5px var(--ds-ring);
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  color: var(--ds-ink);
  white-space: nowrap;
}
.intg-pill i {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--ds-surface-chip-neutral);
}
@media (prefers-reduced-motion: reduce) {
  .intg-track { animation: none; }
  .intg-row { overflow-x: auto; }
}

/* ============ Header sticky (comportement lovable-back-to-school) ============
   Visible en haut de page et au scroll vers le haut ; masqué instantanément
   au scroll vers le bas. Les coins inversés sous le header préservent le
   radius 16 des sections qui glissent dessous. */
.header {
  /* TOUJOURS statique dans le flux : le comportement sticky est porté par un
     doublon fixe (.header-ghost, créé par header.js) — zéro reflow */
  position: relative;
  z-index: 90;
  width: min(calc(100vw - 2 * var(--ds-page-gutter)), var(--ds-content-max));
  max-width: 100%;
  margin: 0 auto;
  height: auto;
  /* Use the viewport grid even when the page shell has a capped width. */
  padding: 16px 0 12px;
  background: #fff;
}
.header .nav-link { letter-spacing: normal; }
.header-ghost {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 91;
}
.header-ghost.is-hidden {
  visibility: hidden;
  transform: translateY(-100%);
  transition: none;
}
.header-ghost.is-sliding {
  visibility: visible;
  transform: translateY(0);
  transition: transform 0.2s ease-out;
}
/* coins inversés : le cadre blanc épouse le radius 16 des sections */
.header::before,
.header::after {
  content: "";
  position: absolute;
  top: 100%;
  width: 16px;
  height: 16px;
  pointer-events: none;
}
.header::before {
  left: 0;
  background: radial-gradient(circle at 100% 100%, rgba(255, 255, 255, 0) 15.5px, #fff 16px);
}
.header::after {
  right: 0;
  background: radial-gradient(circle at 0% 100%, rgba(255, 255, 255, 0) 15.5px, #fff 16px);
}
/* le hero colle au header (le margin-top vit désormais dans le padding du header) */
.hero.fg-hero { margin-top: 0; }
/* sticky ne fonctionne pas sous overflow:hidden — le clip horizontal passe sur body */
.desktop { overflow: visible; }
body { overflow-x: clip; }

/* ============ Bandeaux infinis en pleine largeur écran ============
   Le carrousel témoignages et les pastilles intégrations sortent du
   conteneur et touchent les bords gauche/droite du viewport ; la première
   carte reste calée sur la grille (padding = gouttière du conteneur). */
.wall-strip,
.intg-rows {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
.wall-strip {
  /* première carte calée sur la GAUCHE DU TEXTE (conteneur + indent 48px) */
  padding-left: max(64px, calc(50vw - 856px + 48px));
  padding-right: max(16px, calc(50vw - 856px));
  scroll-padding-left: max(64px, calc(50vw - 856px + 48px));
}


/* CTA bouton sous un titre de section centrée (templates) */
.section-center .wall-more { margin: -24px 0 56px; }
/* grille de cartes qui suit les pastilles intégrations */
.intg-rows + .ds-card-grid { margin-top: 56px; }

/* pastilles intégrations : cliquables, même bump que les CTA outline */
a.intg-pill {
  color: var(--ds-ink);
  text-decoration: none;
  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);
}
a.intg-pill:hover { background: #f7f7f8; }
a.intg-pill:active {
  background: #f2f2f3;
  box-shadow:
    inset 0 0 0 0.5px rgba(18, 23, 34, 0.15),
    inset 0 2px 4px rgba(18, 23, 34, 0.12);
}

/* pastilles intégrations : vrais logos */
.intg-pill img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
  overflow: hidden;
}
/* pastille primaire (nœud central d'un flux, ex. Dock AI) */
.intg-pill--primary {
  background: var(--ds-blue);
  color: #fff;
  box-shadow: var(--ds-shadow-btn), var(--ds-shadow-btn-primary-inset);
}

/* les zones média avec illustration : pas de boîte blanche ni d'ombre —
   l'illustration pose directement sur le fond teinté de la carte */
.media-grid .card-media.has-il,
.tpl-grid .card-media.has-il,
.card-media.has-il {
  background: transparent;
  box-shadow: none;
}

/* la sécurité : illustration dans la fenêtre blanche avec padding */
.security-panel .sp-placeholder { padding: 32px; }
/* les zones média des cartes 640px+ : marges texte plus étroites en mobile */



@media (max-width: 640px) {
  }

/* dropdown piloté au safe-triangle (classe .is-open posée par header.js) */
.nav-item.has-menu.is-open { background: rgba(18, 23, 34, 0.04); }
.nav-item.has-menu.is-open .nav-menu { display: block; }

/* ============ Mega-menu Product : tuile icône + nom + description ============ */
/* équilibre visuel : 28px optiques en haut comme en bas
   (les rangées portent 8px internes → panneau 20px en bas) */
.nav-menu-panel { padding: 28px 40px 22px 28px; gap: 40px; /* 22 + 6 internes = 28 optique, comme en haut */ }
.nav-prod {
  display: flex;
  /* le sous-titre a disparu : le nom se centre sur l'icone de 38 au lieu de
     se caler en haut d'une ligne qui n'a plus de seconde ligne */
  align-items: center;
  gap: 12px;
  padding: 6px 14px 6px 8px;
  margin: 0 -8px;
  border-radius: 12px;
  text-decoration: none;
}
.nav-prod:hover { background: var(--ds-surface-tint); }
.nav-prod-ico {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  /* container d'icône blanc + hairline (comme .ds-card-icon) */
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(18, 23, 34, 0.06);
}
.nav-prod-ico img { width: 18px; height: 18px; object-fit: contain; }
.nav-prod-name {
  display: block;
  font-weight: 500;
  font-size: 15.5px;
  line-height: 20px;
  color: var(--ds-ink);
  white-space: nowrap;
}

/* zone d'illustration des cartes features : démarre toujours SOUS le corps
   de texte (jamais dessus), rectangle plein cadre de la zone */
.features-grid .card-il {
  position: absolute;
  left: 48px;
  right: 48px;
  top: 240px;
  bottom: 44px;
}
.features-grid .card-il .il-rect { inset: 0; }
@media (max-width: 640px) {
  .features-grid .card-il { position: static; height: 180px; margin-top: 20px; }
}

/* hover nav : le beige des cartes (surface-tint), comme les cartes stat */
.nav-item.has-menu:hover,
.nav-item.has-menu.is-open { background: var(--ds-surface-tint); }
.nav-prod:hover { background: var(--ds-surface-tint); }
a.nav-link { border-radius: var(--ds-radius-pill); padding: 7px 10px; margin: -7px -10px; }
a.nav-link:hover { background: var(--ds-surface-tint); }

/* dropdowns + Log in alignés sur les CTA : radius pill partout,
   hover = même bleu clair que les dropdowns,
   padding horizontal des chips = celui des CTA (14px, cf. .btn-ghost) */
/* chip dropdown : un peu plus de padding à gauche (le caret occupe la droite,
   équilibre optique 16/14 comme .btn-outline) */
.nav-item.has-menu { border-radius: var(--ds-radius-pill); padding: 7px 14px 8px 16px; margin: -7px -14px -8px -16px; }
a.nav-link { padding: 7px 14px 8px; margin: -7px -14px -8px; }
.header .btn-ghost { border-radius: var(--ds-radius-pill); }
.header .btn-ghost:hover { background: var(--ds-surface-tint); }

/* titres de catégories du mega-menu : plus petits, en encre */
.nav-menu-heading {
  font-size: 11.5px;
  color: var(--ds-ink);
  /* remontés d'1px */
  margin-top: -1px;
  /* écart titre -> premier item resserré (8 + 6 de padding rangée = 14px) */
  margin-bottom: 8px;
}

/* ancrage X du panneau : la 1re colonne (heading + tuiles) s'aligne sur le
   texte du déclencheur ("Product") — padding panneau 28px, texte à +16px
   dans le chip → left = 16 − 28 = −12px. Espacements internes inchangés. */
.nav-item.has-menu .nav-menu { left: -12px; padding-top: 11px; /* panneau remonté d'1px (pont hover 12 → 11) */ }

/* Scènes Content Library / Sales Training / Enablement Agent :
   provisoirement, seule la sidebar est montrée — les zones principales
   (et l'overlay de cours) sont masquées en attendant les contenus */
.mk-library .mk-lib-main,
.mk-training .mkt-main,
.mk-training .mkt-course,
.mk-agent .mk-agent-main {
  visibility: hidden;
}

/* caret des dropdowns : encre pleine (SVG), et descend d'1px au hover */
.nav-caret img { transition: transform 0.15s ease; }
.nav-item.has-menu:hover .nav-caret img,
.nav-item.has-menu.is-open .nav-caret img { transform: translateY(1px); }

/* ---- Logo bar : variante dark (heroes produit, panneau clair) ---- */
.sp-hero-left { position: relative; }
.logo-bar--dark .logo-bar-text { color: var(--ds-ink); }
.logo-bar--dark img { filter: brightness(0); opacity: 0.85; }

/* ============ Carte "Run every deal like your best rep" (Figma v2 1:1040) ============
   Carte bleue, texte blanc, et pour toute illustration une carte de prompt
   posée au centre. Toutes les cotes viennent du node. */
.features-grid .ds-card--blue {
  position: relative;
  background: var(--ds-blue);
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.1);
}
/* la même grille de points que le panneau bleu du hero, aux mêmes cotes du
   Figma : points de 3,86, pas de 20,6, encre à 23% */
.features-grid .ds-card--blue::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(18, 23, 34, 0.06) 1.7px, rgba(18, 23, 34, 0) 2.15px);
  /* Trame de fond, faible. Le pas et la marge sont posés par script.js : la
     maille horizontale vaut la largeur de la carte de prompt divisée par 23,
     ce qui fait tomber ses deux bords verticaux pile sur des colonnes de
     points ; la maille verticale suit, et la carte est recalée pour que ses
     bords haut et bas tombent sur des rangées. La marge est la même aux
     quatre bords. Le point étant au centre de sa maille, on décale d'une
     demi-maille. */
  background-size: var(--dotx, 20.6px) var(--doty, 20.6px);
  background-position: calc(var(--dotm, 10.3px) - var(--dotx, 20.6px) / 2) calc(var(--dotm, 10.3px) - var(--doty, 20.6px) / 2);
  border-radius: inherit;
  pointer-events: none;
}
/* on ne pose surtout pas position: relative sur tous les enfants : ça
   écrasait le position: absolute de l'illustration, qui retombait dans le
   flux et sortait par le bas de la carte. Le z-index suffit pour passer
   au-dessus de la grille de points. */
.features-grid .ds-card--blue > .ds-card-title,
.features-grid .ds-card--blue > .ds-card-body { position: relative; z-index: 1; }
.features-grid .ds-card--blue > .rd-il { z-index: 1; }
/* La vague : un second calque de points, plus soutenu, révélé par un halo
   centré sur la carte de prompt dont le rayon respire. Près de la carte les
   points valent 0,23 comme avant, loin ils retombent aux 0,1 du fond. */
@property --rd-wave {
  syntax: "<length>";
  inherits: false;
  initial-value: 110px;
}
/* l'intensité de l'anneau : il naît de rien et s'éteint avant de repartir,
   sinon le saut du rayon se voit à chaque tour */
@property --rd-wamp {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
.features-grid .ds-card--blue::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(18, 23, 34, 0.28) 1.7px, rgba(18, 23, 34, 0) 2.15px);
  background-size: var(--dotx, 20.6px) var(--doty, 20.6px);
  background-position: calc(var(--dotm, 10.3px) - var(--dotx, 20.6px) / 2) calc(var(--dotm, 10.3px) - var(--doty, 20.6px) / 2);
  /* Deux masques qui s'additionnent : un halo fixe collé à la carte de
     prompt — c'est lui qui fait "plus près, plus opaque" — et par-dessus un
     anneau qui part d'elle et file vers l'extérieur en boucle. Le second seul
     inondait toute la carte à son maximum ; ainsi la crête reste une onde. */
  -webkit-mask-image:
    radial-gradient(circle at 50% var(--rd-wy, 62%), #000 0%, #000 70px, rgba(0, 0, 0, 0) 215px),
    radial-gradient(circle at 50% var(--rd-wy, 62%), rgba(0, 0, 0, 0) calc(var(--rd-wave) - 62px), rgba(0, 0, 0, var(--rd-wamp)) var(--rd-wave), rgba(0, 0, 0, 0) calc(var(--rd-wave) + 62px));
  mask-image:
    radial-gradient(circle at 50% var(--rd-wy, 62%), #000 0%, #000 70px, rgba(0, 0, 0, 0) 215px),
    radial-gradient(circle at 50% var(--rd-wy, 62%), rgba(0, 0, 0, 0) calc(var(--rd-wave) - 62px), rgba(0, 0, 0, var(--rd-wamp)) var(--rd-wave), rgba(0, 0, 0, 0) calc(var(--rd-wave) + 62px));
  border-radius: inherit;
  pointer-events: none;
  animation: rdWave 2.6s linear infinite;
}
/* L'anneau part du bord de la carte de prompt et sort du cadre. Le rayon
   file en linéaire ; l'intensité, elle, monte de zéro au départ et retombe à
   zéro à l'arrivée, si bien que le saut du rayon d'un tour à l'autre se fait
   sur un anneau invisible — le raccord ne se voit plus. */
@keyframes rdWave {
  0% { --rd-wave: 55px; --rd-wamp: 0; }
  18% { --rd-wamp: 1; }
  70% { --rd-wamp: 1; }
  100% { --rd-wave: 430px; --rd-wamp: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .features-grid .ds-card--blue::after { animation: none; --rd-wamp: 0; }
}
.features-grid .ds-card--blue .ds-card-title,
.features-grid .ds-card--blue .ds-card-body { color: #fff; }
/* le node donne 640 à ce corps de texte, contre 408 aux autres cartes */
.features-grid .ds-card--blue .ds-card-body { width: 640px; }

.rd-il {
  position: absolute;
  left: 0;
  right: 0;
  top: 191px;
  height: 271px;
}
/* Blocs voisins de la carte de prompt (Figma 6:865 / 6:908 / 6:907) : trois
   aplats #0061e8 en rayon 30, à 20px de la carte — ils suivent son calage
   sur la trame (--rd-top / --rd-h) pour garder les écarts du node, et le
   bord de la carte les rogne comme dans le Figma. */
.rd-block {
  position: absolute;
  width: 319px;
  height: 379px;
  border-radius: 30px;
  background: #0061e8;
}
.rd-block--l { left: calc(50% - 574px); top: var(--rd-top, 20px); }
.rd-block--r { left: calc(50% + 255px); top: var(--rd-top, 20px); }
.rd-block--b {
  left: 50%;
  transform: translateX(-50%);
  width: 470px;
  top: calc(var(--rd-top, 20px) + var(--rd-h, 148px) + 20px);
}

/* carte de prompt : 470x148, rayon 30, centrée dans la zone d'illustration */
.rd-prompt {
  position: absolute;
  left: 50%;
  /* recalée sur la trame par script.js : ses bords tombent alors sur des
     colonnes et des rangées de points. Sans script, les cotes du node. */
  top: var(--rd-top, 20px);
  transform: translateX(-50%);
  width: 470px;
  height: var(--rd-h, 148px);
  padding: 10px;
  border-radius: 30px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 7px 9px rgba(0, 0, 0, 0.04),
    0 0 0 0.5px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  font-family: var(--ds-font);
}
/* la ligne de saisie : le node la pose à 14,37 / 10,7 dans la boîte de contenu */
.rd-ph {
  /* elle ne s'étire pas : elle est calée en haut par son padding, et c'est la
     rangée du bas qui prend le reste avec un margin-top auto. Étirée avec
     align-items: center, le contenu se centrait à 44 au lieu de 10,7. */
  flex: 0 0 auto;
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10.7px 0 0 14.37px;
  margin: 0;
}
.rd-seg {
  padding: 2px 0 4px;
  font-weight: 500;
  font-size: 16.661px;
  line-height: normal;
  color: var(--ds-ink);
  white-space: nowrap;
}
.rd-chips { display: flex; align-items: center; gap: 4px; }

/* Les deux pastilles : le compte et le template. Chacune son fond et son
   filet, repris du node. */
.rd-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 18px;
  font-weight: 500;
  font-size: 16.661px;
  line-height: normal;
  color: var(--ds-ink);
  white-space: nowrap;
}
.rd-chip--acct {
  padding: 2px 8px 4px 5px;
  background: rgba(241, 239, 255, 0.7);
  border: 0.5px solid rgba(214, 209, 251, 0.5);
}
.rd-chip--tpl {
  padding: 2px 8px 4px;
  background: rgba(219, 240, 255, 0.8);
  border: 0.5px solid #b8e1ff;
}
/* La marque du compte : une boîte de 16 centrée dans la pastille, et l'image
   décalée d'un pixel vers le bas À L'INTÉRIEUR — c'est ce que fait le node.
   Un margin-top sur l'image elle-même décalait le centrage du flex au lieu de
   rester dans la boîte : il restait 5 au-dessus et 6 en dessous, là où le
   fichier donne 5,5 au-dessus, 5,5 à gauche et 5,5 en dessous. */
.rd-chip-mark {
  position: relative;
  display: block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.rd-chip-mark img {
  position: absolute;
  left: 0;
  top: 1px;
  width: 16px;
  height: 16px;
  border-radius: 100px;
  object-fit: cover;
  display: block;
}
.rd-chip-ico { width: 16px; height: 16px; display: block; }

/* la rangée du bas : plus, agent, auto, envoi */
.rd-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 6px;
  width: 100%;
  margin-top: auto;
  flex-shrink: 0;
}
.rd-btn {
  background: #fff;
  border-radius: 100px;
  display: inline-flex;
  flex-shrink: 0;
  overflow: hidden;
  font-weight: 500;
  font-size: 16.661px;
  line-height: 28px;
  color: var(--ds-ink);
  white-space: nowrap;
}
/* Les trois boutons sont les exports des nœuds, pas des reconstructions.
   Chaque SVG est posé aux bornes relevées en le rasterisant à 8x. */
.rd-plus {
  position: relative;
  width: 37.685px;
  height: 37.685px;
  overflow: visible;
}
/* export de 38 pour un nœud de 37,685 : on le recentre */
.rd-plus img {
  position: absolute;
  left: -0.1575px;
  top: -0.1575px;
  width: 38px;
  height: 38px;
  display: block;
}
.rd-agent {
  height: 37.685px;
  gap: 8px;
  align-items: flex-start;
  justify-content: center;
  padding: 4px 8px 0;
}
/* Icône du nœud 2:121. Son encre doit tomber à 12,5 du haut de la pastille —
   relevé sur ton export à 4x — et non à 4 comme le donnerait un simple
   align-items: flex-start. Le calque d'origine y arrivait par une boîte de
   21,933 dont l'encre commence à 8,375 ; on pose directement l'icône nue. */
.rd-agent-ico {
  position: relative;
  display: block;
  width: 20.199px;
  height: 13.533px;
  margin-top: 8.5px;
  flex-shrink: 0;
}
.rd-agent-ico img { width: 20.199px; height: 13.533px; display: block; }
.rd-right {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  gap: 6px;
  align-items: flex-start;
  justify-content: flex-end;
}
.rd-auto {
  height: 37.685px;
  gap: 4px;
  align-items: flex-start;
  justify-content: center;
  padding: 4px 8px 0;
}
.rd-caret { width: 18px; height: 18px; display: block; }
/* export du bouton d'envoi : 39 de côté, dont le disque occupe 1,125..37,5 en
   x et 0,5..36,875 en y. Posé à -0,5 de la boîte, le disque tombe donc à
   (0,637 ; 0,069) pour 36,401 — les cotes du nœud. */
.rd-send {
  position: relative;
  width: 37.685px;
  height: 37.685px;
  flex-shrink: 0;
}
.rd-send img {
  position: absolute;
  left: -0.5px;
  top: -0.5px;
  width: 39px;
  height: 39px;
  display: block;
}

/* Mention affichée pendant que le menu est ouvert et qu'aucun choix n'est
   fait. Elle se replie en taille de police : à zéro elle n'occupe rien. */
.rd-ghost {
  display: inline-block;
  white-space: nowrap;
  font-weight: 500;
  font-size: 16.661px;
  color: var(--ds-ink-50);
}

/* Menu de sélection : le compte et le template ne sont pas tapés, ils sont
   choisis. Panneau flottant qui sort de la carte, comme un vrai menu. */
.rd-menu {
  position: absolute;
  top: 46px;
  z-index: 4;
  width: 214px;
  padding: 5px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 0 0 0.9px rgba(15, 20, 30, 0.08), 0 14px 34px -8px rgba(15, 20, 30, 0.22),
    0 3px 8px -2px rgba(15, 20, 30, 0.08);
  opacity: 0;
  pointer-events: none;
}
.rd-menu-lbl {
  padding: 5px 9px 6px;
  font-weight: 500;
  font-size: 10.5px;
  line-height: normal;
  letter-spacing: 0.36px;
  text-transform: uppercase;
  color: var(--ds-ink-50);
}
.rd-menu-row {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 9px;
  border-radius: 8px;
  font-size: 13.5px;
  line-height: normal;
  color: var(--ds-ink);
  white-space: nowrap;
}
.rd-menu-mark {
  width: 17px;
  height: 17px;
  border-radius: 100px;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}
.rd-menu-ini {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cbg, var(--ds-surface-chip));
  font-style: normal;
  font-weight: 500;
  font-size: 9px;
  color: var(--c, var(--ds-ink-50));
}
.rd-menu-ico {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  border-radius: 5px;
  background: var(--cbg, var(--ds-surface-chip));
  position: relative;
}
.rd-menu-ico::after {
  content: "";
  position: absolute;
  inset: 4px;
  background: var(--c, var(--ds-ink-50));
  /* chaque ligne porte son propre glyphe en --g */
  -webkit-mask: var(--g) center / contain no-repeat;
  mask: var(--g) center / contain no-repeat;
}

/* Reflet qui traverse le texte : le dégradé est découpé sur les glyphes et
   défile. Sert à "Importing" (Skip the hours) */
.rd-shimmer {
  background-image: linear-gradient(110deg, rgba(18, 23, 34, 0.5) 40%, rgba(18, 23, 34, 0.18) 50%, rgba(18, 23, 34, 0.5) 60%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rd-shimmer 1.8s linear infinite;
}
@keyframes rd-shimmer {
  from { background-position: 120% 0; }
  to { background-position: -120% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .rd-shimmer { animation: none; color: var(--ds-ink-50); }
}

/* ---- Tuile "Importing" de la carte Skip the hours (Figma 17:2393) ---- */
/* Les trois illustrations des cartes basses sont masquées pour l'instant, à
   la demande. Le balisage et tous leurs styles restent en place : il suffit
   de retirer cette seule règle pour les faire revenir. */
.sk-il,
.nm-il { display: none; }

.sk-il { position: absolute; left: 48px; right: 48px; top: 242px; }

/* ---- Pills d'intégrations de la carte Skip : le défilement infini de la
   section Integrations, ramené dans la zone d'illustration. Réutilise
   .intg-row / .intg-track / .intg-pill tels quels (mêmes vitesses), en
   spans non cliquables, avec un fondu sur les bords de la carte. ---- */
.sk-pills {
  position: absolute;
  left: 0;
  right: 0;
  top: 290px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  overflow: hidden;
}
/* ---- Fenêtre "workspace en génération" de la carte Skip (Figma 7:3350) :
   630x299 posée en (48, 211), rognée par la carte, DERRIÈRE les pills.
   État vide : chrome crème, titre grisé, écran cerné #ebe5d8 — le nom
   tourne et trois points pulsent, ça génère. ---- */
.sk-win {
  position: absolute;
  left: 48px;
  top: 211px;
  width: 630px;
  height: 299px;
  background: #f4f4f4;
  border-radius: 7px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 7px 9px 0 rgba(0, 0, 0, 0.04);
  font-family: var(--ds-font);
  /* la fenêtre s'évanouit vers le bas : son cadre ne traverse plus la zone
     des pills en filet dur, la trame s'éteint avec elle */
  -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 92%);
  mask-image: linear-gradient(180deg, #000 45%, transparent 92%);
}
/* le liseré intérieur par-dessus tout, comme la fenêtre de Win deals */
.sk-win::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.1);
  pointer-events: none;
}
.sk-win-bar {
  height: 20.697px;
  background: #faf9f7;
  padding-top: 2.424px;
  display: flex;
  align-items: center;
}
.sk-win-dots { display: flex; align-items: center; gap: 2.424px; padding: 0 3.636px 0 7.879px; }
.sk-win-dots img { width: 6.061px; height: 6.061px; }
.sk-win-content { background: #faf9f7; padding: 2px; border-radius: 8px; }
.sk-win-screen {
  position: relative;
  height: 278.303px;
  border: 0.5px solid #ebe5d8;
  border-radius: 6px;
}
.sk-win-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px;
}
.sk-win-l { display: flex; align-items: center; gap: 5.2px; height: 26px; padding: 2.6px; }
/* l'avatar du workspace : notre icône IA (celle de Pick Agent) sur pastille */
.sk-win-ava {
  width: 18.2px;
  height: 18.2px;
  border-radius: 50%;
  /* fond bleu Dock, uni — pas de shimmer sur le disque */
  background: var(--ds-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* le logo à deux arcs (Figma 8:4507), en blanc sur le disque bleu, dont les
   lignes se construisent en boucle : le trait se dessine, file, et recommence */
.sk-win-ava svg { width: 10px; height: 6.8px; display: block; color: #fff; }
.sk-win-ava path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: skAvaDraw 2.6s linear infinite;
}
.sk-win-ava path + path { animation-delay: 0.35s; }
@keyframes skAvaDraw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: -1; }
}
@media (prefers-reduced-motion: reduce) {
  .sk-win-ava path { animation: none; stroke-dashoffset: 0; }
}
.sk-win-title { font-weight: 600; font-size: 10.4px; line-height: normal; color: #121722; white-space: nowrap; }
/* le nom tourne : même sortie par le bas / entrée par le haut que .sk-src */
.sk-win-title { display: inline-block; transition: transform 0.22s ease, opacity 0.22s ease; }
/* et à côté du nom, l'état en cours, qui shimmer doucement */
.sk-win-status {
  font-weight: 500;
  font-size: 10.4px;
  line-height: normal;
  white-space: nowrap;
  /* shimmer en bleu Dock : base pleine, bande claire qui glisse */
  background-image: linear-gradient(110deg, #0068f9 40%, rgba(0, 104, 249, 0.35) 50%, #0068f9 60%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rd-shimmer 1.8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .sk-win-status { animation: none; color: var(--ds-blue); }
}
.sk-win-r { display: flex; align-items: center; gap: 4px; height: 22px; padding: 2px; }
.sk-win-faces { display: flex; align-items: center; }
.sk-win-faces img { width: 14px; height: 14px; }
.sk-win-faces img:not(:last-child) { margin-right: -3px; }
.sk-win-share {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 6px;
  background: #5a39ff;
  border-radius: 3.027px;
  font-weight: 500;
  font-size: 8px;
  line-height: normal;
  color: #fff;
}
/* dans l'écran vide, pas de spinner : la même trame de points que la tuile
   "Importing", traversée par une vague d'activité — ça génère */
.sk-win-topbar { position: relative; }
.sk-win-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  /* un cran plus discret que la tuile Importing (0.09) */
  background-image: radial-gradient(circle, rgba(18, 23, 34, 0.06) 0.9px, transparent 1px);
  background-size: 11px 11px;
  pointer-events: none;
}
.sk-win-grid::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  /* la vague est beige foncé, pas bleue : on reste dans les tons du chrome */
  background-image: radial-gradient(circle, rgba(167, 157, 137, 0.6) 0.85px, transparent 1px);
  background-size: 11px 11px;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 38%, #000 46%, #000 54%, transparent 62%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, transparent 38%, #000 46%, #000 54%, transparent 62%, transparent 100%);
  -webkit-mask-size: 626px 100%;
  mask-size: 626px 100%;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  animation: skWinFlow 6s linear infinite;
}
@keyframes skWinFlow {
  from { -webkit-mask-position: 0 0; mask-position: 0 0; }
  to { -webkit-mask-position: 626px 0; mask-position: 626px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sk-win-grid::after { animation: none; display: none; }
}

/* ---- Illustration "Never miss the next step" (Figma 8:4451) : une scène
   de 461x214 centrée, avec la fenêtre workspace vide en fond (même chrome
   que la carte Skip) et une pile de notifications Dock AI par-dessus. ---- */
.nx-il {
  position: absolute;
  left: 0;
  right: 0;
  top: 211px;
  bottom: 0;
  overflow: hidden;
}
.nx-fit {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 461px;
  height: 214px;
  font-family: var(--ds-font);
  text-align: left;
}
@media (max-width: 640px) {
  .nx-il { display: none; }
}
/* la fenêtre vide : mêmes calques intérieurs que .sk-win, autre position */
.nx-win {
  position: absolute;
  left: calc(50% - 315.5px);
  top: 0;
  width: 630px;
  height: 299px;
  background: #f4f4f4;
  border-radius: 7px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 7px 9px 0 rgba(0, 0, 0, 0.04);
}
.nx-win::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.1);
  pointer-events: none;
}
/* l'avatar du node est un simple rond, sans titre à côté */
.nx-win-ava {
  width: 18.2px;
  height: 18.2px;
  border-radius: 50%;
  background: #ece9e2;
  flex-shrink: 0;
}
/* la pile de notifications : deux cartes estompées derrière, la carte
   Dock AI cernée de bleu devant (8:4441-4443) */
/* les cartes de derriere sont la MEME carte, juste scalee : blanches, meme
   rayon et memes ombres que celle de devant, en retrait d'un cran a chaque
   profondeur - une vraie pile en perspective, pas des aplats gris */
.nx-back,
.nx-mid {
  position: absolute;
  background: #fff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25), 0 7px 9px 0 rgba(0, 0, 0, 0.04);
}
.nx-mid {
  left: 42px;
  top: 22px;
  width: 367px;
  height: 183px;
  border-radius: 15px;
  opacity: 0.7;
}
.nx-back {
  left: 56px;
  top: 35px;
  width: 341px;
  height: 178px;
  border-radius: 14px;
  opacity: 0.45;
}
.nx-card {
  position: absolute;
  left: 30px;
  top: 10px;
  width: 391px;
  height: 188px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25), 0 7px 9px 0 rgba(0, 0, 0, 0.04);
}
.nx-ai {
  position: absolute;
  left: 55px;
  top: 31px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  font-size: 16px;
  line-height: normal;
  color: var(--ds-ink);
  white-space: nowrap;
}
.nx-ai .ds-spark { width: 13px; height: 13px; color: var(--ds-blue); }
.nx-title {
  position: absolute;
  left: 55px;
  top: 57px;
  width: 298px;
  font-weight: 500;
  font-size: 23px;
  line-height: 29px;
  color: var(--ds-ink);
}
.nx-body {
  position: absolute;
  left: 55px;
  top: 132px;
  width: 258px;
  font-size: 16px;
  line-height: 22px;
  color: var(--ds-ink);
}
/* bouton Add : passé en blanc dans la maj du node */
.nx-add {
  position: absolute;
  left: 330px;
  top: 137px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 0 20px 1px 18px;
  background: #fff;
  border-radius: 9px;
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  color: var(--ds-ink);
  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);
}
/* le libellé de la suggestion shimmer, mais léger : la base reste encre
   pleine, seule une bande claire passe doucement */
.nx-ai-shimmer {
  background-image: linear-gradient(110deg, #121722 40%, rgba(18, 23, 34, 0.4) 50%, #121722 60%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rd-shimmer 2.6s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .nx-ai-shimmer { animation: none; color: var(--ds-ink); }
}

/* ---- Illustration "Catch deals before they stall" (Figma 8:5571) : la
   fenêtre workspace vide décalée à gauche, avec le panneau latéral cerné
   et la liste des deals — statut, vues, ouvertures de lien. ---- */
.cz-il {
  position: absolute;
  left: 0;
  right: 0;
  top: 211px;
  bottom: 0;
  overflow: hidden;
}
.cz-fit {
  position: absolute;
  left: calc(50% + 0.33px);
  top: 0;
  transform: translateX(-50%);
  width: 461px;
  height: 214px;
  font-family: var(--ds-font);
  text-align: left;
}
@media (max-width: 640px) {
  .cz-il { display: none; }
}
.cz-win {
  position: absolute;
  left: calc(50% - 399.5px);
  top: 0;
  width: 630px;
  height: 299px;
  background: #f4f4f4;
  border-radius: 7px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 7px 9px 0 rgba(0, 0, 0, 0.04);
}
.cz-win::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.1);
  pointer-events: none;
}
/* panneau latéral esquissé (8:5718) */
.cz-side {
  position: absolute;
  left: -0.5px;
  top: 16.8px;
  width: 246px;
  height: 250px;
  border: 0.5px solid #ebe5d8;
  border-radius: 16px;
  z-index: 3;
}
/* le dashboard analytics qui depasse dans le panneau lateral (8:6956) :
   les tuiles KPI et la courbe d'engagement, pour l'essentiel hors cadre,
   seul leur bord droit se montre */
.cz-kpis {
  position: absolute;
  left: -290px;
  top: 30.3px;
  width: 520px;
  z-index: 4;
  display: flex;
  gap: 8.727px;
}
.cz-kpi { flex: 1; display: flex; flex-direction: column; gap: 4.364px; min-width: 0; }
.cz-kpi-label {
  display: flex;
  gap: 4.364px;
  font-weight: 500;
  font-size: 7.636px;
  line-height: normal;
  color: #121722;
  white-space: nowrap;
}
.cz-kpi-label em { font-style: normal; font-weight: 400; opacity: 0.6; }
.cz-kpi-tile {
  position: relative;
  height: 63.273px;
  background: #fff;
  border: 0.273px solid #d2d2d2;
  border-radius: 4.364px;
  box-shadow: 0 0.545px 1.091px 0 rgba(0, 0, 0, 0.07),
    inset 0 -0.545px 0.545px 0 rgba(0, 0, 0, 0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 300;
  font-size: 21.818px;
  line-height: normal;
  color: #121722;
}
.cz-kpi--tint .cz-kpi-tile { background: #faf9f7; }
.cz-kpi--tint .cz-kpi-tile span { transform: translateX(11.74px); }
.cz-chart {
  position: absolute;
  left: -451px;
  top: 107.21px;
  width: 680.727px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 4.364px;
}
.cz-chart-label { font-weight: 500; font-size: 7.636px; line-height: normal; color: #121722; white-space: nowrap; }
.cz-chart-tile {
  position: relative;
  height: 173.455px;
  background: #faf9f7;
  border: 0.273px solid #d2d2d2;
  border-radius: 4.364px;
  overflow: hidden;
  box-shadow: 0 0.545px 1.091px 0 rgba(0, 0, 0, 0.07),
    inset 0 -0.545px 0.545px 0 rgba(0, 0, 0, 0.07);
}
.cz-chart-tile i {
  position: absolute;
  left: 9px;
  width: 662.727px;
  height: 0.273px;
  background: #d9d9d9;
}
.cz-chart-tile i:nth-of-type(1) { top: 13.36px; }
.cz-chart-tile i:nth-of-type(2) { top: 83.18px; }
.cz-chart-tile i:nth-of-type(3) { top: 153px; }
.cz-chart-tile b {
  position: absolute;
  font-weight: 500;
  font-size: 6.545px;
  line-height: normal;
  color: #121722;
  opacity: 0.6;
  white-space: nowrap;
  transform: translateY(-100%);
}
.cz-tick--x1 { left: 9.54px; top: 164.82px; }
.cz-tick--x2 { right: 330.64px; top: 164.82px; text-align: right; }
.cz-tick--x3 { right: 8.36px; top: 164.82px; text-align: right; }
.cz-tick--y1 { left: 9.54px; top: 87.36px; }
.cz-tick--y2 { left: 9.54px; top: 17px; }
.cz-chart-tile img { position: absolute; left: 353.73px; top: 19.45px; width: 318px; height: 144px; }

/* la liste des deals (8:5607) */
.cz-list {
  position: absolute;
  left: 282.5px;
  top: 33.8px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cz-item { display: flex; align-items: center; gap: 9px; width: 360px; }
.cz-thumb {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}
.cz-thumb img { position: absolute; }
.cz-thumb--viv img { left: 0; top: 0; width: 48px; height: 48px; }
.cz-thumb--green { background: #14bb69; }
.cz-thumb--green img { left: 9.96px; top: 8.65px; width: 28.044px; height: 28.99px; }
.cz-thumb--gold { background: #f6c013; }
.cz-thumb--gold img { left: 15.4px; top: 7.77px; width: 18px; height: 33.045px; }
.cz-thumb--violet { background: #3923b1; }
.cz-thumb--violet img { left: 10.16px; top: 11.23px; width: 26.841px; height: 26.497px; }
.cz-head { display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.cz-name { font-weight: 500; font-size: 14px; line-height: normal; color: #000; }
.cz-stats { display: flex; align-items: center; gap: 8px; }
.cz-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  line-height: normal;
  color: #000;
  white-space: nowrap;
}
.cz-stat img { width: 14px; height: 14px; }


/* ---- Integrations (nodes 15:3296 / 15:3373 / 15:3393) : illustration
   filaire au-dessus, texte en dessous. Scène fixe 548.66x268 centrée. ---- */
.it-illo {
  position: relative;
  width: 100%;
  height: 268px;
  flex-shrink: 0;
  user-select: none;
  -webkit-user-select: none;
}
/* CRM : la trame de dots fins et la petite vague, sous les arcs */
.it-illo--crm::before,
.it-illo--crm::after {
  content: "";
  position: absolute;
  inset: 0;
  /* la couleur des lignes statiques, et un dot posé pile sur la ligne
     centrale des arcs (centre des cercles : y 157.75) */
  background-image: radial-gradient(circle, #ddd5c4 1px, rgba(221, 213, 196, 0) 1.35px);
  background-size: 14px 14px;
  background-position: calc(50% - 7px) 150.75px;
  pointer-events: none;
}
.it-illo--crm::before {
  opacity: 0.75;
  -webkit-mask-image: radial-gradient(circle at 50% 58%, #000 0, #000 70px, rgba(0, 0, 0, 0) 190px);
  mask-image: radial-gradient(circle at 50% 58%, #000 0, #000 70px, rgba(0, 0, 0, 0) 190px);
}
.it-illo--crm::after {
  -webkit-mask-image: radial-gradient(circle at 50% 58%, rgba(0, 0, 0, 0) calc(var(--rd-wave) - 40px), rgba(0, 0, 0, var(--rd-wamp)) var(--rd-wave), rgba(0, 0, 0, 0) calc(var(--rd-wave) + 40px));
  mask-image: radial-gradient(circle at 50% 58%, rgba(0, 0, 0, 0) calc(var(--rd-wave) - 40px), rgba(0, 0, 0, var(--rd-wamp)) var(--rd-wave), rgba(0, 0, 0, 0) calc(var(--rd-wave) + 40px));
  animation: itWaveSmall 2.6s linear infinite;
}
@keyframes itWaveSmall {
  0% { --rd-wave: 40px; --rd-wamp: 0; }
  18% { --rd-wamp: 1; }
  70% { --rd-wamp: 1; }
  100% { --rd-wave: 260px; --rd-wamp: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .it-illo--crm::after { animation: none; --rd-wamp: 0; }
}
.it-fit {
  position: absolute;
  /* centré via calc (pas de transform : un transform créerait un stacking
     context et enfermerait le z-index des pills sous la trame de dots) */
  left: calc(50% - 274.33px);
  width: 548.66px;
  height: 268px;
}
.it-fit > * { position: absolute; }
.it-copy { padding: 48px; width: 100%; text-align: left; }
.it-copy .ds-card-title { position: static; margin: 0; width: auto; max-width: none; }
.it-copy .ds-card-body { position: static; margin: 10px 0 0; width: 453px; max-width: 100%; }
/* Connect your CRM : les arcs entrelaces, HubSpot et Salesforce flottants */
.it-arc--l1 { left: 126.12px; top: 59.25px; width: 197px; height: 197px; transform: rotate(180deg); }
.it-arc--l2 { left: 225.12px; top: 59.25px; width: 197px; height: 197px; }
.it-arc--s1 { left: 242.75px; top: 95px; width: 125.5px; height: 125.5px; }
.it-arc--s2 { left: 180px; top: 95px; width: 125.5px; height: 125.5px; transform: rotate(180deg); }
/* les flux : des comètes foncé -> transparent qui filent le long des arcs
   vers les logos, désynchronisées, en boucle */
.it-flow { left: 0; top: 0; width: 548.66px; height: 268px; pointer-events: none; }
.it-flow path {
  fill: none;
  /* même graisse que les arcs statiques dessous */
  stroke: #9d9179;
  stroke-width: 1;
  stroke-linecap: round;
  animation: itFlow linear infinite;
}
/* la comète : tête pleine vers les logos, traîne en couches fines qui
   meurent à zéro */
.it-flow .hd { stroke-dasharray: 7 93; opacity: 1; }
.it-flow .t1 { stroke-dasharray: 12 88; opacity: 0.55; }
.it-flow .t2 { stroke-dasharray: 18 82; opacity: 0.32; }
.it-flow .t3 { stroke-dasharray: 25 75; opacity: 0.18; }
.it-flow .t4 { stroke-dasharray: 33 67; opacity: 0.09; }
.it-flow .t5 { stroke-dasharray: 42 58; opacity: 0.03; }
@keyframes itFlow {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: 100; } /* du centre vers l'extérieur, vers les logos */
}
/* les arcs tournés à 180° parcourent leur chemin à l'envers : leur flux
   s'inverse pour que tout parte visuellement dans le même sens */
.it-flow g.rev path { animation-name: itFlowRev; }
@keyframes itFlowRev {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -100; }
}
/* la couleur suit la destination (classes posées par script.js d'après
   le point de contact) : orange HubSpot, bleu Salesforce */
.it-flow g.to-hs path { stroke: #ff7a59; }
.it-flow g.to-sf path { stroke: #00a1e0; }
@media (prefers-reduced-motion: reduce) {
  .it-flow { display: none; }
}
.it-disc {
  border-radius: 50%;
  overflow: hidden;
}
/* le logo pulse quand le tracé le touche (script.js arme durée + délai) */
.it-disc.is-armed { animation: itTouch linear infinite; }
@keyframes itTouch {
  0% { scale: 1; }
  2.5% { scale: 1.08; }
  6% { scale: 1; }
  100% { scale: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .it-disc.is-armed { animation: none; }
}
/* la pill contextuelle : elle pope au-dessus du logo quand la comète de
   son arc arrive — même horloge que le flux, même Y pour toutes */
.it-echo {
  top: 82px; /* juste au-dessus des logos */
  /* au-dessus de tout : la trame de dots ne doit jamais passer sur les pills */
  z-index: 2147483647;
  transform: translateX(-50%);
  padding: 5px 11px 6px;
  background: var(--ds-white);
  border-radius: 100px;
  box-shadow: inset 0 0 0 0.5px var(--ds-ring), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  font-weight: 500;
  font-size: 12px;
  line-height: normal;
  color: var(--ds-ink);
  white-space: nowrap;
  opacity: 0;
  /* armée par script.js, calée sur le point de contact exact du tracé */
}
.it-echo.is-armed { animation: itEcho linear infinite; }
@keyframes itEcho {
  0% { opacity: 0; translate: 0 2px; }
  1.5% { opacity: 1; translate: 0 0; }
  22% { opacity: 1; }
  26% { opacity: 0; translate: 0 -1px; }
  100% { opacity: 0; translate: 0 -1px; }
}
@media (prefers-reduced-motion: reduce) {
  .it-echo { animation: none; opacity: 1; translate: none; }
}
.it-disc img { position: absolute; }
.it-disc--hs { left: 39px; top: 82px; width: 148px; height: 148px; }
.it-disc--hs img { left: calc(50% + 1.34px); top: 59.3px; transform: translateX(-50%); width: 96.657px; height: 27.399px; }
.it-disc--sf { left: 349px; top: 74px; width: 168px; height: 168px; }
.it-disc--sf img { left: 36.32px; top: 36.32px; width: 95.351px; height: 95.351px; }
/* Embed anything (15:3373) : la fenetre workspace estompee au fond, la
   card d'embed blanche par-dessus — la logique du cycle reste la meme */
.eb-mini {
  left: 22.34px;
  top: 22px;
  width: 504px;
  height: 259px;
  border-radius: 7px;
  background: #f4f4f4;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  isolation: isolate;
}
/* le liseré inset en overlay, par-dessus tout (regle §2) */
.eb-mini::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 7px;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.1);
  pointer-events: none;
  z-index: 2;
}
.eb-mini-bar {
  display: flex;
  align-items: center;
  gap: 2.4px;
  padding: 2.4px 0 2.4px 7.9px;
  background: #faf9f7;
}
.eb-mini-bar img { width: 6px; height: 6px; display: block; }
.eb-mini-body {
  flex: 1;
  margin: 0 2px 2px;
  background: #faf9f7;
  border-radius: 8px;
  padding: 2px;
  min-height: 0;
}
.eb-mini-screen {
  height: 100%;
  border: 0.5px solid #ebe5d8;
  border-radius: 6px;
  display: flex;
  align-items: flex-start;
  gap: 5.2px;
  padding: 4.6px;
}
.eb-mini-ava {
  width: 18.2px;
  height: 18.2px;
  border-radius: 50%;
  background: #ece9e2;
  flex-shrink: 0;
}
.eb-mini-name {
  font-weight: 600;
  font-size: 10.4px;
  line-height: 18.2px;
  color: #c0bcb4;
  white-space: nowrap;
}
/* le voile : la fenetre s'evanouit vers le bas de la tuile */
.eb-fade {
  left: 0;
  right: 0;
  top: 108px;
  /* deborde sous le .it-fit : la fenetre (bas a y281) ne depasse jamais */
  bottom: -18px;
  background: linear-gradient(to top, #faf9f7 22%, rgba(250, 249, 247, 0) 100%);
}
/* la card d'embed : ancree en bas, centree — le resize part du bas */
.eb-card {
  left: 50%;
  bottom: 23px;
  transform: translateX(-50%);
  width: 248px;
  height: 153px;
  background: var(--ds-white);
  border-radius: 22px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 0 0 0.5px rgba(0, 0, 0, 0.12);
  /* l'embed change : la card se redimensionne autour du logo (script.js) */
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1), height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
/* au resize, le lisere de la card fait un mini shimmer */
.eb-card.is-shimmer { animation: ebLineShimmer 0.6s ease; }
@keyframes ebLineShimmer {
  0% { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 0 0 0.5px rgba(0, 0, 0, 0.12); }
  35% { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 0 0 0.5px rgba(0, 0, 0, 0.3); }
  100% { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 0 0 0.5px rgba(0, 0, 0, 0.12); }
}
/* le logo de l'embed, dans son disque, cale en haut a gauche de la card */
.it-embed-logo {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ds-white);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 0 0 0.5px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* le swap tourne : le disque bascule, le logo change à 90°, mouvement continu */
.it-embed-logo { transition: transform 0.22s ease-in; }
.it-embed-logo.is-flip { transform: rotateX(90deg); }
.it-embed-logo img { width: 12px; height: 12px; object-fit: contain; }
/* Import calls : le cercle complet visible — 16px sous le cercle comme
   au-dessus, le titre descend d'autant */
/* Import calls : la scene est dessinee sur 337, les deux autres cartes de la
   rangee sur 268 — le bloc de texte de celle-ci tombait donc 69 plus bas que
   ses voisines. La zone revient a 268 et la scene s'y centre : sa composition
   est centree sur 168,5 de 337, donc un decalage de 34,5 la met pile au
   milieu de la fenetre. Les anneaux se font rogner en haut et en bas, ce qui
   ne se voit pas sur un motif radial. */
.it-illo--ic { height: 268px; overflow: hidden; }
.it-illo--ic .it-fit { height: 337px; top: -34.5px; }
/* Import calls (15:3393) : les cercles pulsent comme un call entrant,
   la suggestion AI pope en haut a gauche, la pill en bas a droite */
.it-ring { animation: icPulse 3.4s ease-in-out infinite; }
.it-ring--inner { left: calc(50% - 52.67px); top: 116px; width: 105px; height: 105px; }
.it-ring--mid { left: calc(50% - 101.67px); top: 67px; width: 203px; height: 203px; animation-delay: 0.16s; }
.it-ring--outer { left: calc(50% - 152.67px); top: 16px; width: 305px; height: 305px; animation-delay: 0.32s; }
/* l'onde : chaque cercle gonfle a peine, en escalier vers l'exterieur */
@keyframes icPulse {
  0%, 40%, 100% { scale: 1; }
  12% { scale: 1.045; }
  24% { scale: 1; }
}
/* le disque central : blanc, le sparkle AI dedans */
.ic-core {
  left: calc(50% - 41.67px);
  top: 127px;
  width: 83px;
  height: 83px;
  border-radius: 50%;
  background: var(--ds-white);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 0 0 0.5px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Zoom et Fathom : les cercles plus petits qui depassent derriere le
   Gong, a gauche et a droite — meme deal, plusieurs providers */
.ic-side {
  top: 142.5px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--ds-white);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 0 0 0.5px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ic-side--l { left: calc(50% - 74.17px); }
.ic-side--r { left: calc(50% + 21.83px); background: #000; }
.ic-side img { width: 26px; height: 26px; object-fit: contain; }
/* le disque Gong : plein cercle, le violet remplit tout le core */
.ic-prov {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #8039df;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ic-prov img { width: 38px; height: 38px; object-fit: contain; }
/* la card suggestion : le meme traitement que la carte Dock AI, en petit */
.ic-sug {
  left: 52.66px;
  top: 43px;
  width: 181px;
  background: var(--ds-white);
  border-radius: 12px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 0 0 0.5px rgba(0, 0, 0, 0.12);
  padding: 15px 16px;
}
.ic-sug-ai {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 500;
  font-size: 11px;
  line-height: normal;
  color: var(--ds-ink);
  white-space: nowrap;
}
.ic-sug-ai .ds-spark {
  width: 10px;
  height: 10px;
  color: var(--ds-blue);
  background: var(--ds-blue);
}
.ic-sug-txt {
  margin-top: 9px;
  font-weight: 500;
  font-size: 13.5px;
  line-height: 19px;
  color: var(--ds-ink);
}
/* la pill de confirmation */
.ic-pill {
  left: 284.66px;
  top: 211px;
  width: 163px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ds-white);
  border-radius: 42px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 0 0 0.5px rgba(0, 0, 0, 0.12);
  font-weight: 500;
  font-size: 13px;
  line-height: normal;
  color: var(--ds-ink);
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .it-ring { animation: none; }
}

/* pastilles aux 3/4 de leur taille de la section Integrations */
.sk-pills .intg-track { gap: 9px; padding-right: 9px; }
.sk-pills .intg-pill {
  height: 36px;
  padding: 0 15px 0 13.5px;
  gap: 7.5px;
  font-size: 12px;
  line-height: 15px;
}
.sk-pills .intg-pill img { width: 13.5px; height: 13.5px; }
@media (max-width: 640px) {
  .sk-pills { position: static; margin: 24px -24px 0; }
  /* en colonne mobile la carte est en hauteur auto : la fenêtre absolue
     n'a plus de zone dédiée, elle sort */
  .sk-win { display: none; }
}
.sk-label {
  font-weight: 500;
  font-size: 14.8px;
  color: var(--ds-ink-50);
  margin-bottom: 13px;
}
.sk-tile {
  position: relative;
  width: 468px;
  max-width: 100%;
  height: 85px;
  background: var(--ds-surface-tint);
  border-radius: 10px;
  box-shadow: 0 0 0 0.902px rgba(0, 0, 0, 0.1);
}
/* positions FIXES (Figma 17:2393) : Importing et l'icône ne bougent jamais,
   le libellé pousse vers la droite quelle que soit sa largeur */
.sk-tile .sk-importing { position: absolute; left: 116px; top: 50%; transform: translateY(-50%); }
.sk-tile .sk-orb { position: absolute; left: 201px; top: 50%; transform: translateY(-50%); }
.sk-tile .sk-src { position: absolute; left: 242px; top: 50%; transform: translateY(-50%); text-align: left; }
/* dots gris + vague d'activité qui traverse en boucle (ça travaille) */
.sk-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  /* même trame que le canal de la carte prompt : 11px, 0,09 d'encre */
  background-image: radial-gradient(circle, rgba(18, 23, 34, 0.09) 0.9px, transparent 1px);
  background-size: 11px 11px;
  pointer-events: none;
}
.sk-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  /* et le même balayage sans couture que le canal du prompt, mais à l'échelle
     de la tuile : une tuile de masque de 470px, soit la largeur de la tuile,
     donc une seule bande la traverse à la fois. À 160px comme le canal, trois
     bandes tenaient dedans et tout virait au bleu. */
  background-image: radial-gradient(circle, rgba(0, 104, 249, 0.75) 0.85px, transparent 1px);
  background-size: 11px 11px;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 38%, #000 46%, #000 54%, transparent 62%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, transparent 38%, #000 46%, #000 54%, transparent 62%, transparent 100%);
  -webkit-mask-size: 470px 100%;
  mask-size: 470px 100%;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  animation: skFlow 5s linear infinite;
}
@keyframes skFlow {
  from { -webkit-mask-position: 0 0; mask-position: 0 0; }
  to { -webkit-mask-position: 470px 0; mask-position: 470px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sk-tile::after { animation: none; display: none; }
}
.sk-importing { font-size: 16.8px; }
.sk-src {
  font-weight: 500;
  font-size: 16.8px;
  color: var(--ds-ink-50);
  white-space: nowrap;
  /* carrousel vertical : sort par le bas, arrive par le haut */
  transition: transform 0.22s ease, opacity 0.22s ease;
}
.sk-orb {
  width: 29px;
  height: 29px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 0.902px rgba(0, 0, 0, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.sk-orb img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  transition: opacity 0.25s ease;
}

/* ---- Illustration "Win deals" (Figma 6:695) : scène fixe 840x271 scalée à
   la largeur de la carte (--rds posé par script.js), ancrée en bas à gauche.
   Deux calques : la fenêtre navigateur du workspace (6:696) et le dialogue
   Acme Agent AI (6:780). Toutes les cotes sont celles du node. */
.wd-il {
  position: absolute;
  top: 191px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}
.wd-fit {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 840px;
  height: 271px;
  transform: scale(var(--rds, 1));
  transform-origin: 0 100%;
  font-family: var(--ds-font);
  text-align: left;
}
@media (max-width: 640px) {
  .wd-il { position: relative; inset: auto; margin-top: 20px; aspect-ratio: 840 / 271; }
}

/* --- Fenêtre navigateur (6:696) : 630x299 posée en (48, 20), le bas déborde
   de la scène et se fait rogner par la carte, comme dans le node --- */
.wd-browser {
  position: absolute;
  left: 48px;
  top: 20px;
  width: 630px;
  height: 299px;
  background: #f4f4f4;
  border-radius: 7px;
  overflow: hidden;
  /* cantonne les z-index internes (barre noire, couverture) : sans ça ils
     passaient au-dessus du dialogue, qui doit rester devant la fenêtre */
  isolation: isolate;
  /* ombre du node 6:973 : la 0 1px 2px 0.25 de la première version a sauté */
  box-shadow: 0 7px 9px 0 rgba(0, 0, 0, 0.04);
}
/* le liseré intérieur est un calque posé PAR-DESSUS tout le contenu de la
   fenêtre (onglet et écran compris), comme l'overlay du node */
.wd-browser::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 10;
  border-radius: inherit;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.1);
  pointer-events: none;
}
/* barre d'onglets */
.wd-bar { display: flex; align-items: flex-end; padding-top: 2.424px; }
.wd-dots {
  display: flex;
  align-items: center;
  align-self: stretch;
  gap: 2.424px;
  padding: 0 3.636px 0 7.879px;
}
.wd-dots img { width: 6.061px; height: 6.061px; }
.wd-tabwrap { display: flex; align-items: flex-end; }
.wd-tab {
  display: flex;
  align-items: flex-start;
  gap: 4.848px;
  padding: 3.636px 6.061px;
  background: #fff;
  border-radius: 4.848px 4.848px 0 0;
}
.wd-tab-ico { width: 9.697px; height: 9.697px; display: flex; align-items: center; }
.wd-tab-ico img { width: 9.697px; height: 6.465px; }
.wd-tab-label {
  font-family: var(--ds-font-ui);
  font-weight: 500;
  font-size: 7.273px;
  line-height: 10.303px;
  color: #000;
  white-space: nowrap;
}
/* congés de part et d'autre de l'onglet : carré blanc sous un quart de rond
   gris (6:825 / 6:833) */
.wd-curve { position: relative; width: 4.848px; height: 4.848px; background: #fff; }
.wd-curve::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #f7f7f7;
  border-bottom-left-radius: 60.606px;
}
.wd-curve--l::after { border-bottom-left-radius: 0; border-bottom-right-radius: 60.606px; }

/* écran : liseré blanc de 2px en rayon 8, écran rogné en rayon 6 */
.wd-content { background: #fff; padding: 2px; border-radius: 8px; }
.wd-screen {
  position: relative;
  height: 278.303px;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* barre noire du workspace (6:697) */
.wd-topbar {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 24px;
  padding: 2px;
  background: #000;
  /* le node donne 0.23 ; réduit deux fois de moitié à la demande */
  box-shadow: 0 0.5px 0 rgba(255, 255, 255, 0.06);
}
.wd-topbar-l,
.wd-topbar-r { display: flex; align-items: center; gap: 4px; height: 100%; padding: 2px; }
.wd-app { position: relative; width: 16px; height: 16px; flex-shrink: 0; }
.wd-app img { position: absolute; }
.wd-app .wd-app-base { left: 1px; top: 1px; width: 14px; height: 14px; }
.wd-app .wd-app-glyph { left: 4.5px; top: 4.5px; width: 7px; height: 7px; }
.wd-topbar-title { font-weight: 600; font-size: 8px; line-height: normal; color: #fff; white-space: nowrap; }
.wd-faces { display: flex; align-items: center; }
.wd-faces img { width: 14px; height: 14px; }
.wd-faces img:not(:last-child) { margin-right: -3px; }
.wd-share {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 6px;
  background: #5a39ff;
  border-radius: 3.027px;
  font-weight: 500;
  font-size: 8px;
  line-height: normal;
  color: #fff;
}
/* couverture en dégradé (6:719) : plus haute que l'écran, rognée en bas */
.wd-hero {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-bottom: 30px;
  background: linear-gradient(to bottom, #000, #4f32df);
}
/* rangée d'onglets du workspace (6:720) */
.wd-nav { display: flex; gap: 6.054px; padding: 6.937px 0; }
.wd-pill {
  display: flex;
  align-items: flex-end;
  gap: 3.921px;
  padding: 3.5px 10px 4px 8.7px;
  border-radius: 75.672px;
}
.wd-pill--on { background: #5a39ff; }
.wd-pill-ico { position: relative; width: 9.081px; height: 9.081px; flex-shrink: 0; }
.wd-pill-ico img { position: absolute; }
.wd-pill-label { font-weight: 600; font-size: 8px; line-height: normal; color: #fff; white-space: nowrap; }
/* chaque glyphe garde le cadrage du node dans sa boîte de 9.081 */
.wd-ico-summary { inset: 15.62% 9.38% 15.63% 9.37%; }
.wd-ico-presentation { inset: 18.75% 9.38% 15.62% 9.37%; }
.wd-ico-deal { inset: 9.39% 11.25% 9.39% 11.24%; }
.wd-ico-question { inset: 9.38% 12.49% 12.5% 12.51%; }
.wd-ico-money { inset: 21.88% 9.38% 21.88% 9.37%; }
.wd-ico-copilot { inset: 18.75% 3.13% 18.75% 3.12%; }
/* avatars + titre (6:764) */
.wd-heroid { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 10px 0 14px; }
.wd-avas { display: flex; }
.wd-ava { position: relative; width: 32px; height: 32px; }
.wd-ava--acme { margin-right: -8px; }
.wd-ava img { position: absolute; }
.wd-ava .wd-ava-base { left: 0; top: 0; width: 32px; height: 32px; }
.wd-ava--acme .wd-ava-glyph { left: 7.76px; top: 8.51px; width: 16.302px; height: 16.302px; }
.wd-ava--viv .wd-ava-glyph { left: 7.84px; top: 7.85px; width: 16.302px; height: 16.302px; }
.wd-hero-title { font-weight: 600; font-size: 18px; line-height: normal; color: #fff; white-space: nowrap; }
/* document (6:838) : cadre rogné de 577.63, contenu natif de 642 */
.wd-doc { width: 577.63px; border-radius: 10px; overflow: hidden; flex-shrink: 0; }
.wd-doc-in { position: relative; width: 642px; height: 158px; background: #4f32df; }
.wd-doc-copy { position: absolute; left: 30.27px; top: 27.98px; width: 206.206px; }
.wd-doc-copy p:first-child { font-weight: 500; font-size: 11.351px; line-height: 15.765px; color: #fff; }
.wd-doc-copy p + p { padding-top: 10.09px; font-size: 9.459px; line-height: 13.873px; color: rgba(27, 30, 36, 0.5); }
/* sommaire (6:845) */
.wd-toc {
  position: absolute;
  left: 348.32px;
  top: 0.04px;
  width: 228.908px;
  height: 160.172px;
  background: #fcfbf7;
  border: 0.315px solid #d1cdc2;
  border-radius: 10px;
  overflow: hidden;
}
.wd-toc-sq { position: absolute; left: 29.95px; top: 33.11px; width: 5.675px; height: 5.675px; background: #5a39ff; }
.wd-toc-title {
  position: absolute;
  left: 40.12px;
  top: 28.06px;
  font-weight: 500;
  font-size: 6.937px;
  line-height: 15.765px;
  letter-spacing: 0.2775px;
  text-transform: uppercase;
  color: #1b1e24;
  white-space: nowrap;
}
.wd-toc-list { position: absolute; left: 29.96px; top: 54.55px; width: 85.131px; }
.wd-toc-list p {
  font-weight: 500;
  font-size: 8.828px;
  line-height: 6.306px;
  color: #1b1e24;
  white-space: pre;
}
.wd-toc-list p + p { padding-top: 10.09px; }
.wd-toc-list p span { color: rgba(27, 30, 36, 0.5); }

/* --- Curseurs Champion / CFO (8:8098) : posés sur la couverture, statiques,
   sans animation. Le libellé pend sous la queue de la flèche, son petit
   rayon de 3.468 contre elle. --- */
.wd-cur {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}
.wd-cur img { display: block; width: 15.606px; height: 18.207px; }
.wd-cur i {
  position: absolute;
  top: 14.76px;
  padding: 2.73px 5.443px 2.601px 6.936px;
  font-style: normal;
  font-family: var(--ds-font-ui);
  font-weight: 500;
  font-size: 10.404px;
  line-height: normal;
  color: #fff;
  white-space: nowrap;
}
/* Champion : flèche miroitée qui pointe en haut à droite, pastille bleue
   ancrée par sa droite sous la queue */
.wd-cur--champion { left: 455.24px; top: 101.88px; }
.wd-cur--champion img { transform: scaleX(-1); }
.wd-cur--champion i {
  right: 13.6px;
  padding-right: 8.5px;
  background: #0068f9;
  border-radius: 10.404px 3.468px 10.404px 10.404px;
}
/* CFO : flèche droite, pastille verte qui part vers la droite */
.wd-cur--cfo { left: 487.39px; top: 94.4px; }
.wd-cur--cfo i {
  left: 12.55px;
  background: #0ba258;
  border-radius: 3.468px 10.404px 10.404px 10.404px;
}

/* --- Dialogue Acme Agent AI (6:780) : 231x219 posé en (569, 100),
   toujours DEVANT la fenêtre du workspace --- */
.wd-chat {
  position: absolute;
  z-index: 1;
  left: 569px;
  top: 100px;
  width: 231px;
  height: 219px;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 1px 2px 0 rgba(0, 0, 0, 0.05),
    0 7px 9px 0 rgba(0, 0, 0, 0.04),
    0 0 0 0.5px rgba(0, 0, 0, 0.1);
}
/* les bulles partent du haut de la boîte, sous l'en-tête posé en absolu :
   la première ligne de l'accueil passe dessous, comme dans le node */
.wd-chat-body {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6.88px;
  height: 100%;
  padding: 0 8px 8px;
  overflow: hidden;
}
.wd-chat-row { width: 100%; flex-shrink: 0; }
.wd-bub {
  position: relative;
  flex-shrink: 0;
  background: #f4f4f5;
  border-radius: 13.199px;
  font-size: 9.899px;
  line-height: 14.849px;
  color: #121722;
}
.wd-bub--intro { width: 193px; height: 82px; }
.wd-bub--intro .wd-hi { position: absolute; left: 10.4px; top: 7.92px; white-space: nowrap; }
.wd-bub--intro .wd-wave { position: absolute; left: 49.16px; top: 8.58px; white-space: nowrap; }
.wd-bub--intro .wd-intro-txt { position: absolute; left: 10.4px; top: 28.7px; width: 188.083px; }
.wd-bub--me {
  padding: 7.919px 10.559px;
  background: #5a39ff;
  border-radius: 13.199px 13.199px 5.28px 13.199px;
  color: #fff;
}
.wd-bub--me p { width: 156px; }
.wd-bub--res { width: 180px; height: 82px; }
.wd-bub--res p { position: absolute; left: 10px; top: 8.4px; width: 171px; }
/* en-tête (6:781) */
.wd-chat-head {
  position: absolute;
  left: 0;
  top: 0;
  width: 231px;
  display: flex;
  align-items: center;
  gap: 5.28px;
  padding: 6px;
  background: #fff;
  box-shadow: 0 0.5px 0 rgba(0, 0, 0, 0.05);
}
.wd-chat-ava { position: relative; width: 23.67px; height: 23.67px; flex-shrink: 0; }
.wd-chat-ava img { position: absolute; }
.wd-chat-ava .wd-ava-base { left: 0; top: 0; width: 23.67px; height: 23.67px; }
.wd-chat-ava .wd-ava-glyph { left: 5.74px; top: 6.29px; width: 12.058px; height: 12.058px; }
.wd-chat-id { display: flex; flex-direction: column; align-items: flex-start; }
.wd-chat-name,
.wd-chat-sub { display: block; width: 71.934px; overflow: hidden; white-space: nowrap; }
.wd-chat-name { height: 11.879px; font-weight: 600; font-size: 9.899px; line-height: 11.879px; color: #121722; }
.wd-chat-sub { height: 10.559px; font-size: 8.579px; line-height: 10.295px; color: #5f5f5f; }

/* ============ Illustrations "Never miss" (Figma 17:3042) / "Catch deals" ============ */
.nm-il { position: absolute; left: 48px; right: 48px; top: 235px; }
.nm-panel {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 0 0 0.902px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.nm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  font-weight: 500;
  font-size: 14px;
  line-height: normal;
  color: var(--ds-ink);
}
.nm-count {
  display: inline-flex;
  padding: 3px 9px 4px;
  border-radius: 100px;
  background: var(--ds-surface-tint);
  font-weight: 500;
  font-size: 11.5px;
  line-height: normal;
  color: var(--ds-ink-50);
}
.nm-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  font-size: 13.5px;
  line-height: normal;
  color: var(--ds-ink);
}
.nm-row--done { color: var(--ds-ink-50); }
.nm-row s { text-decoration-thickness: 1px; }
.nm-check {
  width: 14px;
  height: 14px;
  border-radius: 100px;
  border: 1px solid rgba(18, 23, 34, 0.18);
  flex-shrink: 0;
  position: relative;
}
.nm-check--on { background: var(--ds-blue); border-color: var(--ds-blue); }
.nm-check--on::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1.5px;
  width: 4px;
  height: 7px;
  border: solid #fff;
  border-width: 0 1.1px 1.1px 0;
  transform: rotate(45deg);
}
.nm-sug {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px 4px;
  border-radius: 100px;
  font-weight: 500;
  font-size: 11.5px;
  line-height: normal;
  color: var(--ds-ink);
  white-space: nowrap;
}
/* --- Catch deals --- */
.cd-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  font-size: 13.5px;
  line-height: normal;
  border-bottom: 0.5px solid rgba(18, 23, 34, 0.06);
}
.cd-row--flag { background: var(--ds-surface-tint); }
.cd-name { font-weight: 500; color: var(--ds-ink); white-space: nowrap; }
.cd-chip {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 4px;
  border-radius: 100px;
  background: #fff;
  box-shadow: inset 0 0 0 0.5px rgba(18, 23, 34, 0.12);
  font-weight: 500;
  font-size: 11.5px;
  line-height: normal;
  color: var(--ds-ink);
  white-space: nowrap;
}
/* icônes de statut (Figma 17:3154 flamme / 17:3156 flocon) */
.cd-ico { width: 14px; height: 14px; display: inline-block; flex-shrink: 0; }
/* Étincelle : c'était le caractère Unicode 10022, dont le dessin et la
   graisse n'ont rien à voir avec le nôtre. C'est le glyphe du fichier,
   teinté au masque comme le flocon, donc il suit la couleur du texte. */
.ds-spark {
  display: inline-block;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask: url("assets/img/sr/s1-sparkle.svg") center / contain no-repeat;
  mask: url("assets/img/sr/s1-sparkle.svg") center / contain no-repeat;
}
.nm-sug .ds-spark { width: 11px; height: 11px; }
.cd-suggest .ds-spark { width: 12px; height: 12px; }
.cd-ico--quiet {
  /* le glyphe Figma est blanc : teinté encre via mask */
  background: var(--ds-ink);
  -webkit-mask: url("assets/img/figma/cd-quiet.svg") center / contain no-repeat;
  mask: url("assets/img/figma/cd-quiet.svg") center / contain no-repeat;
}
.cd-suggest {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  font-weight: 500;
  font-size: 12.5px;
  line-height: normal;
  color: var(--ds-ink-50);
}

/* ---- Illustrations "Sales Content Management" : la fenêtre workspace
   crème des tuiles features, en version claire — bibliothèque, recherche
   AI, éditeur de slides. Réutilise sk-win-bar / content / screen. ---- */
.cm-win {
  position: absolute;
  left: 48px;
  right: 48px;
  top: 0;
  height: 420px;
  background: #f4f4f4;
  border-radius: 7px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 7px 9px 0 rgba(0, 0, 0, 0.04);
  font-family: var(--ds-font);
  text-align: left;
}
.cm-win::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.1);
  pointer-events: none;
}
/* l'écran remplit la fenêtre, il n'a pas la hauteur figée des tuiles features */
.cm-win .sk-win-content { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.cm-win .sk-win-screen { flex: 1; height: auto; }
.cm-ava {
  width: 18.2px;
  height: 18.2px;
  border-radius: 50%;
  background: var(--ds-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cm-ava img { width: 9px; height: 9px; object-fit: contain; filter: brightness(0) invert(1); }
.cm-title { font-weight: 600; font-size: 10.4px; line-height: normal; color: var(--ds-ink); white-space: nowrap; }
.cm-pad { padding: 4px 14px 14px; }
.cm-pad--top { padding-top: 14px; }
/* icônes teintées au masque */
.cm-ico {
  display: inline-block;
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  background: rgba(18, 23, 34, 0.5);
  -webkit-mask: var(--i) center / contain no-repeat;
  mask: var(--i) center / contain no-repeat;
}
.cm-ico--w { background: #fff; width: 9px; height: 9px; }
/* champ de recherche / prompt */
.cm-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 0.5px solid #ebe5d8;
  border-radius: 100px;
  padding: 6px 6px 6px 12px;
  font-size: 9.5px;
  line-height: normal;
  color: var(--ds-ink-50);
}
.cm-send {
  margin-left: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ds-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cm-search--q { color: var(--ds-ink); font-weight: 500; padding: 7px 12px; }
.cm-mark { width: 12px; height: 12px; object-fit: contain; }
/* onglets + tri de la bibliothèque */
.cm-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 2px 8px;
  font-size: 8.5px;
  line-height: normal;
  color: var(--ds-ink-50);
}
.cm-tabs { display: flex; align-items: center; gap: 8px; }
.cm-tabs b {
  font-weight: 600;
  color: #fff;
  background: var(--ds-blue);
  padding: 2.5px 8px 3.5px;
  border-radius: 100px;
}
/* grille d'assets */
.cm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cm-tile {
  height: 58px;
  background: #fff;
  border: 0.5px solid #ebe5d8;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 8px;
  letter-spacing: 0.5px;
  line-height: 1.35;
  color: #fff;
}
.cm-tile .cm-ico { width: 15px; height: 15px; background: rgba(18, 23, 34, 0.35); }
.cm-tile--blue { background: var(--ds-blue); border: none; }
.cm-tile--blue .cm-ico { background: #fff; width: 13px; height: 13px; }
.cm-tile--ink { background: var(--ds-ink); border: none; }
.cm-tile--tint { background: var(--ds-surface-tint); border: none; }
/* résultat de recherche (carte AI-Managed Library) */
.cm-hit {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  background: #fff;
  border: 0.5px solid #ebe5d8;
  border-radius: 10px;
  padding: 10px;
}
.cm-hit-thumb {
  width: 58px;
  height: 44px;
  border-radius: 6px;
  background: var(--ds-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cm-hit-thumb .cm-ico--w { width: 13px; height: 13px; }
.cm-hit-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.cm-hit-body b { font-weight: 600; font-size: 9.5px; line-height: normal; color: var(--ds-ink); }
.cm-hit-body .il-line { display: block; height: 5px; }
.cm-tags { display: flex; gap: 5px; margin-top: 2px; flex-wrap: wrap; }
.cm-tags .il-tag { font-size: 7.5px; padding: 2.5px 7px 3px; gap: 3px; }
.cm-tags .ds-spark { width: 7px; height: 7px; }
/* éditeur de slides (carte Slides) */
.cm-slides { display: flex; gap: 10px; padding: 10px 14px 14px; }
.cm-rail { display: flex; flex-direction: column; gap: 7px; width: 58px; flex-shrink: 0; }
.cm-srow { display: flex; gap: 5px; align-items: flex-start; font-size: 7.5px; line-height: 1; color: var(--ds-ink-50); }
.cm-srow > span:first-child { padding-top: 2px; }
.cm-sthumb { flex: 1; height: 30px; background: #fff; border: 0.5px solid #ebe5d8; border-radius: 4px; }
.cm-sthumb--alt { background: var(--ds-surface-tint); }
.cm-srow.is-on .cm-sthumb { border: 1px solid var(--ds-blue); }
.cm-canvas {
  flex: 1;
  min-width: 0;
  background: #fff;
  border: 0.5px solid #ebe5d8;
  border-radius: 8px;
  padding: 12px;
}
.cm-cv-head { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.cm-cv-head .il-line { flex-shrink: 0; width: 56%; height: 5px; }
.cm-cv-ava { width: 14px; height: 14px; border-radius: 50%; background: var(--ds-blue); flex-shrink: 0; }
.cm-for { margin: 0 0 10px; font-weight: 500; font-size: 12px; line-height: normal; color: var(--ds-ink); }
.cm-var {
  font-size: 10px;
  color: var(--ds-blue);
  background: rgba(0, 104, 249, 0.08);
  padding: 1px 5px 2px;
  border-radius: 4px;
}
.cm-canvas .il-line { display: block; height: 5px; }
.cm-canvas .il-line + .il-line { margin-top: 6px; }

/* ---- Illustrations "Sales Content Management" (Figma 9:8121) ---- */
/* Content Library : le widget de prompt de la carte bleue, en 452x118,
   avec la question à la place des chips (9:8352) */
.cq { position: relative; height: 452px; overflow: hidden; }
/* le grand panneau blanc en fond (9:10805), rogné par la zone, avec le
   filet vertical et le fondu qui mange son bord haut */
.cq-panel {
  position: absolute;
  left: -85px;
  top: -53px;
  width: 556px;
  height: 448px;
  background: #fff;
  border-radius: 40px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25), 0 0 0 0.5px rgba(0, 0, 0, 0.1);
}
.cq-vline {
  position: absolute;
  left: 77px;
  top: 0;
  width: 0.5px;
  height: 395px;
  background: rgba(18, 23, 34, 0.15);
}
.cq-fade {
  position: absolute;
  left: -85px;
  top: 0;
  width: 606px;
  height: 384px;
  background: linear-gradient(180deg, #faf9f7, rgba(250, 249, 247, 0));
  pointer-events: none;
}
/* la bulle de question, alignée sur la colonne du fil (9:10354) */
.cq-bub {
  position: absolute;
  /* ancrée par sa DROITE à la cote du node : quelle que soit la largeur du
     texte rendu, elle garde son retrait du bord du panneau */
  left: 449px;
  transform: translateX(-100%);
  top: 50px;
  background: #f6f4ee;
  border-radius: 53px;
  padding: 8px 15px 10px;
  font-weight: 500;
  font-size: 16.661px;
  line-height: normal;
  color: var(--ds-ink);
  white-space: nowrap;
}
.cq-search {
  position: absolute;
  left: 100px;
  top: 107px;
  font-weight: 500;
  font-size: 13.606px;
  line-height: normal;
  color: #1b1e24;
  white-space: nowrap;
}
.cq-ans {
  position: absolute;
  left: 100px;
  top: 128px;
  width: 349px;
  font-weight: 500;
  font-size: 16.661px;
  line-height: 21px;
  color: var(--ds-ink);
}
.cq-ans b { font-weight: 600; }
/* la carte du resultat : vignette violette + fichier Google Drive (9:10372) */
.cq-hit {
  position: absolute;
  left: 100px;
  top: 181px;
  width: 349px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 0.5px solid #e7dfd1;
  border-radius: 12px;
  padding: 6px;
}
.cq-hit-thumb {
  position: relative;
  width: 100px;
  height: 61px;
  border-radius: 5px;
  background: #5a39ff;
  overflow: hidden;
  flex-shrink: 0;
}
.cq-hit-thumb img { position: absolute; left: 7px; top: 8px; width: 11px; height: 11px; }
.cq-hit-thumb b {
  position: absolute;
  left: 7px;
  top: 26px;
  font-weight: 600;
  font-size: 9.811px;
  line-height: 10.4px;
  color: #fff;
}
.cq-hit-thumb em {
  position: absolute;
  left: 7px;
  top: 44px;
  font-style: normal;
  font-weight: 600;
  font-size: 5.81px;
  line-height: 10.4px;
  color: #fff;
}
.cq-hit-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cq-hit-body > b { font-weight: 500; font-size: 16.661px; line-height: 21px; color: var(--ds-ink); }
.cq-hit-src {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  font-size: 14px;
  line-height: normal;
  color: #1b1e24;
}
.cq-hit-src img { width: 13px; height: 12px; object-fit: contain; }
/* Le fil se joue en boucle (script.js) : les éléments apparaissent d'un
   coup, sans glissement ni fondu — seul le shimmer de recherche anime */
.cq--live .cq-bub,
.cq--live .cq-ans,
.cq--live .cq-hit,
.cq--live .cq-search { visibility: hidden; }
.cq--live .is-in { visibility: visible; }
/* placeholder gris du composer, encre quand on tape */
.cq-q.is-ph .cq-type { color: var(--ds-ink-50); font-weight: 400; }
.cq-caret {
  display: none;
  width: 1.5px;
  height: 16px;
  background: var(--ds-ink);
  margin-left: 2px;
  animation: cqBlink 1s steps(1) infinite;
}
.cq--typing .cq-caret { display: inline-block; }
@keyframes cqBlink { 50% { opacity: 0; } }

/* le prompt épinglé par-dessus le fil, comme un composer de chat */
.cq-prompt {
  position: absolute;
  left: 88px;
  top: 276px;
  width: 372px;
  height: 108px;
  padding: 10px;
  border-radius: 30px;
  background: #fff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25), 0 7px 9px 0 rgba(0, 0, 0, 0.04),
    0 0 0 0.5px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  font-family: var(--ds-font);
  text-align: left;
}
.cq-q {
  display: flex;
  align-items: center;
  margin: 10.7px 0 0 14.37px;
  padding: 2px 0 4px;
  font-weight: 500;
  font-size: 16.661px;
  line-height: normal;
  color: var(--ds-ink);
}
.cq-prompt .rd-row { margin-top: auto; }
/* AI-Managed Library & Slides : le panneau blanc vide du node 9:10126,
   452x368 en rayon 10, même retrait sur les deux cartes */
.cp { position: relative; height: 440px; }
.cp-panel {
  position: absolute;
  left: 48px;
  right: 48px;
  top: 24px;
  height: 368px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25), 0 0 0 0.5px rgba(0, 0, 0, 0.1);
}

/* ---- "Calm the content chaos" (Figma 11:11038 / 11:11062) : la main
   ferme traine la pile d'assets sur la zone teintee, puis le panneau
   Dock AI importe les 3 assets et les rangees se peuplent. Sans script
   (ou en reduced-motion), l'etat final peuple s'affiche tel quel. ---- */
/* etat 0 : la zone de depot et la pile tenue en main */
.cca-zone {
  position: absolute;
  left: 48px;
  right: 48px;
  top: 24px;
  height: 368px;
  background: #f6f4ee;
  border-radius: 10px;
  display: none;
}
.cca-grab {
  position: absolute;
  left: 0;
  top: 0;
  display: none;
  transition: transform 1.1s ease;
}
.cca-card {
  position: absolute;
  width: 108px;
  height: 120px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25), 0 7px 9px 0 rgba(0, 0, 0, 0.04),
    0 0 0 0.5px rgba(0, 0, 0, 0.1);
  left: 182px;
  top: 99px;
}
.cca-card--2 { left: 198px; top: 97px; transform: rotate(10.55deg); }
.cca-card--3 { left: 224px; top: 103px; transform: rotate(21.09deg); }
.cca-hand { position: absolute; left: 196px; top: 202px; width: 42px; height: 38px; }
/* etat 1 : le panneau d'import */
.cca-panel {
  position: absolute;
  left: 48px;
  right: 48px;
  top: 24px;
  height: 368px;
  background: #fff;
  border-radius: 27px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25), 0 7px 9px 0 rgba(0, 0, 0, 0.04),
    0 0 0 0.5px rgba(0, 0, 0, 0.1);
}
.cca-ai {
  position: absolute;
  left: 24px;
  top: 22px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  font-size: 16px;
  line-height: normal;
  color: var(--ds-ink);
}
.cca-ai .ds-spark { width: 13px; height: 13px; color: var(--ds-blue); }
.cca-title {
  position: absolute;
  left: 25px;
  top: 49px;
  font-weight: 500;
  font-size: 22px;
  line-height: 28px;
  color: var(--ds-ink);
  white-space: nowrap;
}
.cca-rows {
  position: absolute;
  left: 24px;
  right: 24px;
  top: 126px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.cca-row { display: flex; align-items: center; gap: 17px; }
.cca-thumb {
  width: 96px;
  height: 60px;
  border-radius: 5px;
  background: #d9d9d9;
  flex-shrink: 0;
}
.cca-info { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.cca-skel { display: none; flex-direction: column; gap: 9px; }
.cca-skel .il-line { display: block; height: 8px; }
.cca-data b { display: block; font-weight: 500; font-size: 18px; line-height: 28px; color: var(--ds-ink); }
.cca-data .il-tag { margin-top: 2px; font-size: 11px; padding: 3px 10px 4px; gap: 5px; }
.cca-data .ds-spark { width: 9px; height: 9px; }
/* etats pilotes par script.js : d'abord la main, puis l'import, puis les
   rangees qui se peuplent */
.cca--live .cca-zone,
.cca--live .cca-grab { display: block; }
.cca--live .cca-panel { visibility: hidden; }
.cca--live.cca--drop .cca-zone,
.cca--live.cca--drop .cca-grab { display: none; }
.cca--live.cca--drop .cca-panel { visibility: visible; }
.cca--live .cca-row .cca-data { display: none; }
.cca--live .cca-row .cca-skel { display: flex; }
.cca--live .cca-row.is-pop .cca-data { display: block; }
.cca--live .cca-row.is-pop .cca-skel { display: none; }

/* ---- "Calm the content chaos" (Figma 11:11143) : la grille de la
   bibliothèque — panneau blanc en fond, deux rangées d'assets rognées à
   gauche, le haut mangé par un fondu crème ---- */
.clib { position: relative; height: 452px; overflow: hidden; }
.clib-panel {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -53px;
  width: 672px;
  height: 448px;
  background: #fff;
  border-radius: 40px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25);
}
.clib-row {
  position: absolute;
  left: -195px;
  display: flex;
  gap: 15.285px;
}
.clib-row--1 { top: -5px; }
.clib-row--2 { top: 195px; }
.clib-item {
  width: 229.277px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 9.553px;
  font-family: var(--ds-font);
  text-align: left;
}
.clib-thumb {
  position: relative;
  height: 124.192px;
  background: #f7f7f7;
  border-radius: 7.643px;
  overflow: hidden;
}
.clib-thumb--ring, .clib-thumb--video { box-shadow: 0 0 0 0.478px rgba(18, 23, 34, 0.15); }
/* vignette video : fond violet workspace client, rayures, bouton play */
.clib-thumb--video { background: #5a39ff; }
.clib-stripe { position: absolute; pointer-events: none; }
.clib-stripe--a { left: -35.56px; top: -5px; width: 302px; height: 145px; }
.clib-stripe--b { left: 54.44px; top: -5px; width: 162px; height: 145px; }
.clib-play {
  position: absolute;
  left: calc(50% - 21.2px);
  top: 41px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 0.328px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.clib-play img { width: 12.6px; height: 12.6px; display: block; }
/* les slides dans les vignettes : la meme carte blanche, r2, ombre fine */
.clib-slide {
  position: absolute;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25), 0 0 0 0.5px rgba(0, 0, 0, 0.1);
}
.clib-slide--case { left: 13.88px; top: 11px; width: 202px; height: 145px; }
.clib-slide--deck { left: calc(50% - 96.2px); top: 12px; width: 192px; height: 100px; }
.clib-slide--feat { left: calc(50% - 95.76px); top: 12px; width: 192px; height: 100px; }
.clib-mark { position: absolute; left: 16px; top: 18px; width: 11px; height: 11px; }
.clib-mark--in { left: 16.17px; top: 21.84px; width: 6.949px; height: 6.964px; }
.clib-sl-title {
  position: absolute;
  left: 16px;
  top: 43px;
  width: 131px;
  font-weight: 500;
  font-size: 13.375px;
  line-height: 13.4px;
  color: var(--ds-ink);
}
.clib-sl-big {
  position: absolute;
  left: 16px;
  top: 83px;
  font-weight: 500;
  font-size: 62.096px;
  line-height: 62.214px;
  color: var(--ds-ink);
  white-space: nowrap;
}
/* deck overview / feature : offsets propres a ces slides (releves Figma) */
.clib-slide--deck .clib-mark, .clib-slide--feat .clib-mark { left: 21px; top: 17px; }
.clib-slide--deck .clib-mark--in, .clib-slide--feat .clib-mark--in { left: 21.17px; top: 20.84px; }
.clib-slide--deck .clib-sl-title, .clib-slide--feat .clib-sl-title { left: 21px; top: 42px; }
/* deck overview : le grand logo rond qui deborde a droite du slide */
.clib-orb { position: absolute; left: 92px; top: 0; width: 83px; height: 83px; }
.clib-orb--in { left: 93.31px; top: 28.99px; width: 52.431px; height: 52.549px; }
/* deck feature : le voile degrade violet et la sous-carte blanche */
.clib-veil {
  position: absolute;
  left: calc(50% + 13.24px);
  top: 12px;
  width: 83px;
  height: 100px;
  border-radius: 2px;
  background: linear-gradient(180deg, #fff, #362299);
  opacity: 0.2;
}
.clib-mini {
  position: absolute;
  left: 109.88px;
  top: 33px;
  width: 83px;
  height: 57px;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.25), 0 0 0 0.5px rgba(0, 0, 0, 0.1);
}
.clib-name {
  font-weight: 500;
  font-size: 13.375px;
  line-height: 18.39px;
  color: var(--ds-ink);
  white-space: nowrap;
  overflow: hidden;
  width: 198.707px;
}
.clib-stats { display: flex; align-items: center; gap: 11.464px; }
.clib-stat {
  display: inline-flex;
  align-items: center;
  gap: 4.777px;
  font-size: 12.419px;
  line-height: 14.903px;
  color: var(--ds-ink-50);
  white-space: nowrap;
}
.clib-stat .cm-ico { width: 12.419px; height: 12.419px; background: rgba(18, 23, 34, 0.5); }
.clib-fade {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  width: 653px;
  height: 304px;
  background: linear-gradient(180deg, #faf9f7, rgba(250, 249, 247, 0));
  pointer-events: none;
}

/* ---- "Slides" (Figma 11:11267) : la pile de slides — deux estompées
   derrière, la slide personnalisée devant, le label Slide 01 et le
   curseur Alex ---- */
.csl { position: relative; height: 452px; overflow: hidden; font-family: var(--ds-font); text-align: left; }
.csl-back,
.csl-mid,
.csl-slide {
  position: absolute;
  width: 472.801px;
  background: #fff;
  border-radius: 8.428px;
  box-shadow: 0 0.843px 1.686px 0 rgba(0, 0, 0, 0.25), 0 0 0 0.421px rgba(0, 0, 0, 0.1);
}
.csl-back { left: 55.88px; top: 117.88px; height: 278.118px; opacity: 0.6; }
.csl-mid { left: 76.95px; top: 92.6px; height: 303.402px; opacity: 0.6; }
.csl-slide { left: 98.86px; top: 69px; height: 327px; }
.csl-label {
  position: absolute;
  left: 98.47px;
  top: 32.91px;
  font-weight: 500;
  font-size: 11.54px;
  line-height: 43.825px;
  color: var(--ds-ink);
  white-space: nowrap;
}
.csl-slide p {
  position: absolute;
  left: 39.6px;
  font-weight: 500;
  line-height: 43.825px;
  color: var(--ds-ink);
  white-space: nowrap;
}
.csl-kicker { top: 21.9px; font-size: 18.541px; }
.csl-big { top: 130.6px; font-size: 69.108px; }
/* la variable : bleue, posee sur son chip bleu clair (11:11617) */
.csl-slide p.csl-var { top: 247.89px; font-size: 26.969px; color: var(--ds-blue); }
.csl-chip {
  position: absolute;
  left: 27.8px;
  top: 245px;
  width: 250px;
  height: 51px;
  border-radius: 8.428px;
  background: rgba(161, 211, 255, 0.15);
}
/* la tranche violette du slide suivant, collee au bord droit */
.csl-strip {
  position: absolute;
  left: 535.66px;
  top: 69px;
  width: 36px;
  height: 327px;
  background: #5a39ff;
  box-shadow: 0 0.843px 1.686px 0 rgba(0, 0, 0, 0.25), 0 0 0 0.421px rgba(0, 0, 0, 0.1);
}
/* le curseur du rep, même patron que Champion/CFO */
.csl-cur {
  position: absolute;
  left: 141px;
  top: 364.7px;
  z-index: 2;
  pointer-events: none;
}
.csl-cur img { display: block; width: 24.374px; height: 28.436px; transform: scaleX(-1); }
.csl-cur i {
  position: absolute;
  right: 19.2px;
  top: 23.05px;
  padding: 4.264px 11.5px 4.062px 10.833px;
  background: #0068f9;
  border-radius: 16.249px 5.416px 16.249px 16.249px;
  font-style: normal;
  font-family: var(--ds-font-ui);
  font-weight: 500;
  font-size: 16.249px;
  line-height: normal;
  color: #fff;
  white-space: nowrap;
}

/* ---- Learning Management : la grande scène — le mockup Course Library
   (sidebar + grille) dans notre chrome de fenêtre, posé sur une carte
   crème, et dessous les trois colonnes à barre de titre ---- */
/* ---- Learning Management (15:4133) : le stage creme avec le grand
   symbole Dock, deux fenetres navigateur vides empilees — au changement
   de tab elles descendent puis remontent avec le nouvel onglet ---- */
.lms-sym {
  position: absolute;
  left: -424.34px;
  top: -927.34px;
  width: 2527.344px;
  height: 2527.344px;
  max-width: none;
  pointer-events: none;
}
/* La scene est dessinee sur 1712 : les deux fenetres de 1248 s'etalent de
   -751 a +751 autour du centre. Sans mise a l'echelle elle debordait le stage
   des qu'il retrecissait — a 1280 le bord droit tombait 127 hors du cadre.
   Meme traitement que les autres scenes du site (--rds, --ais, --tss). */
.lms-fit {
  position: absolute;
  inset: 0;
  transform: scale(var(--lms, 1));
  transform-origin: 50% 0;
}
.lmw {
  position: absolute;
  width: 1248px;
  height: 701px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 0 0 0.969px rgba(0, 0, 0, 0.1), 0 16.48px 17.45px -11.633px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.lmw--back { left: calc(50% - 497px); top: 166px; }
.lmw--front { left: calc(50% - 751px); top: 88px; transition-delay: 0.06s; }
/* la descente : plus vive, les deux fenetres sortent par le bas */
.lms-stage.is-swap .lmw {
  transform: translateY(820px);
  transition: transform 0.46s cubic-bezier(0.5, 0, 0.8, 0.4);
}
.lms-stage.is-swap .lmw--back { transition-delay: 0.05s; }
@media (prefers-reduced-motion: reduce) {
  .lmw, .lms-stage.is-swap .lmw { transition: none; transform: none; }
}
.lmw-bar {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 33px;
  background: #f4f4f4;
  display: flex;
  align-items: flex-end;
  padding-top: 4px;
}
.lmw-dots {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 6px 0 13px;
  align-self: center;
}
.lmw-dots img { width: 10px; height: 10px; display: block; }
.lmw-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: #fff;
  border-radius: 8px 8px 0 0;
}
.lmw-tab img { width: 16px; height: 10.667px; display: block; }
.lmw-name {
  font-family: var(--ds-font-ui);
  font-weight: 500;
  font-size: 12px;
  line-height: 17px;
  color: #000;
}
/* ---- L'écran de cours (15:4520) dans la fenêtre avant : quiz
   Corporate Cards, chevrons d'étapes, header sombre ---- */
.crs {
  position: absolute;
  left: 2px;
  right: 2px;
  top: 35px;
  bottom: -35px;
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  font-family: var(--ds-font);
  text-align: left;
}
.crs-head {
  display: flex;
  align-items: center;
  gap: 6.5px;
  background: var(--ds-ink);
  padding: 7.3px 7.5px 7.3px 6.5px;
}
.crs-back { width: 13px; height: 13px; margin: 0 0 0 5.7px; flex-shrink: 0; }
.crs-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  font-size: 12.42px;
  color: #fff;
  padding-left: 4px;
}
.crs-est { font-weight: 500; font-size: 11.42px; color: #fff; white-space: nowrap; }
.crs-est i { font-style: normal; color: rgba(255, 255, 255, 0.6); }
.crs-pct {
  background: #303030;
  border-radius: 3.263px;
  padding: 4.9px 11.42px 5.7px;
  font-weight: 500;
  font-size: 11.42px;
  color: #fff;
  white-space: nowrap;
}
.crs-save {
  background: #5a39ff;
  border-radius: 4px;
  padding: 4.9px 11.42px 5.7px;
  font-weight: 500;
  font-size: 11.42px;
  color: #fff;
  white-space: nowrap;
}
/* les etapes en chevrons */
.crs-steps {
  display: flex;
  background: #fbfbfb;
  box-shadow: inset 0 -0.816px 0 0 rgba(0, 0, 0, 0.15);
  height: 33px;
}
.crs-step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6.5px;
  padding: 9.8px 21.2px 10.6px 11.4px;
  font-weight: 400;
  font-size: 11.42px;
  line-height: 11.42px;
  color: rgba(18, 23, 34, 0.4);
  white-space: nowrap;
}
.crs-step.is-done { background: #fff; font-weight: 500; color: var(--ds-ink); }
.crs-step.is-done s { text-decoration: line-through; }
.crs-step.is-active { background: #5a39ff; font-weight: 500; color: #fff; }
.crs-arr { position: absolute; right: -0.4px; top: -0.3px; width: 14px; height: 33px; }
.crs-box {
  width: 11.42px;
  height: 9.8px;
  border-radius: 1.63px;
  background: #5a39ff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.crs-box img { width: 9.8px; height: 9.8px; }
.crs-box--half { background: rgba(0, 0, 0, 0.08); }
.crs-box--todo { background: none; border: 0.816px dashed #cfcfcf; }
/* le corps : la section quiz centree */
.crs-main { padding: 13px 103px; }
.crs-sec-title { font-weight: 600; font-size: 22.8px; line-height: 19.6px; color: var(--ds-ink); padding: 19.6px 0 13px; }
.crs-quiz {
  background: #fff;
  border: 0.408px solid rgba(0, 0, 0, 0.1);
  border-radius: 6.5px;
  box-shadow: 0 0.816px 0 0.408px rgba(0, 0, 0, 0.05);
  padding: 31px 34.3px 34.3px;
}
.crs-qhead {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  line-height: normal;
}
.crs-qhead b { font-weight: 500; color: var(--ds-ink); }
.crs-qhead span { color: #7d828e; }
.crs-qbar {
  height: 4.9px;
  border-radius: 32.6px;
  background: #f5f5f5;
  margin-top: 9.8px;
  overflow: hidden;
}
.crs-qbar i { display: block; width: 40%; height: 100%; background: #5a39ff; border-radius: 24.5px; }
.crs-qrow { display: flex; gap: 13px; margin-top: 27.7px; }
.crs-qleft { flex: 1; min-width: 0; padding: 26px 0; }
.crs-q { font-weight: 600; font-size: 22.8px; line-height: normal; color: var(--ds-ink); margin-bottom: 19.6px; }
.crs-opt {
  display: flex;
  align-items: center;
  gap: 6.5px;
  height: 44px;
  padding: 13px;
  border: 0.408px solid #d9d9d9;
  border-radius: 6.5px;
  font-weight: 500;
  font-size: 14.7px;
  color: var(--ds-ink);
  white-space: nowrap;
}
.crs-opt + .crs-opt { margin-top: 6.5px; }
.crs-opt.is-sel { border: 1.63px solid #5a39ff; }
.crs-opt img { width: 16.3px; height: 16.3px; flex-shrink: 0; }
.crs-media {
  width: 404.58px;
  flex-shrink: 0;
  border-radius: 6.5px;
  background: #5a39ff;
}
.crs-qfoot { display: flex; justify-content: flex-end; margin-top: 27.7px; }
.crs-submit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #5a39ff;
  border-radius: 4.9px;
  padding: 7.3px 9.8px 8.2px 11.4px;
  font-weight: 500;
  font-size: 13px;
  color: #fff;
}
.crs-submit img { width: 13px; height: 13px; transform: rotate(-90deg); }

/* les congés : le quart-de-rond qui raccorde l'onglet à la barre */
.lmw-fillet { position: relative; width: 8px; height: 8px; background: #fff; align-self: flex-end; }
.lmw-fillet::after { content: ""; position: absolute; inset: 0; background: #f7f7f7; }
.lmw-fillet--l::after { border-radius: 0 0 100px 0; }
.lmw-fillet--r::after { border-radius: 0 0 0 100px; }
.lms-stage {
  position: relative;
  height: 760px;
  background: #faf9f7;
  padding: 0;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
.lms-win {
  display: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 64px;
  width: min(1240px, calc(100% - 160px));
  height: 640px;
  background: #f4f4f4;
  border-radius: 7px;
  overflow: hidden;
  flex-direction: column;
  box-shadow: 0 7px 9px 0 rgba(0, 0, 0, 0.04);
  font-family: var(--ds-font);
  text-align: left;
}
.lms-win::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.1);
  pointer-events: none;
}
.lms-win .sk-win-content { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.lms-win .sk-win-screen { flex: 1; height: auto; display: flex; flex-direction: column; }
.lms-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 0.5px solid #ebe5d8;
  flex-shrink: 0;
}
.lms-title { font-weight: 500; font-size: 15px; line-height: normal; color: var(--ds-ink); }
.lms-search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 240px;
  padding: 7px 12px;
  background: #fff;
  border: 0.5px solid #ebe5d8;
  border-radius: 8px;
  font-size: 12px;
  line-height: normal;
  color: var(--ds-ink-50);
}
.lms-search .cm-ico { width: 11px; height: 11px; background: rgba(18, 23, 34, 0.4); }
.lms-body { display: flex; flex: 1; min-height: 0; }
.lms-side {
  width: 218px;
  flex-shrink: 0;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lms-side span {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  line-height: normal;
  color: var(--ds-ink-50);
}
.lms-side span.is-on {
  background: #fff;
  border: 0.5px solid #ebe5d8;
  font-weight: 500;
  color: var(--ds-ink);
}
.lms-main { flex: 1; min-width: 0; padding: 18px 24px; }
.lms-main-title { font-weight: 500; font-size: 18px; line-height: normal; color: var(--ds-ink); margin-bottom: 16px; }
.lms-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.lms-card {
  background: #fff;
  border: 0.5px solid #ebe5d8;
  border-radius: 10px;
  padding: 16px;
}
.lms-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: #faf9f7;
  border: 0.5px solid #ebe5d8;
  border-radius: 8px;
}
.lms-ico .cm-ico { width: 15px; height: 15px; background: rgba(18, 23, 34, 0.7); }
.lms-card b { display: block; margin-top: 12px; font-weight: 500; font-size: 13.5px; line-height: normal; color: var(--ds-ink); }
.lms-card p { margin: 4px 0 0; font-size: 12px; line-height: 17px; color: var(--ds-ink-50); }
/* les trois colonnes sous la scène, à barre de titre — l'active en encre.
   Alignées sur la grille des cartes : chaque colonne prend le même retrait
   de 48 que le texte des cartes, et la typo est celle des composants
   ds-card-title / ds-card-body */
.lms-cols { display: flex; gap: var(--ds-grid-gap); margin-top: 40px; text-align: left; }
.lms-col { flex: 1; min-width: 0; padding: 0 48px; cursor: pointer; }
.lms-col i {
  display: block;
  position: relative;
  height: 3px;
  border-radius: 100px;
  /* la piste reprend le gris des cercles des tabs */
  background: #ececec;
  overflow: hidden;
  margin-bottom: 24px;
}
/* la progression, au bleu des timers circulaires des tabs (--ds-sky) :
   elle se remplit sur le tab actif puis passe au suivant */
.lms-col i::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 0;
  border-radius: inherit;
  background: var(--ds-sky);
}
.lms-col.is-on i::after { animation: lmsFill 9s linear forwards; }
/* après un clic (mode manuel), plus de remplissage : la barre est pleine */
.lms-cols.is-manual .lms-col.is-on i::after { animation: none; width: 100%; }
@keyframes lmsFill {
  from { width: 0; }
  to { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .lms-col.is-on i::after { animation: none; width: 100%; }
}
.lms-col b { font-weight: 500; font-size: 24px; line-height: 32px; color: var(--ds-ink); }
.lms-col p { margin: 8px 0 0; font-size: 18px; line-height: 28px; color: var(--ds-ink); }
@media (max-width: 900px) {
  .lms-stage { height: 420px; }
  .lms-win { width: calc(100% - 48px); top: 32px; }
  .lms-side { display: none; }
  .lms-cols { flex-direction: column; gap: 28px; }
}

/* ---- Illustrations "Learning Management" : mêmes fenêtres claires ---- */
.lm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 2px 8px;
}
.lm-title { font-weight: 600; font-size: 10.4px; line-height: normal; color: var(--ds-ink); }
.lm-chip {
  font-weight: 500;
  font-size: 8px;
  line-height: normal;
  color: #fff;
  background: var(--ds-blue);
  padding: 2.5px 8px 3.5px;
  border-radius: 100px;
  white-space: nowrap;
}
.lm-chip--ghost { color: var(--ds-ink); background: #fff; border: 0.5px solid #ebe5d8; }
.lm-box {
  background: #fff;
  border: 0.5px solid #ebe5d8;
  border-radius: 8px;
  padding: 9px 11px;
}
.lm-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 500;
  font-size: 9.5px;
  line-height: normal;
  color: var(--ds-ink);
}
.lm-chips { display: flex; align-items: center; gap: 6px; }
.lm-hint {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  padding: 6px 9px;
  border: 0.5px dashed rgba(18, 23, 34, 0.18);
  border-radius: 6px;
  font-size: 8.5px;
  line-height: normal;
  color: var(--ds-ink-50);
}
.lm-hint-icos { margin-left: auto; display: flex; gap: 7px; }
.lm-hint .cm-ico { width: 9px; height: 9px; background: rgba(18, 23, 34, 0.35); }
.lm-btns { display: flex; gap: 6px; margin-top: 8px; }
.lm-btn {
  font-weight: 500;
  font-size: 8px;
  line-height: normal;
  color: var(--ds-ink);
  background: #fff;
  border: 0.5px solid #ebe5d8;
  border-radius: 100px;
  padding: 3px 9px 4px;
}
.lm-add {
  position: relative;
  text-align: center;
  font-weight: 500;
  font-size: 8.5px;
  line-height: normal;
  color: var(--ds-blue);
  padding: 8px 0;
}
/* le curseur posé sur + Add question, et le menu des types de champ qui
   s'ouvre par-dessus la boîte suivante */
.lm-cursor {
  position: absolute;
  left: calc(50% + 34px);
  top: 13px;
  width: 11px;
  height: 13px;
  filter: brightness(0);
}
.cm-pad { position: relative; }
.lm-menu {
  position: absolute;
  left: 52%;
  top: 178px;
  z-index: 2;
  width: 118px;
  background: #fff;
  border: 0.5px solid #ebe5d8;
  border-radius: 8px;
  padding: 4px 0;
  box-shadow: 0 7px 9px 0 rgba(0, 0, 0, 0.06);
}
.lm-menu span {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4.5px 11px;
  font-size: 8.5px;
  line-height: normal;
  color: var(--ds-ink);
}
.lm-menu .cm-ico { width: 9px; height: 9px; background: rgba(18, 23, 34, 0.45); }
/* Playbooks : la grille Embed anything, colonnes d'outils qui se rognent
   sur le bord de la fenêtre, dernière rangée en fondu */
.eb-head { display: flex; align-items: center; gap: 18px; padding: 4px 2px 12px; }
.eb-mode {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 500;
  font-size: 11px;
  line-height: normal;
  color: var(--ds-ink);
  white-space: nowrap;
}
.eb-mode:not(.is-on) { opacity: 0.4; }
.eb-mode .lm-fico { width: 20px; height: 20px; background: #fff; border: 0.5px solid #ebe5d8; }
.eb-mode .cm-ico { width: 10px; height: 10px; }
.eb-cols { display: flex; gap: 26px; width: 620px; }
.eb-col { width: 150px; flex-shrink: 0; }
.eb-col b {
  display: block;
  font-weight: 500;
  font-size: 10px;
  line-height: normal;
  color: var(--ds-ink-50);
  margin-bottom: 8px;
}
.eb-col span {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-weight: 500;
  font-size: 10.5px;
  line-height: normal;
  color: var(--ds-ink);
  white-space: nowrap;
}
.eb-col img {
  width: 20px;
  height: 20px;
  padding: 3px;
  background: #fff;
  border: 0.5px solid #ebe5d8;
  border-radius: 6px;
  object-fit: contain;
}
.eb-col .eb-fade { opacity: 0.4; }

/* liste de playbooks */
.lm-rows {
  background: #fff;
  border: 0.5px solid #ebe5d8;
  border-radius: 10px;
  padding: 2px 11px;
}
.lm-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  font-size: 9.5px;
  line-height: normal;
  color: var(--ds-ink);
}
.lm-row + .lm-row { border-top: 0.5px solid rgba(18, 23, 34, 0.06); }
.lm-row b { font-weight: 500; }
.lm-fico {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--ds-surface-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.lm-fico .cm-ico { width: 11px; height: 11px; }
.lm-fico--blue { background: var(--ds-blue); }
.lm-fico--sky { background: #e5f1ff; }
.cm-ico--b { background: var(--ds-blue); }
.lm-meta { margin-left: auto; font-size: 8px; color: var(--ds-ink-50); white-space: nowrap; }
/* carte de cours (Customer Education) */
.lm-course {
  background: #fff;
  border: 0.5px solid #ebe5d8;
  border-radius: 10px;
  overflow: hidden;
}
.lm-course-thumb {
  position: relative;
  height: 110px;
  background: #157a4e;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  font-size: 12px;
  line-height: normal;
  color: #fff;
}
/* la marque en filigrane, comme la cover de la référence */
.lm-course-thumb::before {
  content: "";
  position: absolute;
  right: -34px;
  top: -30px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
}
.lm-course-thumb::after {
  content: "";
  position: absolute;
  left: -44px;
  bottom: -70px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
}
.lm-course-mark {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  color: #157a4e;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 12px;
  position: relative;
  z-index: 1;
}
.lm-course-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 11px;
}
.lm-course-id b { display: block; font-weight: 600; font-size: 9.5px; line-height: normal; color: var(--ds-ink); }
.lm-course-meta { display: flex; gap: 10px; margin-top: 4px; font-size: 8px; line-height: normal; color: var(--ds-ink-50); }
.lm-course-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.lm-course-meta .cm-ico { width: 9px; height: 9px; background: rgba(18, 23, 34, 0.35); }
.lm-review {
  font-weight: 500;
  font-size: 8.5px;
  line-height: normal;
  color: #fff;
  background: var(--ds-blue);
  padding: 4px 11px 5px;
  border-radius: 100px;
  flex-shrink: 0;
}

/* les illustrations sont du décor : pas de sélection de texte */
.wd-il,
.rd-il,
.sk-pills,
.sk-win,
.nx-il,
.cz-il,
.cm-win,
.il-bleed,
.tpl-grid .card-media {
  user-select: none;
  -webkit-user-select: none;
}

/* trame de points du stage Dock AI : le système du site, calibré par header.js */
.ai-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(18, 23, 34, 0.055) 1.7px, rgba(18, 23, 34, 0) 2.15px);
  background-size: var(--dotx, 20.6px) var(--doty, 20.6px);
  pointer-events: none;
}
.ai-stage > * { position: relative; }



/* ---- Page Sales : les illustrations en langage maison ---- */
/* Generate rooms with AI : le prompt puis la fenetre en generation */
.ga-bleed { min-height: 266px; overflow: hidden; }
.ga-input { position: relative; z-index: 1; margin: 0 0 0 48px; max-width: 380px; }
/* la fenetre de la home, recalee dans la zone d'illo de la carte */
.ga-win.sk-win { left: 48px; top: 66px; }
/* Get AI suggestions : la pile Dock AI Suggestion (composant nx de la home) */
.nxs-bleed { min-height: 246px; overflow: hidden; }
.nxs-bleed .nx-fit { top: 8px; }
/* Collaborative Sections : le curseur Champion pose sur le bloc editable */
.cs-cur.wd-cur--champion { left: auto; right: 120px; top: 96px; }

/* ---- Heros produit : la carte blanche du placeholder accueille nos
   illustrations (clib, csl, fenetres, panneaux il, arcs CRM) ---- */
.ph-card {
  position: relative;
  z-index: 1;
  width: min(640px, calc(100% - 16px));
  height: 480px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(18, 23, 34, 0.08);
  overflow: hidden;
  text-align: left;
  font-family: var(--ds-font);
}
.ph-card--tint { background: var(--ds-surface-tint); }
.ph-fit { position: absolute; left: 50%; top: 50%; }
.ph-fit > .it-illo { height: 100%; }
.ph-pad {
  position: absolute;
  inset: 0;
  padding: 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ph-pills {
  position: absolute;
  inset: 0;
  padding: 64px 48px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-content: center;
}
/* la ligne de prix des tuiles order form */
.tpl-price { margin-left: auto; font-weight: 600; font-size: 10px; color: var(--ds-ink); }

/* ---- Le tile template en hero (tpl-stage) : son cadre blanc n'existait
   que dans la grille — ici la carte, le padding et le liseré ---- */
.tpl-stage {
  position: relative;
  z-index: 1;
  width: min(640px, calc(100% - 16px));
}
.tpl-stage .tpl-shot {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 480px;
  padding: 28px 24px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(18, 23, 34, 0.08);
  overflow: hidden;
  text-align: left;
  font-family: var(--ds-font);
}

/* ---- Mini-vignettes (pages produit) : les vieilles icônes des cartes
   remplacées par de petites illustrations HTML/CSS aux tokens du site,
   dans l'esprit des vignettes dock.us — 12 patrons réutilisables ---- */
.mv {
  position: relative;
  height: 116px;
  margin-bottom: 24px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(18, 23, 34, 0.06), 0 12px 24px -12px rgba(18, 23, 34, 0.08);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 9px;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  font-family: var(--ds-font-ui);
  pointer-events: none;
}
.mv-row { display: flex; align-items: center; gap: 8px; }
.mv-line { display: block; height: 6px; border-radius: 100px; background: rgba(18, 23, 34, 0.14); }
.mv-line--lt { background: rgba(18, 23, 34, 0.07); }
.mv-line--c { margin: 0 auto; }
.mv-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px 4px;
  border-radius: 100px;
  font-style: normal;
  font-weight: 500;
  font-size: 11px;
  line-height: normal;
  color: var(--ds-ink);
  background: var(--ds-surface-gray);
  white-space: nowrap;
}
.mv-chip--ok { color: #0ba258; background: rgba(11, 162, 88, 0.1); }
.mv-chip--blue { color: #fff; background: var(--ds-blue); }
.mv-chip--ink { color: #fff; background: var(--ds-ink); }
/* plan : la barre de progression et les étapes cochées */
.mv-bar { display: block; height: 4px; border-radius: 100px; background: #ececec; overflow: hidden; }
.mv-bar b { display: block; height: 100%; background: var(--ds-sky); border-radius: 100px; }
.mv-check {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1.4px solid rgba(18, 23, 34, 0.18);
  background: #fff;
}
.mv-check--on {
  border: 0;
  background: var(--ds-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.8 6.2l2.1 2.1 4.3-4.6' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px no-repeat;
}
/* sync : deux disques reliés, l'échange à double sens */
.mv--sync { align-items: center; }
.mv-duo { display: flex; align-items: center; gap: 14px; }
.mv-orb { width: 34px; height: 34px; border-radius: 50%; }
.mv-orb--blue { background: linear-gradient(180deg, #2b83ff, var(--ds-blue)); }
.mv-orb--ink { background: var(--ds-ink); }
.mv-orb--chip { background: var(--ds-surface-gray); }
.mv-arrows { font-size: 17px; color: rgba(18, 23, 34, 0.55); }
/* auto : déclencheur -> action */
.mv-arrow {
  flex-shrink: 0;
  width: 16px;
  height: 2px;
  background: rgba(18, 23, 34, 0.25);
  position: relative;
}
.mv-arrow::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -3px;
  border: 4px solid transparent;
  border-left-color: rgba(18, 23, 34, 0.25);
}
/* notify : le toast */
.mv-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(18, 23, 34, 0.08), 0 4px 10px rgba(18, 23, 34, 0.06);
}
.mv-toast > span { display: flex; flex-direction: column; gap: 5px; flex: 1; }
.mv-toast .mv-chip { margin-left: auto; }
.mv-dot { flex-shrink: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--ds-blue); }
/* chart : les barres */
.mv-bars { display: flex; align-items: flex-end; gap: 9px; height: 72px; }
.mv-bars i { flex: 1; border-radius: 4px 4px 2px 2px; background: rgba(18, 23, 34, 0.1); }
.mv-bars i.is-hi { background: var(--ds-blue); }
/* ai : le sparkle et le libellé shimmer */
.mv-spark { width: 14px; height: 14px; color: var(--ds-blue); background: var(--ds-blue); }
.mv-ai-label { font-weight: 500; font-size: 13px; color: var(--ds-ink); font-family: var(--ds-font); }
/* doc : la pile de fichiers */
.mv-files { position: relative; height: 76px; }
.mv-file {
  position: absolute;
  left: 0;
  top: 8px;
  width: 62%;
  height: 68px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(18, 23, 34, 0.1), 0 4px 10px rgba(18, 23, 34, 0.05);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 1;
}
.mv-file--back {
  left: auto;
  right: 6%;
  top: 0;
  width: 52%;
  height: 62px;
  z-index: 0;
  opacity: 0.55;
  padding: 0;
}
.mv-fold { display: block; width: 14px; height: 17px; border-radius: 3px; background: var(--ds-sky); flex-shrink: 0; }
/* sign : le paraphe et la ligne signée */
.mv-scribble { display: block; }
.mv-scribble svg { display: block; width: 96px; height: 30px; }
/* chat : deux bulles */
.mv-bub {
  display: inline-flex;
  padding: 9px 12px;
  border-radius: 14px 14px 14px 4px;
  background: var(--ds-surface-gray);
  align-self: flex-start;
}
.mv-bub--r {
  border-radius: 14px 14px 4px 14px;
  background: var(--ds-blue);
  align-self: flex-end;
  width: 92px;
  height: 30px;
}
/* people : les visages et la ligne */
.mv-avas { display: flex; }
.mv-avas img { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; object-fit: cover; }
.mv-avas img + img { margin-left: -8px; }
/* find : le champ et le résultat */
.mv-input {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 100px;
  box-shadow: inset 0 0 0 1px rgba(18, 23, 34, 0.1);
  font-size: 12px;
  color: var(--ds-ink-50);
}
/* lock : le cadenas dessiné */
.mv--lock { align-items: center; }
.mv-lock { position: relative; width: 34px; height: 40px; }
.mv-lock::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 0;
  width: 20px;
  height: 20px;
  border: 3px solid var(--ds-ink);
  border-radius: 10px 10px 0 0;
  border-bottom: 0;
}
.mv-lock::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 34px;
  height: 24px;
  border-radius: 7px;
  background: var(--ds-ink);
}
/* embed : le player violet du workspace client */
.mv--embed { padding: 12px; }
.mv-player {
  flex: 1;
  border-radius: 8px;
  background: #5a39ff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mv-play {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  position: relative;
}
.mv-play::after {
  content: "";
  position: absolute;
  left: 13px;
  top: 10px;
  border: 7px solid transparent;
  border-left: 11px solid #5a39ff;
}

/* ---- Illustrations de cartes (pages produit) : la boîte .ci accueille
   un vrai composant de la home — fenêtre tpl, clib, csl, embed, quiz,
   modale Share — scalé ou rogné, jamais une icône ---- */
.ci {
  position: relative;
  height: 224px;
  margin-bottom: 24px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(18, 23, 34, 0.06), 0 12px 24px -12px rgba(18, 23, 34, 0.08);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
  text-align: left;
  font-family: var(--ds-font);
}
.ci--tint { background: var(--ds-surface-tint); }
/* un composant scalé : ancré en haut (rognage bas assumé) ou centré */
.ci-fit { position: absolute; left: 50%; top: 16px; transform-origin: 50% 0; }
.ci-fit--c { top: 50%; transform-origin: 50% 50%; }
/* la fenêtre workspace crème des tuiles, posée dans la boîte */
.ci-win {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 16px;
  bottom: -8px;
  display: flex;
  flex-direction: column;
  background: #faf9f7;
  border-radius: 7px;
  box-shadow: 0 7px 9px rgba(0, 0, 0, 0.04), inset 0 0 0 0.5px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  isolation: isolate;
}
.ci-win .tpl-screen { flex: 1; }
/* dans l'il-bleed des cartes template : la fenêtre part des marges du texte */
.il-bleed .ci-win { left: 48px; right: 48px; top: 0; bottom: -48px; }
.il-bleed .ci-win--back { left: 96px; right: 24px; top: -24px; opacity: 0.55; z-index: 0; }
.il-bleed .ci-win--front { left: 48px; right: 72px; top: 36px; z-index: 1; }
/* le nuage de pills et les compositions à plat */
.ci-pills {
  position: absolute;
  inset: 0;
  padding: 28px 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-content: center;
}
.ci-pad {
  position: absolute;
  inset: 0;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}
.ci-pad .il-ui { font-family: var(--ds-font-ui); }
.ci-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 100px;
  background: #fff;
  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: 13px;
  color: var(--ds-ink);
}
.ci-link i { width: 8px; height: 8px; border-radius: 50%; background: #0ba258; flex-shrink: 0; }
.ci-link .mv-chip { margin-left: auto; }
/* la ligne de nav des sections : une pill cachée */
.ci-hidden { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; }
.ci-hidden .tpl-nav { justify-content: flex-start; }
.ci-cur.wd-cur--champion { left: auto; right: 90px; top: 118px; }
/* la boîte .ci posée dans l'il-bleed d'une carte template : elle prend
   les marges du texte et colle au bas de la carte */
.il-bleed .ci--bleed {
  position: absolute;
  left: 48px;
  right: 48px;
  top: 0;
  bottom: 0;
  height: auto;
  margin: 0;
  border-radius: 12px 12px 0 0;
}

/* ---- Cartes produit = cartes de la home : l'illustration vit dans le
   bas de la carte (il-bleed), part du retrait du texte, déborde à
   droite et en bas, rognée par la carte — jamais dans une boîte ---- */
.ib-win {
  position: absolute;
  left: 48px;
  right: -48px;
  top: 0;
  bottom: -48px;
  display: flex;
  flex-direction: column;
  background: #f4f4f4;
  border-radius: 7px;
  box-shadow: 0 7px 9px 0 rgba(0, 0, 0, 0.04);
  overflow: hidden;
  isolation: isolate;
  text-align: left;
  font-family: var(--ds-font);
}
.ib-win::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 7px;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.1);
  pointer-events: none;
  z-index: 2;
}
.ib-win .tpl-screen { flex: 1; }
.ib-win--back { left: 96px; right: -96px; top: -24px; opacity: 0.55; z-index: 0; }
.ib-win--front { top: 36px; z-index: 1; }
.ib-fit { position: absolute; left: 48px; top: 0; transform-origin: 0 0; text-align: left; font-family: var(--ds-font); }
.il-bleed .wd-cur.ib-cur { left: auto; right: 24px; top: 128px; }
.il-panel .il-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.il-panel .mv-bars { height: 96px; margin-top: 10px; }
/* un composant remonté (top négatif) reste sous le texte : la couche de
   rognage part du haut de l'il-bleed et laisse déborder à droite et en bas */
.ib-clip { position: absolute; left: 0; top: 0; right: -48px; bottom: -48px; overflow: hidden; }

/* ---- Les fenêtres des cartes produit sont LA fenêtre de la home (sk-win :
   barre crème, écran cerné, trame de points, fondu vers le bas) posée dans
   l'il-bleed — même pièce, même rognage ---- */
.il-bleed > .sk-win { left: 48px; top: 0; }
.il-bleed > .sk-win .ib-body { position: relative; padding: 12px 16px; font-family: var(--ds-font); text-align: left; }
.il-bleed > .sk-win.ib-skwin--back { left: 96px; top: -24px; opacity: 0.55; z-index: 0; }
.il-bleed > .sk-win.ib-skwin--front { top: 36px; z-index: 1; }
/* la pill de déclencheur CRM, au-dessus de la fenêtre qui se génère */
.ga-trigger { position: absolute; left: 48px; top: 0; z-index: 2; margin: 0; width: auto; max-width: none; gap: 8px; color: var(--ds-ink); }
.ga-trigger img { width: 16px; height: 16px; }
.ga-trigger .il-right { margin-left: 8px; }
.il-bleed.ga-bleed { min-height: 300px; }
.il-bleed .ga-win { left: 48px; top: 58px; }
/* le contenu des fenêtres produit est lisible : zoom du corps (les tuiles
   template sont dessinées pour 9px, ici la fenêtre est trois fois plus grande) */
.il-bleed > .sk-win .ib-body { zoom: 1.32; } /* base ; script.js ajuste a la hauteur */

/* ---- Pages texte (About, Security…) : la prose prend le retrait des
   titres de section et une mesure confortable ---- */
.sp-prose { padding-left: var(--ds-heading-indent); max-width: 760px; }
.sp-prose .ds-body-lg + .ds-body-lg { margin-top: 16px; }

/* ---- Pages éditoriales (blog, podcast, newsletter, updates, events,
   archives) : un titre centré, l'entrée à la une, une grille d'entrées —
   la couverture est une vignette blanche à trame de points qui porte une
   mini-illustration de la maison ; le podcast a sa couverture encre ---- */
.idx-head { text-align: center; padding-top: 48px; }
.idx-head .ds-eyebrow { display: block; }
.idx-head .ds-h1 { margin: 16px auto 0; max-width: 900px; text-wrap: balance; }
.idx-head .ds-body-lg { margin: 20px auto 0; max-width: 640px; color: var(--ds-ink-50); }
.idx-head .idx-form { margin-top: 32px; }
.idx-form { display: flex; justify-content: center; gap: 8px; }
.idx-form .il-input { width: 320px; height: 44px; font-size: 15px; border-radius: 100px; }
.cards-auto .ds-card.idx-card { display: block; padding: 12px 12px 28px; text-decoration: none; color: inherit; transition: box-shadow 0.25s ease, transform 0.25s ease; }
.idx-card:hover { box-shadow: 0 16px 32px -20px rgba(18, 23, 34, 0.25); transform: translateY(-2px); }
.idx-card .ds-card-title { margin-top: 20px; padding: 0 16px; font-size: 20px; line-height: 27px; }
.idx-meta { margin-top: 8px; padding: 0 16px; font-size: 14px; line-height: 20px; color: var(--ds-ink-50); }
.idx-cover {
  position: relative;
  height: 220px;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.1);
  user-select: none;
  -webkit-user-select: none;
}
.idx-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(18, 23, 34, 0.07) 0.9px, transparent 1px);
  background-size: 11px 11px;
  pointer-events: none;
}
.idx-mini { position: absolute; left: 50%; top: 50%; transform-origin: 50% 50%; font-family: var(--ds-font); text-align: left; }
.idx-cover .mv-chip { position: absolute; left: 14px; bottom: 14px; z-index: 2; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), inset 0 0 0 0.5px rgba(18, 23, 34, 0.12); }
/* podcast : couverture encre, numéro d'épisode, disque play */
.idx-cover--ink { background: var(--ds-ink); }
.idx-cover--ink::before { background-image: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0.9px, transparent 1px); }
.idx-ep { position: absolute; left: 22px; bottom: 18px; color: #fff; font-weight: 500; font-size: 40px; line-height: 44px; letter-spacing: -0.02em; }
.idx-ep small { display: block; font-size: 13px; line-height: 18px; color: rgba(255, 255, 255, 0.6); margin-top: 4px; letter-spacing: 0; }
.idx-play { position: absolute; right: 18px; top: 18px; width: 36px; height: 36px; border-radius: 50%; background: #fff; }
.idx-play::after { content: ""; position: absolute; left: 14px; top: 11px; border: 7px solid transparent; border-left: 11px solid var(--ds-ink); }
/* l'entrée à la une */
.ds-card.idx-feat { display: flex; gap: 40px; align-items: stretch; height: auto; padding: 12px; margin-bottom: 16px; text-decoration: none; color: inherit; }
.idx-feat .idx-cover { flex: 0 0 50%; height: auto; min-height: 380px; }
.idx-feat .idx-ep { font-size: 64px; line-height: 68px; left: 32px; bottom: 28px; }
.idx-feat .idx-body { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 32px 36px 32px 0; }
.idx-feat .ds-card-title { font-size: 34px; line-height: 42px; margin-top: 14px; letter-spacing: -0.01em; }
.idx-feat .idx-more { color: var(--ds-blue); font-weight: 500; margin-top: 28px; }
@media (max-width: 900px) { .ds-card.idx-feat { flex-direction: column; } .idx-feat .idx-cover { min-height: 260px; } }
.il-panel--mini { position: relative; inset: auto; padding: 18px 20px; box-shadow: 0 0 0 1px rgba(18, 23, 34, 0.06), 0 12px 24px -12px rgba(18, 23, 34, 0.12); }
/* les fenêtres miniatures des couvertures : ancrées dans leur boîte, sans
   l'offset natif de la home, et sans le fondu (la vignette est petite) */
.idx-mini > .sk-win { left: 0; top: 0; -webkit-mask-image: none; mask-image: none; }
.idx-mini > .sk-win .ib-body { padding: 12px 16px; zoom: 1.15; }
.idx-mini > .il-panel--mini { left: 0; top: 0; right: auto; bottom: auto; width: 420px; }

/* ==== Layouts des pages hors home, patrons Linear / Framer / Intercom ==== */
/* rangée d'en-tête à deux colonnes : titre à gauche, texte + lien à droite */
.feat-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: end; margin-bottom: var(--ds-heading-gap); padding-left: var(--ds-heading-indent); }
.feat-row .ds-h2 { margin: 0; text-wrap: balance; }
.feat-row .feat-intro { font-size: 20px; line-height: 30px; color: var(--ds-ink); max-width: 620px; padding-bottom: 6px; }
/* bento : une grande carte et une colonne, ou 2/3 + 1/3 */
.ds-card-grid.bento { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--ds-grid-gap); }
.ds-card-grid.bento--rev { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.ds-card-grid.bento .ds-card { min-width: 0; }
/* étapes numérotées avec filet d'accent (Intercom) */
.ds-card-grid.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ds-grid-gap); }
.step-card { position: relative; padding-top: 28px; }
.step-card::before { content: ""; position: absolute; left: 48px; right: 48px; top: 0; height: 3px; border-radius: 100px; background: var(--ds-blue); }
.step-num { font-family: var(--ds-font-ui); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ds-ink-50); }
/* prose en deux colonnes (Linear) : titre à gauche, texte à droite */
.prose-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; padding-left: var(--ds-heading-indent); }
.prose-row .ds-h2 { margin: 0; text-wrap: balance; }
.prose-row .sp-prose { padding-left: 0; max-width: 640px; }
/* table de liens (Linear customers) */
.link-table { border-top: 1px solid rgba(18, 23, 34, 0.08); }
.link-table a { display: grid; grid-template-columns: 180px minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 18px 8px; border-bottom: 1px solid rgba(18, 23, 34, 0.08); text-decoration: none; color: inherit; }
.link-table a:hover { background: var(--ds-surface-tint); }
.link-table .lt-meta { font-size: 13px; color: var(--ds-ink-50); white-space: nowrap; }
.link-table .lt-title { font-size: 17px; line-height: 24px; font-weight: 500; }
.link-table .lt-go { font-size: 14px; color: var(--ds-blue); font-weight: 500; white-space: nowrap; }
@media (max-width: 900px) {
  .feat-row, .prose-row, .ds-card-grid.bento, .ds-card-grid.bento--rev, .ds-card-grid.steps { grid-template-columns: 1fr; }
  .link-table a { grid-template-columns: 1fr; gap: 6px; }
}
/* ---- pages éditoriales, patron Framer blog ---- */
.idx-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; padding: 48px 0 40px; }
.idx-top .ds-h1 { margin: 0; max-width: 720px; text-wrap: balance; }
.idx-top .ds-body-lg { margin-top: 16px; color: var(--ds-ink-50); max-width: 560px; }
.idx-filters { display: flex; gap: 22px; flex-wrap: wrap; font-size: 14px; font-weight: 500; color: var(--ds-ink-50); padding-bottom: 8px; }
.idx-filters b { color: var(--ds-ink); font-weight: 500; }
.idx-bento { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: 1fr 1fr; gap: var(--ds-grid-gap); margin-bottom: 64px; }
.idx-bento .idx-card--big { grid-row: 1 / 3; }
.idx-bento .idx-card--big .idx-cover { height: 420px; }
.idx-bento .idx-card--big .ds-card-title { font-size: 30px; line-height: 38px; }
.idx-bento .idx-card .idx-cover { height: 200px; }
.idx-bento .idx-card--side .idx-cover { height: 160px; }
.idx-section-head { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 20px; padding-left: 8px; }
.idx-section-head .ds-card-title { font-size: 24px; }
.idx-section-head a { font-size: 14px; font-weight: 500; color: var(--ds-blue); text-decoration: none; }
.idx-more-btn { display: flex; justify-content: center; margin-top: 28px; }
@media (max-width: 900px) { .idx-bento { grid-template-columns: 1fr; grid-template-rows: none; } .idx-bento .idx-card--big { grid-row: auto; } .idx-top { flex-direction: column; align-items: flex-start; } }
/* la carte à la une garde sa grande couverture (règle après la générique) */
.idx-bento .idx-card.idx-card--big .idx-cover { height: 440px; }
.idx-bento .idx-card.idx-card--big .idx-mini { transform-origin: 50% 50%; }

/* DOC-6656 QA: keep the deal-prep illustration below wrapping copy. */
.home-prep-grid > .ds-card { height: auto; min-height: 462px; }
.features-grid .home-prep-card { display: flex; flex-direction: column; }
.features-grid .home-prep-card > .ds-card-body { width: 440px; max-width: 100%; }
.home-prep-illo { position: relative; flex: 1; min-height: 230px; margin: 24px -48px 0; overflow: hidden; isolation: isolate; }
.home-prep-illo .sk-win { top: 0; }
.home-prep-illo .sk-pills { top: 79px; }
/* The embed window keeps an inset even when its card is narrower than the scene. */
.it-illo--embed { overflow: hidden; border-radius: inherit; }
.it-illo--embed .it-fit { left: 24px; width: calc(100% - 48px); }
.it-illo--embed .eb-mini { left: 0; width: 100%; }
.it-illo--embed .eb-card { max-width: calc(100% - 16px); }
@media (max-width: 640px) {
  .home-prep-grid > .ds-card { min-height: 0; }
  .home-prep-illo { min-height: 126px; margin: 24px -24px 0; }
  .home-prep-illo .sk-pills { margin: 0; }
}