/* ==========================================================================
   CANINOVA — ESPACE PRO (page-pro.php)
   Accueil du côté professionnel, maquette Pro.dc.html.

   Ne pas confondre avec pages/pro.css, qui sert la page Consulting.
   Cartes, boutons, pastilles, formulaire et fonds viennent du socle et des
   composants ; ce fichier ne porte que ce qui est propre à la page.
   ========================================================================== */

/* Fond pro : le vert du bandeau de la maquette (#0B3B37), plus sombre que
   le vert profond des sections grand public. */
.cn-espace-pro__hero,
.cn-espace-pro__idees {
  background: var(--cn-teal-deep);
}

.cn-espace-pro .cn-section-head {
  margin-bottom: 32px;
}

/* ==========================================================================
   HÉRO
   ========================================================================== */

.cn-espace-pro__chip {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.4;
  white-space: normal;
}

.cn-espace-pro__title {
  margin-top: 18px;
  max-width: 16em;
  color: var(--cn-cream);
  text-wrap: balance;
}

.cn-espace-pro__ratio {
  aspect-ratio: 4 / 3;
}

.cn-espace-pro__hero-media {
  border: 1px solid rgba(244, 238, 227, 0.14);
}

/* ==========================================================================
   POURQUOI SE FORMER AVEC NOUS
   ========================================================================== */

.cn-espace-pro__band {
  border-bottom: 1px solid var(--cn-border);
}

.cn-espace-pro__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 14px;
  border-radius: 10px;
  background: var(--cn-teal-soft);
  color: var(--cn-teal);
}

.cn-espace-pro__icon svg {
  width: 20px;
  height: 20px;
}

/* ==========================================================================
   FORMATS ET MODULES
   ========================================================================== */

.cn-espace-pro__format .cn-btn--arrow,
.cn-espace-pro__module-link {
  align-self: flex-start;
  margin-top: 16px;
  color: var(--cn-teal);
  font-weight: 600;
}

.cn-espace-pro__module {
  padding: 24px;
}

.cn-espace-pro__module-meta {
  color: var(--cn-teal);
  font-weight: 700;
}

/* ==========================================================================
   APPEL FINAL
   ========================================================================== */

.cn-espace-pro__cta-actions {
  justify-content: center;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 700px) {
  .cn-espace-pro__title {
    max-width: none;
  }

  .cn-espace-pro .cn-section-head {
    margin-bottom: 24px;
  }
}