/* Rulezz Connect V1.0.1 – correctifs de collision avec le CSS global de Rulezz.
   Uniquement dans le main de Rulezz Connect, jamais dans le header ou le footer. */
main.rzconnect-page .hero{
  width:100%;max-width:none;padding:0;margin:0;
}
main.rzconnect-page .step{
  display:block;grid-template-columns:none;grid-auto-flow:row;
  margin:0;border:1px solid var(--line);
}
main.rzconnect-page .compare-card.premium{
  display:block;align-items:initial;justify-content:initial;
  gap:0;margin:0;
}
main.rzconnect-page .compare-card.premium .plan-title,
main.rzconnect-page .compare-card.premium .features{
  display:flex;
}
main.rzconnect-page .compare-card.premium .features{flex-direction:column}
main.rzconnect-page .compare-card.premium h3{color:#fff}
/* Ne pas hériter des séparateurs de la FAQ globale. */
main.rzconnect-page .faq{border-top:0}
/* Le SVG de démonstration reste à sa place même avec le CSS global. */
main.rzconnect-page .hero-art{min-width:0}
@media(max-width:630px){
  main.rzconnect-page .step{
    display:grid;grid-template-columns:52px minmax(0,1fr);
    grid-template-rows:auto auto;column-gap:15px;
  }
  main.rzconnect-page .step .step-icon{grid-column:1;grid-row:1 / span 2}
  main.rzconnect-page .step h3{grid-column:2;grid-row:1}
  main.rzconnect-page .step p{grid-column:2;grid-row:2}
  main.rzconnect-page .compare-card.premium{margin:0}
  main.rzconnect-page .usecase-right{min-height:292px}
}

/* V1.0.2 — Contraste du seul bouton « Comment ça marche ».
   Le bouton jaune, les fonds et tous les autres composants restent inchangés. */
main.rzconnect-page .hero .hero-actions a.btn.transparent,
main.rzconnect-page .hero .hero-actions a.btn.transparent:hover,
main.rzconnect-page .hero .hero-actions a.btn.transparent:focus-visible {
  color: #fff !important;
}
main.rzconnect-page .hero .hero-actions a.btn.transparent .ic {
  color: #fff !important;
  stroke: currentColor;
}