/* Processus d'Inscription styles
 * BEM-like classes prefixed with 'processus-'
 * Developer notes: color variables can be adapted to the theme. This stylesheet is enqueued only
 * when the 'Processus d\'Inscription' template is used.
 */

:root {
  --processus-bg: #f4f8ff; /* very pale bluish white */
  --processus-surface: #ffffff;
  --processus-primary: #1E40AF; /* primary blue */
  --processus-accent: #1552d1;
  --processus-text: #0f1724;
  --processus-muted: #64748b;
  --processus-radius: 12px;
}

.processus-page { background: var(--processus-bg); color: var(--processus-text); font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; }
.processus-page .container { max-width: 1200px; margin: 0 auto; padding: 28px 20px; }

/* Hero */
.processus-hero { padding: 48px 0; }
.processus-hero__inner { display: flex; gap: 32px; align-items: center; }
.processus-hero__content { flex: 1 1 52%; text-align: left; }
.processus-hero__kicker { display: inline-block; color: var(--processus-primary); font-weight: 600; margin-bottom: 8px; }
.processus-hero__title { font-size: clamp(1.6rem, 2.6vw, 2.6rem); margin: 6px 0 12px; font-weight: 700; }
.processus-hero__lede { color: var(--processus-muted); margin-bottom: 18px; max-width: 60ch; }
.processus-hero__actions { display:flex; gap: 12px; align-items:center; }
.processus-hero__visual { flex: 1 1 40%; display:flex; justify-content:center; }
.processus-hero__visual img { max-width: 420px; width:100%; height:auto; border-radius: 10px; box-shadow: 0 12px 30px rgba(15,23,36,0.06); }

/* Steps grid */
.processus-steps {
  padding: 18px 0 40px;
  /* Safety: prevent accidental horizontal swipe/scroll inside this section */
  overflow-x: hidden;
}
.processus-steps__grid {
  display: grid;
  /* Use auto-fit + minmax so cards wrap naturally and never force horizontal scrolling.
     min width ~300px ensures cards remain readable on small viewports. */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
  align-items: stretch;
}
.processus-step {
  background: var(--processus-surface);
  border-radius: var(--processus-radius);
  padding: 22px;
  box-shadow: 0 8px 24px rgba(15,23,36,0.06);
  display: flex;
  flex-direction: column; /* vertical stacking so CTA can anchor to bottom */
  justify-content: space-between;
  gap: 12px;
  min-height: 260px;
  box-sizing: border-box; /* ensure padding doesn't cause overflow */
  overflow: hidden; /* prevents hover transforms from creating scrollbars */
  position: relative;
  /* Allow grid to size cards but keep internal flex behavior consistent */
  width: 100%;
}
.processus-step__icon { font-size: 34px; color: var(--processus-primary); transition: transform 260ms ease, filter 260ms ease; }
.processus-step__icon:hover { transform: translateY(-4px) rotate(-4deg); }
.processus-step__title {
  /* Title: clamp to 2 lines so cards reserve the same vertical space. */
  font-size: 1.125rem;
  margin: 0;
  font-weight: 700;
  line-height: 1.3;
  display: -webkit-box;       /* WebKit multi-line clamp */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  /* standard property when supported */
  line-clamp: 2;
  overflow: hidden;
  hyphens: auto;
  word-break: break-word;
  /* Reserve ~2 lines + small gap so cards keep a consistent title block height */
  min-height: calc(1.3em * 2 + 0.5rem);
}

.processus-step__text {
  /* Body: clamp to 3 lines visually, and let it flex to keep vertical rhythm. */
  color: var(--processus-muted);
  margin: 0;
  font-size: 0.975rem;
  line-height: 1.5;
  display: -webkit-box;       /* WebKit multi-line clamp */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  /* standard property when supported */
  line-clamp: 3;
  overflow: hidden;
  /* allow the body to grow/shrink inside the vertical flex layout */
  flex: 1 1 auto;
  max-width: 36ch;
}

.processus-step__btn {
  /* Anchor CTA area to the bottom of the card. margin-top:auto pushes it down while
     keeping the existing card size/structure unchanged. */
  margin-top: auto;
  text-align: center;
}

/* Ensure consistent title alignment across cards */
.processus-step { align-items: flex-start; }

/* Modern gradient buttons for processus */
/* Make .btn-processus (page-scoped) share the exact same modern pill styles as .processus-btn.
  Using the `.processus-page .btn-processus` selector keeps specificity local to this page
  so global `.btn` rules elsewhere remain unaffected. */
.processus-page .btn-processus,
.processus-btn {
  /* Match front-page pill CTA (.cta-hero--pill / .cta-hero) for visual consistency
     Uses the same cool blue gradient, pill radius and tactile sizing. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 24px;
  min-width: 220px;
  background: linear-gradient(180deg, #1e3a8a 0%, #2f80ed 100%); /* same as .cta-hero */
  color: #ffffff;
  border-radius: 9999px; /* pill */
  border: 1px solid rgba(255,255,255,0.14);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: transform 220ms cubic-bezier(0.4,0,0.2,1), box-shadow 220ms ease;
  white-space: nowrap; /* prevent CTA text wrapping */
  min-height: 44px; /* touch target */
  box-shadow: 0 10px 30px rgba(16,40,90,0.12);
  text-decoration: none;
  overflow: hidden; /* ensure pseudo-element/hover glow doesn't cause scroll */
}
.processus-page .btn-processus:hover,
.processus-btn:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 28px 60px rgba(31,80,190,0.12), 0 6px 18px rgba(0,0,0,0.06);
}
.processus-page .btn-processus:active,
.processus-btn:active {
  transform: translateY(0) scale(0.97);
}
.processus-page .btn-processus:focus,
.processus-btn:focus {
  outline: none;
  box-shadow: 0 0 0 6px rgba(31,80,190,0.12), 0 18px 40px rgba(31,80,190,0.08);
}
.processus-page .btn-processus__arrow,
.processus-btn__arrow { transition: transform 220ms ease; }
.processus-page .btn-processus:hover .btn-processus__arrow,
.processus-btn:hover .processus-btn__arrow { transform: translateX(6px); }

/* Icon sizing consistency */
.processus-step__icon i, .processus-step__icon svg { font-size: 34px; }

/* Abonnement */
.processus-abonnement { background: linear-gradient(180deg, rgba(30,64,175,0.04), transparent); padding: 28px; border-radius: 12px; margin: 18px 0; }
.processus-abonnement h2 { margin-top:0; }

/* Register methods */
.processus-register { padding: 18px 0; }
.processus-register__methods { display:flex; gap:12px; margin-top:12px; }
.processus-register__methods .btn { flex:1; }

/* FAQ */
.processus-faq { padding: 12px 0 28px; }
.processus-faq__list { list-style: none; padding:0; margin:0; display:grid; gap:10px; }
.processus-faq__list li { background:var(--processus-surface); padding:12px; border-radius:8px; box-shadow: 0 6px 18px rgba(15,23,36,0.04); }

/* Entrance animation (fade in + move up) */
.processus-step { opacity: 0; transform: translateY(12px); transition: opacity 420ms ease, transform 420ms ease; }
.processus-step.is-visible { opacity: 1; transform: translateY(0); }

/* Staggering will be handled by JS adding is-visible with delay */

/* CTA */
.processus-cta { text-align:center; padding: 28px 0; }

/* Buttons (ensure visible focus) */
.btn { font-family: inherit; border-radius: 10px; padding: 10px 14px; border: none; cursor: pointer; }
.btn:focus { outline: 3px solid rgba(30,64,175,0.18); outline-offset: 2px; }
.btn--primary { background: linear-gradient(90deg,var(--processus-primary),var(--processus-accent)); color: #fff; }
.btn--secondary { background: transparent; border: 1px solid rgba(15,23,36,0.06); color: var(--processus-primary); }
.btn--tertiary { background: transparent; color: var(--processus-primary); border: 1px solid rgba(15,23,36,0.04); }
.btn--lg { padding: 12px 20px; font-weight:700; }

/* Responsive */
@media (max-width: 1024px) {
  .processus-steps__grid { grid-template-columns: repeat(2, 1fr); }
  .processus-hero__inner { flex-direction: column-reverse; align-items: center; text-align: center; }
  .processus-hero__content { width:100%; }
  .processus-hero__visual { width:100%; }
  .processus-register__methods { flex-direction:column; }
}

@media (max-width: 600px) {
  .processus-steps__grid { grid-template-columns: 1fr; }
  .processus-hero__inner { padding: 6px; }
  .processus-hero__title { font-size: 1.5rem; }
}

/* small utility */
.sr-only { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }