/* ============================================================
   Espace professionnels.

   La seule page du site sombre à gauche : la preuve sur fond encre,
   le formulaire sur papier. C'est la porte séparée que demande
   PRODUCT.md, visible sans envahir le parcours grand public.

   La colonne encre reste franche. Ce qu'on manipule, les entrées par
   type de structure et le formulaire, prend le langage de l'outil de
   mesure (size-finder.css) : capsules, feuille blanche arrondie à 16 px
   posée sur le papier teinté.
   ============================================================ */

.pro-page { background: var(--paper); }

.pro-page__grid {
  --gutter: max(24px, calc((100vw - var(--max)) / 2));
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: stretch;
}

.pro-page__proof {
  background: var(--ink);
  color: var(--paper);
}

.pro-page__proof-inner {
  max-width: 520px;
  margin-left: auto;
  padding: var(--space-section) clamp(28px, 4vw, 64px) var(--space-section) var(--gutter);
  box-sizing: content-box;
}

.pro-page__proof h1 {
  margin: 0 0 22px;
}

.pro-page__lead {
  max-width: 44ch;
  margin: 0;
  color: var(--paper);
  font-size: 1.12rem;
  line-height: 1.55;
}

.pro-page__licence {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 34px 0 0;
  padding: 16px 0;
  border-block: 1px solid color-mix(in srgb, var(--paper) 22%, transparent);
  font-weight: 700;
  line-height: 1.4;
}

.pro-page__licence-mark {
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--accent);
}

/* ---------- Entrées par type de structure ---------- */

.pro-path { margin-top: 30px; }

.pro-path__title {
  margin: 0 0 10px;
  color: color-mix(in srgb, var(--paper) 84%, var(--ink));
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.pro-path__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Capsules claires sur l'encre (.capsule--on-ink, instrument.css). */
.pro-path__link { padding: 0 18px; }

/* Preuve de distribution : la photo du présentoir en boutique de club.
   Angles nets, légende factuelle sous un filet, sans cadre ni ombre. */
.pro-page__display {
  margin: 34px 0 0;
}

.pro-page__display img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
}

.pro-page__display figcaption {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--paper) 22%, transparent);
  color: color-mix(in srgb, var(--paper) 84%, var(--ink));
  font-size: .92rem;
  line-height: 1.45;
}

.pro-page__subtitle {
  margin: 44px 0 16px;
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: 1.05;
  text-transform: uppercase;
}

.pro-page__cases {
  display: grid;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pro-page__cases li {
  padding-left: 16px;
  border-left: 3px solid var(--accent);
}

.pro-page__cases h3 {
  margin: 0 0 4px;
  font-family: Barlow, Arial, sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.3;
}

.pro-page__cases p,
.pro-page__contact p {
  max-width: 48ch;
  margin: 0;
  color: color-mix(in srgb, var(--paper) 84%, var(--ink));
  line-height: 1.55;
}

.pro-page__contact p + p { margin-top: 10px; }

.pro-page__person { display: grid; gap: 2px; }
.pro-page__person strong { color: var(--paper); font-size: 1.1rem; }

.pro-page__contact .pro-page__delay {
  color: var(--paper);
  font-weight: 700;
}

/* ---------- Formulaire ---------- */

.pro-page__form { background: var(--surface-sunken); }

.pro-page__form-inner {
  max-width: 720px;
  padding: var(--space-section) var(--gutter) var(--space-section) clamp(28px, 5vw, 80px);
  box-sizing: content-box;
}

.pro-page__form-title {
  scroll-margin-top: 96px;
  margin: 0 0 12px;
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.02em;
  text-transform: uppercase;
}

.pro-page__form-title:focus { outline: none; }

.pro-page__form-note {
  max-width: 58ch;
  margin: 0 0 24px;
  color: var(--ink-70);
  line-height: 1.55;
}

/* Le formulaire, feuille (.sheet) posée sur le papier teinté. */
.pro-page__sheet { padding: clamp(20px, 3vw, 36px); }

.pro-page__elsewhere {
  display: grid;
  gap: 6px;
  margin: 28px 0 0;
  padding: 0 4px;
  list-style: none;
  color: var(--ink-70);
}

.pro-page__elsewhere a {
  display: inline-block;
  padding-block: 3px;
  color: var(--ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Déroulé et tailles ---------- */

.pro-steps {
  padding-block: var(--space-section-tight);
  border-top: 1px solid var(--ink-12);
}

.pro-steps__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}

.pro-steps h2 {
  margin: 0 0 24px;
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: 1.05;
  text-transform: uppercase;
}

/* Une vraie séquence : les numéros sont ceux de la liste ordonnée. */
.pro-steps__list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.pro-steps__list li {
  display: grid;
  grid-template-columns: 44px 1fr;
  column-gap: 14px;
  padding: 16px 0;
  border-top: 1px solid var(--ink-12);
  counter-increment: step;
}

.pro-steps__list li::before {
  content: counter(step);
  grid-row: span 2;
  font-family: 'Barlow Condensed', Arial, sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.1;
}

.pro-steps__list h3 {
  margin: 0;
  font-family: Barlow, Arial, sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.4;
}

.pro-steps__list p {
  grid-column: 2;
  margin: 4px 0 0;
  color: var(--ink-70);
  line-height: 1.55;
}

.pro-steps__aside {
  padding: 26px 28px;
  background: var(--surface-sunken);
}

.pro-steps__aside p { max-width: 52ch; margin: 0; line-height: 1.6; }
.pro-steps__aside .rte { margin-top: 18px; }

@media (max-width: 950px) {
  .pro-page__grid,
  .pro-steps__grid { grid-template-columns: 1fr; }

  .pro-page__proof-inner,
  .pro-page__form-inner {
    max-width: none;
    margin: 0;
    padding: 56px 18px;
    box-sizing: border-box;
  }

  .pro-page__subtitle { margin-top: 34px; }
}

@media (max-width: 550px) {
  .pro-page__proof-inner,
  .pro-page__form-inner { padding-inline: 15px; }
  .pro-page__sheet { padding: 22px 16px; }
}