/* ============================================================================
   Schéma « prospection par formulaire » — bloc autonome intégré le 2026-08-21.
   Remplace home-crm-diagram-v7.svg dans le TROISIÈME volet de la
   section à visuel épinglé.

   Préfixe `.pro-` : cohabite sans conflit avec le premier schéma `.ctx-`.
   Même moteur d'échelle par requête de conteneur, mêmes réglages d'intégration
   appliqués plus bas (alignement des pastilles, traits et bordures à l'encre,
   calage vertical sur la colonne de texte).
   ========================================================================== */

.crm-schema {
  /* ---- réglages ---- */
  --crm-accent: #15803D;   /* traits, chiffres, états */
  --crm-edge:   #0B3B2C;   /* contour des éléments flottants et de la fenêtre */
  --crm-tint:   #D8EFD2;   /* fond des carrés d'icônes */
  --crm-line:   #E4EBE7;   /* filet du contenu interne */
  --crm-ink:    #0F1F19;
  --crm-muted:  #6B7C74;
  --crm-font:   inherit;   /* ex. "Plus Jakarta Sans", system-ui, sans-serif */
  --crm-max:    760px;
  --crm-umin:   0.78px;    /* plancher de lisibilité, cf. les autres schémas */

  container-type: inline-size;
  --u: 1px;
  display: block;
  width: 100%;
  max-width: var(--crm-max);
  margin-inline: auto;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  font-family: var(--crm-font);
  color: var(--crm-ink);
  -webkit-font-smoothing: antialiased;
}
@supports (container-type: inline-size) {
  .crm-schema { --u: max(calc(100cqw / 760), var(--crm-umin)); }
}

.crm-stage { position: relative; width: calc(760 * var(--u)); height: calc(600 * var(--u)); }
.crm-wires { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }

/* déclencheur */
.crm-trigger {
  position: absolute; left: 0; top: calc(12 * var(--u)); width: calc(290 * var(--u));
  box-sizing: border-box; background: #fff; border: 1.5px solid var(--crm-edge);
  border-radius: calc(12 * var(--u)); padding: calc(10 * var(--u));
  display: flex; align-items: center; gap: calc(11 * var(--u));
}
.crm-trigger__ico {
  width: calc(40 * var(--u)); height: calc(40 * var(--u)); flex-shrink: 0;
  border-radius: calc(9 * var(--u)); background: var(--crm-tint); display: grid; place-items: center;
}
.crm-trigger__ico svg {
  width: calc(19 * var(--u)); height: calc(19 * var(--u));
  fill: none; stroke: var(--crm-accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.crm-trigger__date { font-size: calc(9.5 * var(--u)); font-weight: 600; color: var(--crm-muted); }
.crm-trigger__txt  { font-size: calc(11 * var(--u)); font-weight: 600; line-height: 1.35; }

/* étiquette posée sur le trait */
.crm-tag {
  position: absolute; left: calc(318 * var(--u)); top: calc(30 * var(--u));
  height: calc(24 * var(--u)); box-sizing: border-box; background: #fff;
  border: 1.5px solid var(--crm-edge); border-radius: calc(8 * var(--u));
  padding: 0 calc(9 * var(--u)); display: flex; align-items: center; gap: calc(5 * var(--u));
  font-size: calc(9.5 * var(--u)); font-weight: 800; letter-spacing: 0.08em; white-space: nowrap;
}
.crm-tag em { font-style: normal; color: var(--crm-accent); }

/* fenêtre produit */
.crm-win {
  position: absolute; left: calc(190 * var(--u)); top: calc(108 * var(--u));
  width: calc(544 * var(--u)); height: calc(468 * var(--u)); box-sizing: border-box;
  background: #fff; border: 1.5px solid var(--crm-edge); border-radius: calc(16 * var(--u));
  overflow: hidden; display: flex; flex-direction: column;
}
.crm-win__bar {
  height: calc(34 * var(--u)); flex-shrink: 0; border-bottom: 1.5px solid var(--crm-edge);
  display: flex; align-items: center; gap: calc(6 * var(--u)); padding: 0 calc(14 * var(--u));
}
.crm-win__bar i {
  width: calc(9 * var(--u)); height: calc(9 * var(--u)); box-sizing: border-box;
  border-radius: 50%; border: 1.5px solid var(--crm-edge);
}
.crm-win__body {
  flex-grow: 1; min-height: 0; padding: calc(14 * var(--u));
  display: flex; flex-direction: column; gap: calc(12 * var(--u));
}

/* filtres d'étape */
.crm-tabs {
  align-self: flex-start; box-sizing: border-box; height: calc(36 * var(--u));
  border: 1px solid var(--crm-line); border-radius: calc(11 * var(--u));
  padding: calc(4 * var(--u)); display: flex; align-items: center; gap: calc(4 * var(--u));
}
.crm-tab {
  height: calc(28 * var(--u)); border-radius: calc(8 * var(--u));
  padding: 0 calc(11 * var(--u)); display: flex; align-items: center; gap: calc(6 * var(--u));
  font-size: calc(10.5 * var(--u)); font-weight: 600; color: var(--crm-muted); white-space: nowrap;
}
.crm-tab b { font-weight: 600; color: #A6B1AC; }
.crm-tab--on { background: var(--crm-edge); color: #fff; font-weight: 700; }
.crm-tab--on b { color: rgba(255,255,255,0.6); }
.crm-tab--on s {
  width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%; background: #4ADE80;
}

/* kanban */
.crm-row { flex-grow: 1; min-height: 0; display: flex; gap: calc(14 * var(--u)); }
.crm-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
.crm-col__h { display: flex; align-items: center; justify-content: space-between; }
.crm-col__t { font-size: calc(11 * var(--u)); font-weight: 800; letter-spacing: 0.05em; }
.crm-badge {
  height: calc(17 * var(--u)); border-radius: 999px; background: var(--crm-tint); color: var(--crm-accent);
  font-size: calc(9 * var(--u)); font-weight: 700; padding: 0 calc(7 * var(--u));
  display: grid; place-items: center;
}
.crm-card {
  box-sizing: border-box; border: 1px solid var(--crm-line); border-radius: calc(10 * var(--u));
  padding: calc(9 * var(--u)); display: flex; flex-direction: column; gap: calc(6 * var(--u));
}
.crm-card--on { border: 1.5px solid var(--crm-accent); }
.crm-card__top { display: flex; align-items: center; gap: calc(7 * var(--u)); min-width: 0; }
.crm-av {
  width: calc(20 * var(--u)); height: calc(20 * var(--u)); flex-shrink: 0; border-radius: 50%;
  background: var(--crm-tint); color: var(--crm-accent);
  font-size: calc(8.5 * var(--u)); font-weight: 800; display: grid; place-items: center;
}
.crm-av--on { background: var(--crm-accent); color: #fff; }
.crm-nm { font-size: calc(10 * var(--u)); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-card__bot { display: flex; align-items: center; justify-content: space-between; gap: calc(6 * var(--u)); }
.crm-meta { font-size: calc(9 * var(--u)); font-weight: 500; color: var(--crm-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-meta--on { color: var(--crm-accent); font-weight: 600; }
.crm-amt { font-size: calc(10 * var(--u)); font-weight: 700; color: var(--crm-accent); white-space: nowrap; }
.crm-add {
  height: calc(28 * var(--u)); flex-shrink: 0; border: 1px dashed #D8E0DB; border-radius: calc(10 * var(--u));
  display: flex; align-items: center; justify-content: center; gap: calc(5 * var(--u));
  font-size: calc(9.5 * var(--u)); font-weight: 600; color: #93A19B;
}
.crm-add svg {
  width: calc(11 * var(--u)); height: calc(11 * var(--u));
  fill: none; stroke: #93A19B; stroke-width: 2.2; stroke-linecap: round;
}

/* agenda */
.crm-agenda {
  width: calc(160 * var(--u)); flex-shrink: 0; box-sizing: border-box;
  border: 1px solid var(--crm-line); border-radius: calc(12 * var(--u));
  padding: calc(11 * var(--u)); display: flex; flex-direction: column; gap: calc(10 * var(--u));
}
.crm-eyebrow { font-size: calc(8 * var(--u)); font-weight: 800; letter-spacing: 0.14em; color: var(--crm-accent); }
.crm-agenda__t { font-size: calc(11.5 * var(--u)); font-weight: 700; }
.crm-tl { position: relative; display: flex; flex-direction: column; gap: calc(10 * var(--u)); }
.crm-tl__rail {
  position: absolute; left: calc(5 * var(--u)); top: calc(7 * var(--u)); bottom: calc(7 * var(--u));
  width: 1px; background: var(--crm-line);
}
.crm-ev { display: flex; gap: calc(9 * var(--u)); position: relative; }
.crm-ev i {
  width: calc(11 * var(--u)); height: calc(11 * var(--u)); flex-shrink: 0; margin-top: calc(2 * var(--u));
  border-radius: 50%; border: 2px solid var(--crm-accent); background: #fff; box-sizing: border-box;
}
.crm-ev--now i { background: var(--crm-accent); }
.crm-ev--free i { border: 2px dashed #C9D2CD; }
.crm-ev__c { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.crm-ev__h { font-size: calc(8.5 * var(--u)); font-weight: 700; color: var(--crm-accent); }
.crm-ev__s { font-size: calc(8.5 * var(--u)); font-weight: 500; color: var(--crm-muted); }
.crm-ev--free .crm-ev__h, .crm-ev--free .crm-ev__s { color: #A6B1AC; }
.crm-ev--free .crm-nm { color: #8A9791; }
.crm-visio {
  margin-top: auto; background: #F4F8F5; border-radius: calc(9 * var(--u));
  padding: calc(9 * var(--u)); display: flex; align-items: center; gap: calc(8 * var(--u));
}
.crm-visio__i {
  width: calc(26 * var(--u)); height: calc(26 * var(--u)); flex-shrink: 0;
  border-radius: calc(7 * var(--u)); background: var(--crm-edge); display: grid; place-items: center;
}
.crm-visio__i svg {
  width: calc(13 * var(--u)); height: calc(13 * var(--u));
  fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.crm-visio__a { font-size: calc(9.5 * var(--u)); font-weight: 700; white-space: nowrap; }
.crm-visio__b { font-size: calc(8.5 * var(--u)); font-weight: 500; color: var(--crm-muted); white-space: nowrap; }

/* bandeau revenu */
.crm-band {
  height: calc(126 * var(--u)); flex-shrink: 0; box-sizing: border-box;
  border: 1px solid var(--crm-line); border-radius: calc(12 * var(--u));
  padding: calc(13 * var(--u)) calc(15 * var(--u)); display: flex; gap: calc(16 * var(--u));
}
.crm-band__l {
  width: calc(160 * var(--u)); flex-shrink: 0;
  display: flex; flex-direction: column; justify-content: center; gap: calc(2 * var(--u));
}
.crm-band__t { font-size: calc(11.5 * var(--u)); font-weight: 700; }
.crm-hero {
  font-size: calc(23 * var(--u)); font-weight: 800; letter-spacing: -0.025em;
  line-height: 1.15; margin-top: calc(2 * var(--u));
}
.crm-delta {
  margin-top: calc(5 * var(--u)); align-self: flex-start; display: flex; align-items: center;
  gap: calc(5 * var(--u)); background: var(--crm-tint); color: var(--crm-edge);
  border-radius: 999px; padding: calc(3 * var(--u)) calc(8 * var(--u));
  font-size: calc(8.5 * var(--u)); font-weight: 700; white-space: nowrap;
}
.crm-delta svg {
  width: calc(10 * var(--u)); height: calc(10 * var(--u));
  fill: none; stroke: var(--crm-edge); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
}
.crm-band__r { flex-grow: 1; min-width: 0; display: flex; align-items: center; }
.crm-band__r svg { display: block; width: 100%; }

/* pastilles d'annotation */
.crm-pill {
  position: absolute; box-sizing: border-box; background: #fff;
  border: 1.5px solid var(--crm-edge); border-radius: calc(12 * var(--u));
  padding: calc(9 * var(--u)) calc(12 * var(--u)) calc(9 * var(--u)) calc(9 * var(--u));
  display: flex; align-items: center; gap: calc(9 * var(--u));
}
.crm-pill__i {
  width: calc(28 * var(--u)); height: calc(28 * var(--u)); flex-shrink: 0;
  border-radius: calc(8 * var(--u)); background: var(--crm-tint); display: grid; place-items: center;
}
.crm-pill__i svg {
  width: calc(16 * var(--u)); height: calc(16 * var(--u));
  fill: none; stroke: var(--crm-accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.crm-pill__t { font-size: calc(10.5 * var(--u)); font-weight: 600; line-height: 1.35; }
.crm-pill--top { left: calc(320 * var(--u)); top: calc(84 * var(--u));  width: calc(190 * var(--u)); }
.crm-pill--a   { left: 0; top: calc(200 * var(--u)); width: calc(160 * var(--u)); }
.crm-pill--b   { left: 0; top: calc(292 * var(--u)); width: calc(160 * var(--u)); }
.crm-pill--c   { left: 0; top: calc(384 * var(--u)); width: calc(160 * var(--u)); }

/* ═══ INTÉGRATION AU SITE ═══════════════════════════════════════════════════
   Mêmes réglages que les deux premiers volets, pour que les trois se
   ressemblent quand le visuel bascule au défilement.

   Rien à aligner ici : les trois pastilles d'annotation partagent déjà un
   bord gauche (0) et une largeur (160). Le bloc est aussi le seul des trois
   à ne demander aucune image. */

/* ─── Traits et contours à l'encre ──────────────────────────────────────────
   Les fils étaient verts et les contours en #0B3B2C, un vert très sombre.
   Ils passent à l'encre du site, comme sur les deux autres schémas.

   `--crm-line`, en revanche, RESTE pâle : ce jeton ne dessine pas les
   contours extérieurs mais les filets INTERNES du tableau de bord — cartes
   du pipeline, onglets, agenda, bandeau. Les noircir surchargerait une zone
   déjà dense et ferait perdre la hiérarchie entre le cadre et son contenu. */
.crm-schema { --crm-edge: #171918; }
.crm-wires g { stroke: #171918 !important; }

/* Le vert reste où il porte du sens : les chiffres, les états, la carte
   « Contrat signé », la courbe du prévisionnel, les pastilles d'icônes. */

/* ─── Calage dans la colonne ────────────────────────────────────────────────
   Même plancher et même plafond que les deux autres. */
.sticky-feature-visual .crm-schema { --crm-umin: 0.73px; --crm-max: 860px; }

/* ─── Calage vertical ───────────────────────────────────────────────────────
   Mesuré : 10 px de marge en haut, -28 en bas — le dessin fait 452 px dans
   un cadre de 434, il dépasse donc par le bas. On le remonte de 19 px pour
   répartir l'écart, soit 3,9 % de la hauteur du bloc.

   Exprimé en POURCENTAGE DE LA HAUTEUR, jamais avec `var(--u)` : cette
   variable contient `100cqw`, qui se résout sur un ancêtre quand on l'emploie
   sur l'élément conteneur lui-même et donne une valeur trois fois trop grande.

   Centré plutôt que calé en haut : dans une section à visuel épinglé le texte
   défile pendant que le schéma reste, donc un dessin centré tient à tous les
   moments du défilement — et rien ne peut passer derrière la barre de
   navigation, ce qui était arrivé au deuxième volet. */
@media (min-width: 1000px) {
  .sticky-feature-visual .crm-schema { transform: translateY(-3.9%); }
}