/* ============================================================================
   Schéma « prospection par formulaire » — bloc autonome intégré le 2026-08-21.
   Remplace home-form-outbound-diagram-v7.svg dans le DEUXIÈ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).
   ========================================================================== */

.pro-schema {
  /* ---- réglages ---- */
  --pro-accent: #15803D;
  --pro-dark:   #0B3B2C;
  --pro-tint:   #D8EFD2;
  --pro-ink:    #0F1F19;
  --pro-muted:  #6B7C74;
  --pro-line:   #E4EBE7;
  --pro-wire:   #D6E0DA;
  --pro-font:   inherit;
  --pro-max:    760px;
  --pro-umin:   0.78px;   /* plancher de lisibilité, cf. schéma 1 */

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

.pro-stage { position: relative; width: calc(760 * var(--u)); height: calc(600 * var(--u)); }

.pro-halo {
  position: absolute; left: calc(250 * var(--u)); top: calc(110 * var(--u));
  width: calc(400 * var(--u)); height: calc(360 * var(--u));
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 45%, var(--pro-tint), rgba(255,255,255,0) 70%);
  filter: blur(calc(20 * var(--u)));
}

.pro-wires { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }

.pro-photo {
  position: absolute; left: calc(228 * var(--u)); top: calc(150 * var(--u));
  width: calc(204 * var(--u)); height: calc(252 * var(--u));
  border-radius: calc(18 * var(--u)); overflow: hidden;
}
.pro-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* mockup du formulaire */
.pro-form {
  position: absolute; left: calc(396 * var(--u)); top: calc(104 * var(--u));
  width: calc(234 * var(--u)); height: calc(320 * var(--u)); box-sizing: border-box;
  background: #fff; border: 1px solid var(--pro-line);
  border-radius: calc(16 * var(--u)); overflow: hidden;
  display: flex; flex-direction: column;
}
.pro-form__bar {
  height: calc(52 * var(--u)); flex-shrink: 0; background: var(--pro-dark);
  padding: 0 calc(16 * var(--u)); display: flex; align-items: center; gap: calc(9 * var(--u));
}
.pro-form__bar svg {
  width: calc(16 * var(--u)); height: calc(16 * var(--u)); flex-shrink: 0;
  fill: none; stroke: rgba(255,255,255,0.7); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.pro-form__host { font-size: calc(13.5 * var(--u)); font-weight: 700; color: #fff; letter-spacing: -0.01em; }
.pro-form__body {
  flex-grow: 1; padding: calc(14 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u));
  display: flex; flex-direction: column; gap: calc(10 * var(--u));
}
.pro-field { display: flex; flex-direction: column; gap: calc(4 * var(--u)); }
.pro-field__label { font-size: calc(9.5 * var(--u)); font-weight: 600; color: var(--pro-muted); }
.pro-field__box {
  border: 1px solid var(--pro-line); border-radius: calc(8 * var(--u));
  padding: calc(7 * var(--u)) calc(9 * var(--u));
  font-size: calc(10.5 * var(--u)); font-weight: 500;
}
.pro-field--msg { flex-grow: 1; }
.pro-field--msg .pro-field__label { color: var(--pro-accent); }
.pro-field--msg .pro-field__box {
  flex-grow: 1; border: 1.5px solid var(--pro-accent); background: #F2FAF0;
  padding: calc(8 * var(--u)) calc(9 * var(--u));
  font-size: calc(10 * var(--u)); line-height: 1.5; color: #35473F;
}
.pro-form__submit {
  height: calc(34 * var(--u)); flex-shrink: 0; border-radius: calc(8 * var(--u));
  background: var(--pro-dark); display: grid; place-items: center;
  font-size: calc(11.5 * var(--u)); font-weight: 700; letter-spacing: 0.04em; color: #fff;
}

/* pastilles */
.pro-chip {
  position: absolute; display: flex; align-items: center; gap: calc(10 * var(--u));
  box-sizing: border-box; background: #fff;
  border: 1px solid var(--pro-line); border-radius: calc(12 * var(--u));
  padding: calc(10 * var(--u)) calc(14 * var(--u)) calc(10 * var(--u)) calc(10 * var(--u));
  white-space: nowrap;
}
.pro-chip__icon {
  width: calc(32 * var(--u)); height: calc(32 * var(--u)); flex-shrink: 0;
  border-radius: calc(9 * var(--u)); background: var(--pro-tint);
  display: grid; place-items: center;
}
.pro-chip__icon svg {
  width: calc(18 * var(--u)); height: calc(18 * var(--u));
  fill: none; stroke: var(--pro-accent); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.pro-chip__text { display: flex; flex-direction: column; gap: calc(2 * var(--u)); }
.pro-chip__label { font-size: calc(13.5 * var(--u)); font-weight: 600; line-height: 1.2; }
.pro-chip__sub   { font-size: calc(11 * var(--u)); font-weight: 500; color: var(--pro-muted); }

.pro-in-1 { right: calc(564 * var(--u)); top: calc(103 * var(--u)); height: calc(58 * var(--u)); }
.pro-in-2 { right: calc(576 * var(--u)); top: calc(187 * var(--u)); height: calc(58 * var(--u)); }
.pro-in-3 { right: calc(568 * var(--u)); top: calc(271 * var(--u)); height: calc(58 * var(--u)); }

.pro-detected {
  left: calc(316 * var(--u)); top: calc(58 * var(--u)); height: calc(56 * var(--u));
  border: 1.5px solid var(--pro-accent); border-radius: calc(14 * var(--u));
  padding: calc(12 * var(--u)) calc(14 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u));
  gap: calc(11 * var(--u));
}
.pro-detected .pro-chip__label { font-weight: 700; }
.pro-detected .pro-chip__sub { font-weight: 600; color: var(--pro-accent); }

.pro-cursor {
  position: absolute; left: calc(304 * var(--u)); top: calc(94 * var(--u));
  width: calc(19 * var(--u)); height: calc(21 * var(--u));
}

/* branche abandonnée */
.pro-dead {
  left: calc(240 * var(--u)); top: calc(494 * var(--u)); height: calc(58 * var(--u));
  background: #FCFDFC; border: 1px dashed #D6DEDA;
}
.pro-dead .pro-chip__icon { background: #EEF1EF; }
.pro-dead .pro-chip__icon svg { stroke: #9AA8A2; }
.pro-dead .pro-chip__label { color: #8A9791; }
.pro-dead .pro-chip__sub { color: #A6B1AC; }

.pro-out { left: calc(460 * var(--u)); top: calc(494 * var(--u)); width: calc(210 * var(--u)); height: calc(58 * var(--u)); }

.pro-done {
  position: absolute; left: calc(690 * var(--u)); top: calc(501 * var(--u));
  width: calc(44 * var(--u)); height: calc(44 * var(--u)); box-sizing: border-box;
  border: 3px solid var(--pro-accent); border-radius: 50%;
  display: grid; place-items: center;
}
.pro-done svg {
  width: calc(20 * var(--u)); height: calc(20 * var(--u));
  fill: none; stroke: var(--pro-accent); stroke-width: 2.6;
  stroke-linecap: round; stroke-linejoin: round;
}

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

/* ─── Alignement des pastilles ──────────────────────────────────────────────
   Ancrées par leur bord DROIT à des valeurs différentes (564, 576, 568), donc
   ni les gauches ni les droites ne tombaient au même endroit. Bord gauche et
   largeur communs : les deux côtés s'alignent. */
/* Geometrie plus serree que le premier volet : le tronc du circuit est a 212
   et la photo commence a 228, contre 234 et 258. Le bord droit se cale donc a
   196 — la ou part deja le premier fil — et la largeur (186) est mesuree sur
   le libelle le plus long, « Structure analysee », qui reclame 183. */
.pro-in-1, .pro-in-2, .pro-in-3 {
  left: calc(10 * var(--u));
  right: auto;
  width: calc(186 * var(--u));
}

/* ─── Traits et bordures à l'encre ──────────────────────────────────────────
   #D6E0DA et #E4EBE7 étaient trop pâles pour dessiner quoi que ce soit.

   TROIS EXCEPTIONS, chacune porteuse de sens :
     - la pastille « Formulaire détecté » garde son vert : c'est le moment clé ;
     - le champ « Message adapté » garde le sien : c'est ce qu'Erekio écrit ;
     - la branche « Email à froid » reste GRISE ET POINTILLÉE. C'est la voie
       qui échoue ; la noircir la mettrait au même rang que la voie qui marche,
       et le schéma perdrait sa démonstration. */
.pro-schema { --pro-line: #171918; }
.pro-wires g { stroke: #171918 !important; }
.pro-photo { border: 1px solid #171918; box-sizing: border-box; }
.pro-form { border-color: #171918 !important; }
.pro-form__bar { border-bottom: 1px solid #171918; }

/* La branche abandonnée conserve son traitement effacé. */
.pro-dead { border-color: #C9D2CD !important; }

/* ─── Calage dans la colonne ────────────────────────────────────────────────
   Même plancher et même plafond que le premier schéma, pour que les deux
   occupent exactement la même place. */
.sticky-feature-visual .pro-schema { --pro-umin: 0.73px; --pro-max: 860px; }

/* ─── Calage vertical ───────────────────────────────────────────────────────
   ERREUR CORRIGEE : j avais aligne la PREMIERE PASTILLE des deux volets. Mais
   celui-ci a un element plus haut qu elle — « Formulaire detecte », a 58
   unites contre 86 pour la pastille. Le decalage l a donc pousse 65 px
   au-dessus de son conteneur, derriere la barre de navigation : la pastille
   qui porte le moment cle du schema avait disparu.

   On aligne desormais l ELEMENT LE PLUS HAUT de chaque volet, pas un element
   choisi au hasard. Volet 1 : sommet a 86, decale de 122,4, soit -36,4.
   Volet 2 : le calcul donnait 15,7 %, la mesure sur le rendu a montre 22 px
   d ecart residuel — valeur retenue : 5,7 %. Le dessin est CENTRE dans son cadre (marges mesurees
   1 px en haut, 37 en bas -> descendre de 18) plutot que cale en haut : dans
   une section a visuel epingle, le texte defile et le schema reste, donc un
   dessin centre tient a tous les moments du defilement.

   Toujours en pourcentage de hauteur, jamais avec `var(--u)` : cette
   variable contient `100cqw`, qui se resout sur un ancetre quand on l emploie
   sur l element conteneur lui-meme. */
@media (min-width: 1000px) {
  .sticky-feature-visual .pro-schema { transform: translateY(-5.7%); }
}